Motion

Theme switch with scrambled title

Switching from dark to light makes the spaced-out title scramble through glitch characters before it settles.

Industries: dev tools
Colors: blackwhite
Styles: editorialglitchmonospace
Category: 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
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
Paste the prompt in your agent
Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.
Claude Code Codex
3
Compare with the original
Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Paste the prompt in your agent

Compare with the original