The New Animation System

Animation Philosophy

Every animation in LEACB serves a purpose. Nothing moves just to move. The torus knot at the center represents continuous learning — an eternal knot with no beginning or end. The floating geometric shapes represent the different disciplines I work across: systems, graphics, web, design.

The design principle is simple: motion should guide attention, provide spatial context, and create emotional resonance. If an animation doesn't do at least one of these, it gets cut.

Three.js Rendering Pipeline

LEACB's 3D scene runs on a tight loop: geometry creation, particle systems, lighting, then post-processing. The EffectComposer chains RenderPass into UnrealBloomPass, which applies a multi-pass Gaussian blur to bright pixels. The result is that signature sci-fi glow on every edge and emissive surface.

Bloom parameters are carefully tuned: strength 0.65, radius 0.35, threshold 0.82. Too much bloom and everything looks muddy. Too little and it feels flat. Finding the sweet spot took dozens of iterations.

Geometric Objects

Five primary objects orbit and rotate in the scene:

• TorusKnot — wireframe at center, slow dual-axis rotation, breathing opacity
• Icosahedron — 20-face polyhedron floating high-left, fast spin
• Octahedron — 8-face gem shape lower-right, medium rotation
• Dodecahedron — 12-face shape lower-left, compound axis rotation
• Torus rings — two interlocking rings behind everything, slow orbital drift

Each object has independent rotation speeds across multiple axes, plus sinusoidal position offsets that make them drift organically. No two frames look identical.

Particle System

3000 particles filled with 5-color palette: cyan, purple, blue, pink, and white. They use additive blending so overlapping particles create brighter spots instead of occluding each other. A breathing effect subtly shifts Y positions using a sine wave, making the entire particle field feel alive.

Panel Animations

The navigation panels — About, Projects, Skills, Blog, Playground, Contact — hover in 3D space. Each panel floats using compound sinusoidal motion on all three axes. On mouse hover, they scale up 22% with increased emissive glow and edge brightness. The transitions use lerp for buttery-smooth interpolation.

Panel textures are generated on canvas with scanlines, corner brackets, glow gradients, and status indicators. It's all programmatic — no texture files needed.

CSS Animation Layer

On top of the 3D scene, CSS handles the 2D UI animations: glitch effects on titles, cubic-bezier easing on every transition, backdrop-filter blur for glass-morphism, and keyframe animations for loading sequences. The two layers — WebGL and CSS — never fight each other because the 3D canvas sits behind everything at z-index 1.

"Animation is not decoration. Animation is communication."