REFERENCE
- Gallery page: https://magpui.com/en/i/typewriter-hero-that-types-itself-0f35aa
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/typewriter-hero-that-types-itself-0f35aa/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/typewriter-hero-that-types-itself-0f35aa/clip.mp4
- Original post: https://x.com/rahulluthra22/status/2109337800537690470 by @rahulluthra22
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A calm writing-app hero: small nav pill, serif headline, one-line subtitle, a dark CTA, and below it a 3D typewriter whose paper shows monospaced text being typed in real time.
DESIGN SYSTEM
- Background #FAFAF8, headline serif 40px #111, subtitle 14px #666, CTA black pill.
- Typewriter centered, dark graphite body, white paper sheet with 12px monospace text.
MOTION
- On load: text types at 45-70ms per character with small random jitter; each keystroke nudges the carriage 1px and moves a key down 2px for 60ms.
- At line end the carriage returns with an ease-out 300ms slide.
- Caret blinks at 500ms while idle.
SECTIONS
- Nav pill.
- Headline and subtitle.
- CTA.
- Typewriter with paper.
IMPLEMENTATION
- Static 3D render or a Spline / R3F scene; the paper text is a DOM overlay or a CanvasTexture so it stays sharp.
- Respect reduced motion: show the full text immediately.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Typing never blocks scroll or LCP (text is in the DOM).
- Carriage motion matches the typed line.
- Looks fine without WebGL (static image fallback).
