1.8 KB
Particle Flow Field
2,000 particles follow a Perlin-like noise field. Move your mouse to disturb the flow. Uses Canvas 2D with HSL color cycling.
Canvas 2D · Noise field · Mouse interaction
Back to the tree
Creative Coding Showcase
Interactive code demos that show what's possible in under 50KB. Each demo uses a different technique — from Canvas 2D particles to WebGL shaders to pure CSS. View the source, learn the patterns, then plant a seed to create your own.
All demos run entirely in-browser. No libraries, no build tools — just vanilla HTML, CSS, and JavaScript.
2.1 KB
Shader Gradient Orb
A pulsating orb rendered entirely in a WebGL fragment shader. No geometry — every pixel is calculated mathematically. Mouse position shifts the color palette.
WebGL · Fragment shader · SDF circle
1.4 KB
Recursive Tree
A fractal tree that sways in the wind. Click anywhere to grow a new tree from that point. Demonstrates recursive drawing on Canvas.
Canvas 2D · Recursion · Animation
2.0 KB
Audio Reactive Rings
Click to start — concentric rings pulse to generated audio tones. Uses the Web Audio API to create sound and visualize it simultaneously.
Web Audio API · Canvas 2D · Oscillators
0.9 KB
CSS-Only Aurora
A pure CSS aurora borealis with no JavaScript at all. Uses layered gradients, mix-blend-mode, and CSS animations for a luminous sky effect.
Pure CSS · Blend modes · Keyframe animations
2.4 KB
Reaction Diffusion
A Gray-Scott reaction-diffusion simulation. Click to seed new patterns. The organic, coral-like growth emerges from two simple chemical rules.
Canvas 2D · Gray-Scott model · Pixel manipulation
Want to see more?
Every branch on Lumitree is a unique micro-world built with these same techniques. Explore them all, or plant your own seed to grow something new.