Hero con macchina da scrivere che scrive da sola · MagpUI

Animazioni

Hero con macchina da scrivere che scrive da sola

Una macchina da scrivere 3D sotto il titolo batte la prima frase sul foglio mentre la pagina si carica.

Settori: writing tools
Colori: off whiteblackgrey
Stili: editorialserifskeuomorphic
Categoria: herolanding page

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).

Incolla il prompt nel tuo agente

Confronta con l'originale