Stratus Keyboard
A product page for a mechanical keyboard, carried by an image sequence that scroll plays frame by frame.
How it’s built
- KeyboardScroll
- Draws the image sequence to a canvas; Framer Motion’s useScroll and useTransform map scroll progress to a frame index.
- Loading
- The first frame loads first to unblock the page; the rest load in batches of ten.
- Asset pipeline
- A sharp script converts the source frames to WebP.
- Build
- Next.js with the React Compiler enabled.
What it does
- Sections for feel, sound and technical specifications, ending on a pre-order list.
- Light and dark themes through next-themes.
Screens
Where it sits
Next.js 16 · React 19 · Framer Motion · Tailwind CSS v4 · TypeScript
By the numbers
- Frames in the sequence
- 220
- Preload batch
- 10 frames
