[§] /docs/how-to
How-tos
Short, numbered guides for one job each. Pick the task, follow the steps, open the live version.
TL;DR
- Every how-to has the same shape: goal, what you need, up to eight steps, why it works, a live demo.
- New here? Start with the two Setup guides.
- Stuck on a rule rather than a task? See the rules.
[SETUP] start · progress
[3D] pick · pixels · blocks · post fx
[SHADERS] background · ascii · neon · colour
[MOTION] ease · type · svg · flip
[SCROLL] no hijack · sections · components
[IMAGES] at scale · ai assets
[VERIFY] frames · 390px · postersSetup
Start a project with the toolkit
Brief, stage, tools, tokens, one experience, verify.
Drive any component from progress 0..1
The experience contract, and loops that never re-render.
3D
Decide if you need 3D, and which tool
CSS depth first, then the right library and the performance rules.
Pixel to HD, three ways
Low-res targets, pixel blasts and pixelated images.
Draw thousands of blocks in one call
Instancing, shader-moved blocks and text as voxels.
Stack post-processing without jank
Mount once, tween strength, write a CRT pass.
Shaders
Write a shader background
Noise, warp, ink and grain, kept behind the text.
Render anything as ASCII or 1-bit
AsciiRenderer, Bayer and Floyd-Steinberg.
Make neon light paths
SVG, shader or tube: which one and what it costs.
Make colour look expensive
OKLab gradients, grain and glass.
Motion
Pick the right ease
A default set of curves, and when to use a spring.
Kinetic type and motion posters
SplitText, 3D flips and scenes on a timeline.
Draw and morph SVG
DrawSVG, MotionPath and MorphSVG.
Animate layouts and pages with Flip
Flip, page wipes and View Transitions.
Scroll and layout
Scroll effects without hijacking the page
Scoped Lenis, pins, velocity skew and zoom.
Build a hero, a bento grid and a footer
The three sections every landing page needs.
Own your components
Registries, restyling and every button state.
Images
Hundreds of images, and their palettes
Atlases, distance pixelation, halftone and k-means.
Generate AI assets for the web
Briefs, models, a prompt library and shipping video.