Playground
Every effect on this site, with the knobs I used to choose them.
Read the post about how I picked them, or open the frozen lab code.
Band textures
The site picks one pattern and one direction on every load, never the same pattern twice in a row. Reload for another pick, or choose your own here. This page also textures the yellow banner at the top, so you can watch it change there too.
Your device asks for less motion, so the textures are already still. The other controls still work.
Yellow band
Black text, so the texture is a lighter yellow.
The texture sits behind the words and never touches the border.
Cobalt band
White text, so the texture is a deeper blue.
The texture sits behind the words and never touches the border.
Tomato band
Black text, and the dots are kept softer here.
The texture sits behind the words and never touches the border.
Glyph reveal
Mono text builds up letter by letter. It only runs on mono text, never on links, buttons, headings or article body.
Replay is off because your device asks for less motion.
Letters start blank, then pass through block characters, then land.
Short lines are relaxed, long lines are quick.
The text is real the whole time, so screen readers never wait for it.
Marker
A pale highlighter swipe that draws once behind a few key phrases.
Replay is off because your device asks for less motion.
I would rather understand why someone is stuck than tell them what to do, and I care about the small details people feel without naming.
Try hovering
Three small effects that only react to a pointer or the keyboard. Touch screens skip the hover ones.
Row sweep
2026
A project row
Hover or tab to the title. A yellow fill sweeps in from the left and an arrow slides in.
Sticker tilt
- Astro
- TypeScript
Link underline
Inline links carry a yellow bar that grows into a block, like this link to the post.
What I rejected
I tried these live and dropped them.
Plain dots: too weak, you stopped noticing them.
Burst: too busy, it fought the text.
Parallax: less convincing than a texture pinned to the screen.
Dither reveal on serif headings: too loud, so it stays on mono text only.
Scroll fade-ins: too generic, every site has them.
Cursor dots: too much, and nothing to read while they moved.