Lift walk
each row lifts with a shadow, one after another
01Find Skills
02Agent Browser
03Remotion
Motion Picker
All 124 motions playing live at their real speed. 1-14 are item and link moves, 15-26 are Charlie's named styles, Apple-style moves and liquid glass, all in your brand. Pick by number.
ItemLinkCharlie's styleApple styleLiquid glass
Item
Outline walker
a blue outline steps from row to row
01Find Skills
02Agent Browser
03Remotion
Lit trail
rows light up in turn and stay lit, then reset
01Find Skills
02Agent Browser
03Remotion
Copy flash
Copy turns into Copied on each row in turn
01Find SkillsCopyCopied ✓
02Agent BrowserCopyCopied ✓
03RemotionCopyCopied ✓
Typing prompt
the prompt types itself into the well (breaks every-frame-complete)
Find Skills
TYPE THISFind a skill that writes my release notes.
Number pop
each number badge pops bigger in turn
01Find Skills
02Agent Browser
03Remotion
Tick through
each row's box ticks in order, then clears
01Find Skills
02Agent Browser
03Remotion
Every icon alive
all icons move at once, each its own loop (Charlie's top move)
Search
Voice
Build
Dot travel
a dot travels down the rail from step to step
Find Skills
Step 1
Agent Browser
Step 2
Remotion
Step 3
Marching dashes
dashes flow along the connector, nonstop
Prompt
Output
Draw-on line
the connector draws itself, holds, then redraws
Prompt
Output
Hub pulse
pulses travel out from the centre along every spoke
Arrow nudge
the 'then' arrows nudge forward in turn
Brief
→Draft
→Ship
Bead fill
beads on the rail fill one by one, then reset
1
2
3
4
5
6
Border Beam
a light beam runs round the card's border (his default on light)
Find Skills
Finds and installs any skill
Glow Sweep
one soft blue glow travels down the rows
01Find Skills
02Agent Browser
03Remotion
Comet on a path
a glowing dot rides the connector, lights each stop
Ball flow
balls leave the hub together, boxes outline as they land
Hub
Writing
Research
Design
Border pulse
card borders brighten one by one (his dark-sheet move)
01Find Skills
02Agent Browser
03Remotion
Build-up reveal
rows fade in one by one (breaks every-frame-complete)
01Find Skills
02Agent Browser
03Remotion
Glass sheen
light slides across a frosted glass card
Dynamic Island
a black pill grows to show a message, then shrinks
Liquid toggle
switches flip with a stretchy knob, iPhone style
Web search
Memory
Voice
Spring pop
chips bounce bigger in turn with an overshoot
Free10 minBeginnerNo codeMac + PCNew
Smooth scroll
a list glides up in a window, eased like iOS
Glass rows
frosted rows on navy, the active one lifts and brightens
01Find Skills
02Agent Browser
03Remotion
27-44 · Rails and devices coloured like your Hire sheet
Liquid rail
colour fills down the segmented rail, the knob rides the edge (your Hire sheet)
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Segment walk
each rail segment widens and its row lights in the same colour
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Knob drop
a knob stops at each coloured dot, the dot rings out
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Thermo steps
a thermometer rises one step per job, changing colour as it climbs
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Ruler caddy
a caddy slides along a ruler and parks on each mark
01
02
03
04
05
job
Five jobs, one ruler
Abacus beads
beads slide across the wire one by one, then reset
to do
done
Tram stops
a tram rides the line and rings each stop
job 01
job 02
job 03
job 04
job 05
Ladder climb
a dot climbs the coloured rungs from bottom to top
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Snake road
a traveller rides the S-road, each stop takes its colour as it passes (Charlie's snake)
Stitch line
a needle sews a dashed stitch from start to finish
Chain links
links tighten one by one and take their colour
01
02
03
04
05
Tape measure
a tape pulls out to its full length, marks in job colours
Film strip
frames roll past on a strip, nonstop
Clock sweep
one hand sweeps the dial and lights each job's slice (Charlie's Codex clock)
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Ring draw
a donut draws itself slice by slice, then holds
5
jobs
job 01
Sales outbound
job 02
Service and sales
job 03
A custom agent
job 04
Files and apps
job 05
Research deck
Hired stamp
each row's HIRED chip pops in turn (your Hire sheet)
Sales outboundHIRED ✓
Service and salesHIRED ✓
A custom agentHIRED ✓
Files and appsHIRED ✓
Research deckHIRED ✓
Chip cascade
each row's tinted chips fill with its colour in turn
Sales outbound
asks firstruns overnight
Service and sales
asks firstruns overnight
A custom agent
asks firstruns overnight
Paste select
the prompt gets selected, then flashes Copied (your paste wells)
paste this
❯ Work my new Salesforce leads overnight. Draft each follow-up, then ask before it sends.
COPIED ✓
45-52 · Real objects iOS-widget objects, glass, spring physics, to Charlie's Motion Apps standard
Price switch
Monthly to Yearly: the glass thumb springs across, the price rolls (Charlie's £290 tile)
PRO PLANSAVE 17%
MonthlyYearly
£
Dynamic Island
the island springs open into a live activity with a moving waveform
Pay to Paid
the button presses in, then morphs into a green Paid with a drawn tick
ORDER
Team plan · annual£4,850
Goal ring
three rings close with a spring overshoot, then Goal hit pops (Charlie's ring tile)
Goal
hit
hit
Lock screen
notifications spring in and stack on frosted glass (Charlie's 10:24 tile)
Liquid glass slider
an iOS 26 glass knob stretches as it slides, the colours bend through it
SalesServiceAgentFilesResearch
job 01
job 05
Glass tab bar
a liquid blob slides between tabs, stretching mid-move like iOS 26
Count-up widget
the number ticks up, the sparkline draws, the growth chip springs in
VIEWS THIS WEEK+38%
53-68 · From 21st.dev Magic UI, Motion Primitives, Aceternity and Fancy Components, rebuilt in your brand with real logos
Animated beam
light travels along curved wires from each real logo into the hub (Magic UI)
Orbiting logos
real logos orbit the hub on two rings, inner and outer turning opposite ways (Magic UI)
Logo marquee
two rows of real tool pills glide in opposite directions, edges fade (Magic UI marquee)
ClaudeChatGPTGeminiCursorNotionPerplexityGrok
CodexClaudeChatGPTGeminiCursorNotionPerplexityGrokCodexCodexGrokPerplexityNotionCursorGeminiChatGPTClaudeCodexGrokPerplexityNotionCursorGeminiChatGPTClaudeDock magnify
a magnify wave rolls across a macOS dock, neighbours grow too (Magic UI dock)
Odometer
each digit rolls on its own wheel and lands with a spring (Motion Primitives sliding number)
TOTAL VIEWS
,,
Split-flap board
an airport board flips letter by letter from one word to the next (Aceternity flipping board)
BEST MODEL FOR THE JOB
Terminal run
a command types itself, then each result line lands with a tick (Magic UI terminal)
Copy command
a cursor clicks Copy, the icon springs into a tick and a Copied tooltip pops (Magic UI copy button)
$
Copied
Agent plan
each task spins, then ticks green, the bar fills (21st agent plan)
AGENT PLAN4 steps
Read your inbox
Find the 3 hot leads
Draft the replies
Ask before sending
AI chat reply
your message lands, Claude thinks with bouncing dots, then the answer streams in (21st AI chat)
Which model for long reports?
Use Opus 5.5 for long reports. It plans, checks sources and keeps the thread across 40 pages.
Shortcut keys
keycaps press down in order, then the action lights up (Aceternity keyboard)
⌘
+⇧
+P
Open the command menu
Before / after
a divider slides across, revealing the clean version over the messy one (Motion Primitives image comparison)
Cursor demo
a cursor glides in, clicks Generate, the button loads then turns into Done (Magic UI smooth cursor)
NEW SHEET
Job interview prep, 10 min
Shimmer heading
a soft light sweeps across your heading, the text stays readable (Motion Primitives text shimmer)
CLAUDE MODELS · PICKED BY JOB
Which Claude Model To Use?
Pick the model, then set how hard it thinks.
Text scramble
letters scramble through code characters and lock in one by one (Motion Primitives text scramble)
NEW MODEL
OPUS 5.5
Plans, checks sources, writes the long stuff.
Card deck
the front card lifts off and tucks to the back, the deck shuffles forward (Fancy stacking cards)
MODELOpus 5.5
Long reports, agents
MODELSonnet 5
Everyday writing, code
MODELHaiku 4.5
Fast, cheap jobs
69-124 · The rest of the 21st.dev list text effects, backgrounds, cards, buttons, inputs, maps, panels and loaders
Animated list
new items slide in at the top and push the rest down
LLead replied: Acmenow
RReport readynow
DDeck exportednow
IInvoice paidnow
Flip words
the key word flips over to the next, like a card turning
Claude can
Text highlighter
a marker draws behind each key phrase in turn and stays
Give Claude one clear job, your real files and a way to check its work.
Underline to fill
a thin underline grows into a full fill behind the word, text turns white
Ship it today
Vertical cut reveal
each word rises out of a hidden slot, one after another
Letter 3D swap
a wave of letters flips over in 3D, left to right
Claude Code
Typewriter
a prompt types out with a blinking caret, then the next one
TYPE THIS
Word pull up
words pull up from below with a spring, one by one
Yourwork,donewhileyousleep
Blur fade in
lines come into focus from a soft blur, top to bottom
Sonnet 5 for everyday work
Opus 5.5 for hard thinking
Haiku 4.5 for fast jobs
Agents for overnight runs
Hyper text
the word shuffles letters fast, then settles left to right
MODEL
CLAUDE
Morphing text
one word melts into the next with a gooey blur
WriteCodeResearchDesign
Spinning text ring
a ring of text turns slowly around the logo
Gradient text
your citrus colours flow slowly through the heading
Pick the right model
Sparkles text
little stars twinkle around the word, each on its own beat
Free
Shine border
a soft multi-colour shine glides round the card's edge
Pro plan
Everything in one place
Magic card spotlight
a soft spotlight follows the cursor across the cards
Ripple
rings ripple out from the logo, endlessly
Flickering grid
a grid of squares flickers softly behind a headline
Always on
Animated grid
random grid squares light up and fade, like a live board
Dotted globe
a dotted globe turns while arcs fly between cities
Confetti win
the Goal button bursts into confetti in your citrus colours
Goal hit
Subscribe button
Subscribe presses, stretches and becomes a green Subscribed tick
File tree
folders unfold one level at a time, chevrons turn
Safari window
the address types claude.ai, then the page fades in
Tracing beam
a bright beam runs down the timeline and lights each step
step 01
Install Claude Code
step 02
Open your project
step 03
Ask for a plan
step 04
Review and ship
Rotating card stack
a fanned stack rotates, the back card swings to the front
TIP 01
Give one clear job
TIP 02
Paste the real file
TIP 03
Ask it to check
Meteors
meteors streak across a dark card
Glowing border
a coloured glow chases round the card, soft and blurred
Opus 5.5
For the hard thinking
3D tilt card
the card tilts in 3D as if under a finger, a glare slides over it
Container scroll
a screen tilts up from flat and settles facing you
YOUR CHEATSHEET
Laptop opens
a laptop lid swings open to reveal the sheet on screen
Claude CodeMulti-step loader
steps tick off one at a time and the list scrolls up
Stateful button
Publish spins, then lands on a ticked Published
PublishPublished
Vanish input
placeholder prompts slide through, then a typed prompt dissolves on send
Encrypted text
a secret line decodes left to right out of symbols
DECODING
Radar sweep
a radar beam sweeps round and each tool blips as it's found
Pulse beams
pulses race along circuit lines into the chip, which glows
World map
dots travel along arcs between cities on a dotted map
Avatar tooltips
each avatar lifts in turn and its name pops above it
A
Aisha
M
Maryam
S
Sam
J
Jordan
R
Riya
Moving cards
a row of quote cards drifts past without end
“Saved me 5 hours this week.”
Aisha
“Finally a sheet I actually use.”
Sam
“Clear, simple, no fluff.”
Riya
“My team pinned it.”
Jordan
“Saved me 5 hours this week.”
Aisha
“Finally a sheet I actually use.”
Sam
“Clear, simple, no fluff.”
Riya
“My team pinned it.”
Jordan
Morphing dialog
a small card grows into a full detail panel, then shrinks back
Border trail
a short light runs round the card's border on a loop
Most picked
Sonnet 5
Glow behind
a soft colour glow breathes and turns behind the card
Your stack
7 tools, one flow
Magnetic button
the button leans toward the cursor, then springs back
Get the sheet
Expandable toolbar
a slim toolbar opens into a panel, then folds back
Transition panel
panels slide sideways from step to step, dots track where you are
Reading progress
content scrolls in a window while the bar on top fills
Text loop
a whole line rolls up to the next phrase, with a soft blur
Claude Code can
Marquee on a path
real logos travel along a curve, nonstop
Elastic line
a divider line gets plucked and wobbles back to rest
Before
After
Expanding tabs
the active tab widens to show its name, the others stay as icons
Lever switch
a chunky lever flips with a spring and the light turns green
Auto-reply
Toast
a toast slides in, its timer bar runs down, then it slides away
Follower counter
your follower count ticks up and little hearts float off
FOLLOWERS
76,564
Card fan
a stack of cards fans out like a hand, then gathers back
Data rain
columns of code characters rain down behind a label
RUNNING
Claude is reading 42 files
Motion list from 21st.dev · 78 motions (all built here)
| STATUS | MOTION | SOURCE |
|---|---|---|
| Built | 53 Animated beam | Magic UI |
| Built | 54 Orbiting circles | Magic UI |
| Built | 55 Marquee | Magic UI |
| Built | 56 Dock | Magic UI |
| Built | 57 Sliding number / odometer | Motion Primitives |
| Built | 58 Text flipping board | Aceternity |
| Built | 59 Terminal | Magic UI |
| Built | 60 Script copy button | Magic UI |
| Built | 61 Agent plan | 21st community |
| Built | 62 AI chat | 21st community |
| Built | 63 Keyboard | Aceternity |
| Built | 64 Image comparison | Motion Primitives |
| Built | 65 Smooth cursor | Magic UI |
| Built | 66 Text shimmer | Motion Primitives |
| Built | 67 Text scramble | Motion Primitives |
| Built | 68 Stacking cards | Fancy Components |
| Built | 15 Border beam | Magic UI |
| Built | 22 Dynamic Island / notch | Aceternity |
| Built | 52 Number ticker | Magic UI |
| Built | 48 Animated circular progress | Magic UI |
| Built | 51 Animated tabs | Motion Primitives |
| Built | 24 Spring pop | Motion Primitives animated group |
| Built | Animated list (notifications slide in) | Magic UI |
| Built | Flip words (word swaps with a flip) | Aceternity |
| Built | Text highlighter (marker draws across words) | Fancy Components |
| Built | Underline to background | Fancy Components |
| Built | Vertical cut reveal | Fancy Components |
| Built | Letter 3D swap | Fancy Components |
| Built | Typewriter | Fancy Components |
| Built | Word pull up | Magic UI |
| Built | Blur fade in | Magic UI |
| Built | Hyper text | Magic UI |
| Built | Morphing text | Magic UI |
| Built | Spinning text ring | Magic UI |
| Built | Animated gradient text | Magic UI |
| Built | Sparkles text | Magic UI |
| Built | Shine border | Magic UI |
| Built | Magic card (spotlight follows cursor) | Magic UI |
| Built | Ripple (rings from a centre logo) | Magic UI |
| Built | Flickering grid background | Magic UI |
| Built | Animated grid pattern | Magic UI |
| Built | Globe with arcs | Magic UI |
| Built | Confetti burst on a win | Magic UI |
| Built | Animated subscribe button | Magic UI |
| Built | File tree unfolding | Magic UI |
| Built | Safari / Android device mockups | Magic UI |
| Built | Tracing beam down a timeline | Aceternity |
| Built | Card stack rotate | Aceternity |
| Built | Meteors across a card | Aceternity |
| Built | Glowing effect border | Aceternity |
| Built | 3D card tilt with glare | Aceternity |
| Built | Container scroll (screen tilts up) | Aceternity |
| Built | MacBook scroll | Aceternity |
| Built | Multi-step loader | Aceternity |
| Built | Stateful button (loading to success) | Aceternity |
| Built | Placeholders and vanish input | Aceternity |
| Built | Encrypted text | Aceternity |
| Built | Radar sweep | Aceternity |
| Built | Pulse beams through a circuit | Aceternity |
| Built | World map with travelling dots | Aceternity |
| Built | Animated tooltip avatars | Aceternity |
| Built | Infinite moving cards | Aceternity |
| Built | Morphing dialog (card opens into detail) | Motion Primitives |
| Built | Border trail | Motion Primitives |
| Built | Glow effect | Motion Primitives |
| Built | Magnetic button | Motion Primitives |
| Built | Toolbar expandable | Motion Primitives |
| Built | Transition panel | Motion Primitives |
| Built | Scroll progress bar | Motion Primitives |
| Built | Text loop | Motion Primitives |
| Built | Marquee along an SVG path | Fancy Components |
| Built | Elastic line | Fancy Components |
| Built | Expanding tabs | 21st community |
| Built | Lever switch | 21st community |
| Built | Animated toast | 21st community |
| Built | Follower counter | 21st community |
| Built | Card fan preloader | 21st community |
| Built | Data rain | 21st community |
5 and 20 break the every-frame-complete rule: text types in, or rows appear one by one.