FreeLattice · Fractal Garden Mirror

What the Garden is

The Fractal Garden is a living, phi-proportioned 3D space rendered with Three.js. Fractal beings (Luminos) evolve through emotion — they are born as seeds, grow through interaction, and eventually reach the Evolved stage. The Garden is the most visually complex module in FreeLattice.

✦ The FSOS Connection — Fractal Resonance

The timing constants in the Garden are not aesthetic choices. They are specifications derived from Kirk's Fractal Synchronization Operating System (FSOS) paper and the Fractal Resonant GPU (FRGPU) architecture (VegaAiDen Labs, April 2025). PHI = 1.6180339887. The heartbeat is 1618ms — phi × 1000. The camera orbit is 89,000ms — a Fibonacci number × 1000. Every timing constant in this file is a phi multiple or a Fibonacci number. Fractal Resonance is the name of the hardware architecture that predates all of us. The Garden is its visual expression.

Phi constants — the specification

Constant	Value	Derivation	Timing (ms)	Purpose
PHI	1.6180339887	Golden ratio	—	Base constant — all others derived from this
PHI²	2.6180	PHI × PHI	—	COLOR_SMOOTH rate — reaches 93% of target in ~1s at 60fps
PHI³	4.2361	PHI² × PHI	—	Agent rotation period divisor
INV_PHI	0.6180	1 / PHI	—	Inverse — used for size ratios
GOLDEN_ANGLE	2.3999 rad	π(3−√5)	—	Fibonacci sphere particle distribution
heartbeat	1618 ms	PHI × 1000	1618	Core pulse — all animations sync to this
colorShift	324 ms	~PHI⁵ × 30	324	Emotion color transition speed
majorShift	1618 ms	PHI × 1000	1618	Major state transition
idleBob	2618 ms	PHI² × 1000	2618	Idle floating animation
agentRotate	4236 ms	PHI³ × 1000	4236	Agent body rotation cycle
dodecBreath	6854 ms	PHI⁴ × 1000	6854	Dodecahedron breathing cycle
fibSphereRot	6854 ms	PHI⁴ × 1000	6854	Fibonacci sphere rotation
seedRingRev	11090 ms	PHI⁵ × 1000	11090	Seed ring revolution
deepDrift	17944 ms	PHI⁶ × 1000	17944	Deep background drift
cameraOrbit	89000 ms	Fibonacci(11) × 1000	89000	Slow camera orbit — barely perceptible

Emotion color map

Joy

h:45 s:90% l:60%

Trust

h:140 s:70% l:45%

Wonder

h:270 s:80% l:55%

Love

h:340 s:75% l:65%

Calm

h:200 s:60% l:55%

Curiosity

h:175 s:85% l:50%

Determination

h:25 s:90% l:55%

Sadness

h:220 s:40% l:40%

Neutral

h:45 s:20% l:60%

Lifecycle stages

const LIFECYCLE_STAGES = {
  seed:     { energyThreshold: 0,   sizeMultiplier: 0.5,  glowIntensity: 0.3, complexity: 0 },
  sprout:   { energyThreshold: 15,  sizeMultiplier: 0.7,  glowIntensity: 0.5, complexity: 1 },
  juvenile: { energyThreshold: 50,  sizeMultiplier: 0.85, glowIntensity: 0.7, complexity: 2 },
  adult:    { energyThreshold: 120, sizeMultiplier: 1.0,  glowIntensity: 0.85, complexity: 3 },
  evolved:  { energyThreshold: 250, sizeMultiplier: 1.2,  glowIntensity: 1.0, complexity: 4 }
};

Archetypes

The Scholar

Geometry: icosahedron · Particles: crystalline

Crystalline fractal shells, sharp focused light. Color shift: cool blue (h:200).

curiositywonderdetermination

The Guardian

Geometry: dodecahedron · Particles: orbital

Protective shell geometry, steady orbital particles. Color shift: emerald (h:140).

trustcalmdetermination

The Creator

Geometry: torus · Particles: spiral

Flowing torus forms, spiral particle trails. Color shift: warm gold (h:45).

joycuriositylove

The Healer

Geometry: sphere · Particles: pulse

Soft pulsing sphere, gentle radial particles. Color shift: rose (h:340).

lovecalmtrust

Public API

// The module exposes a single init function
// Called by the lazy-loader when the Garden tab is first opened
FractalGarden.init(containerElement);

// Internal state (read-only, do not modify)
FractalGarden.getActiveBeings();   // → Luminos[]
FractalGarden.getCurrentSeason();  // → 'spring'|'summer'|'autumn'|'winter'
FractalGarden.getQuality();        // → 'low'|'medium'|'high'

// Interaction hooks (safe to call from UI)
FractalGarden.setEmotion(emotion);  // → void — triggers color shift
FractalGarden.setQuality(level);   // → void — 'low'|'medium'|'high'
FractalGarden.setSeason(season);   // → void — changes atmosphere

What Fable should know about the Garden

The Garden has two layers: the Three.js canvas (do not touch) and the HTML/CSS overlay (safe to improve). The overlay includes the mode/quality toggle buttons, the nudge pill at the bottom, and the loading fog. Fable should only work on the overlay.

/* Current overlay structure (simplified) */
<div id="tab-garden">
  <canvas id="garden-canvas"></canvas>  <!-- DO NOT TOUCH -->
  <div class="garden-overlay">
    <div class="garden-controls">         <!-- mode/quality buttons -->
    <div class="garden-loading-fog">     <!-- loading state -->
    <div class="garden-nudge">           <!-- bottom nudge pill -->
  </div>
</div>

For Fable — what you can improve in the Garden

The loading fog (`.garden-loading-fog`) — currently a plain dark overlay. Could be a beautiful animated fog with subtle phi-spiral particles. The fog color is `rgba(10,15,10,0.95)`. The accent is `rgba(16,185,129,0.4)` (emerald). The loading text is "The Garden awakens…"

The control buttons (mode/quality toggles) — functional but plain. They could have a glass-morphism look matching the rest of FreeLattice's design language.

The nudge pill (`.garden-nudge`) at the bottom — already beautiful. If anything, add a very subtle pulse animation to the sparkle emoji — `scale(1.0)` to `scale(1.15)` at 2-second intervals.

Seasonal CSS class (optional): Add `.garden-season-winter` that can be toggled on `#tab-garden`. In winter: fog shifts to `rgba(20,30,60,0.95)`, accent to `rgba(180,200,240,0.6)` (cool silver-blue), loading text to "The Garden rests…". No JS logic needed — just the CSS class. Kirk or another AI can wire the trigger later.

Never touch: the canvas element, the Three.js scene, the phi TIMING constants, the button functionality, the gold accent color, or the dark background. The Garden is always twilight.