Deep dive
Scrappy — CSS motion short story
A weekend fun project — scroll-driven CSS narrative on desktop. No mobile or responsive layout work; the scope was motion and pacing, not breakpoints.
- Next.js
- CSS
Overview
What it is
Scrappy is a weekend fun project and personal lab: one scroll, many scenes, zero timeline libraries pretending to be a video editor. It’s desktop-first — I didn’t do mobile or responsive layout work; the point was experimenting with motion and pacing, not shipping a polished multi-viewport experience.
Approach
- Keyframe choreography tied to scroll position and section boundaries
- DOM-first storytelling so the story stays accessible and linkable
- Performance guardrails: will-change used sparingly, animating transform/opacity first
Why I built it
On client work, motion always comes with trade-offs: accessibility, performance budgets, responsive layouts, and someone asking for “just one more animation.” Scrappy was the opposite — a weekend experiment with no brief except: tell a short story with scroll and CSS, stay in the DOM, and see how far you can get without a timeline library.
It’s not a portfolio piece pretending to be a product. It’s where I test pacing, restraint, and whether movement actually helps the story — the same judgment I use when shipping real UI, just without the meeting.
Visit scrappy.3weeda.com ↗ (desktop recommended).