Skip to content

Lab

Original pieces built for this site. Some are inspired by design references I've studied — the mechanic is borrowed, everything else (content, palette, motion language, reduced-motion handling) is built from scratch for this site specifically.

Typer

live

Character-by-character headline reveal — each glyph ripples through a few states before settling as plain text. Type your own line and hit run, or change how many states each glyph cycles through. Used on the homepage hero. Reduced-motion: shows the settled text immediately, no animation runs.

hello, i’m ali

states per glyph

Command Trail

live

Real commands from this repo trail your cursor as terminal pills, each with a small independent tilt so it reads as scattered rather than stamped — every third one picks up the brand accent. Idle for a couple seconds and a ghost cursor keeps it moving on a fresh path each time. Skipped entirely under reduced motion — no idle animation, no trail.

Build Pulse

live

A deploy pipeline lighting up stage by stage with a narrated status line underneath, looping. Freezes on 'live' under reduced motion — the 'run again' button still triggers one full pass on demand, even then.

lint
build
deploy
live

$ Live.

Focus Lines

live

Real lines from my own manifesto and notes, rotating — each unblurs into focus, holds, then hands off to the next. Pauses on hover or focus so stopping to actually read one doesn't fight the timer; the dots below are real controls. Static under reduced motion.

So I focus on one thing. Execution.

Stack Chips

live

The real logos from /stack as draggable chips with simple pointer-velocity physics — drag one and fling it, it bounces off the edges and settles, lifting slightly while held. Shuffle re-scatters all of them. Dragging and shuffling still work under reduced motion; the post-release bounce is skipped.

loading stack…