Skip to content

Every shot a product film needs.

The 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

1Open

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.json

Headline reveal animation: a headline arrives four ways.

npx shadcn@latest add https://better-design.com/registry/video/headline-reveal.json

Highlight 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.json

Typewriter 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.json

Rotating 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.json

Letter 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.json

Text 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.json

Title 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.json

Launch 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.json

Kinetic 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.json

Logo 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.json

Launch 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.json

Moodboard 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.json

Photo 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.json

2Show the product

The 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.json

File 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.json

Phone 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.json

Button 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.json

Screenshot 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.json

Before 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.json

UI generation animation: a product screen builds itself.

npx shadcn@latest add https://better-design.com/registry/video/skeleton-build.json

Picker 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.json

Release 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.json

Text 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.json

Chat 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.json

Prompt 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.json

Assistant 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.json

Search 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.json

Status 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.json

Phone 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.json

Laptop 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.json

Terminal 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.json

Screen recording animation: turns a raw screen capture into a finished shot.

npx shadcn@latest add https://better-design.com/registry/video/recording-shot.json

Cursor 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.json

Screenshot 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.json

Card 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.json

Photo 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.json

Team 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.json

Access 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.json

3Prove it

Numbers 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.json

Bar 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.json

Line 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.json

Progress 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.json

Odometer 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.json

Comment 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.json

Supporter 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.json

Text 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.json

Logo 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.json

4Close

The 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.json

End 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.json

5Cuts

The 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.json

Zoom 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.json

Whip 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.json

Blur 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.json

Grid 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.json

6Under and over

Grounds, 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.json

Dot 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.json

Film 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.json

Light 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.json

Burned-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.json

Glowing 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.json

7Whole films

Templates 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.json

Changelog 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.json

Onboarding 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.json

App 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.json

Launch 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.json

Short 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.json

Sound 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