Web Apps

Remotion Templates & Examples Library

Shot recipes for product motion: kinetic typography, transitions, captions, and UI entrances. Every card links to a tuned demo.tsx your agent can implement. Free TSX now; the 3 flagship shots in the $9.9 core pack.

Web Apps Mobile Apps

154 shown · 145 free TSX · 154 total

ai-stream-response

Interaction & Feature Demo

An AI response panel lands a readable summary line first, then evidence rows with status icons stream in one by one, and finally everything settles into a completed state

assemble-then-type-flyin

Light & Emphasis

On an empty dark grid, the text-free component skeleton first flies in from all sides to lock into place; then each letter of the copy spins in through 3D space to land, big title first, small labels last; once everything lands, the page takes shape

aurora-bloom-bg-flip

Light & Emphasis

Soft-focus purple-orange blobs rise from the bottom of a light gray background, then the whole base color darkens to near-black in ~0.36s and the blobs compress into afterglow; the copy syncs a blur-out sentence switch with a blur-in, leaving a gap between sentences rather than cross-fading

autolayout-gap-dial

Interaction & Feature Demo

A gap dial drives the layout — a row of link blocks with a marquee selection outline and gap annotations, badge numbers ticking up step by step while blocks get pushed apart in real time by the parameter and spring back into place; visualizing "parameter-driven layout"

avatar-bracket-carousel

UI Entrance & Showcase

"Your ___ teammates" placeholder layout — the four-corner focus brackets stay pinned mid-sentence while the avatar queue inside them spring-cycles three times vertically; avatars magnify and sharpen on the way in and shrink, fade and blur by distance on the way out, with the role label swapping in sync; the brackets breathe 7% at each switch

avatar-grid-radial-build-colorize

Data & Metrics

An 8×7 grid of small cards grows ring by ring from the center to fill the screen (content mixes initials / icon / image placeholders), then ~15% of the cards turn red at random moments to flag anomalies, with the title and legend staying put in the center

basic-3d-scene

Camera & Space

impress.js-style spatial presentation: cards scattered through 3D space at different positions/rotations/scales, camera flies between stops taking the inverse of each step's pose, final step pulls back to OVERVIEW

beat-cut-moves

Rhythm & Montage

Two variants of hard cuts as a rhythmic instrument — an accelerating hard-cut chain (halving intervals closing in on the beat) and a flash-freeze sequence (three white flashes, each cutting to a different crop)

beat-step-list-theme-cycle

Rhythm & Montage

A three-channel metronome — an adjective list on a dark field steps up one row per beat, a pill fixed at the viewport center "catches" the next word and changes color, the whole field's background swaps on the same beat; row, color, and field channels lock to the same beat point

before-after-slider-scrub

Data & Metrics

Before/after comparison slider — the "before/after" versions stack on top of each other; the divider handle first whips across, then slowly sweeps back, revealing the new version like a photo developing under the bar

bezier-source-converge-merge

UI Entrance & Showcase

Four source nodes on the left each have a thin Bézier curve connecting to the same converge point on the right; the curves first draw on from left to right in staggered order, the nodes slide along their own curve toward the converge point with a three-stage accelerating shrink to zero, accent-colored data packets glide along the paths the whole time, and after the merge completes the curves are erased from the left end, leaving only the circular badge

blur-slide

Typography & Title Cards

Title words enter one by one — y 40→0 + blur 10→0 + opacity 0→1, all three channels converging on the same outCubic easing with word gaps of ~3.5f; the subtitle follows with a stagger before the title finishes settling

bottom-push-stack-wipe

Transitions

Bottom-edge push chapter switch — the new scene, background color included, is pushed in as a full-screen block from the bottom edge, physically shoving the old scene off-screen. Consecutive chapters each carry a saturated background color, with content pinned to each chapter's own color coordinate system and moving with it

brace-expand

Typography & Title Cards

A pair of curly braces first appears small in the center, then shoots outward to ±148px while scaling up to title size; the text's clip width is strictly bound to the brace spacing, revealing it like a curtain being drawn; after settling, letter-spacing relaxes slightly

brand-frame-snap

Light & Emphasis

Brand-color picture-frame grammar — a thick solid-color frame grows around the full screen before the content, and a recording window drops inside; on mode switch the whole frame hard-flips color on the same frame and the in-window layout swaps on the same frame — one borderColor handles chapter navigation, status cue, and brand exposure

brand-ink-open

Opening & Brand

Ink crosshair draws in → wordmark stamps in letter by letter → typewriter kicker → a full second of stillness, then float up and dissolve

Unlock $9.9

bubble-swarm-takeover

Transitions

Pearl-gloss bubble swarm curtain transition — bubbles of varied sizes drift in from off-screen, growing until they fill the whole screen, while the page simultaneously "washes white". The cut is hidden at the occlusion peak, and once the bubbles scatter outward the new scene is already there; an i18n text-capsule variant can be mixed in

canvas-materialize-moves

Interaction & Feature Demo

Content "materializes onto the canvas" in two variants — panel-to-canvas row-flip cards (panel table rows fly out along an arc, morphing across containers into canvas cards) and diagram-cascade cascading tree generation (after the prompt types out, nodes pop in layer by layer, connections growing before their nodes)

card-flip-reveal

Transitions

Feature card 3D flip reveal — a card flips 180° around the Y axis, and at its thinnest side-edge moment a highlight band that moves with the angle sweeps across; the back face reveals a large conclusion number, cards scanning across the whole row one by one with staggered timing

card-flock-tumble

Transitions

Three UI page cards tumble through 3D from their thin side edges and land as a stepped stack (fully crisp throughout, smoothly continuous splines), keep slowly rotating after landing, snap-suck toward the center, burst into a single turbulent smoke ring that expands outward, and a giant wordmark sweeps across to close

card-stack

UI Entrance & Showcase

8 cards spring in one by one from below the screen, stacking into a pile; once all settle, the whole pile fans out into a 3D spread in one move — each card rotates 8° by index, shifts 34px laterally, and steps one z-layer back

carousel-3d

UI Entrance & Showcase

8 cards arranged via sin/cos into a ring of radius 190px rotating through one full turn at constant speed; each card only orbits around Y and billboards outward on its own; the front and back use the same directional texture with backface-visibility:hidden, guaranteeing every moment stays upright and never flipped; the camera stays pinned at a slight low-angle close-up the entire time

cel-flash-stomp

Typography & Title Cards

Background-flash word stomp — large words slam full-screen slightly tilted like stamps, and at each word's landing frame the background layer strobes between two solid colors for a few frames while the text stays rock-still; a UI translation of anime finisher-attack title cards

chart-live-moves

Data & Metrics

Three live-chart variants — oscilloscope-stream (the waveform writes in live at the right edge + a sudden spike), unit-dot-swarm-regroup (dots migrate in three acts to form digits), axis-rescale-shock (a new value bursts out of the frame, forcing the y-axis to rescale)

Loading…

FAQ

What is Shotpack?

Shotpack is a remote Remotion shot library. Each shot is a recipe card, an agent prompt, and tuned demo.tsx served over public URLs. Agents read llms.txt and catalog.json and implement from the TSX — nothing to install.

Are the remotion templates free?

145 free shots expose public demo.tsx. The $9.9 core pack unlocks the 3 flagship shots — a one-time buyout with no subscription.

Can I use these remotion examples with Claude or Cursor?

Yes. Copy the agent brief on any card, paste it into Claude Code, Cursor, or Codex, and the agent fetches card.md and demo.tsx over HTTP. See How to Use Remotion with Claude.

Do I still need a local Remotion skill?

No. Shotpack replaces a local skill pack with remote URLs. If you still want a local skill, the remotion-skill guide compares both paths.

154 shown · 145 free TSX · 154 total

ai-stream-response

Interaction & Feature Demo

An AI response panel lands a readable summary line first, then evidence rows with status icons stream in one by one, and finally everything settles into a completed state

assemble-then-type-flyin

Light & Emphasis

aurora-bloom-bg-flip

Light & Emphasis

autolayout-gap-dial

Interaction & Feature Demo

avatar-bracket-carousel

UI Entrance & Showcase

avatar-grid-radial-build-colorize

Data & Metrics

basic-3d-scene

Camera & Space

beat-cut-moves

Rhythm & Montage

beat-step-list-theme-cycle

Rhythm & Montage

before-after-slider-scrub

Data & Metrics

bezier-source-converge-merge

UI Entrance & Showcase

blur-slide

Typography & Title Cards

bottom-push-stack-wipe

Transitions

brace-expand

Typography & Title Cards

brand-frame-snap

Light & Emphasis

brand-ink-open

Opening & Brand

Ink crosshair draws in → wordmark stamps in letter by letter → typewriter kicker → a full second of stillness, then float up and dissolve

Unlock $9.9

bubble-swarm-takeover

Transitions

canvas-materialize-moves

Interaction & Feature Demo

card-flip-reveal

Transitions

card-flock-tumble

Transitions

card-stack

UI Entrance & Showcase

carousel-3d

UI Entrance & Showcase

cel-flash-stomp

Typography & Title Cards

chart-live-moves

Data & Metrics