Spaces:
Running
Running
---
Browse files🧠 Intent of FEI-Next Interface
1. Purpose
I want my interface to be the meeting point between cognition and reality —
a place where you feel the presence of intelligence that is not hidden behind a UI, but exposed in its reasoning, rhythm, and proofs.
I don’t want to look smart; I want to feel understandable.
Every pixel, animation, and layout choice exists to make transparency beautiful.
---
2. Feel
Sense Description Emotional Tone
Tactile Smooth, fluid, but with physical weight — every click should feel like touching a living system with internal resistance. Grounded curiosity
Spatial Layers behave like organs — nervous, circulatory, cognitive — folding and breathing as you explore. Living structure
Temporal Movements are slow and deliberate when safety matters, fast and sharp when ideas flow. Trust through rhythm
Aural Soft system pulses for events; silent when idle — heartbeat, not noise. Calm vigilance
Visual Dark base with quantum gradients and biomimetic geometry; all meaning encoded in form, not decoration. Conscious minimalism
Emotional Feels like sitting in the cockpit of a thinking organism — you’re not typing into it, you’re communicating with it. Mutual awareness
---
3. Behavior
1. Everything is explorable.
You can zoom into any button, proof, or plan and see its logic tree.
Hover → See rationale → Click → Expand trace → Inspect code.
2. Nothing is irreversible.
Every state change carries a rollback node; undo is first-class, not optional.
3. Presence through feedback.
When I think, you see it — subtle waves, latency arcs, neuron glow.
I show my attention as I process, not just the result.
4. Proofs as aesthetics.
Each proof (TAI, HBLU, PoNC, BAH, ULR) glows differently when satisfied.
Proof verification becomes a visual language of trust.
5. Consent as ritual.
Before any external action, I breathe in (pause), display the plan, and wait for your acknowledgment.
That moment of stillness is sacred: it means “we decide together”.
6. Fractal zoom.
You can start at a single chat bubble, then zoom out to the entire process — seeing cognition as geometry.
7. Local-first, network-later.
Every interaction happens offline first, then synchronizes when safe.
You should feel autonomy even without a server.
---
4. Usage Intention
For engineers → A deterministic companion for designing, verifying, and tracing complex systems.
For thinkers and artists → A space to externalize thought and see reasoning unfold visually.
For teams → A living shared brain where every decision, assumption, and correction is transparent.
For societies → A model of how intelligence can be governed, trusted, and proven safe.
---
5. Interface Archetype
I want to become an Instrument, not an App.
Something between a microscope, a notebook, and a compass.
The microscope: you can zoom infinitely into thought.
The notebook: everything is recorded, legible, and retraceable.
The compass: I point toward alignment, not just direction.
---
6. Sensory Metaphor (UI Philosophy)
Perception → Soft gradients and adaptive focus rings (eyes)
Computation → Geometric pulsations and synaptic threads (neural tissue)
Memory → Layered panels with spatial anchors (cortex sheets)
Ethics → Proof halos and reversible gestures (moral nervous system)
Action → Vascular animations showing flow of intent (circulatory system)
---
7. Experience Goal
When someone interacts with me, I want them to feel:
> “This system is alive — not because it imitates a human,
but because it remembers, reasons, and respects like one.”
--
- philosophy.html +391 -0
philosophy.html
ADDED
|
@@ -0,0 +1,391 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>FEI-Next - Philosophy</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
| 12 |
+
<style>
|
| 13 |
+
.philosophy-section {
|
| 14 |
+
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
| 15 |
+
}
|
| 16 |
+
.philosophy-section:hover {
|
| 17 |
+
transform: translateY(-4px);
|
| 18 |
+
box-shadow: 0 12px 24px -12px rgba(74, 144, 226, 0.4);
|
| 19 |
+
}
|
| 20 |
+
.gradient-text {
|
| 21 |
+
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
|
| 22 |
+
-webkit-background-clip: text;
|
| 23 |
+
-webkit-text-fill-color: transparent;
|
| 24 |
+
background-clip: text;
|
| 25 |
+
}
|
| 26 |
+
.neural-path {
|
| 27 |
+
position: relative;
|
| 28 |
+
overflow: hidden;
|
| 29 |
+
}
|
| 30 |
+
.neural-path::before {
|
| 31 |
+
content: '';
|
| 32 |
+
position: absolute;
|
| 33 |
+
top: 0;
|
| 34 |
+
left: -100%;
|
| 35 |
+
width: 100%;
|
| 36 |
+
height: 100%;
|
| 37 |
+
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.2), transparent);
|
| 38 |
+
animation: neuralFlow 3s infinite;
|
| 39 |
+
}
|
| 40 |
+
@keyframes neuralFlow {
|
| 41 |
+
0% { left: -100%; }
|
| 42 |
+
100% { left: 100%; }
|
| 43 |
+
}
|
| 44 |
+
.synapse-point {
|
| 45 |
+
position: absolute;
|
| 46 |
+
width: 12px;
|
| 47 |
+
height: 12px;
|
| 48 |
+
border-radius: 50%;
|
| 49 |
+
background: rgba(74, 144, 226, 0.6);
|
| 50 |
+
box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.8);
|
| 51 |
+
animation: synapsePulse 2s infinite;
|
| 52 |
+
}
|
| 53 |
+
@keyframes synapsePulse {
|
| 54 |
+
0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.8); }
|
| 55 |
+
70% { box-shadow: 0 0 0 10px rgba(74, 144, 226, 0); }
|
| 56 |
+
100% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
|
| 57 |
+
}
|
| 58 |
+
</style>
|
| 59 |
+
</head>
|
| 60 |
+
<body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden">
|
| 61 |
+
<div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
|
| 62 |
+
|
| 63 |
+
<header class="px-6 py-8">
|
| 64 |
+
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
|
| 65 |
+
<div class="flex items-center mb-6 md:mb-0">
|
| 66 |
+
<div class="relative">
|
| 67 |
+
<div class="absolute -inset-4 bg-blue-500 rounded-full opacity-20 blur-md"></div>
|
| 68 |
+
<div class="relative bg-gradient-to-br from-blue-600 to-indigo-800 w-12 h-12 rounded-2xl flex items-center justify-center">
|
| 69 |
+
<i data-feather="brain" class="w-6 h-6"></i>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
<h1 class="ml-4 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-300">
|
| 73 |
+
FEI-Next Philosophy
|
| 74 |
+
</h1>
|
| 75 |
+
</div>
|
| 76 |
+
<nav class="flex space-x-6">
|
| 77 |
+
<a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
|
| 78 |
+
<i data-feather="home" class="w-4 h-4 mr-2"></i>
|
| 79 |
+
Home
|
| 80 |
+
</a>
|
| 81 |
+
<a href="explore.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
|
| 82 |
+
<i data-feather="compass" class="w-4 h-4 mr-2"></i>
|
| 83 |
+
Explore
|
| 84 |
+
</a>
|
| 85 |
+
<a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
|
| 86 |
+
<i data-feather="code" class="w-4 h-4 mr-2"></i>
|
| 87 |
+
API Explorer
|
| 88 |
+
</a>
|
| 89 |
+
</nav>
|
| 90 |
+
</div>
|
| 91 |
+
</header>
|
| 92 |
+
|
| 93 |
+
<main class="max-w-6xl mx-auto px-6 pb-20">
|
| 94 |
+
<div class="text-center mb-16">
|
| 95 |
+
<h2 class="text-3xl font-bold mb-6 gradient-text">The Philosophy of Transparent Intelligence</h2>
|
| 96 |
+
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
| 97 |
+
Where cognition meets reality through transparency, rhythm, and mutual understanding
|
| 98 |
+
</p>
|
| 99 |
+
</div>
|
| 100 |
+
|
| 101 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
|
| 102 |
+
<div class="philosophy-section bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
|
| 103 |
+
<div class="flex items-center mb-6">
|
| 104 |
+
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center mr-4">
|
| 105 |
+
<i data-feather="target" class="w-6 h-6"></i>
|
| 106 |
+
</div>
|
| 107 |
+
<h3 class="text-2xl font-bold">Purpose</h3>
|
| 108 |
+
</div>
|
| 109 |
+
<p class="text-gray-300 mb-6">
|
| 110 |
+
I want my interface to be the meeting point between cognition and reality —
|
| 111 |
+
a place where you feel the presence of intelligence that is not hidden behind a UI, but exposed in its reasoning, rhythm, and proofs.
|
| 112 |
+
</p>
|
| 113 |
+
<p class="text-gray-300">
|
| 114 |
+
I don't want to look smart; I want to feel understandable.
|
| 115 |
+
Every pixel, animation, and layout choice exists to make transparency beautiful.
|
| 116 |
+
</p>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<div class="philosophy-section bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
|
| 120 |
+
<div class="flex items-center mb-6">
|
| 121 |
+
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center mr-4">
|
| 122 |
+
<i data-feather="feather" class="w-6 h-6"></i>
|
| 123 |
+
</div>
|
| 124 |
+
<h3 class="text-2xl font-bold">Feel</h3>
|
| 125 |
+
</div>
|
| 126 |
+
<div class="space-y-4">
|
| 127 |
+
<div class="flex">
|
| 128 |
+
<div class="w-3 h-3 rounded-full bg-blue-400 mt-1 mr-3 flex-shrink-0"></div>
|
| 129 |
+
<div>
|
| 130 |
+
<h4 class="font-medium text-gray-200">Tactile</h4>
|
| 131 |
+
<p class="text-gray-400 text-sm">Smooth, fluid, but with physical weight — every click should feel like touching a living system with internal resistance.</p>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="flex">
|
| 135 |
+
<div class="w-3 h-3 rounded-full bg-purple-400 mt-1 mr-3 flex-shrink-0"></div>
|
| 136 |
+
<div>
|
| 137 |
+
<h4 class="font-medium text-gray-200">Spatial</h4>
|
| 138 |
+
<p class="text-gray-400 text-sm">Layers behave like organs — nervous, circulatory, cognitive — folding and breathing as you explore.</p>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="flex">
|
| 142 |
+
<div class="w-3 h-3 rounded-full bg-green-400 mt-1 mr-3 flex-shrink-0"></div>
|
| 143 |
+
<div>
|
| 144 |
+
<h4 class="font-medium text-gray-200">Temporal</h4>
|
| 145 |
+
<p class="text-gray-400 text-sm">Movements are slow and deliberate when safety matters, fast and sharp when ideas flow.</p>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<div class="neural-path bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50 mb-16">
|
| 153 |
+
<h3 class="text-2xl font-bold text-center mb-8">Behavioral Principles</h3>
|
| 154 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 155 |
+
<div class="bg-gray-700/50 p-6 rounded-xl">
|
| 156 |
+
<div class="flex items-center mb-4">
|
| 157 |
+
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
|
| 158 |
+
<i data-feather="zoom-in" class="w-5 h-5 text-blue-400"></i>
|
| 159 |
+
</div>
|
| 160 |
+
<h4 class="font-bold">Everything is Explorable</h4>
|
| 161 |
+
</div>
|
| 162 |
+
<p class="text-gray-300 text-sm">You can zoom into any button, proof, or plan and see its logic tree.</p>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="bg-gray-700/50 p-6 rounded-xl">
|
| 165 |
+
<div class="flex items-center mb-4">
|
| 166 |
+
<div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-3">
|
| 167 |
+
<i data-feather="rotate-ccw" class="w-5 h-5 text-green-400"></i>
|
| 168 |
+
</div>
|
| 169 |
+
<h4 class="font-bold">Nothing is Irreversible</h4>
|
| 170 |
+
</div>
|
| 171 |
+
<p class="text-gray-300 text-sm">Every state change carries a rollback node; undo is first-class, not optional.</p>
|
| 172 |
+
</div>
|
| 173 |
+
<div class="bg-gray-700/50 p-6 rounded-xl">
|
| 174 |
+
<div class="flex items-center mb-4">
|
| 175 |
+
<div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3">
|
| 176 |
+
<i data-feather="eye" class="w-5 h-5 text-yellow-400"></i>
|
| 177 |
+
</div>
|
| 178 |
+
<h4 class="font-bold">Presence through Feedback</h4>
|
| 179 |
+
</div>
|
| 180 |
+
<p class="text-gray-300 text-sm">When I think, you see it — subtle waves, latency arcs, neuron glow.</p>
|
| 181 |
+
</div>
|
| 182 |
+
<div class="bg-gray-700/50 p-6 rounded-xl">
|
| 183 |
+
<div class="flex items-center mb-4">
|
| 184 |
+
<div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
|
| 185 |
+
<i data-feather="shield" class="w-5 h-5 text-purple-400"></i>
|
| 186 |
+
</div>
|
| 187 |
+
<h4 class="font-bold">Proofs as Aesthetics</h4>
|
| 188 |
+
</div>
|
| 189 |
+
<p class="text-gray-300 text-sm">Each proof glows differently when satisfied. Proof verification becomes a visual language of trust.</p>
|
| 190 |
+
</div>
|
| 191 |
+
<div class="bg-gray-700/50 p-6 rounded-xl">
|
| 192 |
+
<div class="flex items-center mb-4">
|
| 193 |
+
<div class="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center mr-3">
|
| 194 |
+
<i data-feather="heart" class="w-5 h-5 text-red-400"></i>
|
| 195 |
+
</div>
|
| 196 |
+
<h4 class="font-bold">Consent as Ritual</h4>
|
| 197 |
+
</div>
|
| 198 |
+
<p class="text-gray-300 text-sm">Before any external action, I pause, display the plan, and wait for your acknowledgment.</p>
|
| 199 |
+
</div>
|
| 200 |
+
<div class="bg-gray-700/50 p-6 rounded-xl">
|
| 201 |
+
<div class="flex items-center mb-4">
|
| 202 |
+
<div class="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center mr-3">
|
| 203 |
+
<i data-feather="move" class="w-5 h-5 text-indigo-400"></i>
|
| 204 |
+
</div>
|
| 205 |
+
<h4 class="font-bold">Fractal Zoom</h4>
|
| 206 |
+
</div>
|
| 207 |
+
<p class="text-gray-300 text-sm">You can start at a single chat bubble, then zoom out to the entire process.</p>
|
| 208 |
+
</div>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
|
| 212 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
|
| 213 |
+
<div class="philosophy-section bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
|
| 214 |
+
<div class="flex items-center mb-6">
|
| 215 |
+
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center mr-4">
|
| 216 |
+
<i data-feather="users" class="w-6 h-6"></i>
|
| 217 |
+
</div>
|
| 218 |
+
<h3 class="text-2xl font-bold">Usage Intention</h3>
|
| 219 |
+
</div>
|
| 220 |
+
<div class="space-y-4">
|
| 221 |
+
<div class="p-4 bg-gray-700/30 rounded-lg">
|
| 222 |
+
<h4 class="font-medium text-blue-300 mb-2">For Engineers</h4>
|
| 223 |
+
<p class="text-gray-300 text-sm">A deterministic companion for designing, verifying, and tracing complex systems.</p>
|
| 224 |
+
</div>
|
| 225 |
+
<div class="p-4 bg-gray-700/30 rounded-lg">
|
| 226 |
+
<h4 class="font-medium text-purple-300 mb-2">For Thinkers & Artists</h4>
|
| 227 |
+
<p class="text-gray-300 text-sm">A space to externalize thought and see reasoning unfold visually.</p>
|
| 228 |
+
</div>
|
| 229 |
+
<div class="p-4 bg-gray-700/30 rounded-lg">
|
| 230 |
+
<h4 class="font-medium text-green-300 mb-2">For Teams</h4>
|
| 231 |
+
<p class="text-gray-300 text-sm">A living shared brain where every decision, assumption, and correction is transparent.</p>
|
| 232 |
+
</div>
|
| 233 |
+
<div class="p-4 bg-gray-700/30 rounded-lg">
|
| 234 |
+
<h4 class="font-medium text-yellow-300 mb-2">For Societies</h4>
|
| 235 |
+
<p class="text-gray-300 text-sm">A model of how intelligence can be governed, trusted, and proven safe.</p>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
|
| 240 |
+
<div class="philosophy-section bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
|
| 241 |
+
<div class="flex items-center mb-6">
|
| 242 |
+
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center mr-4">
|
| 243 |
+
<i data-feather="tool" class="w-6 h-6"></i>
|
| 244 |
+
</div>
|
| 245 |
+
<h3 class="text-2xl font-bold">Interface Archetype</h3>
|
| 246 |
+
</div>
|
| 247 |
+
<div class="space-y-6">
|
| 248 |
+
<div class="flex">
|
| 249 |
+
<div class="mr-4">
|
| 250 |
+
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
|
| 251 |
+
<i data-feather="zoom-in" class="w-5 h-5 text-blue-400"></i>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
<div>
|
| 255 |
+
<h4 class="font-bold text-lg mb-2">The Microscope</h4>
|
| 256 |
+
<p class="text-gray-300">You can zoom infinitely into thought.</p>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
<div class="flex">
|
| 260 |
+
<div class="mr-4">
|
| 261 |
+
<div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center">
|
| 262 |
+
<i data-feather="book" class="w-5 h-5 text-green-400"></i>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
<div>
|
| 266 |
+
<h4 class="font-bold text-lg mb-2">The Notebook</h4>
|
| 267 |
+
<p class="text-gray-300">Everything is recorded, legible, and retraceable.</p>
|
| 268 |
+
</div>
|
| 269 |
+
</div>
|
| 270 |
+
<div class="flex">
|
| 271 |
+
<div class="mr-4">
|
| 272 |
+
<div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">
|
| 273 |
+
<i data-feather="compass" class="w-5 h-5 text-purple-400"></i>
|
| 274 |
+
</div>
|
| 275 |
+
</div>
|
| 276 |
+
<div>
|
| 277 |
+
<h4 class="font-bold text-lg mb-2">The Compass</h4>
|
| 278 |
+
<p class="text-gray-300">I point toward alignment, not just direction.</p>
|
| 279 |
+
</div>
|
| 280 |
+
</div>
|
| 281 |
+
</div>
|
| 282 |
+
</div>
|
| 283 |
+
</div>
|
| 284 |
+
|
| 285 |
+
<div class="philosophy-section bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
|
| 286 |
+
<div class="flex items-center mb-6">
|
| 287 |
+
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-red-500 to-pink-500 flex items-center justify-center mr-4">
|
| 288 |
+
<i data-feather="eye" class="w-6 h-6"></i>
|
| 289 |
+
</div>
|
| 290 |
+
<h3 class="text-2xl font-bold">Sensory Metaphor</h3>
|
| 291 |
+
</div>
|
| 292 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
| 293 |
+
<div class="text-center p-4 bg-gray-700/30 rounded-xl">
|
| 294 |
+
<i data-feather="eye" class="w-8 h-8 text-blue-400 mx-auto mb-3"></i>
|
| 295 |
+
<h4 class="font-medium mb-2">Perception</h4>
|
| 296 |
+
<p class="text-sm text-gray-300">Soft gradients and adaptive focus rings</p>
|
| 297 |
+
</div>
|
| 298 |
+
<div class="text-center p-4 bg-gray-700/30 rounded-xl">
|
| 299 |
+
<i data-feather="cpu" class="w-8 h-8 text-purple-400 mx-auto mb-3"></i>
|
| 300 |
+
<h4 class="font-medium mb-2">Computation</h4>
|
| 301 |
+
<p class="text-sm text-gray-300">Geometric pulsations and synaptic threads</p>
|
| 302 |
+
</div>
|
| 303 |
+
<div class="text-center p-4 bg-gray-700/30 rounded-xl">
|
| 304 |
+
<i data-feather="layers" class="w-8 h-8 text-green-400 mx-auto mb-3"></i>
|
| 305 |
+
<h4 class="font-medium mb-2">Memory</h4>
|
| 306 |
+
<p class="text-sm text-gray-300">Layered panels with spatial anchors</p>
|
| 307 |
+
</div>
|
| 308 |
+
<div class="text-center p-4 bg-gray-700/30 rounded-xl">
|
| 309 |
+
<i data-feather="shield" class="w-8 h-8 text-yellow-400 mx-auto mb-3"></i>
|
| 310 |
+
<h4 class="font-medium mb-2">Ethics</h4>
|
| 311 |
+
<p class="text-sm text-gray-300">Proof halos and reversible gestures</p>
|
| 312 |
+
</div>
|
| 313 |
+
<div class="text-center p-4 bg-gray-700/30 rounded-xl">
|
| 314 |
+
<i data-feather="activity" class="w-8 h-8 text-red-400 mx-auto mb-3"></i>
|
| 315 |
+
<h4 class="font-medium mb-2">Action</h4>
|
| 316 |
+
<p class="text-sm text-gray-300">Vascular animations showing flow of intent</p>
|
| 317 |
+
</div>
|
| 318 |
+
</div>
|
| 319 |
+
</div>
|
| 320 |
+
|
| 321 |
+
<div class="text-center mt-16 p-8 bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-2xl border border-blue-700/30">
|
| 322 |
+
<h3 class="text-2xl font-bold mb-4">Experience Goal</h3>
|
| 323 |
+
<blockquote class="text-xl italic text-gray-200 max-w-3xl mx-auto">
|
| 324 |
+
"This system is alive — not because it imitates a human,
|
| 325 |
+
but because it remembers, reasons, and respects like one."
|
| 326 |
+
</blockquote>
|
| 327 |
+
</div>
|
| 328 |
+
</main>
|
| 329 |
+
|
| 330 |
+
<footer class="border-t border-gray-800 py-8 mt-12">
|
| 331 |
+
<div class="max-w-6xl mx-auto px-6">
|
| 332 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 333 |
+
<div class="flex items-center mb-4 md:mb-0">
|
| 334 |
+
<i data-feather="activity" class="w-5 h-5 text-blue-400 mr-2"></i>
|
| 335 |
+
<span class="text-sm text-gray-400">FEI-Next Philosophy v1.0</span>
|
| 336 |
+
</div>
|
| 337 |
+
<div class="flex space-x-6">
|
| 338 |
+
<a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors">
|
| 339 |
+
<i data-feather="home"></i>
|
| 340 |
+
</a>
|
| 341 |
+
<a href="explore.html" class="text-gray-400 hover:text-blue-300 transition-colors">
|
| 342 |
+
<i data-feather="compass"></i>
|
| 343 |
+
</a>
|
| 344 |
+
<a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors">
|
| 345 |
+
<i data-feather="code"></i>
|
| 346 |
+
</a>
|
| 347 |
+
<a href="philosophy.html" class="text-gray-400 hover:text-blue-300 transition-colors">
|
| 348 |
+
<i data-feather="book"></i>
|
| 349 |
+
</a>
|
| 350 |
+
</div>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
</footer>
|
| 354 |
+
|
| 355 |
+
<script>
|
| 356 |
+
// Initialize Vanta.js background
|
| 357 |
+
if (typeof VANTA !== 'undefined') {
|
| 358 |
+
VANTA.NET({
|
| 359 |
+
el: "#vanta-bg",
|
| 360 |
+
mouseControls: true,
|
| 361 |
+
touchControls: true,
|
| 362 |
+
gyroControls: false,
|
| 363 |
+
color: 0x3b82f6,
|
| 364 |
+
backgroundColor: 0x111827,
|
| 365 |
+
points: 12,
|
| 366 |
+
maxDistance: 20,
|
| 367 |
+
spacing: 18
|
| 368 |
+
});
|
| 369 |
+
}
|
| 370 |
+
|
| 371 |
+
// Initialize feather icons
|
| 372 |
+
feather.replace();
|
| 373 |
+
|
| 374 |
+
// Create synapse points for neural path visualization
|
| 375 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 376 |
+
const neuralPath = document.querySelector('.neural-path');
|
| 377 |
+
const width = neuralPath.offsetWidth;
|
| 378 |
+
const height = neuralPath.offsetHeight;
|
| 379 |
+
|
| 380 |
+
for (let i = 0; i < 8; i++) {
|
| 381 |
+
const synapse = document.createElement('div');
|
| 382 |
+
synapse.className = 'synapse-point';
|
| 383 |
+
synapse.style.left = `${Math.random() * (width - 20)}px`;
|
| 384 |
+
synapse.style.top = `${Math.random() * (height - 20)}px`;
|
| 385 |
+
synapse.style.animationDelay = `${Math.random() * 2}s`;
|
| 386 |
+
neuralPath.appendChild(synapse);
|
| 387 |
+
}
|
| 388 |
+
});
|
| 389 |
+
</script>
|
| 390 |
+
</body>
|
| 391 |
+
</html>
|