Animazioni

Cambio tema con titolo che si rimescola

Passando da scuro a chiaro il titolo spaziato si rimescola in caratteri glitch prima di tornare normale.

Settori: dev tools
Colori: blackwhite
Stili: editorialglitchmonospace
Categoria: theme toggletypography

REFERENCE
- Gallery page: https://magpui.com/en/i/theme-switch-with-scrambled-title-eff43f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/theme-switch-with-scrambled-title-eff43f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/theme-switch-with-scrambled-title-eff43f/clip.mp4
- Original post: https://x.com/kitlangton/status/2102282180122841438 by @kitlangton
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
An article page with a widely tracked uppercase title. Toggling the theme flips the page from dark to light, and the title runs a scramble effect: each letter cycles random characters before landing on the real one.

DESIGN SYSTEM
- Dark: #0B0B0B bg, #EDEDED text; light: #FAFAFA bg, #111 text.
- Title 20px uppercase, letter-spacing 0.3em; body serif 15px, 1.7 line height.

MOTION
- Theme change: background and text colors transition 400ms.
- Scramble: each letter cycles 6-10 characters from #%&*@01 at 30ms intervals, left to right with 25ms stagger.
- Toggle icon rotates 180deg.

SECTIONS
- Header with theme toggle.
- Title.
- Body text.

IMPLEMENTATION
- CSS variables for theme; a small hook that scrambles text with requestAnimationFrame and keeps the real text in aria-label.
- 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
- Final title is always the original text.
- Screen readers read the real title once.
- No flash of the wrong theme on load.

1
Installa la skill
Lancia questi comandi una volta in Claude Code. La skill dà all'agente il mestiere per questo tipo di pezzo. Con altri agenti, segui le istruzioni nella pagina della skill.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
Incolla il prompt nel tuo agente
Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Claude Code Codex
3
Confronta con l'originale
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Installa la skill

Incolla il prompt nel tuo agente

Confronta con l'originale