Lab

Experimental demos and creative prototypes. Pure Canvas API and CSS — no libraries, no frameworks. Every demo is a single .tsx file under 200 lines.

6

Live Demos

Canvas

API

0

Dependencies

∞

Fun

🟢

Matrix Rain

Classic falling code rain effect in pure Canvas API. Characters are Chinese tech terms — click to pause/resume.

#Canvas#Animation#ASCII
Open →
✨

Starfield Fly

3D perspective starfield with depth buffering. Stars accelerate over time — watch the tunnel effect unfold.

#Canvas#3D#Perspective
Open →
🌊

Perlin Noise Flow

Flow field visualization using multi-octave sine noise. Every particle traces the field direction.

#Canvas#Noise#Generative
Open →
🔴

Particle Physics

Interactive particle system with mouse repulsion. Move your cursor to push particles around.

#Canvas#Particles#Interaction
Open →
⌨

Typing Animator

Typewriter effect with variable speed — fast on type, slow on pause, fast on delete. Cycles through real code phrases.

#CSS#Animation#Text
Open →
🎨

Animated Gradients

Smooth morphing gradient backgrounds using Canvas linear gradients with animated anchor points.

#Canvas#Gradients#Animation
Open →

Philosophy

No dependencies

Raw Canvas API. No Three.js, no GSAP, no p5.js. If you need a library to understand the code, it's too complex.

Single file

Each demo is one .tsx file under 200 lines. Read it in 5 minutes, understand it completely.

Interactive

Every demo responds to the user somehow — mouse, keyboard, or time. Passive animations are boring.

Pause & inspect

All demos respond to focus. Click anywhere to pause, look at the code, then resume.