Strikethrough text animation: one phrase in a sentence is struck out with a hand-drawn line and fades back, then a better phrase writes in after it.
npx shadcn@latest add https://better-design.com/registry/video/strike-swap.jsonThe shots are laid out in the order a film plays them, from the opening title to the last frame, with cuts and backgrounds that fit any point at the end. Each one installs with a single command and takes your product’s colours through its theme. Your coding agent finds them through the Better Design MCP.
68 components
The first seconds: a title, a mark or a hook that says what the film is about.
Strikethrough text animation: one phrase in a sentence is struck out with a hand-drawn line and fades back, then a better phrase writes in after it.
npx shadcn@latest add https://better-design.com/registry/video/strike-swap.jsonHeadline reveal animation: a headline arrives four ways.
npx shadcn@latest add https://better-design.com/registry/video/headline-reveal.jsonHighlight text animation: a sentence settles, then one phrase in it is marked by hand with a highlighter sweep, a drawn underline, a loose ring or a tight box.
npx shadcn@latest add https://better-design.com/registry/video/word-mark.jsonTypewriter text animation: a line types out behind a blinking caret, then its ending is deleted and retyped, selected and typed over, or morphed letter by letter into new words.
npx shadcn@latest add https://better-design.com/registry/video/type-line.jsonRotating word animation: a sentence with one slot that cycles through words by sliding, flipping, spinning a reel or ticking a checkbox as each word lands.
npx shadcn@latest add https://better-design.com/registry/video/word-rotate.jsonLetter wave animation: a title rides in letter by letter on a travelling wave with a small bounce, its lead words first and scaling toward the viewer, then a soft ripple runs along it.
npx shadcn@latest add https://better-design.com/registry/video/letter-wave.jsonText decode animation: a line resolves out of scrambled glyphs from left to right, each letter flashing the primary colour before it settles to ink, and a product name lands underneath.
npx shadcn@latest add https://better-design.com/registry/video/glyph-decode.jsonTitle card animation: full-frame statements cut hard from one beat to the next, each held long enough to read.
npx shadcn@latest add https://better-design.com/registry/video/title-cards.jsonLaunch title animation: a small eyebrow line, a cut to the product name assembling large letter by letter, then a cut to the tagline as a primary band sweeps across one word.
npx shadcn@latest add https://better-design.com/registry/video/launch-title.jsonKinetic sentence animation: a sentence told one beat at a time, centred, while soft shapes in primary tints burst from the newest word, split in two and drift into place behind it.
npx shadcn@latest add https://better-design.com/registry/video/shape-story.jsonLogo reveal animation: a set of pictures collapses into the product mark and the name sets beside it.
npx shadcn@latest add https://better-design.com/registry/video/logo-reveal.jsonLaunch hero animation: two product cards slide in from opposite sides into an overlapping pair while the launch headline and subline settle above them.
npx shadcn@latest add https://better-design.com/registry/video/launch-hero.jsonMoodboard animation: a headline with one inline picture slot that swaps on the beat, then the camera flies into the last picture until it fills the frame.
npx shadcn@latest add https://better-design.com/registry/video/moodboard.jsonPhoto reel animation: pictures cut fast between an opening and a closing caption, the last one zooming, then the frame closes into a collage.
npx shadcn@latest add https://better-design.com/registry/video/photo-reel.jsonThe product doing its job: screens, devices, recordings and the agent at work.
AI agent tool call animation: tool-call chips arrive one by one and resolve from a spinner to a check, then the agent's short answer writes itself word by word.
npx shadcn@latest add https://better-design.com/registry/video/tool-calls.jsonFile upload to AI prompt animation: file thumbnails slide in, drop into a prompt composer as attachment chips, then the prompt types itself and the send button presses.
npx shadcn@latest add https://better-design.com/registry/video/file-attach.jsonPhone mockup animation: a headline settles in on the left while a phone is set down on the right with weight, a small overshoot and a soft contact shadow.
npx shadcn@latest add https://better-design.com/registry/video/device-drop.jsonButton zoom animation: the camera pushes into a primary button until its fill covers the frame, then the fill opens into the app it leads to.
npx shadcn@latest add https://better-design.com/registry/video/button-dive.jsonScreenshot wall animation: a tilted wall of product screens drifts slowly on the diagonal, then one screen lifts forward to the centre with a caption.
npx shadcn@latest add https://better-design.com/registry/video/screenshot-wall.jsonBefore and after animation: the old screen and the new one share the frame, split by a handle that stops halfway so both read, then hands the whole frame to the new screen.
npx shadcn@latest add https://better-design.com/registry/video/compare-split.jsonUI generation animation: a product screen builds itself.
npx shadcn@latest add https://better-design.com/registry/video/skeleton-build.jsonPicker wheel animation: an iOS-style wheel is flicked, slows down and lands on one row, which turns the primary colour and confirms with a check.
npx shadcn@latest add https://better-design.com/registry/video/picker-spin.jsonRelease end card animation: the product name types in, a large version number stamps down with a short shake, and a dated line settles under it.
npx shadcn@latest add https://better-design.com/registry/video/version-stamp.jsonText selection animation: a question sits in a pill, the answer writes itself word by word, then one phrase is selected and a small toolbar opens under it.
npx shadcn@latest add https://better-design.com/registry/video/answer-select.jsonChat reply animation: a close shot of the send button being pressed, then a cut to the wide shot where the answer streams in line by line while the camera eases back.
npx shadcn@latest add https://better-design.com/registry/video/answer-reply.jsonPrompt typing animation: a composer card grows out of a thin line, the prompt types itself, and a pointer glides in to press send, which turns into a check.
npx shadcn@latest add https://better-design.com/registry/video/prompt-compose.jsonAssistant start screen animation: a greeting, an input and suggestion chips appear, then the chips fall away and the camera pushes into the input as the prompt types.
npx shadcn@latest add https://better-design.com/registry/video/assistant-home.jsonSearch animation: a query types into a wide search field, the field rises, and a results list drops in with the matching words marked and the first result focused.
npx shadcn@latest add https://better-design.com/registry/video/search-bar.jsonStatus badge animation: a centred sentence holds an inline pill that rolls through its states, each with its own icon and colour, until the last one lands.
npx shadcn@latest add https://better-design.com/registry/video/status-pill.jsonPhone mockup animation: a phone tilts up into view and settles at an angle beside a caption, showing your screenshot, your screen recording or a placeholder app.
npx shadcn@latest add https://better-design.com/registry/video/phone-mockup.jsonLaptop mockup animation: a closed laptop opens its lid, the screen lights up, then the camera pushes in until the screen fills the frame.
npx shadcn@latest add https://better-design.com/registry/video/laptop-mockup.jsonTerminal animation: commands type after a prompt, output prints in short bursts, a spinner runs and a green success line lands.
npx shadcn@latest add https://better-design.com/registry/video/terminal-session.jsonScreen recording animation: turns a raw screen capture into a finished shot.
npx shadcn@latest add https://better-design.com/registry/video/recording-shot.jsonCursor animation: a pointer walks a path of waypoints over your screen and clicks where you mark it, with a press and a ripple.
npx shadcn@latest add https://better-design.com/registry/video/cursor-path.jsonScreenshot capture animation: a browser window is captured while a toast counts to 100 percent, then the window drops away and the toast confirms the copy with a check.
npx shadcn@latest add https://better-design.com/registry/video/screenshot-capture.jsonCard carousel animation: a rail of cards on a tilted plane is flicked sideways, coasts on its momentum and settles with one card centred and lifted.
npx shadcn@latest add https://better-design.com/registry/video/card-carousel.jsonPhoto gallery intro: pictures spiral in from the edges on one slow orbit around a title, smaller and dimmer as they reach the centre.
npx shadcn@latest add https://better-design.com/registry/video/photo-orbit.jsonTeam chat animation: a work channel fills itself in, typing dots before each message, and a reaction lands on the last one.
npx shadcn@latest add https://better-design.com/registry/video/team-channel.jsonAccess granted animation: a pointer clicks a call to action and team member cards switch from pending to granted one after another.
npx shadcn@latest add https://better-design.com/registry/video/access-grant.jsonNumbers and people: the figures that moved and the users who said so.
Stat count animation: one sourced number climbs to its value while a hairline under it fills, then the label settles in.
npx shadcn@latest add https://better-design.com/registry/video/stat-count.jsonBar chart animation: bars grow from the baseline one after another while each value counts up above it, and the last bar lands in the primary colour.
npx shadcn@latest add https://better-design.com/registry/video/bar-rise.jsonLine chart animation: a smooth line draws itself left to right over a soft area fill, a dot rides its leading edge, and the final value is called out where it ends.
npx shadcn@latest add https://better-design.com/registry/video/line-trace.jsonProgress ring animation: a ring sweeps round to a percentage while the number counts up in its centre, then a caption settles under it.
npx shadcn@latest add https://better-design.com/registry/video/ring-meter.jsonOdometer number animation: each digit rolls vertically into place, the ones column first and each column to its left a beat later, then a label settles under the figure.
npx shadcn@latest add https://better-design.com/registry/video/digit-roll.jsonComment section animation: comment cards land under a launch post faster and faster until they fill the frame, then one comment lifts out of the dimmed pile.
npx shadcn@latest add https://better-design.com/registry/video/comment-pile.jsonSupporter wall animation: a grid of initials avatars switches on in a wave from the centre while the supporter count climbs, then a thank-you line closes the shot.
npx shadcn@latest add https://better-design.com/registry/video/supporter-grid.jsonText message animation: a phone thread shares a link to a product video and the replies pop in after typing dots, on alternating sides.
npx shadcn@latest add https://better-design.com/registry/video/message-bubbles.jsonLogo cloud animation: a field of integration tiles drifts slowly behind a centred headline while the camera pulls back.
npx shadcn@latest add https://better-design.com/registry/video/logo-cloud.jsonThe last frame: your name, your link and the one thing to do next.
Wordmark animation: solid blocks slide in and stack into a line, then resolve letter by letter into the brand name, with one accent block left as the full stop.
npx shadcn@latest add https://better-design.com/registry/video/wordmark-build.jsonEnd card animation: the wordmark set huge across the frame, a hard cut to a close-up of part of it, then a calm end card with a call to action and a web address.
npx shadcn@latest add https://better-design.com/registry/video/end-card.jsonThe move from one beat to the next.
Iris transition: the next scene opens through a circle that grows from any point you choose.
npx shadcn@latest add https://better-design.com/registry/video/transition-iris.jsonZoom through transition: the outgoing scene scales up and blurs past the lens while the next scene settles in from slightly large.
npx shadcn@latest add https://better-design.com/registry/video/transition-zoom-through.jsonWhip pan transition: a fast sideways camera move where both scenes travel together under horizontal motion blur.
npx shadcn@latest add https://better-design.com/registry/video/transition-whip-pan.jsonBlur dissolve transition: a cross-dissolve where both scenes go soft at the midpoint.
npx shadcn@latest add https://better-design.com/registry/video/transition-blur-dissolve.jsonGrid wipe transition: the next scene appears through a grid of tiles that grow in a diagonal wave.
npx shadcn@latest add https://better-design.com/registry/video/transition-grid-wipe.jsonGrounds, light and captions that sit under or over any beat.
Gradient background animation: soft blobs in tones of the primary colour drift slowly over the page and loop without a seam.
npx shadcn@latest add https://better-design.com/registry/video/gradient-field.jsonDot grid background animation: an even field of dots drifts diagonally while a wave of primary light travels across it, looping without a seam.
npx shadcn@latest add https://better-design.com/registry/video/dot-grid.jsonFilm grain overlay: fine animated grain and a soft vignette laid over your footage, deterministic on every render.
npx shadcn@latest add https://better-design.com/registry/video/film-grain.jsonLight sweep background animation: a soft diagonal band of light crosses the surface every few seconds, like a reflection on glass.
npx shadcn@latest add https://better-design.com/registry/video/light-sweep.jsonBurned-in captions animation: word-timed captions for vertical and landscape videos, either popping on a few words at a time or filling a full line word by word.
npx shadcn@latest add https://better-design.com/registry/video/captions.jsonGlowing border animation: a soft glow around the whole frame pulses while something is working, then calms to a steady primary line.
npx shadcn@latest add https://better-design.com/registry/video/glow-frame.jsonTemplates that cut the shots above into a finished film. Replace the copy and render.
Product launch video template: a three-line hook, the name building into a wordmark, the product on a phone, two features, one sourced number and an end card, about 31 seconds.
npx shadcn@latest add https://better-design.com/registry/video/film-product-launch.jsonChangelog video template: the version stamps down, three changes play in turn (a screen recording, a marked sentence, a struck and replaced phrase), then the end card, about 20 seconds.
npx shadcn@latest add https://better-design.com/registry/video/film-changelog.jsonOnboarding video template: a welcome headline, three steps (a pointer working through settings, a screen recording, rotating words), a ring that fills when setup is done, then the end card, about 30 seconds.
npx shadcn@latest add https://better-design.com/registry/video/film-onboarding.jsonApp Store preview video template, vertical: a title on a wave, the app on a phone, a plan picker that lands, a shared message thread, then the logo reveal, about 20 seconds at 1080 by 1920, the App Store size for 16:9 iPhones.
npx shadcn@latest add https://better-design.com/registry/video/film-app-store-preview.jsonLaunch day video template for Product Hunt or Hacker News: title cards, a dive into the product, a prompt composing itself, the people who backed the launch and an end card that asks for support, about 20 seconds.
npx shadcn@latest add https://better-design.com/registry/video/film-launch-day.jsonShort product demo video with full sound design: a prompt types and sends, an agent runs its tools, the screen builds itself and the name lands, about 15 seconds, every cue mixed over a music bed.
npx shadcn@latest add https://better-design.com/registry/video/film-short-demo.jsonSound breakdown of the short demo film: four passes, keys and clicks, then pops, then whooshes and hits, then the full mix with music, each layer drawn as a labelled waveform lane.
npx shadcn@latest add https://better-design.com/registry/video/film-short-demo-breakdown.json