“A microscopic journey through living neural networks during moments of profound human experience”
Inspired by Neuropit #13 by the Zairja Collective - explosive visual cortex neuron firing through spiral wire-frame structures, saturated psychedelic colors meeting silicon valley aesthetics.
The visualization embodies the tension between:
FIRING STATE GRADIENT (warm → hot):
┌─────────────────────────────────────────────────┐
│ Cyan → Blue → Purple → Magenta → Red → Orange │
│ #24837B → #205EA6 → #5E409D → #A02F6F → #AF3029 → #BC5215 │
└─────────────────────────────────────────────────┘
Dark Mode:
│ #3AA99F → #4385BE → #8B7EC8 → #CE5D97 → #D14D41 → #DA702C │
| State | Light Theme | Dark Theme | Description |
|——-|————-|————|————-|
| Dormant | --fx-base-600 #878681 | --fx-base-400 #B7B5AC | Quiet, waiting |
| Primed | --fx-cyan #24837B | --fx-cyan #3AA99F | Ready to fire |
| Active | --fx-purple #5E409D | --fx-purple #8B7EC8 | Currently firing |
| Peak | --fx-magenta #A02F6F | --fx-magenta #CE5D97 | Maximum activation |
| Cooling | --fx-orange #BC5215 | --fx-orange #DA702C | Post-fire decay |
| Type | Color | Alpha | Description |
|——|——-|——-|————-|
| Dormant | --fx-base-500 | 0.15 | Barely visible structure |
| Active pathway | --fx-cyan | 0.4-0.8 | Signal carrying |
| Dense cluster | --fx-purple | 0.3 | High connectivity region |
/* Subtle radial gradient suggesting depth */
Light: radial-gradient(ellipse at 50% 50%,
var(--fx-paper) 0%,
var(--fx-base-50) 50%,
var(--fx-base-100) 100%
);
Dark: radial-gradient(ellipse at 50% 50%,
var(--fx-base-900) 0%,
var(--fx-base-950) 70%,
#0D0C0A 100%
);
IDLE STATE
├── Neurons: Subtle "breathing" pulse (scale 0.98 → 1.02, 3s cycle)
├── Connections: Gentle opacity wave (0.1 → 0.2 → 0.1)
└── Occasional spontaneous micro-firings (1 every 4-6s)
HOVER/APPROACH
├── Proximity aura: Neurons glow brighter as mouse approaches
├── "Priming" animation: Ripple effect on nearby neurons
└── Connection lines thicken and brighten in hover zone
FIRING EVENT
├── T+0ms: Epicenter neuron FLASH (white overlay, 50ms)
├── T+0ms: Spawn particle burst (12-20 particles)
├── T+20ms: Begin signal propagation to connected neurons
├── T+50ms: Signal "snake" travels along connections
├── T+100ms: First-order connections begin their flash
├── T+150ms: Cascade continues to second-order connections
├── T+300ms: Peak activation - maximum color saturation
├── T+500ms: Begin decay, colors cool from hot to warm
└── T+1200ms: Return to idle (never fully - lingering glow)
CASCADE BEHAVIOR
├── Each generation reduces intensity by 20%
├── Random 10-30ms jitter between sibling firings
├── Chance of "echo" - signal bouncing back (5%)
└── Very rare "supernova" - full network activation (0.5%)
// Custom easing for organic feel
const easeOrganicOut = (t) => {
return 1 - Math.pow(1 - t, 3) + Math.sin(t * Math.PI) * 0.1;
};
const easeNeuralPulse = (t) => {
return 0.5 + Math.sin(t * Math.PI * 2) * 0.5 * (1 - t);
};
const easeSynapticBurst = (t) => {
return t < 0.2
? t * 5 // Fast attack
: 1 - Math.pow((t - 0.2) / 0.8, 0.5); // Slow decay
};
Instead of simple dots traveling along paths, signals should be:
ASCII SIGNAL CHARACTERS (in order of intensity):
Low: · ∙ •
Medium: ○ ◌ ◍
High: ◉ ⦿ ✶
Peak: ✦ ★ ✴
Special: ⚡ ✧ ❋ ✺
┌─────────────────────────────────────────────────────┐
│ HEAD ━━━━━━━━━━ BODY ━━━━━━━━━━ TAIL │
│ ✶ ○○○○○○○○○○ · · · · · · │
│ │
│ Bright Medium Alpha Fading Alpha │
│ Glow/Bloom Solid Color Gradient to 0 │
│ 1.2x Scale 1.0x Scale 0.8x Scale │
└─────────────────────────────────────────────────────┘
Trail Length: 8-12 segments
Trail Spacing: Varies with speed (faster = longer gaps)
Trail Curve: Slight sine wave offset for organic feel
BURST CONFIGURATION:
├── Count: 12-20 particles
├── Spread: 360° radial
├── Initial velocity: 30-80 pixels/second
├── Deceleration: 0.95 per frame (friction)
├── Lifetime: 400-800ms
├── Size: 2-6px (randomized)
├── Character options: · • ✧
│
├── COLOR SEQUENCE:
│ T+0ms: White (#FFFCF0)
│ T+50ms: Magenta (--fx-magenta)
│ T+150ms: Purple (--fx-purple)
│ T+300ms: Cyan (--fx-cyan)
│ T+500ms: Fade to transparent
│
└── GLOW/BLOOM:
- 4px blur radius at peak
- Color: Same as particle, 30% alpha
NEURON PLACEMENT (Fibonacci Spiral):
∙
∙ ∙
∙ ∙
∙ ◉ ∙
∙ ╱ ╲ ∙
∙ ╱ ╲ ∙
∙ ╱ ◉ ╲ ∙
∙ ╱ ╱ ╲ ╲ ∙
∙ ╱ ╱ ◉ ╲ ╲ ∙
∙ ╱ ╱ ╱ ╲ ╲ ╲ ∙
φ = 1.618033988749895 (Golden Ratio)
Spiral angle increment: 137.5° (Golden Angle)
RECURSIVE BRANCH PATTERN:
SOMA (neuron body)
│
├────┬────┐
│ │ │
┌┴┐ ┌┴┐ ┌┴┐
│ │ │ │ │ │
┌┴┐│ ┌┴┐│ ┌┴┐│
Rules:
├── Branch angle: 25-45° from parent
├── Branch length: Parent × 0.7 (recursive)
├── Branch probability: 0.6 per level
├── Max depth: 4-5 levels
├── Variation: ±10° angle, ±15% length
└── Asymmetry: Intentional randomness
Instead of straight lines, connections should be:
TYPE 1: Bezier Curves (most connections)
◉━━━━━━━━━━━━━━━◉
╱ ╲
╱ ╲
◉ ◉
Control point offset: 20-40% of distance perpendicular
TYPE 2: Spiral Segment (special connections)
◉
╲
╲
╲
◉
For neurons on same spiral arm
TYPE 3: Organic Wobble (all connections at micro level)
◉~~~~~◉
Subtle sine wave displacement:
amplitude: 2-5px
frequency: 0.5-1.5 cycles per connection
SENSORY NEURONS (input):
⦿ or (●) or [◉]
INTERNEURONS (processing):
◎ or (○) or {●}
MOTOR NEURONS (output):
✶ or <●> or «○»
SPECIAL/HUB NEURONS (high connectivity):
❋ or ✺ or ★
┌─────────────────────────────────────────────────────────┐
│ NEURON ANATOMY │
├─────────────────────────────────────────────────────────┤
│ │
│ ╭─────────╮ │
│ ────────│ CORE │──────── Core: ASCII char │
│ ╰─────────╯ │
│ │ │
│ ┌─────┴─────┐ │
│ │ HALO │ Halo: Activation glow │
│ │ (bloom) │ - Radius: 15-40px │
│ └───────────┘ - Opacity: 0-0.4 │
│ │ - Color: State-based │
│ ┌─────┴─────┐ │
│ │ AURA │ Aura: Ambient presence │
│ │ (field) │ - Radius: 40-80px │
│ └───────────┘ - Opacity: 0.02-0.1 │
│ │
└─────────────────────────────────────────────────────────┘
NORMAL → HOVER TRANSITION (200ms):
Scale: 1.0x → 1.15x
Glow: 0% → 100%
Halo: 15px → 35px
Character: (○) → (●) → ✶
Color: Gray → Cyan → Magenta
Ring Pulse Animation:
- Expanding ring from neuron center
- Radius: 0 → 60px
- Opacity: 0.6 → 0
- Duration: 600ms
- Repeat: Once on hover enter
PROXIMITY ZONES:
Zone 3 (200px) Ambient awareness
┌────────────────────┐ - Neurons slightly brighten
│ │ - Connections gently pulse
│ Zone 2 (100px) │
│ ┌──────────────┐ │ Pre-activation
│ │ │ │ - Neurons glow cyan
│ │ Zone 1(40px)│ │ - "Priming" animation
│ │ ┌──────┐ │ │
│ │ │ CORE │ │ │ Direct hover
│ │ └──────┘ │ │ - Fire sequence trigger
│ └──────────────┘ │ - Full activation
└────────────────────┘
CLICK EVENT: "Supernova" mode
├── Primary burst: 3x normal particle count
├── Full cascade: Signals to ALL connections (not just immediate)
├── Sound cue: (optional) soft "pop" or "whoosh"
├── Screen flash: Subtle white overlay (5% opacity, 100ms)
├── Cascade depth: Unlimited (until natural decay)
└── Cooldown: 2 seconds before next supernova allowed
As mouse moves over canvas:
├── Leave subtle "wake" of activated neurons
├── Trail of micro-particles following cursor
├── Particle character: · or •
├── Trail length: 5-10 particles
├── Fade time: 300ms
└── Color: --fx-cyan at 30% opacity
SPACE: Trigger random neuron activation
R: Reset network to calm state
S: Toggle slow-motion mode (25% speed)
D: Toggle debug view (show zones, connections)
// All neurons subtly pulse
const breathe = (time) => {
const cycle = Math.sin(time / 3000) * 0.02 + 1;
return cycle; // Scale multiplier 0.98 - 1.02
};
IDLE BEHAVIOR:
├── Every 4-6 seconds: Random neuron fires softly
├── Fire intensity: 30% of user-triggered fire
├── Cascade depth: 1-2 generations only
├── Purpose: Network appears "alive" not dormant
│
├── Pattern: Prefer neurons not recently fired
├── Never fire same neuron twice within 10s
└── Increase frequency slightly at night (user time)
Subtle sine wave moving across the canvas:
├── Direction: Left to right (like reading)
├── Speed: ~5 pixels/second
├── Effect: Slight brightness increase on neurons in wave
├── Amplitude: 3% opacity increase
├── Wavelength: 300px
└── Purpose: Subconscious sense of flow/life
const config = {
// Dimensions
minHeight: 280,
maxHeight: 400,
aspectRatio: 16/9, // for dynamic width
// Performance
targetFPS: 60,
useOffscreenCanvas: true, // Pre-render neurons
maxParticles: 200,
maxSignals: 50,
// Network
neuronDensity: 0.4, // 40% of grid cells have neurons
connectionDistance: 120, // max px between connected neurons
maxConnections: 6, // per neuron
// Animation
signalSpeed: 0.03-0.08, // units per frame
decayRate: 0.02, // activation decay per frame
cascadeDelay: 50, // ms between cascade generations
};
┌─────────────────────────────────────────┐
│ LAYER 5: UI Overlays (future: tooltips)│ z: 50
├─────────────────────────────────────────┤
│ LAYER 4: Particles & Effects │ z: 40
├─────────────────────────────────────────┤
│ LAYER 3: Signals (traveling) │ z: 30
├─────────────────────────────────────────┤
│ LAYER 2: Neuron Bodies + Glows │ z: 20
├─────────────────────────────────────────┤
│ LAYER 1: Connections (lines/curves) │ z: 10
├─────────────────────────────────────────┤
│ LAYER 0: Background (gradient) │ z: 0
└─────────────────────────────────────────┘
const typography = {
primary: '"IBM Plex Mono", monospace',
fallback: 'Monaco, "Cascadia Code", Consolas, monospace',
sizes: {
neuron: 16, // Base neuron glyph
signal: 12, // Signal characters
particle: 10, // Burst particles
},
rendering: {
textBaseline: 'middle',
textAlign: 'center',
// Enable subpixel antialiasing
// Use fillText, not strokeText
}
};
CALM / LEARNING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Dominant: Cyan (#24837B)
Accent: Blue (#205EA6)
Mood: Cool, contemplative, open
Movement: Slow, flowing
∙∙∙∙∙∙∙◎∙∙∙∙∙∙∙◎∙∙∙∙∙∙∙
∙∙∙∙∙◎───────◎∙∙∙∙∙∙
∙∙∙∙∙∙∙∙◎∙∙∙∙∙∙◎∙∙∙∙∙
EXCITEMENT / DISCOVERY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Dominant: Magenta (#A02F6F)
Accent: Purple (#5E409D)
Mood: Electric, energetic, revelatory
Movement: Fast cascades, bright flashes
∙∙✶∙∙∙✦∙∙∙✶∙∙∙✦∙∙∙∙∙
∙✦═══════✶═══════✦∙
∙∙∙✶∙∙∙✦∙∙∙✶∙∙∙✦∙∙∙
LOVE / CONNECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Dominant: Red (#AF3029)
Accent: Orange (#BC5215)
Mood: Warm, pulsing, intimate
Movement: Synchronized beats, harmonious
∙∙∙●∙∙∙∙∙●∙∙∙∙∙●∙∙∙
∙∙●═══════●═══════●∙∙
∙∙∙●∙∙∙∙∙●∙∙∙∙∙●∙∙∙
GOLDEN SPIRAL NEURON LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━
✺
◎ ◎
◎ ◎
◎ ∙∙∙∙∙∙∙∙∙∙ ◎
∙ HUB ∙
◎ ∙ ✶✶✶ ∙ ◎
∙ ∙
◎ ∙∙∙∙∙∙∙∙∙∙ ◎
◎ ◎
◎ ◎
◎
Neurons concentrate toward center
Hub neurons at spiral origin
Connections follow spiral curves
This neural visualization is not merely a technical demonstration but a meditation on consciousness itself.
Each neuron represents a moment of thought. Each signal, a fleeting connection between ideas. The spiral structure echoes both the nautilus shell and the mining pit - we dig into our minds as we dig into the earth, searching for something precious.
The psychedelic colors are intentional: they evoke the altered states where creativity lives, where the boundaries between self and world dissolve, where new neural pathways form in moments of profound experience.
When a user hovers over a neuron, they are not just triggering an animation - they are participating in thought itself, watching the cascade of activation that mirrors what happens billions of times per second in their own brain.
The ambient behaviors - the breathing, the spontaneous firings, the gentle waves - remind us that consciousness never truly rests. Even in stillness, the mind hums with activity.
This is “Neural Connection Symphony”: a visualization of the invisible music playing constantly inside our heads.
Design Specification v1.0 For xiaolong-y.github.io Inspired by Neuropit #13, Zairja Collective