REFERENCE
- Gallery page: https://magpui.com/en/i/chromatic-rewind-text-hover-48361e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/chromatic-rewind-text-hover-48361e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/chromatic-rewind-text-hover-48361e/clip.mp4
- Original post: https://21st.dev/@kokonutd/components/text-rewind by Kokonut UI
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 hover text effect for a single word or short heading. At rest it is a crisp white italic word. On hover, a stack of colored ghost copies of the same word bursts out behind it, offset down and to the right like a rewinding VHS tape: a cyan copy closest, then magenta copies, each further one more offset, more transparent and more blurred. The ghosts then slide back up under the main word and disappear, leaving the word with a faint magenta edge. It should feel punchy, glitchy and retro, over in well under a second.
DESIGN SYSTEM:
- Background: near black #0A0A0C with a subtle dot grid (1px dots, #FFFFFF at 6% opacity, 24px spacing).
- Text: bold italic grotesk sans, 56px, weight 700, letter-spacing 0.04em, color #FFFFFF.
- Ghost layers (4 copies, behind the main word, aria-hidden):
1. cyan #19C2C2, offset (16px, 14px), opacity 0.9, no blur
2. magenta #E0119A, offset (24px, 24px), opacity 0.85, blur 0.5px
3. magenta #C2108A, offset (34px, 36px), opacity 0.7, blur 1px
4. magenta #B0107E, offset (66px, 66px), opacity 0.45, blur 6px
- Ghost copies 2-4 show horizontal scanline slicing: mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 5px).
- Settled state: main word gets text-shadow: 1px 1px 0 rgba(224,17,154,0.6).
MOTION:
- Trigger: pointerenter (and focus-visible for keyboard).
- Burst: each ghost goes from offset (0,0), opacity 0 to its target offset and opacity in 160ms, cubic-bezier(0.16,1,0.3,1), staggered 30ms from layer 1 to 4.
- Rewind: after a 120ms hold, each ghost returns to (0,0) and opacity 0 over 380ms cubic-bezier(0.7,0,0.84,0), staggered 40ms in reverse order (farthest first), with blur rising to 8px on the way back.
- Main word: tiny jitter during the burst, translateX 0 -> -2px -> 1px -> 0 over 160ms, steps(4).
- Settle: text-shadow fades in over 200ms ease-out after the rewind; on pointerleave it fades out over 200ms.
- Re-entering during the animation restarts it from the current values (no queued replays).
SECTIONS:
- Parts: wrapper (inline-block, position relative), main text layer, 4 absolutely positioned ghost layers rendering the same string.
- States: idle (white word), hover burst, rewinding, settled (faint magenta edge), reduced motion.
IMPLEMENTATION:
- Framer Motion: render the ghosts as motion.span with variants and staggerChildren; use useAnimate to sequence burst -> hold -> rewind and to cancel on re-entry. A CSS-only version also works with @keyframes per layer and animation-delay, triggered by :hover and :focus-visible.
- Props: text, colors array, distance multiplier, duration multiplier.
- Accessibility: the real text stays in the main layer; ghosts are aria-hidden. If the word is a link, the effect runs on focus-visible too.
- prefers-reduced-motion: skip the burst and only fade in the settled magenta text-shadow.
- Performance: animate only transform, opacity and filter; keep it to 4 ghost layers; add will-change only while animating.
ADAPT TO THE PROJECT:
Reuse the project's existing design tokens, components and fonts; use the project's display font in bold italic if available. Map white, cyan and magenta to the closest existing color tokens or accent colors. Never copy logos, brand names, photos or illustrations from the original; use placeholder text.
SUCCESS CHECK:
- Hovering the word shows one cyan and several magenta copies offset down-right, the farthest one blurred, then they slide back under the word within about 800ms.
- Hovering again mid-animation restarts cleanly without stacking extra layers.
- Screen readers read the word once, and with prefers-reduced-motion only the soft magenta edge appears.
