Video components — titles, captions, transitions, backgrounds, templates

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

1146 components from the HyperFrames registry, remocn (Remotion, shadcn registry), varg's code2video templates and hand-picked templates from web design libraries (React Bits, Magic UI, GL Transitions, Vanta.js, Aceternity UI and more), each with a prompt that renders it frame-exact. Each installs with one command.

Captions & subtitles

• Anime JP Subtitles — Japanese captions in four anime styles from one subs.json: fansub lines with a karaoke sweep, TV telop with popping lett · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/anime-jp-subtitles && bash make.command
• Blend Difference — Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background · npx hyperframes add caption-blend-difference
• Camera Follow Captions — One sentence written across a world far larger than the frame. Each word is sized against everything already written, so · npx hyperframes add caption-camera-follow
• Clip Wipe — Left-to-right clip-path wipe reveal per word · npx hyperframes add caption-clip-wipe
• Editorial Emphasis — Dual-font system with dramatic size contrast for emphasis words · npx hyperframes add caption-editorial-emphasis
• Emoji Pop — Emoji integration with stroked text and horizontal squeeze entrance · npx hyperframes add caption-emoji-pop
• Glitch RGB — RGB chromatic aberration with CRT scanline overlay · npx hyperframes add caption-glitch-rgb
• Gradient Fill — Gradient-clipped text with elastic bounce entrance · npx hyperframes add caption-gradient-fill
• Highlight — Red background sweep behind each active word, TikTok-style · npx hyperframes add caption-highlight
• Kinetic Slam — Full-screen single-word display with alternating entrance directions · npx hyperframes add caption-kinetic-slam
• Matrix Decode — Character scramble animation before text reveal · npx hyperframes add caption-matrix-decode
• Neon Accent — Multi-color neon glow accents with wiggle drift animation · npx hyperframes add caption-neon-accent
• Neon Glow — Cyan and magenta neon glow with keyword accent colors · npx hyperframes add caption-neon-glow
• Parallax Layers — Behind-subject 3D text layering with vertical stretch effect · npx hyperframes add caption-parallax-layers
• Particle Burst — Keyword words trigger colored particle explosions · npx hyperframes add caption-particle-burst
• Pill Karaoke — Pill-shaped container with per-word karaoke color highlight · npx hyperframes add caption-pill-karaoke
• Texture — Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), conf · npx hyperframes add caption-texture
• Weight Shift — Elegant font-weight transition between caption lines · npx hyperframes add caption-weight-shift
• Caption Active Pop — The word being spoken turns to the accent colour and springs up in scale, then settles back as the voice moves on. · npx shadcn@latest add @remocn/caption-active-pop
• Caption Blur In — Each word resolves out of a soft blur the moment it is spoken, for captions that arrive quietly. · npx shadcn@latest add @remocn/caption-blur-in
• Caption Bounce In — Each word springs up into place with a little overshoot the moment it is spoken, and the phrase builds word by word. · npx shadcn@latest add @remocn/caption-bounce-in
• Caption Cube — Each new phrase turns into view as the next face of a 3D cube, the previous phrase rotating up and away on a horizontal · npx shadcn@latest add @remocn/caption-cube
• Caption Dim Progress — The whole phrase sits on screen dimmed and each word brightens the moment it is spoken, with no motion at all. · npx shadcn@latest add @remocn/caption-dim-progress
• Caption Drop — Each word falls into place from above and bounces as it lands the moment it is spoken, and the whole phrase drops out of · npx shadcn@latest add @remocn/caption-drop
• Caption Emoji — An emoji pops up above a chosen word the moment it is spoken and stays until the phrase leaves. · npx shadcn@latest add @remocn/caption-emoji
• Caption Handwrite — Each word is inked in by hand from left to right at the pace it is spoken, every word sitting at its own slight angle. · npx shadcn@latest add @remocn/caption-handwrite
• Caption Highlight Box — A solid box travels behind the word being spoken, sliding from word to word as the voice moves on. · npx shadcn@latest add @remocn/caption-highlight-box
• Caption Karaoke — Transcript captions where each word fills with colour left to right exactly as it is spoken, the whole phrase readable b · npx shadcn@latest add @remocn/caption-karaoke
• Caption Knockout — A solid plate with the words cut clean through it, each word punching out the moment it is spoken so the footage shows t · npx shadcn@latest add @remocn/caption-knockout
• Caption Label Maker — Each phrase is punched letter by letter into a strip of embossing tape at the pace it is spoken, the tape feeding out as · npx shadcn@latest add @remocn/caption-label-maker
• Caption Marker — Plain captions where the words that matter get a highlighter swipe the moment they are spoken. · npx shadcn@latest add @remocn/caption-marker
• Caption Outline — Heavy-stroked captions that stay readable over any footage, with the spoken word switching to a contrast colour and noth · npx shadcn@latest add @remocn/caption-outline
• Caption Prosody — Word size follows the delivery, so drawn-out words land large and rushed words stay small, and the rhythm of the voice i · npx shadcn@latest add @remocn/caption-prosody
• Caption Redact — The whole phrase starts blacked out like a declassified file, and each bar pulls away the moment its word is spoken. · npx shadcn@latest add @remocn/caption-redact
• Caption Rise — Each word slides up out of a mask at its baseline the moment it is spoken, with no bounce and no scale. · npx shadcn@latest add @remocn/caption-rise
• Caption Scramble — Each word arrives as random glyphs at the moment it is spoken and decodes left to right into the real letters. · npx shadcn@latest add @remocn/caption-scramble
• Caption Slice — Each word arrives cut in two, the top half sliding in from the left and the bottom from the right, locking together the · npx shadcn@latest add @remocn/caption-slice
• Caption Slot — One short line at a time, each new phrase rolling up into place as the previous one rolls out the top. · npx shadcn@latest add @remocn/caption-slot
• Caption Speaker — Dialogue captions where every phrase takes its speaker's colour, so a conversation reads like a script. · npx shadcn@latest add @remocn/caption-speaker
• Caption Split Flap — Every letter sits on its own flap tile and clatters through a few characters before landing the moment the word is spoke · npx shadcn@latest add @remocn/caption-split-flap
• Caption Stack — Kinetic captions stacked a couple of words per line, with the keyword of each page set large on its own line. · npx shadcn@latest add @remocn/caption-stack
• Caption Stamp — Plain captions where the words that matter slam down as a rubber stamp the moment they are spoken. · npx shadcn@latest add @remocn/caption-stamp
• Caption Subtitle — Classic broadcast subtitles, a whole phrase on a translucent plate, with no word-level animation at all. · npx shadcn@latest add @remocn/caption-subtitle
• Caption Teleprompter — The whole transcript scrolls smoothly through a short window with the current line centred, past lines fading above and · npx shadcn@latest add @remocn/caption-teleprompter
• Caption Timeline — The whole transcript laid out on a scrolling time strip that slides under a fixed playhead, so every pause shows up as s · npx shadcn@latest add @remocn/caption-timeline
• Caption Typewriter — Each word types out character by character at the pace it is spoken, with a caret that blinks while the speaker pauses. · npx shadcn@latest add @remocn/caption-typewriter
• Caption Underline — A bar slides under the word being spoken, travelling from word to word while the text itself stays untouched. · npx shadcn@latest add @remocn/caption-underline
• Caption Weight — The word being spoken swells from a light weight to a heavy one and relaxes as the voice moves on, with no layout shift. · npx shadcn@latest add @remocn/caption-weight
• Caption Word Pop — One large word at a time, each popping in on a spring the moment it is spoken. · npx shadcn@latest add @remocn/caption-word-pop

Beat sync

• Anime Triple Split — Three live video panels slam onto screentone paper one per beat — ink borders, slanted gutters, an impact flash and a ka · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/anime-triple-split && bash make.command
• varg Music Video — An AI music video from a song: song map with beats and word timings, a beat-grid storyboard, Seedance scenes with QA, a · git clone https://github.com/vargHQ/code2video-templates && python3 code2video-templates/varg-music-video/scripts/songmap.py song.mp3 --lyrics lyrics.txt --out songmap.json
• Beat Accent — A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay. · npx hyperframes add beat-accent
• Beat Freeze Cut — A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages. · npx hyperframes add beat-freeze-cut
• Beat Pulse Background — An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid. · npx hyperframes add beat-pulse-background
• Beat Timeline — A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters o · npx hyperframes add beat-timeline
• Icon Morph Beat — An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained p · npx hyperframes add icon-morph-beat
• Duotone Beat — A two-ink halftone portrait swaps its ink pair on every beat, with a punch-in on the downbeat and a bar indicator. · npx shadcn@latest add @remocn/duotone-beat

App & UI mockups

• Apple Notes Video — Any text typed live in an iPhone Apple Notes screen over the iOS keyboard, with key clicks, optional music and an end ca · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/apple-notes-video && bun install
• Avatar Group Hover — A distance-falloff avatar group lift with bouncy hover return · npx hyperframes add avatar-group-hover
• Camera Scan Gate — A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat. · npx hyperframes add camera-scan-gate
• Card Resize — A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel · npx hyperframes add card-resize
• Dynamic Grid — A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes · npx hyperframes add dynamic-grid
• Focus Swap — Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to · npx hyperframes add focus-swap
• Icon Swap — A scale-and-blur icon swap primitive for toolbar and action state changes · npx hyperframes add icon-swap
• Input Feedback — A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state · npx hyperframes add input-feedback
• iOS 26 Liquid Glass Home Screen — 3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notification · npx hyperframes add ios26-liquid-glass
• Keyframe Scrub Stack — A keyframe-sequenced stack of cards with offset timing and easing presets. · npx hyperframes add keyframe-scrub-stack
• Menu Morph — A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus · npx hyperframes add menu-morph
• Modal Morph — A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs · npx hyperframes add modal-morph
• Notes Reveal — A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on mea · npx hyperframes add notes-reveal
• Notes Typing — The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measure · npx hyperframes add notes-typing
• Page Slide — A transitions.dev-inspired page slide primitive with outgoing and incoming panels · npx hyperframes add page-slide
• Settings Toggle Flow — A composed settings flow with preference rows, toggle switches, and active-state feedback · npx hyperframes add settings-toggle-flow
• Signup Flow — A composed signup flow with social action, email field, password field, and submit button · npx hyperframes add signup-flow
• Success Check — A success check primitive with ring pop, path draw, and subtle rotate blur · npx hyperframes add success-check
• Tabs Slide Indicator — A pill indicator transition that slides between active tabs · npx hyperframes add tabs-slide-indicator
• Tilt Card — A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax · npx hyperframes add tilt-card
• Toggle Flip — An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press · npx hyperframes add toggle-flip
• 3D UI Reveal — Perspective 3D reveal animation for UI elements · npx hyperframes add ui-3d-reveal
• UI Focus Zoom — A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and hold · npx hyperframes add ui-focus-zoom
• Vector Editor Rig — A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, · npx hyperframes add vector-editor-rig
• UI Accordion — A disclosure whose opened/closed state is a pure function of the timeline; the panel reveal, chevron, and background are · npx shadcn@latest add @remocn/accordion
• UI AI Prompt Flow — An AI prompt composition: a prompt types into the field, the Generate button runs hover → press → loading, a skeleton sh · npx shadcn@latest add @remocn/ai-prompt-flow
• UI Alert Dialog — A modal alert dialog whose opened/closed state is a pure function of the timeline; the backdrop dim and popup zoom are k · npx shadcn@latest add @remocn/alert-dialog
• UI Button — A button whose idle/hover/press/loading/success state is a pure function of the timeline; the loading state composes the · npx shadcn@latest add @remocn/button
• UI Caret — A blinking text caret — a controlled vertical bar, or a pure motion atom that blinks deterministically from useCurrentFr · npx shadcn@latest add @remocn/caret
• UI Checkbox — A checkbox whose checked/unchecked state is a pure function of the timeline; the box fill, border, and checkmark draw ar · npx shadcn@latest add @remocn/checkbox
• UI Combobox — A combobox whose opened/closed state is a pure function of the timeline; the panel fade/scale/lift are keyframed presets · npx shadcn@latest add @remocn/combobox
• UI Command Menu — A ⌘K command palette whose opened/closed state is a pure function of the timeline; the panel zoom + backdrop dim are dia · npx shadcn@latest add @remocn/command-menu
• UI Command Menu Item — A command-palette row whose idle/hover/press/selected state is a pure function of the timeline. Leading icon + label + t · npx shadcn@latest add @remocn/command-menu-item
• UI Context Menu — A right-click context menu whose opened/closed state is a pure function of the timeline; the panel scales from its top-l · npx shadcn@latest add @remocn/context-menu
• UI Dialog — A modal dialog whose opened/closed state is a pure function of the timeline; the backdrop dim and popup zoom are keyfram · npx shadcn@latest add @remocn/dialog
• UI Drawer — A bottom panel whose opened/closed state is a pure function of the timeline; the backdrop dim and bottom-edge slide-up a · npx shadcn@latest add @remocn/drawer
• UI Dropdown Menu — A dropdown menu whose opened/closed state is a pure function of the timeline; the trigger reuses the Button primitive an · npx shadcn@latest add @remocn/dropdown-menu
• UI Dropdown Menu Item — A dropdown menu action row whose idle/hover/press state is a pure function of the timeline; the row background and label · npx shadcn@latest add @remocn/dropdown-menu-item
• UI Field — A static layout family for composing labeled form controls, modeled on shadcn's Field: FieldGroup ▸ Field ▸ FieldLabel / · npx shadcn@latest add @remocn/field
• UI Input — A text input whose idle/hover/active/typing/invalid state is a pure function of the timeline; the focus ring, border, ca · npx shadcn@latest add @remocn/input
• UI Popover — A popover/hover-card whose opened/closed state is a pure function of the timeline. The Popover renderer is a pure functi · npx shadcn@latest add @remocn/popover
• UI Radio — A radio whose checked/unchecked state is a pure function of the timeline; the ring border and inner dot pop are keyframe · npx shadcn@latest add @remocn/radio
• UI Resizable — Two panels split by a draggable handle, where the split ratio is a numeric channel plus a handle idle/hover/press channe · npx shadcn@latest add @remocn/resizable
• Search Reveal — Expanding construction circles snap into a search pill, type editable text, and reveal an abstract graphic panel. · npx shadcn@latest add @remocn/search-reveal
• UI Select — A select whose opened/closed state is a pure function of the timeline; the trigger reuses the Button primitive and the r · npx shadcn@latest add @remocn/select
• UI Select Item — A select option row whose idle/hover/press/selected state is a pure function of the timeline; the row background, label · npx shadcn@latest add @remocn/select-item
• UI Select Menu — A vertical option list where exactly one row is highlighted; the highlight bar and left accent slide smoothly between ro · npx shadcn@latest add @remocn/select-menu
• UI Settings Toggle Flow — A two-column settings card: the card and its controls blur-in, then the cursor flips a switch, opens a select, drags a l · npx shadcn@latest add @remocn/settings-toggle-flow
• UI Sheet — A side panel whose opened/closed state is a pure function of the timeline; the backdrop dim and right-edge slide-in are · npx shadcn@latest add @remocn/sheet
• UI Signup Flow — A signup card composition: a real shadcn-style card (header, labeled Full Name / Email / Password / Confirm fields, prim · npx shadcn@latest add @remocn/signup-flow
• UI Skeleton — A skeleton→content crossfade whose loading/loaded state is a pure function of the timeline. The Skeleton renderer is pur · npx shadcn@latest add @remocn/skeleton
• UI Skeleton Block — A shimmer placeholder block — a motion atom (spinner pattern). A directional highlight gradient sweeps across determinis · npx shadcn@latest add @remocn/skeleton-block
• UI Slider — A slider whose fill is a numeric value channel plus a thumb idle/hover/press channel (dual-channel value-channel deviati · npx shadcn@latest add @remocn/slider
• UI Switch — A switch whose checked/unchecked state is a pure function of the timeline; the track fill and sliding thumb are keyframe · npx shadcn@latest add @remocn/switch
• UI Tabs — A tabs widget whose active-tab state is a pure function of the timeline; the sliding indicator, label colors, and panel · npx shadcn@latest add @remocn/tabs
• UI Toast — A toast notification whose hidden/visible state is a pure function of the timeline. The Toast renderer is a pure functio · npx shadcn@latest add @remocn/toast
• UI Toggle Group — A segmented control whose active value is a pure function of the timeline; a raised thumb SLIDES between segments (posit · npx shadcn@latest add @remocn/toggle-group
• UI Tooltip — A tooltip whose hidden/visible state is a pure function of the timeline. The Tooltip renderer is a pure function of a To · npx shadcn@latest add @remocn/tooltip
• v0 — Animated Vercel v0 composer — types a prompt into the dark textarea and the mic button morphs into a send button. Dark/l · npx shadcn@latest add @remocn/v0
• Animated Background — A rounded highlight pill slides between tab items as the active tab changes · npx motion-primitives@latest add animated-background

Product showcases

• Card Catalog Explainer — A 56 s explainer: a wall of code-made videos, then one request travels through a card catalog to the finished MP4. Point · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/card-catalog-explainer && bash make.command
• App Showcase — Fitness app product showcase with three floating smartphone screens · npx hyperframes add app-showcase
• HeyGen Avatar Promo Card — A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout · npx hyperframes add heygen-avatar-promo-card
• Offset Path Traveler — A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit. · npx hyperframes add offset-path-traveler
• Play Mode — Playful elastic animations · npx hyperframes init my-video --example play-mode
• Product Promo — Multi-scene product showcase with SVG assets · npx hyperframes init my-video --example product-promo
• Product Turntable — A product turns a full revolution on a studio plinth in a seamless loop. Drop in a GLB or glTF model, or keep the built- · npx hyperframes add product-turntable
• Soft Blob Touch — A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with · npx hyperframes add soft-blob-touch
• State Chip Rail — A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, · npx hyperframes add state-chip-rail
• Sticky Mock Swap — A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit besi · npx hyperframes add sticky-mock-swap
• Tracing Beam — A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence. · npx hyperframes add tracing-beam
• Typed Prompt — A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-r · npx hyperframes add typed-prompt
• Velocity Throw Snap — A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center · npx hyperframes add velocity-throw-snap
• Vignelli — Bold typography with red accents · npx hyperframes init my-video --example vignelli
• Product Showcase — An independent 26.7-second editorial product film with forest-green accents, original photography, seven editable demos, · npx shadcn@latest add @remocn/launch-anything

Devices & mockups

• iPhone Duo Fold — Your screens — an image, a screen recording, an HTML page or a URL — on the foldable iPhone Duo, unfolding in 3D with it · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/iphone-duo-fold && bun render.ts --screen app.png
• Browser Device Stage — A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/vid · npx hyperframes add browser-device-stage
• Device Frame Stage — A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto · npx hyperframes add device-frame-stage
• Multi Device Splay — Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle · npx hyperframes add multi-device-splay
• Parallax Device Dive — A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the fra · npx hyperframes add parallax-device-dive
• iPhone & MacBook 3D Showcase — Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product · npx hyperframes add vfx-iphone-device
• iPhone — Dark iPhone frame with Dynamic Island and side buttons, a video playing edge to edge on its screen · npx shadcn@latest add @magicui/iphone
• Safari — Dark Safari browser window with traffic lights and an address bar, a video playing in the page area · npx shadcn@latest add @magicui/safari
• Macbook Scroll — A CSS-built MacBook whose lid tilts open and whose screen image lifts toward the viewer · npx shadcn@latest add @aceternity/macbook-scroll

Logo stings

• Liquid Thorn Logo — Any word as a black-metal chrome logo that a cursor smears with a WebGL fluid. · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/liquid-thorn-logo && bun render.ts --text "WORD"
• Extruded Logo — Beveled 3D letters flip up one by one, the word swings so light runs across the bevels, then settles for a readable hold · npx hyperframes add extruded-logo
• Frost Sequence Camera Orbit — An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. · npx hyperframes add frost-sequence-camera-orbit
• Gooey Split — A dot splits into a three-dot menu with a gooey metaball neck, spins into a swirl mark under directional shutter motion · npx hyperframes add gooey-split
• Logo Brand Close — A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an option · npx hyperframes add logo-brand-close
• Logo Sting — A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still. · npx hyperframes add logo-sting
• Scan Band — A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the m · npx hyperframes add scan-band
• Wordmark Tiles — A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP · npx hyperframes add wordmark-tiles
• Accordion Unfold — A tight paper zigzag unfolds sideways into a flat card with the logo printed across it. · npx shadcn@latest add @remocn/accordion-unfold
• Anamorphic Flare — A point of light grows into a cinematic anamorphic streak that sweeps the frame and reveals the logo in its wake. · npx shadcn@latest add @remocn/anamorphic-flare
• Brand Guidelines — An independent 17.9-second identity film with a geometric mark, sliding palette, kinetic type specimens, and original ob · npx shadcn@latest add @remocn/brand-guidelines
• Brick Mosaic — Toy bricks drop in row by row from the bottom with a tiny bounce, rebuilding a pixel-art logo on a baseplate. · npx shadcn@latest add @remocn/brick-mosaic
• Inflate — A deflated red sliver puffs up like a balloon toy, overshoots, squashes wide and settles into a glossy rounded mark. · npx shadcn@latest add @remocn/inflate
• Liquid Fill — A drop falls into an outlined mark and liquid rises with a sloshing, damping surface and bubbles until the mark is solid · npx shadcn@latest add @remocn/liquid-fill
• Neon Sign — A glass neon tube stutters alive segment by segment with a hot white core and wall glow, buzzes off once, then holds lit · npx shadcn@latest add @remocn/neon-sign
• Orbit Lock — Three moons ride tilted, shrinking orbits into a red core that bursts into a ring flash and springs the logo into place. · npx shadcn@latest add @remocn/orbit-lock
• Puzzle Snap — Geometric pieces spin in from scattered positions and magnet-snap into a mark with a spark burst, then the mark slides a · npx shadcn@latest add @remocn/puzzle-snap
• Spotlight — A soft spotlight cone searches the dark stage, overshoots, and lands on the logo before the house lights lift. · npx shadcn@latest add @remocn/spotlight
• Metallic Paint — A logo filled with liquid chrome that ripples and throws rainbow fringes along its edges · npx shadcn@latest add @react-bits/MetallicPaint-JS-CSS

Galleries & carousels

• Stamp Carousel — An iPhone swiping through your pictures as perforated postage stamps, the screen colour following each stamp. MP4 on a b · git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/stamp-carousel && bash make.command
• Circle Carousel 1 — Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 im · npx hyperframes add carousel-circle-1
• Circle Carousel 2 — Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 im · npx hyperframes add carousel-circle-2
• Circle Carousel 3 — Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 im · npx hyperframes add carousel-circle-3
• Circle Carousel 4 — Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 im · npx hyperframes add carousel-circle-4
• Circle Carousel 5 — Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 im · npx hyperframes add carousel-circle-5
• Orbit Carousel 1 — Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 i · npx hyperframes add carousel-orbit-1
• Orbit Carousel 2 — Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 i · npx hyperframes add carousel-orbit-2
• Orbit Carousel 3 — Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 i · npx hyperframes add carousel-orbit-3
• Orbit Carousel 4 — Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 i · npx hyperframes add carousel-orbit-4
• Orbit Carousel 5 — Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 i · npx hyperframes add carousel-orbit-5
• Path Carousel 1 — Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path sty · npx hyperframes add carousel-path-1
• Path Carousel 2 — Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path sty · npx hyperframes add carousel-path-2
• Path Carousel 3 — Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path sty · npx hyperframes add carousel-path-3
• Path Carousel 4 — Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path sty · npx hyperframes add carousel-path-4
• Path Carousel 5 — Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path sty · npx hyperframes add carousel-path-5
• Text + Circle Carousel 1 — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to · npx hyperframes add carousel-text-circle-1
• Text + Circle Carousel 2 — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to · npx hyperframes add carousel-text-circle-2
• Text + Circle Carousel 3 — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to · npx hyperframes add carousel-text-circle-3
• Text + Circle Carousel 4 — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to · npx hyperframes add carousel-text-circle-4
• Text + Circle Carousel 5 — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to · npx hyperframes add carousel-text-circle-5
• Vision Carousel 1 — A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 1 · npx hyperframes add carousel-vision-1
• Vision Carousel 2 — A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 1 · npx hyperframes add carousel-vision-2
• Vision Carousel 3 — A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 1 · npx hyperframes add carousel-vision-3
• Vision Carousel 4 — A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 1 · npx hyperframes add carousel-vision-4
• Vision Carousel 5 — A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 1 · npx hyperframes add carousel-vision-5
• Cinemagraph — A still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, stea · npx hyperframes add cinemagraph
• Cuboid Carousel — A chain of bevelled cuboids rides a travelling wave as a content carousel. · npx hyperframes add cuboid-carousel
• Gallery Tunnel — An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with s · npx hyperframes add gallery-tunnel
• Perspective Marquee — A 3D tilted marquee with depth feel as items roll toward the horizon. · npx hyperframes add perspective-marquee
• Screen Flow Carousel — Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a veloc · npx hyperframes add screen-flow-carousel
• Share-Sheet Carousel — A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the · npx hyperframes add share-sheet-carousel
• Polaroid — An instant-photo frame with a handwritten caption for video, images, or live compositions. · npx shadcn@latest add @remocn/polaroid
• Reel — A fixed centered card where images stack on the z-axis and each blooms open over the last via a centre-out mask. · npx shadcn@latest add @remocn/reel
• Marquee — Two rows of testimonial cards drifting sideways in opposite directions, fading out at the left and right edges · npx shadcn@latest add @magicui/marquee
• 3D Marquee — A tilted wall of screenshots seen at an isometric angle, its columns scrolling up and down · npx shadcn@latest add @aceternity/3d-marquee
• On-Scroll 3D Grid Animations — Image grids tilted in perspective that rotate, spread and fly toward the camera between big titles · git clone https://github.com/codrops/Scroll3DGrid
• Circling Elements — A ring of photos orbiting a centre point, every image staying upright as the circle turns · npx shadcn add @fancy/circling-elements
• Marquee Along SVG Path — A ribbon of colourful tiles snaking along a looping curve across the frame · npx shadcn add @fancy/marquee-along-svg-path
• Simple Marquee — Rows of gradient tiles scrolling sideways at different speeds under a serif title · npx shadcn add @fancy/simple-marquee
• Box Carousel — Photos on the faces of a 3D box that turns to bring the next image forward · npx shadcn add @fancy/box-carousel
• Infinite Slider — A row of logos glides sideways forever in a seamless loop · npx motion-primitives@latest add infinite-slider

Camera moves

• varg Previz — A three.js grey-box previz of every shot on the timeline — auto cameras from storyboard words, a posable mannequin — the · git clone https://github.com/vargHQ/code2video-templates && python3 code2video-templates/varg-previz/scripts/new_previz.py my-previz
• Dolly Zoom (Vertigo Shot) — Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its · npx hyperframes add camera-dolly-zoom
• Camera Rig Depth Stack — A 3D camera-rig-style card stack with depth, parallax, and focus shift. · npx hyperframes add camera-rig-depth-stack
• Camera Shake — Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, cl · npx hyperframes add camera-shake
• Cinematic Zoom — Shader transition with dramatic zoom blur · npx hyperframes add cinematic-zoom
• Drift Hold — A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep. · npx hyperframes add drift-hold
• Filmed Screen — Your scene, filmed off a screen: perspective, depth of field that follows an element you name, LED sub-pixels and per-sh · npx hyperframes add filmed-screen
• Focus Rack — Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax · npx hyperframes add focus-rack
• Orbit Card — A single feature card orbits a dot sphere on approved Blender camera motion. · npx hyperframes add orbit-card
• Pan Stations — A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the n · npx hyperframes add pan-stations
• Parallax Unzoom — Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-z · npx hyperframes add parallax-unzoom
• Parallax Zoom — Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition · npx hyperframes add parallax-zoom
• Pull Back Reveal — A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that reconte · npx hyperframes add pull-back-reveal
• Push In — A centered headline gains focus through one slow, continuous camera push and a gentle fade out. · npx hyperframes add push-in
• Rack Focus — A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the · npx hyperframes add rack-focus
• Scroll Camera Story — A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth · npx hyperframes add scroll-camera-story
• Camera Punch-In — Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an ed · npx hyperframes add yt-camera-move
• Camera Lens — Put a scene behind real glass: resolution falls off toward the corners, highlights bloom through the optics, colour frin · npx shadcn@latest add @remocn/camera-lens
• Cloth Reveal — A satin sheet draped over the content is yanked from one corner, folding and fluttering as a simulated cloth before it c · npx shadcn@latest add @remocn/cloth-reveal
• Dolly Zoom — The vertigo shot: a perspective corridor with a red door stretches deeper while the subject in the center holds its exac · npx shadcn@latest add @remocn/dolly-zoom
• Exploded View — An isometric stack of slabs springs apart with leader lines and labels, holds, then clicks back together. · npx shadcn@latest add @remocn/exploded-view
• Gravity Pile — Seeded circles, squares and triangles rain down, bounce off the floor and each other, and settle into a heap. · npx shadcn@latest add @remocn/gravity-pile
• Impact Shake — Heavy content slams in from above with squash, a damped camera jolt, a two-frame RGB split and dust puffs kicking out si · npx shadcn@latest add @remocn/impact-shake
• Parallax Depth — A flat landscape built from depth layers trucks sideways with a gentle push-in, near layers sliding faster than far ones · npx shadcn@latest add @remocn/parallax-depth
• Tiny Planet — A seeded flat skyline bends into a tiny planet through a polar remap, then slowly spins beside a red sun. · npx shadcn@latest add @remocn/tiny-planet
• Turntable — A product card spins on an invisible turntable through front, edge and back in real 3D, with face shading and a breathin · npx shadcn@latest add @remocn/turntable

Cursors & clicks

• Agent Cursor — An AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small · npx hyperframes add agent-cursor
• Annotate Cursor — A marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid · npx hyperframes add cursor-annotate
• Context Menu Cursor — A cursor right-clicks a file, a context menu blooms from its tip, the hover highlight tracks the item under it, and the · npx hyperframes add cursor-context-menu
• Drag and Drop Cursor — A cursor grabs a task card, lifts and tilts it into its motion, carries it in lockstep to an empty column, drops it with · npx hyperframes add cursor-drag-drop
• Cursor Glyph Trail — A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly · npx hyperframes add cursor-glyph-trail
• Marquee Select Cursor — A cursor drags a selection rectangle across a photo grid; each tile rings and pops a check the frame the rectangle touch · npx hyperframes add cursor-marquee-select
• Text Select Cursor — An arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format · npx hyperframes add cursor-text-select
• Zoom Follow Cursor — Screen-recording auto-zoom: the camera pushes in toward each upcoming click, trails the cursor on a smooth spring, marks · npx hyperframes add cursor-zoom-follow
• Dart Cursor — A bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on · npx hyperframes add dart-cursor
• Gesture Tap — A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away. · npx hyperframes add gesture-tap
• Lottie Character Walk — A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the · npx hyperframes add lottie-character-walk
• Magnetic Cursor — A soft dot pointer glides across an editor toolbar, is pulled into each button and morphs into its rounded hover plate w · npx hyperframes add magnetic-cursor
• Multiplayer Cursors — Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center z · npx hyperframes add multiplayer-cursors
• Oversized Cursor — The look-here pointer for a video: the macOS arrow at 3.5x its normal size lands its tip on one control, clicks it on, s · npx hyperframes add oversized-cursor
• Press Ripple — A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lo · npx hyperframes add press-ripple
• Pull to Refresh — A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicato · npx hyperframes add pull-to-refresh
• Spotlight Card — A card with a scripted cursor spotlight and lit border. · npx hyperframes add spotlight-card
• Swipe Rail — A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card. · npx hyperframes add swipe-rail
• Touch Indicator — A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass on the frame the host target respo · npx hyperframes add touch-indicator
• Pointer Circle + Countdown — Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick · npx hyperframes add yt-circle-pointer
• UI Cursor — An animated cursor that moves between waypoints, clicks (ripple), and drags. The Cursor renderer is a pure function of a · npx shadcn@latest add @remocn/cursor
• Cursor Gravity — A rounded triangular cursor tugs a button out of the screen edge with pulsed elastic resistance. · npx shadcn@latest add @remocn/cursor-gravity
• Keystroke — Physical keycaps rise in for each shortcut, press in real order with the modifiers held while the letter taps, spring ba · npx shadcn@latest add @remocn/keystroke
• Simulated Cursor — Animated mouse cursor moving between waypoints with click ripple feedback. · npx shadcn@latest add @remocn/simulated-cursor

Chats & messages

• AI Answer Rank — Is your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three pic · npx hyperframes add ai-answer-rank
• AI Chat Reveal — A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured · npx hyperframes add ai-chat-reveal
• Chat Message — One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum swi · npx hyperframes add chat-message
• Chat Thread — The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles · npx hyperframes add chat-thread
• ChatGPT Exchange — A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls · npx hyperframes add chatgpt-exchange
• Claude Exchange — A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answe · npx hyperframes add claude-exchange
• Message Thread Reveal — A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delive · npx hyperframes add message-thread-reveal
• Thread Message Stack — A source-owned editable conversation stack with arbitrary incoming and outgoing messages · npx hyperframes add thread-message-stack
• Typing Indicator — The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, ho · npx hyperframes add typing-indicator
• UI Chat Flow — A messaging composition: an outgoing message types into the composer, the send button presses, and the bubble rises in; · npx shadcn@latest add @remocn/chat-flow
• ChatGPT — Animated ChatGPT composer — types a prompt into the pill input, the blue voice button morphs into a send button, and the · npx shadcn@latest add @remocn/chat-gpt
• Chat to Preview Layout — Two-column layout where chat shrinks and preview expands. · npx shadcn@latest add @remocn/chat-to-preview-layout
• Claude Chat — Animated Claude chat input — types a prompt character-by-character and the waveform button morphs into a terracotta send · npx shadcn@latest add @remocn/claude-chat
• UI iMessage Chat Flow — An iMessage-styled messaging composition: gray incoming and blue outgoing bubbles with tails, an in-thread typing bubble · npx shadcn@latest add @remocn/imessage-chat-flow
• UI Message Bubble — A chat message bubble whose hidden/visible state is a pure function of the timeline. The renderer is a pure function of · npx shadcn@latest add @remocn/message-bubble
• UI Telegram Chat Flow — A Telegram-styled messaging composition: tailed bubbles (white incoming, blue outgoing) with in-bubble timestamps and de · npx shadcn@latest add @remocn/telegram-chat-flow
• UI Typing Indicator — A continuous typing animation: N dots bounce with a staggered sine wave. A motion atom — it reads the frame and takes co · npx shadcn@latest add @remocn/typing-indicator

Charts & data viz

• Animated Bar Chart — A compact data card with deterministic bar growth and value callouts. · npx hyperframes add animated-bar-chart
• Bar Chart Race — Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the acce · npx hyperframes add bar-chart-race
• Chart Story — One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line wi · npx hyperframes add chart-story
• Data Chart — Animated bar + line chart with staggered reveal, NYT-style typography, and value labels · npx hyperframes add data-chart
• Decline Chart — A metric line draws downward as its value counts down and the ambient background darkens in lockstep. · npx hyperframes add decline-chart
• Minimal Line Graph — One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, col · npx hyperframes add mk-line-graph
• Hairline Arc Gauge — Thin circular gauge that draws on while its percentage counts up; one helper call drives both · npx hyperframes add mk-usage-arc
• NYT Graph — Animated data chart in print editorial style · npx hyperframes init my-video --example nyt-graph
• Week in Merges — Each author's avatar bounces across their row at a speed set by how many pull requests they merged · npx hyperframes add week-in-merges
• Animated Bar Chart — Bars spring up from the baseline in a staggered cascade. · npx shadcn@latest add @remocn/animated-bar-chart
• Animated Line Chart — Line chart whose SVG path draws on from left to right with a leading dot. · npx shadcn@latest add @remocn/animated-line-chart

Stats & KPIs

• Apple Money Count — Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. · npx hyperframes add apple-money-count
• Count Up — A token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse. · npx hyperframes add count-up
• Count-Up Stat Card — Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark scheme · npx hyperframes add mk-progress-stat
• Number Wheel — A rolling digit counter primitive for metrics, prices, counts, and scoreboards · npx hyperframes add number-wheel
• Bauhaus Build — Flat Bauhaus circles, arcs, squares and bars tumble corner over corner on a hidden grid into an asymmetric frieze, then · npx shadcn@latest add @remocn/bauhaus-build
• Hand Count — A number that counts up in stop-motion poses, rewritten by hand at every pose and freezing still once it lands. · npx shadcn@latest add @remocn/hand-count
• Isometric Build — An isometric tile grid springs up row by row into a stepped block sculpture with one accent tower, then holds. · npx shadcn@latest add @remocn/isometric-build
• Number Wheel — Mechanical odometer that rolls an integer up or down to its target, direction inferred from the values. · npx shadcn@latest add @remocn/number-wheel
• Rolling Number — Odometer where every place rolls at its own speed, new places rising into view, settling exactly on the target value. · npx shadcn@latest add @remocn/rolling-number
• Count Up — A number ticking up from zero to its target, easing to a stop on the final value · npx shadcn@latest add @react-bits/CountUp-JS-CSS
• Number Ticker — A large number counts up from zero and eases to a stop on its target value · npx shadcn@latest add @magicui/number-ticker
• Basic Number Ticker — A large percentage counting up from zero to its target, easing out on the final number · npx shadcn add @fancy/basic-number-ticker
• Sliding Number — An odometer number whose digits roll on little wheels up to their final value · npm install @animate-ui/react motion
• Animated Number — A big monospace number springs up from zero to its target value, digits rolling as it climbs · npx motion-primitives@latest add animated-number
• Sliding Number — Clock digits slide vertically into place as each second ticks over · npx motion-primitives@latest add sliding-number
• Counter — A bold number spins up from zero and slows to a stop on its target · npx shadcn@latest add https://animata.design/r/text/counter.json

Callouts & annotations

• Arc Motion Path — A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation. · npx hyperframes add arc-motion-path
• Hand-Drawn Arrow — Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/s · npx hyperframes add hw-arrow
• Hand-Drawn Boil — Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through · npx hyperframes add hw-boil
• Hand-Drawn Box Label — Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands · npx hyperframes add hw-box-label
• Scribble Callout Circle — Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WI · npx hyperframes add hw-callout-circle
• Sketched Frame — Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images in · npx hyperframes add hw-frame
• Text Along a Path — Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input · npx hyperframes add hw-path-text
• Scribble Transition — Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the s · npx hyperframes add hw-scribble-transition
• Speech Bubble — Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per cha · npx hyperframes add hw-text-cloud
• Handwritten Title — Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the · npx hyperframes add hw-title
• Squiggle Marks — Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on · npx hyperframes add hw-underline
• Handwritten Write-On Title — True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke orde · npx hyperframes add hw-write-title
• Inline Highlight — A clean marker-style inline highlight that animates behind text using a CSS scale variable · npx hyperframes add inline-highlight
• Marker Checklist Card — A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist · npx hyperframes add marker-checklist-card
• Marker Highlight — Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the em · npx hyperframes add marker-highlight
• Word-Sweep Highlight — A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover · npx hyperframes add mk-callout-highlight
• Vox Annotate — The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to · npx hyperframes add vox-annotate
• Feathered Spotlight — Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotligh · npx hyperframes add yt-feather-highlight
• Blueprint — The product wipes left to right into a technical drawing: blueprint grid, white linework, dimension lines with ticks, la · npx shadcn@latest add @remocn/blueprint
• Handwrite — Handwritten text laid down letter by letter on a quantized stop-motion clock, each glyph keeping its own slant and basel · npx shadcn@latest add @remocn/handwrite
• Ink Arrow — A hand-drawn brush arrow that sweeps itself from one point to another, thickening into the head that pops on the final p · npx shadcn@latest add @remocn/ink-arrow
• Ink Underline — A hand-dragged brush underline that sweeps itself across in a few stop-motion poses, thinning to a dry tail. · npx shadcn@latest add @remocn/ink-underline
• Inline Highlight — Animates one word inside a sentence from a base color to a brand color. · npx shadcn@latest add @remocn/inline-highlight
• Marker Highlight — Colored marker block draws behind a phrase as the text color shifts. · npx shadcn@latest add @remocn/marker-highlight
• Scribble Circle — A brush circle swept around a region of the frame, opening thin and closing thick, with grain breaking up the dry openin · npx shadcn@latest add @remocn/scribble-circle
• Squiggle — A flat line draws itself along a straight course as a traveling wave whose crests swim forward and calm down as the head · npx shadcn@latest add @remocn/squiggle
• Text Highlighter — Marker-style highlight strokes sweeping behind key phrases in a paragraph, one phrase after another · npx shadcn add @fancy/text-highlighter

Generative & ASCII

• ASCII Render Pass — A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws · npx hyperframes add ascii-render-pass
• ASCII Trail Reveal — An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel. · npx hyperframes add ascii-trail-reveal
• Fractal Noise — Soft grey fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, · npx hyperframes add fractal-noise
• Gabor Noise — Grey streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders. · npx hyperframes add gabor-noise
• Worley Noise — A field of drifting cells, light at their centres and dark at their edges. A WebGPU shader from the Shaders library (sha · npx hyperframes add worley-noise
• ASCII Render — Redraw a live scene as ASCII: the frame divides into glyph cells and each one becomes the character matching the brightn · npx shadcn@latest add @remocn/ascii-render
• Flow Field — Hundreds of particles ride a seeded noise field, leaving silky fading trails in a seamless loop. · npx shadcn@latest add @remocn/flow-field
• Life Grid — Conway's Game of Life plays out on a seeded grid, with newborn cells flashing in the accent. · npx shadcn@latest add @remocn/life-grid
• Phyllotaxis — Seeds spiral out at the golden angle into a sunflower head, then an accent Fibonacci arm pulses outward. · npx shadcn@latest add @remocn/phyllotaxis
• String Art — Threads string a ring of pins times-table style while the multiplier morphs from cardioid to nephroid and beyond. · npx shadcn@latest add @remocn/string-art
• Topo Lines — Topographic contour lines around a few seeded peaks breathe and shift in a seamless loop, one contour picked out in the · npx shadcn@latest add @remocn/topo-lines
• Truchet Flip — Quarter-circle Truchet tiles snap a quarter turn as a wave crosses the grid, rerouting continuous lines until they settl · npx shadcn@latest add @remocn/truchet-flip
• Dither — Grey noise waves pushed through a retro ordered dither, the pixel grid shimmering as the pattern rolls · npx shadcn@latest add @react-bits/Dither-JS-CSS
• Globe — A pink wireframe globe ringed with spikes, turning slowly off-centre over a faint net on dark purple · npm i vanta
• Net — Pink nodes and connecting lines forming a loose 3D mesh that rotates slowly on dark purple · npm i vanta
• Trunk — Dozens of thin wobbling rings around an empty centre, like tree rings drawn in one pen · npm i vanta
• Topology — Thin green strands streaming along a flow field, combing into a contour-like texture on dark teal · npm i vanta
• Dots — A spiky orange starburst of lines turning above a faint rolling grid of dots on charcoal · npm i vanta
• Links — White dots drifting on black, joined by thin lines whenever two come close, forming a shifting network · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Triangles — A drifting point network on black whose links fill in as translucent white triangles, like a moving low-poly mesh · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Sea Anemone — Rainbow-colored trails spiralling out of the centre and curling back, like a swaying sea anemone on black · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Matrix — Columns of green glyphs raining down a black screen, each trail fading behind its bright leading character · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Glyph Background — A dark grid of random monospace characters lit by slow, drifting glows that flicker letters into view · npx shadcn@latest add @animate-ui/backgrounds-glyph
• Topography Background — Thin contour lines of a noise terrain rising from flat and slowly reshaping, like a breathing map · npx shadcn@latest add @animate-ui/backgrounds-topography

Backgrounds & gradients

• Aurora — Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT). · npx hyperframes add aurora
• Aurora Drift — Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette. · npx hyperframes add aurora-drift
• Flowing Gradient — Bands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders · npx hyperframes add flowing-gradient
• Mesh Gradient — Soft coral, orange and violet fields blend and drift in a mesh gradient. A WebGPU shader from the Shaders library (shade · npx hyperframes add mesh-gradient
• Mesh Gradient Background — A render-safe mesh gradient using animated radial layers. · npx hyperframes add mesh-gradient-bg
• Minimal Gradient Background — Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, · npx hyperframes add mk-background
• Background Emphasis Type — Oversized low-contrast background word drifting slowly behind the subject — typography as texture · npx hyperframes add mk-emphasis-type
• Rounded Media Grid — N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in e · npx hyperframes add mk-placeholder-grid
• Anamorphic Streak Flare — A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema len · npx hyperframes add vfx-anamorphic-flare
• Liquid Background — Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surfa · npx hyperframes add vfx-liquid-background
• Backdrop — Configurable full-frame background (color / gradient / image / live component) with Screen Studio-style padding and a ro · npx shadcn@latest add @remocn/backdrop
• Retro Grid — Synthwave floor grid in perspective rolling toward the viewer under a pink-to-orange title · npx shadcn@latest add @magicui/retro-grid
• Flickering Grid — A grid of tiny grey squares twinkling at random brightness, like a dim LED wall · npx shadcn@latest add @magicui/flickering-grid
• Warp Background — A card floats in a perspective tunnel while coloured light streaks race along the grid walls · npx shadcn@latest add @magicui/warp-background
• Ripple — Soft concentric rings around a centred word, breathing in and out in a staggered wave · npx shadcn@latest add @magicui/ripple
• Waves — A glossy faceted blue water surface rolling in slow swells, filling the frame edge to edge · npm i vanta
• Rings — Neon arcs in green, pink, orange and blue orbiting a tangled core of rings, tilted in 3D on charcoal · npm i vanta
• Halo — A grainy diagonal band of lavender and ice blue sweeping through hot orange-red · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Pensive — A grainy cyan and violet spiral slowly uncoiling on a periwinkle field · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Mint — Pale mint and aqua ripples washing across a bright water surface, no grain · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Interstella — A dark close-up sphere with an amber glow on one side and a teal rim of light sweeping in, grainy · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Nighty night — Indigo and lavender swells rising out of near-black under heavy film grain · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Viola — A saturated amber and yellow field with a blue-violet hollow slowly drifting through it · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Universe — Violet and coral currents flowing out of black, like a slow-moving nebula · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Sunset — Peach, orange and hazy blue bands drifting diagonally, like a sunset through frosted glass · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Mandarin — A single-hue tangerine surface rippling from bright orange into burnt red · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Cotton Candy — Barely-there pastel white and ice-blue ripples drifting across an almost paper-white frame · npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
• Aurora Background — Blurred blue, grey and amber light streaks drift sideways across a dark frame like a slow aurora · npx shadcn@latest add @aceternity/aurora-background
• Background Gradient Animation — Large blurred purple, pink and blue blobs orbit and blend into each other behind a headline · npx shadcn@latest add @aceternity/background-gradient-animation
• Wavy Background — Thick blurred neon waves in cyan and violet roll horizontally through the middle of a black frame · npx shadcn@latest add @aceternity/wavy-background
• Background Lines — Thin colored curves draw themselves across a black frame in staggered waves behind centered text · npx shadcn@latest add @aceternity/background-lines
• Ambient — Out-of-focus cyan rings and dots floating slowly over a dark slate gradient, like bokeh · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Animated Gradient With SVG — Blurred orange and red colour blobs drifting and pulsing inside a card, like a soft lava gradient · npx shadcn add @fancy/animated-gradient-with-svg
• Bubble Background — Blurred cyan, violet and magenta glows drifting and orbiting over a deep violet-to-blue field · npx shadcn@latest add @animate-ui/backgrounds-bubble
• Gradient Background — A purple-to-pink diagonal gradient sliding slowly back and forth across the frame · npx shadcn@latest add @animate-ui/backgrounds-gradient
• Animated Beam — Indigo backdrop with faint diagonal lines and thin light beams streaking down them at different speeds · npx shadcn@latest add https://animata.design/r/background/animated-beam.json
• Topography — Wavy contour lines like a topographic map, tiled seamlessly over a solid color · curl -LO https://heropatterns.com/svg/topography.zip
• Jigsaw — Interlocking jigsaw-puzzle outlines covering the frame in a seamless grid · curl -LO https://heropatterns.com/svg/jigsaw.zip
• Overcast — Beveled square panels, each holding a slashed circle, tiled like embossed metal plates · curl -LO https://heropatterns.com/svg/overcast.zip
• Formal Invitation — Bold parallel wave bands, like the lining of a formal invitation envelope · curl -LO https://heropatterns.com/svg/formal-invitation.zip
• Bubbles — Scattered dots and rings of different sizes, like rising soda bubbles · curl -LO https://heropatterns.com/svg/bubbles.zip
• Wiggle — Rows of short squiggly lines running diagonally across the frame · curl -LO https://heropatterns.com/svg/wiggle.zip
• Circuit Board — Dense traces and pads of a printed circuit board, tiled edge to edge · curl -LO https://heropatterns.com/svg/circuit-board.zip
• Hexagons — A honeycomb of thin hexagon outlines · curl -LO https://heropatterns.com/svg/hexagons.zip
• Graph Paper — A fine graph-paper grid with a darker line every tenth square · curl -LO https://heropatterns.com/svg/graph-paper.zip
• Floating Cogs — Gears and cogs of different sizes scattered across the frame · curl -LO https://heropatterns.com/svg/floating-cogs.zip
• Charlie Brown — Tight zigzag chevron stripes, like the stripe on a famous cartoon shirt · curl -LO https://heropatterns.com/svg/charlie-brown.zip
• I Like Food — Line icons of burgers, fries, ice cream, tacos and drinks repeated in a grid · curl -LO https://heropatterns.com/svg/i-like-food.zip
• Brick Wall — Running-bond brick courses with thin mortar lines · curl -LO https://heropatterns.com/svg/brick-wall.zip
• Endless Clouds — Stacked overlapping arcs, like stylized clouds or Japanese wave scales · curl -LO https://heropatterns.com/svg/endless-clouds.zip
• Moroccan — Ornate Moroccan lantern outlines locked together in a lattice · curl -LO https://heropatterns.com/svg/moroccan.zip

Social proof

• Avatar Cloud — Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central pro · npx hyperframes add avatar-cloud
• Logo Wall — A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger · npx hyperframes add logo-wall
• Social Proof Card — The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule bu · npx hyperframes add social-proof-card
• Star Rating Fill — A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the v · npx hyperframes add star-rating-fill
• Testimonial Card — Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat · npx hyperframes add testimonial-card
• Testimonial Proof Card — A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), · npx hyperframes add testimonial-proof-card
• Trust Strip — A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold · npx hyperframes add trust-strip
• GitHub Sponsors — Self-drawing Sponsors heart that docks to a header, every sponsor avatar blur-staggering into a grid, then a thank-you h · npx shadcn@latest add @remocn/github-sponsors
• GitHub Stars — Inertial fly-through of a repo's stargazers with a synced count-up odometer that locks on the total. Horizontal 16:9 or · npx shadcn@latest add @remocn/github-stars
• Logo Enter — A stacked group of round brand chips that spring in one-by-one, then hold. Swap the logos to feature any set of marks. H · npx shadcn@latest add @remocn/logo-enter

Entrances & emphasis

• Badge Pop — A transitions.dev-inspired notification badge pop with elastic scale and count reveal · npx hyperframes add badge-pop
• Curtain Reveal — Two pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage u · npx hyperframes add curtain-reveal
• Echo Smear — Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time · npx hyperframes add echo-smear
• Echo Trail — A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one t · npx hyperframes add echo-trail
• Gloss Sweep — A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still. · npx hyperframes add gloss-sweep
• Ink Bleed Reveal — Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark · npx hyperframes add ink-bleed-reveal
• Iris Reveal — A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. · npx hyperframes add iris-reveal
• Light Sweep Pass — A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-el · npx hyperframes add light-sweep-pass
• Number Pop In — A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal · npx hyperframes add number-pop-in
• Outline Draw — A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure. · npx hyperframes add outline-draw
• Panel Reveal — A panel reveal primitive with height expansion and content fade · npx hyperframes add panel-reveal
• Physical Exit — A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final o · npx hyperframes add physical-exit
• Radial Surround — Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a · npx hyperframes add radial-surround
• Sheet Spring-Up — A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooti · npx hyperframes add sheet-spring-up
• Shimmer Sweep — Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals · npx hyperframes add shimmer-sweep
• Skeleton Reveal — A skeleton loader transition that pulses, then cross-fades into content · npx hyperframes add skeleton-reveal
• Slit Scan Reveal — The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position func · npx hyperframes add slit-scan-reveal
• Spring Pop — A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly. · npx hyperframes add spring-pop
• Spring Stack Shuffle — A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real m · npx hyperframes add spring-stack-shuffle
• Stagger Cascade — A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The order · npx hyperframes add stagger-cascade
• Stagger Lattice — A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames. · npx hyperframes add stagger-lattice
• Staggered Fade Up — Words fade in and slide up one after another with configurable delay. · npx hyperframes add staggered-fade-up
• Stop Motion Cadence — The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motio · npx hyperframes add stop-motion-cadence
• SVG Mask Reveal — A soft token-colored sweep reveals media only through an editable SVG wordmark mask. · npx hyperframes add svg-mask-reveal
• Long Shadow — A flat icon casts a long shadow to the frame edge, then the light swings and the shadow sweeps around on a spring. · npx shadcn@latest add @remocn/long-shadow
• Speed Lines — Parallel streaks trail an element as it flies in at its real speed, the element stretching with that speed and landing w · npx shadcn@latest add @remocn/speed-lines
• Border Beam — Red and blue light streaks chase each other around the border of a dark music-player card · npx shadcn@latest add @magicui/border-beam
• Float — An album cover bobbing and tilting gently in 3D above its caption, as if floating in water · npx shadcn add @fancy/float
• Glow Effect — A blurred multicolor glow behind a card or button, its hue shifting around the edges · npx motion-primitives@latest add glow-effect
• Border Trail — A short bright segment races around the border of a dark card in an endless loop · npx motion-primitives@latest add border-trail
• Animated Group — A row of images pops in one after another, each scaling up from small with a short stagger · npx motion-primitives@latest add animated-group

Comparisons

• Before After Wipe — Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the befo · npx hyperframes add before-after-wipe
• Comparison Split — Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted · npx hyperframes add comparison-split
• Split Tilt Cards — Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pi · npx hyperframes add split-tilt-cards

Shaders

• Blob — A soft coral and pink blob with a warm highlight slowly changes shape on black. A WebGPU shader from the Shaders library · npx hyperframes add blob
• Chrome Orb — A mirror-chrome orb reflects a bright studio light, on black. A WebGPU shader from the Shaders library (shaders.com, MIT · npx hyperframes add chrome-orb
• Color Wheel — A wide gradient slides slowly through the colours of the rainbow. A WebGPU shader from the Shaders library (shaders.com, · npx hyperframes add color-wheel
• Falling Lines — White lines fall down the frame at varied speeds, each fading into a trail. A WebGPU shader from the Shaders library (sh · npx hyperframes add falling-lines
• Frost — A frozen blue orb with frost creeping in from its edge, on black. A WebGPU shader from the Shaders library (shaders.com, · npx hyperframes add frost
• Godrays — Rays of light fan out from a corner and drift across a deep blue field. A WebGPU shader from the Shaders library (shader · npx hyperframes add godrays
• Heatmap — Thermal colours flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT). · npx hyperframes add heatmap
• Holographic — An iridescent foil orb with a shifting rainbow sheen, centred on black. A WebGPU shader from the Shaders library (shader · npx hyperframes add holographic
• Lens Flare — A camera lens flare: a bright star burst and a faint rainbow halo that slowly shimmer on black. A WebGPU shader from the · npx hyperframes add lens-flare
• Light Edge — Purple and cyan light races around the edge of an orb on black. A WebGPU shader from the Shaders library (shaders.com, M · npx hyperframes add light-edge
• Liquid Glass Widgets — Frosted glass stat cards, showcase panel and pill chips over an aurora shader background · npx hyperframes add liquid-glass-widgets
• Marble — Ink-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (sha · npx hyperframes add marble
• Nebula — A small world of pink and blue gas swirls inside a sphere on black. A WebGPU shader from the Shaders library (shaders.co · npx hyperframes add nebula
• Obsidian — A dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, · npx hyperframes add obsidian
• Plasma — Deep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT). · npx hyperframes add plasma
• Plastic — A glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com · npx hyperframes add plastic
• Prism — A white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT). · npx hyperframes add prism
• Ripples — Concentric rings ripple outward from the centre, white on black. A WebGPU shader from the Shaders library (shaders.com, · npx hyperframes add ripples
• Sine Wave — A glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT). · npx hyperframes add sine-wave
• Spiral — A bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT). · npx hyperframes add spiral
• Strands — Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, M · npx hyperframes add strands
• Stripes — Bold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT · npx hyperframes add stripes
• Swirl — Orange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders lib · npx hyperframes add swirl
• Thin Film — An orb's rim shimmers with soap-bubble iridescence on black. A WebGPU shader from the Shaders library (shaders.com, MIT) · npx hyperframes add thin-film
• Liquid Glass — VFX composition block · npx hyperframes add vfx-liquid-glass
• Magnetic — VFX composition block · npx hyperframes add vfx-magnetic
• Portal — VFX composition block · npx hyperframes add vfx-portal
• Shatter — VFX composition block · npx hyperframes add vfx-shatter
• Voronoi — Magenta cells with glowing blue centres shift and reshape across the frame. A WebGPU shader from the Shaders library (sh · npx hyperframes add voronoi
• Water — A sphere of wind-rippled water reflecting a blue sky, on black. A WebGPU shader from the Shaders library (shaders.com, M · npx hyperframes add water
• Shader Caustics — A field of refracted light — the bright filaments light makes through a rippling surface. · npx shadcn@latest add @remocn/shader-caustics
• Shader Color Panels — Overlapping translucent color panels sliding past each other. · npx shadcn@latest add @remocn/shader-color-panels
• Shader Dithering — Ordered-dither shading over an animated gradient field. · npx shadcn@latest add @remocn/shader-dithering
• Shader Dot Orbit — Dots orbiting on concentric paths across the frame. · npx shadcn@latest add @remocn/shader-dot-orbit
• Shader Gem Smoke — Paper's Gem Smoke shader driven by the frame — smoke flowing behind and inside a glassy logo. · npx shadcn@latest add @remocn/shader-gem-smoke
• Shader God Rays — Volumetric light rays radiating from an off-screen source. · npx shadcn@latest add @remocn/shader-god-rays
• Shader Grain Gradient — Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend. · npx shadcn@latest add @remocn/shader-grain-gradient
• Shader Grain Gradient Arcade — Retro grainy dots in orange, yellow and green on black. · npx shadcn@latest add @remocn/shader-grain-gradient-arcade
• Shader Grain Gradient Blush — Pastel pink and apricot blob morphing on warm off-white. · npx shadcn@latest add @remocn/shader-grain-gradient-blush
• Shader Grain Gradient Dune — Sandy grain wave in tan, caramel and rust. · npx shadcn@latest add @remocn/shader-grain-gradient-dune
• Shader Grain Gradient Horizon — Peach horizon band rolling between navy and pale sky. · npx shadcn@latest add @remocn/shader-grain-gradient-horizon
• Shader Grain Gradient Nebula — Magenta and cyan glow blooming from the corners of deep space. · npx shadcn@latest add @remocn/shader-grain-gradient-nebula
• Shader Grain Gradient Orb — Large grainy sphere in periwinkle, violet and pink. · npx shadcn@latest add @remocn/shader-grain-gradient-orb
• Shader Grain Gradient Sunrise — Grainy wave of coral and gold rising over a plum night. · npx shadcn@latest add @remocn/shader-grain-gradient-sunrise
• Shader Grain Gradient Tide — Teal ripple ring pulsing out of a dark sea-green core. · npx shadcn@latest add @remocn/shader-grain-gradient-tide
• Shader Grain Gradient Ultraviolet — Electric magenta and blue blob morphing on ultraviolet black. · npx shadcn@latest add @remocn/shader-grain-gradient-ultraviolet
• Light Tunnel — Fly straight through a tunnel made from the original OpenShaders hero shader. · npx shadcn@latest add @remocn/shader-light-tunnel
• Shader Liquid Metal — Molten metallic surface with flowing specular highlights. · npx shadcn@latest add @remocn/shader-liquid-metal
• Shader Mesh Gradient — WebGL mesh gradient backdrop driven per-frame for deterministic Remotion renders. · npx shadcn@latest add @remocn/shader-mesh-gradient
• Shader Mesh Gradient Aurora — Cyan and violet ribbons swirling out of a near-black sky. · npx shadcn@latest add @remocn/shader-mesh-gradient-aurora
• Shader Mesh Gradient Dusk — Violet dusk with coral and peach light drifting through deep indigo. · npx shadcn@latest add @remocn/shader-mesh-gradient-dusk
• Shader Mesh Gradient Ember — Molten orange and amber pooling in dark oxblood. · npx shadcn@latest add @remocn/shader-mesh-gradient-ember
• Shader Mesh Gradient Ink — Monochrome ink folds in charcoal and silver with grain. · npx shadcn@latest add @remocn/shader-mesh-gradient-ink
• Shader Mesh Gradient Lagoon — Bright aqua and teal shallows with a deep-blue undertow. · npx shadcn@latest add @remocn/shader-mesh-gradient-lagoon
• Shader Mesh Gradient Lavender — Soft lilac and pink haze with grain-softened edges. · npx shadcn@latest add @remocn/shader-mesh-gradient-lavender
• Shader Mesh Gradient Mint — Airy mint and sky-blue pastel wash around a deeper green core. · npx shadcn@latest add @remocn/shader-mesh-gradient-mint
• Shader Mesh Gradient Peach — Warm peach and cream glow with a whisper of film grain. · npx shadcn@latest add @remocn/shader-mesh-gradient-peach
• Shader Mesh Gradient Synthwave — Night-purple field lit by a warm coral sunset glow. · npx shadcn@latest add @remocn/shader-mesh-gradient-synthwave
• Shader Metaballs — Organic blobs merging and splitting like lava. · npx shadcn@latest add @remocn/shader-metaballs
• Shader Neuro Noise — Organic neural-web noise field that slowly morphs. · npx shadcn@latest add @remocn/shader-neuro-noise
• Shader Perlin Noise — Classic Perlin noise clouds drifting across the frame. · npx shadcn@latest add @remocn/shader-perlin-noise
• Shader Pulsing Border — Glowing border frame that pulses around the edges. · npx shadcn@latest add @remocn/shader-pulsing-border
• Shader Simplex Noise — Simplex noise flow field, smoother than Perlin. · npx shadcn@latest add @remocn/shader-simplex-noise
• Shader Smoke Ring — Soft smoke ring curling and dissipating in place. · npx shadcn@latest add @remocn/shader-smoke-ring
• Shader Spiral — Rotating spiral arms radiating from the center. · npx shadcn@latest add @remocn/shader-spiral
• Shader Strata — Fine horizontal sediment layers displaced by fbm noise, each drifting at its own depth. · npx shadcn@latest add @remocn/shader-strata
• Shader Swirl — Concentric bands swirling around a center point. · npx shadcn@latest add @remocn/shader-swirl
• Shader Swirl Candy — Pastel pink, lilac and sky-blue spiral, soft and sweet. · npx shadcn@latest add @remocn/shader-swirl-candy
• Shader Swirl Citrus — Juicy yellow, pink and green bands spiralling on cream. · npx shadcn@latest add @remocn/shader-swirl-citrus
• Shader Swirl Ember — Gold and orange fire bands spinning around a dark core. · npx shadcn@latest add @remocn/shader-swirl-ember
• Shader Swirl Hypno — High-contrast black and white hypnotic spiral. · npx shadcn@latest add @remocn/shader-swirl-hypno
• Shader Swirl Lilac — Dreamy lilac and baby-blue swirl around a dark eye. · npx shadcn@latest add @remocn/shader-swirl-lilac
• Shader Swirl Neon — Neon teal, purple and pink vortex around a dark core. · npx shadcn@latest add @remocn/shader-swirl-neon
• Shader Swirl Retro — Seventies spiral in orange, sand and teal. · npx shadcn@latest add @remocn/shader-swirl-retro
• Shader Swirl Sunburst — Retro cream and orange bands sweeping in from above. · npx shadcn@latest add @remocn/shader-swirl-sunburst
• Shader Swirl Tide — Silky blue bands twisting into a deep navy whirlpool. · npx shadcn@latest add @remocn/shader-swirl-tide
• Shader Voronoi — Animated Voronoi cells shifting and re-tessellating. · npx shadcn@latest add @remocn/shader-voronoi
• Shader Warp — Domain-warped color field that folds and stretches like liquid. · npx shadcn@latest add @remocn/shader-warp
• Shader Warp Acid — Loud lime and cyan fluid swirling over black. · npx shadcn@latest add @remocn/shader-warp-acid
• Shader Warp Cream — Soft peach-to-coral cream gradient with a gentle drift. · npx shadcn@latest add @remocn/shader-warp-cream
• Shader Warp Deep Sea — Diagonal teal bands rippling through midnight blue. · npx shadcn@latest add @remocn/shader-warp-deep-sea
• Shader Warp Marble — Cream and charcoal marble veins swirling together. · npx shadcn@latest add @remocn/shader-warp-marble
• Shader Warp Ocean — Glossy aqua currents traced with dark ink edges. · npx shadcn@latest add @remocn/shader-warp-ocean
• Shader Warp Rose Gold — Satin rose-gold folds with a soft sheen. · npx shadcn@latest add @remocn/shader-warp-rose-gold
• Shader Warp Silk — Violet and pink liquid silk folding in slow waves. · npx shadcn@latest add @remocn/shader-warp-silk
• Shader Warp Storm — Deep violet and lavender storm of marbled fluid. · npx shadcn@latest add @remocn/shader-warp-storm
• Shader Warp Sunset — Marbled coral, peach and wine flowing like warm liquid. · npx shadcn@latest add @remocn/shader-warp-sunset
• Shader Water — Caustic water-surface ripples with subtle refraction. · npx shadcn@latest add @remocn/shader-water
• Shader Weave — A woven substrate of warp and weft threads crossing on a domain-warped grid, with a travelling sheen. · npx shadcn@latest add @remocn/shader-weave
• Aurora — Northern-lights curtains in violet and green hanging from the top edge, swaying slowly over black · npx shadcn@latest add @react-bits/Aurora-JS-CSS
• Silk — Violet silk folds rippling diagonally, a soft sheen running along each crease · npx shadcn@latest add @react-bits/Silk-JS-CSS
• Threads — A bundle of fine pale threads waving and fraying across a dark frame like a slow string curtain · npx shadcn@latest add @react-bits/Threads-JS-CSS
• Iridescence — Pastel holographic sheen in cyan, pink and violet, flowing like oil on water · npx shadcn@latest add @react-bits/Iridescence-JS-CSS
• Galaxy — Layered starfield twinkling and drifting toward the camera, the brightest stars with soft flares · npx shadcn@latest add @react-bits/Galaxy-JS-CSS
• Balatro — Thick red and blue paint swirling into a slow psychedelic vortex, softly pixelated like the Balatro card game · npx shadcn@latest add @react-bits/Balatro-JS-CSS
• Liquid Chrome — Mercury-like chrome surface rippling in black and white, sharp highlights sliding across the folds · npx shadcn@latest add @react-bits/LiquidChrome-JS-CSS
• Lightning — A single electric-blue lightning bolt crackling down the frame, flickering and re-branching · npx shadcn@latest add @react-bits/Lightning-JS-CSS
• Orb — A hollow ring of violet and cyan light breathing on black, its edge wobbling like plasma · npx shadcn@latest add @react-bits/Orb-JS-CSS
• Beams — Diagonal bars of white light sliding in a slow wave across black, like studio light through blinds · npx shadcn@latest add @react-bits/Beams-JS-CSS
• Light Rays — Soft god rays streaming down from the top centre, shifting gently through a light haze · npx shadcn@latest add @react-bits/LightRays-JS-CSS
• Prism — A glowing glass pyramid turning in the dark, its edges throwing rainbow light over a bright base · npx shadcn@latest add @react-bits/Prism-JS-CSS
• Plasma — Smoky pale plasma folding over itself in slow silky curls · npx shadcn@latest add @react-bits/Plasma-JS-CSS
• Dark Veil — Dark violet veil of light rippling slowly, like a lit curtain behind fog · npx shadcn@latest add @react-bits/DarkVeil-JS-CSS
• Prismatic Burst — Violet light rays bursting out of the centre and slowly rotating, like a radial light tunnel · npx shadcn@latest add @react-bits/PrismaticBurst-JS-CSS
• Laser Flow — A blue laser beam pouring down onto an app window, flooding it with glow, fog and drifting sparks · npx shadcn@latest add @react-bits/LaserFlow-JS-CSS
• Fog — Soft orange, peach and cream fog with hints of mauve, folding slowly across the whole frame · npm i vanta
• Clouds — A pale blue sky over soft drifting clouds, with the sun glowing at the top of the frame · npm i vanta
• Clouds2 — Flying low over a thick bank of volumetric clouds, with blue sky above · npm i vanta
• Cells — Lime and deep-green cell membranes glowing and shifting like a living microscope slide · npm i vanta
• Halo — An iridescent ring of pink, white and teal light swirling slowly on a deep navy field · npm i vanta
• Cloud Shader — Fluffy white clouds drift slowly across a bright blue sky, drawn live in a WebGL shader · npx shadcn@latest add @aceternity/cloud-shader
• Creative WebGL Blobs — Noise-deformed Three.js spheres banded in iridescent orange and blue, slowly warping as they float · git clone https://github.com/codrops/WebGLBlobs

Intros & hooks

• Blue Sweater Intro Video — Warm AI creator intro sequence that resolves into an X follow card for @blue_sweater. · npx hyperframes add blue-sweater-intro-video
• Facet Morph — A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) wit · npx hyperframes add facet-morph
• Locked Nucleus Orbit — A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup. · npx hyperframes add locked-nucleus-orbit
• SVG Stroke Trace — An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is clos · npx hyperframes add svg-stroke-trace
• Whiteboard Ink — A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, f · npx hyperframes add whiteboard-ink
• Logo Intro Sequence — Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion · npx hyperframes add yt-logo-intro
• Release Teaser — A 16-second cinematic release teaser with center-out typography, a procedural dimensional mark, moving edge light, and a · npx shadcn@latest add @remocn/release-teaser
• Rapid Image Layers Animation — A burst of full-screen photos slamming in one on top of another before landing on the final image · git clone https://github.com/codrops/RapidLayersAnimation
• Image Stack Intro Animation — A pile of photos shuffles behind a big serif title, then one settles into a framed portrait with its name · git clone https://github.com/codrops/ImageStackGrid
• Intro Image Trail Animation — A loading counter, copies of a portrait trailing up the screen, a big two-line name, then a content page · git clone https://github.com/codrops/IntroTrailEffect

Text reveals

• Blur In — An Operator Black word-level content reveal that resolves its own text from controlled blur · npx hyperframes add blur-in
• Blur Out Up — Words arrive clean and depart upward with increasing blur for airy exits. · npx hyperframes add blur-out-up
• Bottom Up Letters — Splits text into letters and reveals each glyph from below with deterministic staggered timing · npx hyperframes add bottom-up-letters
• Caret Swap — A gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret. · npx hyperframes add caret-swap
• Focus Blur Resolve — A premium focus pull from heavy blur to crisp text, then a soft blur-out exit. · npx hyperframes add focus-blur-resolve
• Line-by-Line Slide — Each line enters from the left with staggered slide and exits to the right. · npx hyperframes add line-by-line-slide
• Line Swap — A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters · npx hyperframes add line-swap
• Matrix Decode — Random scramble resolves left-to-right into the target text. · npx hyperframes add matrix-decode
• Morph Text — Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying t · npx hyperframes add morph-text
• Per Word Rise — Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still unti · npx hyperframes add per-word-rise
• RGB Glitch Text — RGB-offset text copies jitter briefly for a controlled glitch window. · npx hyperframes add rgb-glitch-text
• Scramble Reveal — A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right. · npx hyperframes add scramble-reveal
• Shared Axis Y — Per-word vertical shared-axis transition for sharp editorial swaps. · npx hyperframes add shared-axis-y
• Shared Axis Z — Scale-based shared-axis transition for focus shifts and context depth. · npx hyperframes add shared-axis-z
• Slot Machine Roll — A vertical reel scrolls characters from one value to another. · npx hyperframes add slot-machine-roll
• Soft Blur In — A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts · npx hyperframes add soft-blur-in
• Stitched Text Draw — Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned · npx hyperframes add stitched-text-draw
• Streaming Text — Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inki · npx hyperframes add streaming-text
• Strikethrough Replace — Draw a strike line across old text, then reveal the replacement. · npx hyperframes add strikethrough-replace
• Text Shimmer — A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color · npx hyperframes add text-shimmer
• Text Stagger — A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words · npx hyperframes add text-stagger
• Text State Swap — A text state swap primitive with outgoing blur and incoming lift · npx hyperframes add text-state-swap
• Texture Mask Text — CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps · npx hyperframes add texture-mask-text
• Top-Down Letters — Letters descend from above in a pronounced staircase with zero blur. · npx hyperframes add top-down-letters
• Tracking In — A precise letter-spacing reveal for premium headings and interface labels · npx hyperframes add tracking-in
• Typewriter — Character-by-character text reveal with a deterministic blinking cursor. · npx hyperframes add typewriter
• Variable Font Flex — A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character · npx hyperframes add variable-font-flex
• VFX Text Cursor — Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based sh · npx hyperframes add vfx-text-cursor
• UI Blur In — A wrapper that reveals a single child with blur + opacity + a directional offset; a pure state atom, theme-independent — · npx shadcn@latest add @remocn/blur-in
• Blur Out Up — Words arrive clean and depart upward with increasing blur for airy exits. · npx shadcn@latest add @remocn/blur-out-up
• Bottom-Up Letters — Letters rise from below in a pronounced staircase, one symbol at a time, with zero blur. · npx shadcn@latest add @remocn/bottom-up-letters
• Caret Swap — A gradient caret swells into a block that consumes the first phrase right-to-left, collapses back and types the second p · npx shadcn@latest add @remocn/caret-swap
• Centered Word Build — Words appear sharply from below while the centered phrase pushes cumulatively closer on every beat, then clears through · npx shadcn@latest add @remocn/centered-word-build
• Chromatic Wave — A soft wave travels down through the type; where it crosses, the letters ripple and split into RGB fringes. · npx shadcn@latest add @remocn/chromatic-wave
• Echo Stack — A word focuses in at the center while outline copies of it unfold above and below and keep drifting, like the one clear · npx shadcn@latest add @remocn/echo-stack
• Extrude Pop — A flat word pops up out of the plane on a solid colored 3D body, no camera involved. · npx shadcn@latest add @remocn/extrude-pop
• Fade Through — A Material-style content transition: old fades out, new fades in with a soft delay. · npx shadcn@latest add @remocn/fade-through
• Focus Blur Resolve — A premium focus pull from heavy blur to crisp text, then a soft blur-out exit. · npx shadcn@latest add @remocn/focus-blur-resolve
• Fog Rise — Display text resolves out of fog: characters sharpen from heavy blur center-out with vertical streaks dissolving above t · npx shadcn@latest add @remocn/fog-rise
• Glyph Anatomy — A word builds as in a font editor, with metric guides, anchors along each contour and Bézier handles that pull straight · npx shadcn@latest add @remocn/glyph-anatomy
• Gooey Morph — Bars fly in Tetris-style, land as a row, and melt into a word through a gooey blur-and-threshold morph. · npx shadcn@latest add @remocn/gooey-morph
• Gradient Scale Cut Text — An oversized gradient reveal snaps to a separate compact blurred line that settles left while the reveal continues. · npx shadcn@latest add @remocn/gradient-scale-cut-text
• Infinite Marquee — Seamlessly looping horizontal text strip with optional stroke style. · npx shadcn@latest add @remocn/infinite-marquee
• Inline Pill Takeover — A clipped pill expands inside a sentence, physically pushes the surrounding words apart, removes them through blur and t · npx shadcn@latest add @remocn/inline-pill-takeover
• Inline Word Roll — Roll through words beside a fixed prefix with accelerating timing and smoothly centered width. · npx shadcn@latest add @remocn/inline-word-roll
• Line-by-Line Slide — Each line enters from the left with a staggered slide and exits to the right for a flowing paragraph reveal. · npx shadcn@latest add @remocn/line-by-line-slide
• Mask Reveal Up — Lines reveal upward with a soft masked feel and compact stagger. · npx shadcn@latest add @remocn/mask-reveal-up
• Matrix Decode — Random scramble resolves left-to-right into the target text. · npx shadcn@latest add @remocn/matrix-decode
• Micro Scale Fade — A calm, tiny scale pop used as subtle premium polish for labels and headings. · npx shadcn@latest add @remocn/micro-scale-fade
• Outline Fill Track Text — A rising lead word gives way to an outlined value that fills from left to right while both travel on one continuous trac · npx shadcn@latest add @remocn/outline-fill-track-text
• Outline Trace — Every glyph contour draws itself as a stroke, letter by letter, then the fill wipes up inside each letter and the stroke · npx shadcn@latest add @remocn/outline-trace
• Path Ride — A line draws itself along a curve with the text riding behind its head, then the curve pulls taut and the text settles o · npx shadcn@latest add @remocn/path-ride
• Per Character Rise — Letters slide up from below with no blur — crisp, deliberate, kinetic. · npx shadcn@latest add @remocn/per-character-rise
• Per-Word Crossfade — Words gently fade into place one after another, with a short vertical drift for a calm keynote rhythm. · npx shadcn@latest add @remocn/per-word-crossfade
• Period Drop — A word rises out of its line, then a colored dot falls from above the frame, bounces with squash and stretch, and settle · npx shadcn@latest add @remocn/period-drop
• Perspective Marquee — A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon. · npx shadcn@latest add @remocn/perspective-marquee
• Perspective Squeeze — Two lines of heavy type endlessly trade height while corner-pinned perspective bends the flat stack into receding planes · npx shadcn@latest add @remocn/perspective-squeeze
• RGB Glitch Text — Three RGB-offset text copies jitter for a brief glitch window. · npx shadcn@latest add @remocn/rgb-glitch-text
• Ring Text — Text runs around a tilted 3D band that spins, reading on the near side and mirrored on the far side. · npx shadcn@latest add @remocn/ring-text
• Rolodex Flip — Cycles a word through a list of values with a 3D rolodex card flip while an invisible sizer keeps the line width and bas · npx shadcn@latest add @remocn/rolodex-flip
• Rush Type — A resting white word blasts through vertical scale motion, separating into energy-conserving RGB shutter trails before t · npx shadcn@latest add @remocn/rush-type
• Scale Down Fade — Subtle premium settle-in with a restrained scale-down fade on exit. · npx shadcn@latest add @remocn/scale-down-fade
• Selection Snap — A thin word in a loose viewfinder snaps into a design-tool selection while it goes from Thin to Black, pops its handles · npx shadcn@latest add @remocn/selection-snap
• Shader Text Reveal — Reveal words through the original OpenShaders hero shader, then settle into white type. · npx shadcn@latest add @remocn/shader-text-reveal
• Shadow Sweep Text — A line rises up and left while one dense dark shadow uncovers it and a second shadow sweeps back across it for the exit. · npx shadcn@latest add @remocn/shadow-sweep-text
• Shared Axis Y — Per-word hard-cut transition with staircase timing for sharp editorial swaps. · npx shadcn@latest add @remocn/shared-axis-y
• Shared Axis Z — Scale-based shared-axis transition for focus shifts and context depth. · npx shadcn@latest add @remocn/shared-axis-z
• Sheen Slide In — A title glides in from the right with an exponential settle and a slow final creep to center, while a gradient sheen swe · npx shadcn@latest add @remocn/sheen-slide-in
• Shimmer Sweep — Light shine sweeps across muted text via background-clip:text. · npx shadcn@latest add @remocn/shimmer-sweep
• Short Slide Down — Each new word drops in from above into its own line and pushes the stack downward until a centered three-line compositio · npx shadcn@latest add @remocn/short-slide-down
• Short Slide Right — The whole phrase glides in from the left as one compact move while words reveal in sequence through opacity. · npx shadcn@latest add @remocn/short-slide-right
• Slot Machine Roll — Vertical reel scrolls characters from one value to another. · npx shadcn@latest add @remocn/slot-machine-roll
• Soft Blur In — Per-character fade-in with a gentle blur and upward motion. Apple's signature hero-title reveal. · npx shadcn@latest add @remocn/soft-blur-in
• Spring Scale In — Words pop in with a soft overshoot scale, like a physical spring settling into place. · npx shadcn@latest add @remocn/spring-scale-in
• Squeeze In — Characters appear one by one on a tight stagger; when the last one lands, every letter gap compresses as one and the wor · npx shadcn@latest add @remocn/squeeze-in
• Staggered Fade Up — Words fade in and slide up one after another with a configurable delay. · npx shadcn@latest add @remocn/staggered-fade-up
• Stretch In — Letters fly in from off-canvas and smear horizontally on the way — a vertex-lag deformation, not a scale. · npx shadcn@latest add @remocn/stretch-in
• Strikethrough Replace — Draws a strike line across old text then reveals new text in its place. · npx shadcn@latest add @remocn/strikethrough-replace
• Stripe Type — A word cut into horizontal bands, as in the IBM logo, slides together from alternating sides and locks, then can pass on · npx shadcn@latest add @remocn/stripe-type
• Top-Down Letters — Letters descend from above in a pronounced staircase, one symbol at a time, with zero blur. · npx shadcn@latest add @remocn/top-down-letters
• Tracking In — Letter-spacing collapses and blur clears with a springy motion. · npx shadcn@latest add @remocn/tracking-in
• Type Fossil — A readable word carries layers of fine contours, revises itself, then compresses into a clean typographic imprint. · npx shadcn@latest add @remocn/type-fossil
• Type Repeater — An After Effects style repeater on a word, where copies unfold into a tunnel, a spiral or a fan behind it, breathe, then · npx shadcn@latest add @remocn/type-repeater
• Type Wall — Rows of one word fill the frame, run in alternating directions at different speeds in heavy, narrow and outline faces, w · npx shadcn@latest add @remocn/type-wall
• Typed Split Wipe — A centered cursorless type build holds, then exits through opposing fixed-layout glyph wipes that leave the anchor visib · npx shadcn@latest add @remocn/typed-split-wipe
• Typewriter — Character-by-character text reveal with a deterministic blinking cursor. · npx shadcn@latest add @remocn/typewriter
• Value Swap — Swaps a value in place with a vertical slide — the old value exits up as the new one enters from below while an invisibl · npx shadcn@latest add @remocn/value-swap
• Word Push — A phrase builds from its first word centered: each next word drives in from the right and pushes the line left, easing i · npx shadcn@latest add @remocn/word-push
• Word Stream — Voiceover-paced phrases that build word by word — the next word looms as a blurred ghost before it resolves, then the ph · npx shadcn@latest add @remocn/word-stream
• Zoom Words — A close-up word reveal: huge words fade into a long line while the camera rides the write head, the line streaming off-f · npx shadcn@latest add @remocn/zoom-words
• Split Text — Headline letters rising into place one by one with a soft stagger · npx shadcn@latest add @react-bits/SplitText-JS-CSS
• Blur Text — Words sliding down out of a heavy blur and snapping sharp, one after another · npx shadcn@latest add @react-bits/BlurText-JS-CSS
• Shiny Text — Muted grey text with a bright highlight band sweeping across it on a loop · npx shadcn@latest add @react-bits/ShinyText-JS-CSS
• Decrypted Text — Random characters scrambling and resolving into a sentence, hacker-terminal style · npx shadcn@latest add @react-bits/DecryptedText-JS-CSS
• Rotating Text — A highlighted word in a pill flips to the next word on a timer, its letters staggering in · npx shadcn@latest add @react-bits/RotatingText-JS-CSS
• ASCII Text — A word built out of ASCII characters, rippling in waves with a chromatic colour fringe · npx shadcn@latest add @react-bits/ASCIIText-JS-CSS
• True Focus — Corner brackets jump from word to word, sharpening the framed word while the rest stay blurred · npx shadcn@latest add @react-bits/TrueFocus-JS-CSS
• Text Animate — A line of text appears letter by letter, each character rising out of a blur · npx shadcn@latest add @magicui/text-animate
• Hyper Text — A monospace word scrambles through random letters and locks into the real text from left to right · npx shadcn@latest add @magicui/hyper-text
• Typing Animation — Words type out letter by letter behind a blinking cursor, get deleted, and the next word types in · npx shadcn@latest add @magicui/typing-animation
• Sparkles Text — Bold word with small four-point stars popping up, spinning and fading around its letters · npx shadcn@latest add @magicui/sparkles-text
• Aurora Text — A headline word filled with slowly shifting aurora colours, pink through purple to blue · npx shadcn@latest add @magicui/aurora-text
• Text Generate Effect — A paragraph appears word by word, each word fading in from blur to crisp white · npx shadcn@latest add @aceternity/text-generate-effect
• Typewriter Effect — A headline types itself letter by letter, the last word in blue, followed by a blinking cursor · npx shadcn@latest add @aceternity/typewriter-effect
• Flip Words — One word in a sentence swaps every few seconds, the new word blurring in letter by letter · npx shadcn@latest add @aceternity/flip-words
• Container Text Flip — A rounded pill resizes smoothly as the word inside flips to the next one in a list · npx shadcn@latest add @aceternity/container-text-flip
• Colourful Text — Each letter of a word cycles through bright colors and briefly blurs, lifts and scales in turn · npx shadcn@latest add @aceternity/colourful-text
• Type Shuffle Animation — Monospace profile text and an ASCII portrait scrambling through random characters before settling · git clone https://github.com/codrops/TypeShuffleAnimation
• Text Block Transitions — A paragraph of large serif text on white dissolving word by word into a new paragraph · git clone https://github.com/codrops/TextBlockTransitions
• Typography Motion Effect — Big serif headline letters that drop away in a stagger while the next text rises into place · git clone https://github.com/codrops/TypographyMotion
• On-Scroll Blur Reveal — Paragraphs on black sharpening out of a heavy blur word by word as they move up the screen · git clone https://github.com/codrops/ScrollBlurTypography
• Vertical Cut Reveal — Letters slide up out of invisible slots line by line, emoji included, like type cut out of the frame · npx shadcn add @fancy/vertical-cut-reveal
• Text Rotate — A word in a coloured box swaps for the next one, its letters springing up from below in a stagger · npx shadcn add @fancy/text-rotate
• Typewriter — A phrase typed and deleted letter by letter with a blinking cursor, cycling through endings · npx shadcn add @fancy/typewriter
• Scramble In — Lines of text typing in from the left with a few random glyphs flickering at the leading edge · npx shadcn add @fancy/scramble-in
• Gradient Text — A bold headline filled with a purple, pink and blue gradient that slides slowly across the letters · npm install @animate-ui/react motion
• Shimmering Text — A glint of light running letter by letter across grey text, each letter brightening as it passes · npm install @animate-ui/react motion
• Typing Text — Words typed one character at a time behind a blinking cursor, held, erased and replaced · npm install @animate-ui/react motion
• Morphing Text — One word morphs into the next: shared letters glide into place while the rest blur out and rise in · npm install @animate-ui/react motion
• Rotating Text — Words taking turns in one slot: the current word slides up and fades out as the next slides in · npm install @animate-ui/react motion
• Rolling Text — Letters flipping over one after another in 3D, like a split-flap board settling on a word · npm install @animate-ui/react motion
• Splitting Text — A line of text sliding in from the right piece by piece, characters or words fading up in a stagger · npm install @animate-ui/react motion
• Text Effect — A line of text resolves letter by letter out of dark blur, then lifts and fades away, on a loop · npx motion-primitives@latest add text-effect
• Text Shimmer — A bright highlight sweeps across grey monospace text, like a 'generating…' status label · npx motion-primitives@latest add text-shimmer
• Text Shimmer Wave — Letters bob forward and brighten one after another as a light wave rolls through the word · npx motion-primitives@latest add text-shimmer-wave
• Text Scramble — Monospace letters churn through random characters before settling into the final word · npx motion-primitives@latest add text-scramble
• Text Roll — Each letter flips over on its horizontal axis, rolling the word out and back in letter by letter · npx motion-primitives@latest add text-roll
• Text Loop — Words cycle in one spot, each sliding up and fading out as the next slides in from below · npx motion-primitives@latest add text-loop
• Text Morph — A button label morphs between two words, shared letters gliding into their new positions · npx motion-primitives@latest add text-morph
• Glitch text — White 404 on deep blue; magenta and cyan ghost copies snap sideways in brief glitch bursts · npx shadcn@latest add https://animata.design/r/text/glitch-text.json
• Soft Blur In — A phrase fades up character by character out of a soft blur, holds, then drifts up and blurs away · npx shadcn@latest add https://animata.design/r/text/soft-blur-in.json
• Per-Character Rise — Letters slide up into place one after another with no blur, a crisp keynote-style reveal · npx shadcn@latest add https://animata.design/r/text/per-character-rise.json
• Focus Blur Resolve — A whole line pulls from heavy blur into sharp focus, rests, then softens and fades out · npx shadcn@latest add https://animata.design/r/text/focus-blur-resolve.json
• Gibberish Text — Each letter of a bold monospace word flickers through random capitals before settling on the real one · npx shadcn@latest add https://animata.design/r/text/gibberish-text.json
• Wave Reveal — Large letters drop into place one after another in a wave, each settling out of a short slide · npx shadcn@latest add https://animata.design/r/text/wave-reveal.json
• Typing Text — A shell prompt types out a command in amber monospace, holds, erases it and types it again · npx shadcn@latest add https://animata.design/r/text/typing-text.json
• Text Flip — "Coding is" stays put while the blue word after it flips up through a list on a loop · npx shadcn@latest add https://animata.design/r/text/text-flip.json

Tickers & HUD

• Camcorder HUD — Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder · npx hyperframes add camcorder-hud
• News Ticker — Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl. · npx hyperframes add news-ticker
• Segmentation Flood — Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, ea · npx hyperframes add segmentation-flood
• Telemetry HUD — Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on c · npx hyperframes add telemetry-hud
• Ticker Takeover — A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headl · npx hyperframes add ticker-takeover

Title cards

• Canopy Part Title — Leaves sweep through the frame and part to reveal the headline. · npx hyperframes add canopy-part-title
• Glass Hero — A solid glass object rises in front of a giant headline and keeps turning, so the type bends and splits into colour thro · npx hyperframes add glass-hero
• Glass Shard Title — Glass shards fly in through fog and tile themselves into the headline. · npx hyperframes add glass-shard-title
• Titlecard Calm — A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and · npx hyperframes add titlecard-calm
• Titlecard Lockup — The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move · npx hyperframes add titlecard-lockup
• Weight Wave — A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave p · npx hyperframes add weight-wave
• Wireframe Portal Title — A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. · npx hyperframes add wireframe-portal-title
• Chromatic Fringe Title — Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, s · npx hyperframes add yt-prism-title
• Lamp Effect — A cyan lamp bar stretches open at the top and casts a cone of light down onto the title · npx shadcn@latest add @aceternity/lamp

Kinetic type

• Char Slam Explode — Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing sha · npx hyperframes add char-slam-explode
• Extended Keyframe — The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest · npx hyperframes add extended-keyframe
• Kinetic Center Build — Words enter from the right and push the growing phrase left until the final line locks centered. · npx hyperframes add kinetic-center-build
• Kinetic Type — Bold kinetic typography promo · npx hyperframes init my-video --example kinetic-type
• Kinetic Type Swap — A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles o · npx hyperframes add kinetic-type-swap
• Shutter Slam — One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, th · npx hyperframes add shutter-slam
• Split-Flap Board — Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet u · npx hyperframes add split-flap-board
• Variable Axis Type — A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat. · npx hyperframes add variable-axis-type
• Kinetic Center Build — A word appears in the center; each new word enters from the right and pushes the line until the full phrase locks center · npx shadcn@latest add @remocn/kinetic-center-build
• Kinetic Morph Text — Letters lift, rotate, and softly reshape into editable phrases with sampled outline trails. · npx shadcn@latest add @remocn/kinetic-morph-text
• Kinetic Warp — A coarse mesh warp bends a whole word in staccato beats, one axis per keyframe. · npx shadcn@latest add @remocn/kinetic-warp
• Word Rotate — One word at a time drops in from above and slides out below, cycling through a short list · npx shadcn@latest add @magicui/word-rotate
• Morphing Text — Big words melt into each other through a gooey blur, one dissolving as the next one forms · npx shadcn@latest add @magicui/morphing-text
• Text Flipping Board — A split-flap departure board whose tiles flip through letters until a short quote spells out · npx shadcn@latest add @aceternity/text-flipping-board
• Repetitive Typography — One title repeated in rows that slide and scale in until the whole screen is lined with the same words · git clone https://github.com/codrops/RepetitiveTypography
• Circular Text Effect — Concentric rings of serif words that scale in and turn around a small round button · git clone https://github.com/codrops/CircularTextEffect
• On-Scroll Typography Animations — Giant two-word titles on electric blue whose letters fly, flip and scale into place as they enter · git clone https://github.com/codrops/OnScrollTypographyAnimations
• Breathing Text — Variable-font letters swelling bold and italic then thinning back, a wave rolling through the word · npx shadcn add @fancy/breathing-text
• Text Along Path — Rows of city names gliding along curved lines across the frame, like a ticker bent into waves · npx shadcn add @fancy/text-along-path
• Spinning Text — A short phrase set around a circle rotates steadily, like a stamp badge · npx motion-primitives@latest add spinning-text
• Kinetic Center Build — Words arrive one at a time with a light blur, pushing the line along until the phrase sits centred · npx shadcn@latest add https://animata.design/r/text/kinetic-center-build.json
• Circular Text — Small white capitals set around a ring that turns slowly, like a spinning badge or stamp · npx shadcn@latest add https://animata.design/r/text/circular-text.json

Transitions

• Chromatic Aberration Wipe — A fast slide wipe with RGB channel split on peak frames. · npx hyperframes add chromatic-aberration-wipe
• Colorama Wipe — Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to · npx hyperframes add colorama-wipe
• Cross Warp Morph — Shader transition with cross-warped morphing · npx hyperframes add cross-warp-morph
• Cut the Curve — A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and th · npx hyperframes add cut-the-curve
• Directional Wipe — A directional scene push that slides one panel over another. · npx hyperframes add directional-wipe
• Domain Warp Dissolve — Shader transition with fractal noise domain warping · npx hyperframes add domain-warp-dissolve
• Fade Through — A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer · npx hyperframes add fade-through
• Flash Through White — Shader transition with white flash crossfade · npx hyperframes add flash-through-white
• Gravitational Lens — Shader transition with gravitational lensing distortion · npx hyperframes add gravitational-lens
• Grid Pixelate Wipe — Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between sc · npx hyperframes add grid-pixelate-wipe
• Halftone Dissolve — Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-firs · npx hyperframes add halftone-dissolve
• Match Cut — A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smal · npx hyperframes add match-cut
• Micro Transitions — A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions · npx hyperframes add micro-transitions
• Text Clone Wall Transition — Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the conte · npx hyperframes add mk-clone-wall-transition
• Morph Swap — Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transf · npx hyperframes add morph-swap
• Ordered Dither Pass — Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone · npx hyperframes add ordered-dither-pass
• Particle Text Dissolve — Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered · npx hyperframes add particle-text-dissolve
• Per-Word Crossfade — Words gently fade into place with a short vertical drift for calm keynote rhythm. · npx hyperframes add per-word-crossfade
• Ridged Burn — Shader transition with ridged turbulence burn effect · npx hyperframes add ridged-burn
• Ripple Waves — Shader transition with concentric ripple wave distortion · npx hyperframes add ripple-waves
• Rubber Band Bumper — An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the i · npx hyperframes add rubber-band-bumper
• SDF Iris — Shader transition with signed distance field iris reveal · npx hyperframes add sdf-iris
• Swirl Vortex — Shader transition with swirling vortex distortion · npx hyperframes add swirl-vortex
• Text Match Cut — One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as s · npx hyperframes add text-match-cut
• Thermal Distortion — Shader transition with heat haze thermal distortion · npx hyperframes add thermal-distortion
• 3D Transitions — Showcase of 3D perspective flip and rotate transitions · npx hyperframes add transitions-3d
• Blur Transitions — Showcase of blur-based transitions between scenes · npx hyperframes add transitions-blur
• Cover Transitions — Showcase of cover/uncover slide transitions · npx hyperframes add transitions-cover
• Destruction Transitions — Showcase of destructive break-apart transitions · npx hyperframes add transitions-destruction
• Dissolve Transitions — Showcase of dissolve and fade transitions · npx hyperframes add transitions-dissolve
• Distortion Transitions — Showcase of warp and distortion transitions · npx hyperframes add transitions-distortion
• Grid Transitions — Showcase of grid-based tile transitions · npx hyperframes add transitions-grid
• Light Transitions — Showcase of light-based glow and flash transitions · npx hyperframes add transitions-light
• Mechanical Transitions — Showcase of mechanical shutter and iris transitions · npx hyperframes add transitions-mechanical
• Other Transitions — Showcase of miscellaneous creative transitions · npx hyperframes add transitions-other
• Push Transitions — Showcase of push and slide transitions · npx hyperframes add transitions-push
• Radial Transitions — Showcase of radial wipe and reveal transitions · npx hyperframes add transitions-radial
• Scale Transitions — Showcase of scale and zoom transitions · npx hyperframes add transitions-scale
• Type Match Cut — A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the wo · npx hyperframes add type-match-cut
• Whip Pan — Shader transition simulating a fast camera whip pan · npx hyperframes add whip-pan
• Whip Pan Cut — A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same · npx hyperframes add whip-pan-cut
• Zoom Through Transition — A transition that zooms through a focal card into the next scene. · npx hyperframes add zoom-through-transition
• ASCII Dissolve — Dissolve one scene into the next through a drifting field of ASCII glyphs. · npx shadcn@latest add @remocn/ascii-dissolve
• Caret Wipe — Sweep a typing caret across the frame, wiping the outgoing scene into the next. · npx shadcn@latest add @remocn/caret-wipe
• Displacement — The frame breaks into a grid of cells that shear apart into offset, colour-fringed tiles under film grain, then settle b · npx shadcn@latest add @remocn/displacement
• Dither Dissolve — A dithering shader transition that dissolves one scene into the next. · npx shadcn@latest add @remocn/dither-dissolve
• Ember Burn — The outgoing frame catches fire where it is brightest, boils in the heat, chars at the rim, and blows away as sparks car · npx shadcn@latest add @remocn/ember-burn
• Focus Pull — A rack-focus transition that defocuses the outgoing scene into a bright blur and resolves the next one into focus. · npx shadcn@latest add @remocn/focus-pull
• Glitch Cut — A broadcast-glitch hard cut: the frame tears into displaced slices with channel split and corrupted blocks, and the inco · npx shadcn@latest add @remocn/glitch-cut
• Grain Dissolve — A grain-gradient shader transition that disintegrates the outgoing scene into soft grainy shapes and condenses the next · npx shadcn@latest add @remocn/grain-dissolve
• Grid Wave — A wave travels across the frame raising the picture into a grid of solid blocks with lit tops and shaded sides, which se · npx shadcn@latest add @remocn/grid-wave
• Hyperspace — A deterministic starfield stretches into radial streaks, the scene tunnels forward and a white flash at the cut reveals · npx shadcn@latest add @remocn/hyperspace
• Icon Scatter — Scatter a field of icons over the cut, hiding the scene swap at the field's peak. · npx shadcn@latest add @remocn/icon-scatter
• Iris Wipe — An old-cartoon iris closes on the subject, holds a beat as a dot, then opens on the next scene. · npx shadcn@latest add @remocn/iris-wipe
• Lens Zoom — A hard cut disguised as a lens punch-in: barrel distortion, zoom blur, chromatic split and camera shake around the splic · npx shadcn@latest add @remocn/lens-zoom
• Light Leak — A warm analog light leak drifts in from an edge and blows the frame out to near-white at the cut, then cools off to reve · npx shadcn@latest add @remocn/light-leak
• Mondrian Split — Black lines cut the frame into a seeded De Stijl grid, primaries wipe into its cells, the grid reflows like rubber, and · npx shadcn@latest add @remocn/mondrian-split
• Page Turn — The exiting scene swings up and away like a notebook page in stop-motion poses, staying above the scene it reveals. · npx shadcn@latest add @remocn/page-turn
• Paper Tear — A jagged rip runs down the frame, then both halves peel apart on a spring with white fibrous torn edges, revealing the s · npx shadcn@latest add @remocn/paper-tear
• Particle Dissolve — The frame is ground into drifting grey dust whose specks carry real fragments of the picture, and the next scene coalesc · npx shadcn@latest add @remocn/particle-dissolve
• Perlin Dissolve — A perlin-noise shader transition that sweeps its noise threshold to dissolve one scene into the next. · npx shadcn@latest add @remocn/perlin-dissolve
• Pixel Sort — The scene melts into seeded vertical streaks like glitch-art pixel sorting, then the next scene's columns fall in and sn · npx shadcn@latest add @remocn/pixel-sort
• Push Through — A dolly transition that blows the outgoing scene past the camera while the next one approaches from the depth. · npx shadcn@latest add @remocn/push-through
• Ripple Zoom — A grain-gradient ripple transition that flies the camera through the center of the rings while the next scene approaches · npx shadcn@latest add @remocn/ripple-zoom
• Shader Seam — Dissolve a stationary OpenShaders material to uncover the next scene. · npx shadcn@latest add @remocn/shader-seam
• Shader Spiral Pass — Accelerate into the hero spiral and emerge through its soft center into the next scene. · npx shadcn@latest add @remocn/shader-spiral-pass
• Slide Swap — A scene sequencer where the outgoing content is shoved off on an accelerating curve and the next springs in from the opp · npx shadcn@latest add @remocn/slide-swap
• Smoke Dissolve — A smoke-ring shader transition that expands the ring outward to reveal the next scene. · npx shadcn@latest add @remocn/smoke-dissolve
• Spring Settle — A scene sequencer where the outgoing scene shrinks away as one group, the stage holds empty for a beat, and the next sce · npx shadcn@latest add @remocn/spring-settle
• Swirl Dissolve — A swirl shader transition that unwinds open and winds shut to reveal the next scene. · npx shadcn@latest add @remocn/swirl-dissolve
• Venetian Blinds — The outgoing scene splits into horizontal slats that turn edge-on in a staggered ripple, revealing the next scene behind · npx shadcn@latest add @remocn/venetian-blinds
• Warp Dissolve — A domain-warp shader transition that melts the outgoing scene into a folding color field and straightens back out into t · npx shadcn@latest add @remocn/warp-dissolve
• Wave Wipe — A grain-gradient wave that sweeps up across the frame, covering the outgoing scene and revealing the next one from below · npx shadcn@latest add @remocn/wave-wipe
• Whip Pan — A whip-pan transition that flies both scenes through the frame in one move with velocity-based motion blur. · npx shadcn@latest add @remocn/whip-pan
• Zoom Blur — A depth punch-in transition that pushes the outgoing scene through the viewer while the incoming one resolves out of blu · npx shadcn@latest add @remocn/zoom-blur
• CrossZoom — The first shot rushes into a radial zoom blur that bursts open and resolves on the next shot · npm install gl-transitions
• DreamyZoom — Zooms and twists into a white flash, then spins back out onto the next shot · npm install gl-transitions
• DirectionalWarp — A diagonal wipe whose leading edge smears and stretches the pixels it passes over · npm install gl-transitions
• LinearBlur — Both shots soften into a heavy blur, crossfade, then pull back into focus on the next · npm install gl-transitions
• BurnThrough — Noisy holes burn through the first shot with glowing orange edges, revealing the next · npm install gl-transitions
• GlitchMemories — A crossfade broken into offset, color-split blocks, like a corrupted video file · npm install gl-transitions
• GlitchDisplace — The frame liquefies into a washed-out displacement glitch and snaps onto the next shot · npm install gl-transitions
• StripDatamoshGlitch — Datamosh: torn horizontal strips, chroma shift and scan noise drag the first shot into the next · npm install gl-transitions
• Revolve — The first shot spins into a zooming, motion-blurred vortex that unwinds into the next · npm install gl-transitions
• Cube — Both shots sit on the faces of a 3D cube that turns over a glossy floor reflection · npm install gl-transitions
• Doorway — The first shot splits and swings open like double doors as the next shot comes forward · npm install gl-transitions
• Swap — The two shots slide past each other in 3D, trading places over a reflective floor · npm install gl-transitions
• InvertedPageCurl — The first shot peels back from the corner like a curling page, revealing the next beneath · npm install gl-transitions
• BookFlip — The first shot turns over like a book page, right to left, and lands on the next · npm install gl-transitions
• StereoViewer — Both shots shrink into rounded cards that slide past each other, like a stereo-viewer reel · npm install gl-transitions
• Dreamy — A soft crossfade in which both shots ripple sideways in slow waves, like a dream sequence · npm install gl-transitions
• WaterDrop — Rings ripple out from the center like a drop hitting water while the shots crossfade · npm install gl-transitions
• Wind — A ragged left-to-right wipe that blows the first shot away in horizontal streaks · npm install gl-transitions
• Swirl — Both shots twist into a spinning vortex at the center, then unwind onto the next · npm install gl-transitions
• Morph — Each shot warps along the other's colors, a liquid morph that melts one image into the next · npm install gl-transitions
• ButterflyWaveScrawler — Wavy, color-split ripples scramble the frame into psychedelic bands before the next shot settles · npm install gl-transitions
• CrazyParametricFun — The frame is flung into hypnotic concentric bands along a parametric curve, then settles on the next · npm install gl-transitions
• Kaleidoscope — The shots fold into a spinning kaleidoscope of mirrored wedges and open onto the next · npm install gl-transitions
• FilmBurn — Warm, glowing film-burn light leaks wash over the shot and fade out on the next · npm install gl-transitions
• DoomMelt — The first shot melts down the screen in uneven dripping columns, like the classic Doom screen wipe · npm install gl-transitions
• LuminanceMelt — The first shot drips away in noisy vertical streaks, tone by tone, revealing the next · npm install gl-transitions
• PolkaDotsCurtain — The next shot appears through a grid of polka dots that grow until they cover the frame · npm install gl-transitions
• Mosaic — The camera pulls back over a wall of rotated tiles from both shots, pans, and settles on the next · npm install gl-transitions
• Pixelize — Both shots break into chunky 8-bit pixels, crossfade, then sharpen back into the next · npm install gl-transitions
• GridFlip — The frame splits into a 4×4 grid of tiles that flip one by one to the next shot · npm install gl-transitions
• Slideshow Animations — Full-screen image slideshow with 32 transition styles, from parallax pushes to a photo eroding into sand · git clone https://github.com/codrops/SlideshowAnimations
• Shape Slideshow with Clip-path — Full-screen photo slides revealed through a growing circle, with a two-line serif caption sliding in · git clone https://github.com/codrops/ShapesSlideshow
• Pixel Transition Effects — A grid of square cells blacks out a type-and-image layout block by block, then opens on a full-screen photo · git clone https://github.com/codrops/PixelTransition
• Image Layer Animations with Clip-Path — Stacked image layers sweep across the screen one after another in clip-path wipes, ending on a new scene · git clone https://github.com/codrops/LayersAnimation
• Kinetic Typography Page Transition — Columns of giant serif words sweep across an orange screen to bridge a grid of photos and an article · git clone https://github.com/codrops/KineticTypePageTransition
• Grid Flow Effect — Small dark thumbnails popping in one by one across a black screen until they form a loose grid · git clone https://github.com/codrops/GridFlowEffect
• Infinite Menu Background Animation — A curved shape wipes up over a giant serif name, then rows of words and photos loop past · git clone https://github.com/codrops/Theodore
• Zoom Slideshow — A framed image in the centre zooms up to fill the screen while the next one appears small inside it · git clone https://github.com/codrops/ZoomSlideshow
• Glitchy Grid Layout Slideshow — A scattered photo grid around a serif phrase that breaks apart and re-forms as the slides change · git clone https://github.com/codrops/GlitchyGrid

Filters & grades

• Chromatic Radial Split — Shader transition with chromatic aberration radial split · npx hyperframes add chromatic-radial-split
• Glitch — Shader transition with digital glitch artifacts · npx hyperframes add glitch
• Grade Split Reveal — The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long e · npx hyperframes add grade-split-reveal
• Hologram — A pale blue holographic orb with scan rings and flicker, on black. A WebGPU shader from the Shaders library (shaders.com · npx hyperframes add hologram
• Motion Blur — After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame · npx hyperframes add motion-blur
• Hologram — Play a scene as a projection: a ghost double shimmers off the image, emission lines structure it, and only what is brigh · npx shadcn@latest add @remocn/hologram
• Line Boil — A hand-drawn outline boils like a cel animation, redrawn every few frames with a varying pen weight, then fills with col · npx shadcn@latest add @remocn/line-boil
• Pixelate Region — Cover rectangles of a scene with an opaque mosaic while the rest passes through untouched — redact keys, addresses and p · npx shadcn@latest add @remocn/pixelate-region
• Security Cam — Run a scene through a cheap recorder: macroblocks flatten under a starved bitrate, colour resolution collapses to half t · npx shadcn@latest add @remocn/security-cam
• Sustained Glitch — Broadcast corruption held over a scene in scheduled bursts: slices tear sideways, channels split, and blocks fill with p · npx shadcn@latest add @remocn/sustained-glitch
• Synthwave — A retro neon horizon: a scrolling perspective grid, a rising striped sun and mountain ranges that slide in. · npx shadcn@latest add @remocn/synthwave
• Underwater Ripple — Hold a scene under moving water: every pixel is read through a layered refraction field that closes on a whole number of · npx shadcn@latest add @remocn/underwater-ripple
• X-Ray Scan — A glowing scanner bar sweeps across a device, turning the shell dark and revealing white-line internals with one part in · npx shadcn@latest add @remocn/x-ray-scan
• Progressive Blur — A strip of content slides sideways and melts into soft stacked blur at both edges · npx motion-primitives@latest add progressive-blur

Code & terminal

• Code 3D Extrude — Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true · npx hyperframes add code-3d-extrude
• Code Diff — An edit shown as a colored diff — removed lines collapse in red, added lines expand in green. · npx hyperframes add code-diff
• Code Highlight Sweep — A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. · npx hyperframes add code-highlight
• Code Morph — One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Mo · npx hyperframes add code-morph
• Code Particle Assemble — Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syn · npx hyperframes add code-particle-assemble
• Code Scroll To Line — The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules. · npx hyperframes add code-scroll
• Code Shader Dissolve — The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front · npx hyperframes add code-shader-dissolve
• Code Slice Hero — A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. · npx hyperframes add code-slice-hero
• Code Snippet - Apple Terminal Pro — Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a s · npx hyperframes add code-snippet-apple-terminal-pro
• Code Snippet - Dark 2026 — VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, side · npx hyperframes add code-snippet-dark-2026
• Code Snippet - Dark Modern — VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, si · npx hyperframes add code-snippet-dark-modern
• Code Terminal Run — A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, e · npx hyperframes add code-terminal-run
• Code Typing — Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation. · npx hyperframes add code-typing
• Terminal Simulator — A terminal window types commands and streams log output. · npx hyperframes add terminal-simulator
• Agent Run — Animated brand-neutral AI agent run — a Thinking status and short plan, tool calls whose spinners close into checks whil · npx shadcn@latest add @remocn/agent-run
• Claude Code — Animated Claude Code CLI welcome screen — terminal window with a dashed welcome box, recent activity and what's new pane · npx shadcn@latest add @remocn/claude-code
• Code Morph — A flat code editor that morphs between versions of a file, gliding each surviving token to its new line and column while · npx shadcn@latest add @remocn/code-morph
• Glass Code Block — A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal. · npx shadcn@latest add @remocn/glass-code-block
• Glass Code Walk — A camera that scans a glass code block top to bottom as it types, then pulls back to a centered hold. · npx shadcn@latest add @remocn/glass-code-walk
• Live Code Compilation — Split-screen where typed code on the left snaps a live UI preview on the right, HMR-style. · npx shadcn@latest add @remocn/live-code-compilation
• OpenCode — Animated OpenCode TUI welcome screen — two-tone wordmark, an input box with a blue accent bar that types a query, a mode · npx shadcn@latest add @remocn/opencode
• Terminal Cursor Zoom — Camera locked to the typing cursor, dollying across a terminal as a command types at high zoom. · npx shadcn@latest add @remocn/terminal-cursor-zoom
• Terminal Simulator — Terminal window that types out commands and rolls old lines off the top. · npx shadcn@latest add @remocn/terminal-simulator
• Workflow Console — An independent 46.8-second release automation demo with typed commands, environment diagrams, pipeline metrics, and an o · npx shadcn@latest add @remocn/workflow-console
• Terminal — Dark macOS-style terminal types a command, then prints green check lines one after another · npx shadcn@latest add @magicui/terminal

Particles & physics

• Confetti — A deterministic celebration burst with seeded particles and gravity. · npx hyperframes add confetti
• Liquid Metal — A chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT · npx hyperframes add liquid-metal
• Particle Image Reveal — A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning · npx hyperframes add particle-image-reveal
• Pendulum Swing — Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on i · npx hyperframes add pendulum-swing
• Snow — Seek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for · npx hyperframes add snow
• Spiral Galaxy — A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so · npx hyperframes add spiral-galaxy
• Starfield — Seek-safe night-sky overlay: sparse or dense stars in three size tiers that twinkle and drift in two parallax layers, ra · npx hyperframes add starfield
• Sun Burst — Cream and black rays fan out from the centre and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT · npx hyperframes add sun-burst
• Confetti — Deterministic confetti burst for Remotion — seeded particles with gravity, spin, and flutter so every render is identica · npx shadcn@latest add @remocn/confetti
• Pendulum Wave — A row of pendulums with tuned periods drifts from a straight line into waves and braids, then realigns for a seamless lo · npx shadcn@latest add @remocn/pendulum-wave
• Radial Burst — Sculptural ribbons twist into a tilted ring and sweep outward through contour echoes for an expressive product introduct · npx shadcn@latest add @remocn/radial-burst
• Trim Burst — A ring of short straight strokes shoots out from a point like Trim Paths: each end races ahead on a hard-braking ease-ou · npx shadcn@latest add @remocn/trim-burst
• Particles — Sparse 3D field of glowing dots slowly turning and bobbing in depth · npx shadcn@latest add @react-bits/Particles-JS-CSS
• Ballpit — Hundreds of soft white spheres jostling and bouncing around the frame like a zero-gravity ball pit · npx shadcn@latest add @react-bits/Ballpit-JS-CSS
• Particles — Fine white dots drifting slowly in random directions across black, nudged away by the cursor · npx shadcn@latest add @magicui/particles
• Meteors — Thin meteor streaks with fading tails falling at an angle across a dark panel · npx shadcn@latest add @magicui/meteors
• Confetti — Colourful paper confetti bursts out over a title and flutters down out of frame · npx shadcn@latest add @magicui/confetti
• Birds — A flock of small pink low-poly birds wheeling and scattering across a deep navy sky · npm i vanta
• Background Beams With Collision — Thin glowing beams fall from the top and burst into small sparks when they hit the floor · npx shadcn@latest add @aceternity/background-beams-with-collision
• Sparkles — Fine white particles twinkle in a band under a glowing blue horizon line below a big wordmark · npx shadcn@latest add @aceternity/sparkles
• Vortex — Hundreds of small glowing particles stream along a noisy swirl, each leaving a short trail · npx shadcn@latest add @aceternity/vortex
• Shooting Stars and Stars Background — A dim star field twinkles while occasional shooting stars streak diagonally across the frame · npx shadcn@latest add @aceternity/shooting-stars
• Confetti — One burst of confetti squares and dots flung up from the centre, tumbling, flipping and fading as it falls · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Confetti Explosions — Confetti bursts popping one after another at random spots across the frame, each spraying outward and dropping · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Confetti Falling — A steady shower of confetti squares and dots tumbling down from the top with a gentle wobble · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Confetti Parade — Two confetti cannons firing continuous streams in from the left and right edges, arcing over the middle · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Confetti bundle — Two side cannons firing confetti in from the bottom corners, arcing up and raining down over the middle · pnpm add @tsparticles/confetti
• Fireworks — Rockets streaking up from the bottom and bursting into colored sparks that fade and fall against black · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Snow — Soft white snowflakes of mixed sizes drifting down with a slow side-to-side sway · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Stars — A black sky of tiny white stars, twinkling as each one slowly pulses in brightness · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-stars
• Hyperspace — White star streaks rushing out from the centre toward the edges, a jump-to-lightspeed tunnel on black · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Fire — Sparse orange embers drifting upward over a deep red radial vignette · pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>
• Gravity — Coloured pill tags dropping into the frame and tumbling into a pile under real physics · npx shadcn add @fancy/gravity
• Screensaver — A stack of photos bouncing off the frame edges like the old DVD screensaver logo · npx shadcn add @fancy/screensaver
• Fireworks Background — White rockets streak up from the bottom edge and burst into falling, fading sparks on a dark canvas · npx shadcn@latest add @animate-ui/backgrounds-fireworks
• Gravity Stars Background — Small white dots drifting over a dark canvas and gathering, brighter, around a moving point of gravity · npx shadcn@latest add @animate-ui/backgrounds-gravity-stars
• Hole Background — Thin grid rings sinking into a dark tunnel under a glow that cycles through magenta, blue and teal · npx shadcn@latest add @animate-ui/backgrounds-hole
• Stars Background — Three layers of tiny stars scrolling upward at different speeds over a dark radial gradient · npx shadcn@latest add @animate-ui/backgrounds-stars
• Shooting Stars — Deep blue night sky with twinkling stars and bright streaks shooting across at different angles · npx shadcn@latest add https://animata.design/r/background/shooting-stars.json
• Boids Ecosystem — Hundreds of tiny coloured triangles flocking across a dark canvas like a school of fish · npx shadcn@latest add https://animata.design/r/background/boids-ecosystem.json

Progress & timers

• Conic Progress Ring — A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage. · npx hyperframes add conic-progress-ring
• SVG Line Draw Loader — An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline. · npx hyperframes add svg-line-draw-loader
• UI Progress — A progress bar whose fill is a pure function of a numeric value channel (value-channel deviation). The Progress renderer · npx shadcn@latest add @remocn/progress
• UI Spinner — A deterministic spinning arc that loops on the Remotion frame — a pure motion atom with no state. · npx shadcn@latest add @remocn/spinner

Diagrams & flows

• Constellation Hub — Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then sett · npx hyperframes add constellation-hub
• Decision Tree — Animated flowchart with branching paths · npx hyperframes init my-video --example decision-tree
• Exploded Stack — Isometric layer plates explode apart with a label beside each layer, hold, then collapse back into one stack. Built for · npx hyperframes add exploded-stack
• Flowchart — Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction · npx hyperframes add flowchart
• Flowchart Vertical — Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction · npx hyperframes add flowchart-vertical
• Hand-Drawn Flowchart — Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list · npx hyperframes add hw-pipeline
• Ecosystem Constellation — A central logo orbited by integration satellites with pulsing data lines. · npx shadcn@latest add @remocn/ecosystem-constellation
• Animated Beam — Light pulses run along curved lines between app icons and a central logo, like data flowing into a hub · npx shadcn@latest add @magicui/animated-beam
• Orbiting Circles — App icons circling an empty centre on two thin rings, the inner ring turning one way and the outer the other · npx shadcn@latest add @magicui/orbiting-circles
• Orbiting Items 3D — Glassy icon bubbles circle a glowing purple orb on a tilted ellipse, growing as they swing to the front · npx shadcn@latest add https://animata.design/r/list/orbiting-items-3-d.json

3D & objects

• Cosmic Orb — An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a · npx hyperframes add cosmic-orb
• Goo — A glossy green liquid ball whose surface bulges and ripples like wet goo, centred on black. A WebGPU shader from the Sha · npx hyperframes add goo
• macOS Tahoe Liquid Glass Desktop — 3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move. · npx hyperframes add macos-tahoe-liquid-glass
• Three Orbiting Cards — A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders. · npx hyperframes add three-orbiting-cards
• Hyperspeed — Pink and cyan light trails streaking down a winding night highway toward the viewer · npx shadcn@latest add @react-bits/Hyperspeed-JS-CSS

CTAs & end cards

• CTA Close — A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a · npx hyperframes add cta-close
• CTA Lockup — A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and · npx hyperframes add cta-lockup
• Logo Outro — Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill · npx hyperframes add logo-outro
• Store Badge Lockup — Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to act · npx hyperframes add store-badge-lockup

Textures & overlays

• Editorial Flash Overlay — Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal · npx hyperframes add editorial-flash-overlay
• Freeze-Frame Dressing — Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject · npx hyperframes add freeze-frame-dressing
• Grain Field — A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop. · npx hyperframes add grain-field
• Grain Overlay — Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition · npx hyperframes add grain-overlay
• Halftone Field — A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so bro · npx hyperframes add halftone-field
• Light Leak — Shader transition with cinematic light leak overlay · npx hyperframes add light-leak
• Organic Light Leak Overlay — Finite CSS light-leak overlay for memory beats and motivated transitions · npx hyperframes add organic-light-leak-overlay
• Paper Collage Reveal — A scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to · npx hyperframes add paper-collage-reveal
• Torn Paper Rip — A fibrous paper tear runs across the frame: the torn sheet shows its white paper core along the edge and lifts away on a · npx hyperframes add torn-paper-rip
• Vignette — Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center · npx hyperframes add vignette
• Warm Grain — Cream aesthetic with grain texture · npx hyperframes init my-video --example warm-grain
• Scanline Board Background — Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus e · npx hyperframes add yt-lcd-background
• On-Screen Display Effect — Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a phys · npx hyperframes add yt-screen-warp
• Vertical Media Filler — Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground con · npx hyperframes add yt-vertical-fill
• Brush — Variable-width brush ribbons for Remotion. Pressure taper, grain displacement, and spine samplers shared by the ink mark · npx shadcn@latest add @remocn/brush
• CRT Screen — Put a scene behind curved glass: the picture bulges out to the corners, an RGB phosphor mask and scanlines ride the curv · npx shadcn@latest add @remocn/crt-screen
• Crumple Toss — Crushes an element into a ball of paper and throws it out of frame on an arc, leaving the scene around it running. · npx shadcn@latest add @remocn/crumple-toss
• Halftone Print — Print a scene onto paper: each colour separates onto its own rotated screen of dots sized by the ink under them, slightl · npx shadcn@latest add @remocn/halftone-print
• Paper Wobble — Per-pose reshoot jitter that makes any content feel hand-placed on a desk. · npx shadcn@latest add @remocn/paper-wobble
• Riso Print — A two-ink risograph print: the accent plate slides in off-register, wobbles and settles a hair out of alignment over gra · npx shadcn@latest add @remocn/riso-print
• TV Power Off — End a scene the way a tube does: the picture collapses into a glowing horizontal line, the line pinches to a phosphor do · npx shadcn@latest add @remocn/tv-power-off
• VHS Filter — Hold a scene under analog tape: chroma bleeds sideways off every edge, rows wobble out of line, the bottom of the frame · npx shadcn@latest add @remocn/vhs-filter
• Noise — Fine animated film grain crawling over a misty photo, giving it a shot-on-film texture · npx shadcn@latest add @react-bits/Noise-JS-CSS
• Spotlight New — Soft white light cones fall from both top corners and sway slowly left and right over a dark frame · npx shadcn@latest add @aceternity/spotlight-new

Lists & rankings

• Grid Card Assemble — N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or verti · npx hyperframes add grid-card-assemble
• Specs Checklist — Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; lig · npx hyperframes add mk-specs-list
• Check List — A handwritten checklist that writes itself out in full, then ticks and strikes through every done item, one at a time. · npx shadcn@latest add @remocn/check-list

Headlines & quotes

• Headline Slam — A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, an · npx hyperframes add headline-slam
• Video Text — Huge block letters cut out of a playing video, so the footage only shows through the type · npx shadcn@latest add @magicui/video-text

Social posts & cards

• Instagram Follow — Animated Instagram follow overlay with profile card and follow button · npx hyperframes add instagram-follow
• Liquid Glass Notification — Frosted glass notification cards floating over an aurora shader background · npx hyperframes add liquid-glass-notification
• macOS Notification — Animated macOS-style notification banner with app icon and message · npx hyperframes add macos-notification
• Native Notification Pop — One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast · npx hyperframes add native-notification-pop
• Notification Cascade — Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, bef · npx hyperframes add notification-cascade
• Notification Pileup — Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anx · npx hyperframes add notification-pileup
• Notification Stack — 1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and b · npx hyperframes add notification-stack
• Overwhelm Surround — Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visi · npx hyperframes add overwhelm-surround
• Reddit Post Card — Animated Reddit post card overlay with upvotes and comments · npx hyperframes add reddit-post
• Scroll Feed — A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace. · npx hyperframes add scroll-feed
• Slack Notification Ad — A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff · npx hyperframes add slack-notification-ad
• Spotify Now Playing — Animated Spotify now-playing card with album art and progress bar · npx hyperframes add spotify-card
• TikTok Follow — Animated TikTok follow overlay with profile card and follow button · npx hyperframes add tiktok-follow
• VPN YouTube Spot — Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects. · npx hyperframes add vpn-youtube-spot
• X Follow Card — A social follow card with avatar, handle, and follower motion. · npx hyperframes add x-follow-card
• X Post Card — Animated X/Twitter post card overlay with engagement metrics · npx hyperframes add x-post
• Comment Cards — Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatar · npx hyperframes add yt-comment-card
• X Follow Card — Animated X profile follow card — spring bounce-in, staggered blur-in, a synthetic cursor that clicks Follow and flips it · npx shadcn@latest add @remocn/x-follow-card
• X Followers Overview — X follow notifications cycle through as 3D flipping text — '<name> followed you · 7h' — then the total follower count po · npx shadcn@latest add @remocn/x-followers-overview
• Animated List — Notification cards pop in one at a time at the top of a stack, pushing older ones down with a springy settle · npx shadcn@latest add @magicui/animated-list

Lower thirds

• Lower Third — BILD Style — News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop- · npx hyperframes add lower-third-bild
• Lower Third — Accent Underline — Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed f · npx hyperframes add lt-accent-underline
• Lower Third — Bold Block — High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops · npx hyperframes add lt-bold-block
• Lower Third — Clean Bar — Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance · npx hyperframes add lt-clean-bar
• Lower Third — Color Block — High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role · npx hyperframes add lt-color-block
• Lower Third — Dark Card — Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance · npx hyperframes add lt-dark-card
• Lower Third — Kicker Name — Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage · npx hyperframes add lt-kicker-name
• Lower Third — Mask Reveal — Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage · npx hyperframes add lt-mask-reveal
• Neon Border — Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A low · npx hyperframes add lt-neon-border
• Lower Third — Side Rule — Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage · npx hyperframes add lt-side-rule
• Lower Third — Soft Pill — Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance · npx hyperframes add lt-soft-pill
• Lower Third — Stack Bars — Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right · npx hyperframes add lt-stack-bars
• YouTube Lower Third — Animated YouTube subscribe lower third with avatar and channel info · npx hyperframes add yt-lower-third

Maps & globes

• North Korea Locked Down — Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash. · npx hyperframes add north-korea-locked-down
• NYC Paris Flight — Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound ef · npx hyperframes add nyc-paris-flight
• Spain Map — Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projec · npx hyperframes add spain-map
• US Map — Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP · npx hyperframes add us-map
• US Bubble Map — Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map · npx hyperframes add us-map-bubble
• US Flow Map — Animated connection arcs between US cities over a base map — composable origin-destination flow visualization · npx hyperframes add us-map-flow
• US Hex Grid Map — Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label · npx hyperframes add us-map-hex
• World Map — Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth pr · npx hyperframes add world-map
• Globe — Dotted white earth turning slowly, orange city markers glowing on it, rising from the bottom of the frame · npx shadcn@latest add @magicui/globe
• GitHub Globe — A dark-blue dotted 3D globe spins slowly while glowing arcs fly between cities · npx shadcn@latest add @aceternity/globe
• World Map — A dotted world map where curved arcs draw between pinned cities that pulse with small rings · npx shadcn@latest add @aceternity/world-map

Steps & timelines

• Onboarding Stepper Flow — A composed onboarding flow with milestone rail, active step card, and next-action button · npx hyperframes add onboarding-stepper-flow
• UI Onboarding Stepper Flow — A multi-step onboarding composition: a horizontal stepper advances through panels of input, radio, and switch fields, fi · npx shadcn@latest add @remocn/onboarding-stepper-flow
• UI Stepper — A horizontal onboarding stepper whose progress is a pure function of a continuous step index (value-channel deviation). · npx shadcn@latest add @remocn/stepper

Audio visualizers

• Oscilloscope Trace — CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decay · npx hyperframes add oscilloscope-trace
• Waveform — Equalizer bars in a blue to pink gradient pulse across the middle of the frame, like an audio visualizer. A WebGPU shade · npx hyperframes add waveform

Layouts & grids

• Separator — A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal · npx hyperframes add separator
• Swiss Grid — Structured grid layout · npx hyperframes init my-video --example swiss-grid
• Comic Panels — The frame cracks into a three-panel comic page with speed lines, red halftone and a starburst, then the action panel bur · npx shadcn@latest add @remocn/comic-panels
• Drift — A slow linear camera push-in wrapper that scales its scene from 1 to 1+grow across the sequence so no frame is ever stat · npx shadcn@latest add @remocn/drift
• Infinite Bento Pan — A camera diagonally drifts across an oversized bento grid behind a soft vignette. · npx shadcn@latest add @remocn/infinite-bento-pan
• Stage — Place a screenshot, recording, or long page on a perspective studio plane and direct an integrated camera across it with · npx shadcn@latest add @remocn/stage

Hooks & utilities

• Canvas Presentation — The html-in-canvas scaffolding the canvas transitions and scene filters share: support detection, a full-screen WebGL2 s · npx shadcn@latest add @remocn/canvas-presentation
• Caption Core — The timing engine every caption style shares: pages a timed transcript, finds the word being spoken and how far into it · npx shadcn@latest add @remocn/caption-core
• Icons Core — Shared animation contract, pure frame-to-phase timeline, and SVG path-draw helpers for remocn icons. · npx shadcn@latest add @remocn/icons-core
• remocn UI Core — Shared timeline-fold hook, theme context, and color math for remocn UI primitives. · npx shadcn@latest add @remocn/remocn-ui
• Scene Motion — The motion vocabulary scene content is built from: an exponential travel curve, a separate opacity ramp, three spring ea · npx shadcn@latest add @remocn/scene-motion
• Stop Motion Clock — Quantized stop-motion clock for Remotion. Stepped frames, stepped springs, deterministic hashing, and per-pose paper jit · npx shadcn@latest add @remocn/stop-motion

Pricing & offers

• UI Checkout Flow — A cursor-driven checkout card: the card and its fields blur-in, then the pointer flips a billing-cycle toggle, types a c · npx shadcn@latest add @remocn/checkout-flow
• Order Flow — An independent 18-second trading-interface demo with fictional market data, graphite and amber styling, an original step · npx shadcn@latest add @remocn/fomo-limit-orders

Icons & stickers

• Activity — Animated Lucide activity icon — the pulse line sweeps through like an EKG, popping at the peak. Loops by default. · npx shadcn@latest add @remocn/icon-activity
• Alert Triangle — Animated Lucide triangle-alert icon — the outline draws on, the mark pops in, then the exclamation blinks to flag a risk · npx shadcn@latest add @remocn/icon-alert-triangle
• Arrow Down — Animated Lucide arrow-down icon — the shaft and head draw on, then the arrow nudges down for cost/latency reduction beat · npx shadcn@latest add @remocn/icon-arrow-down
• Arrow Left — Animated Lucide arrow-left icon — the shaft and head draw on, then the arrow nudges back for back navigation or 'previou · npx shadcn@latest add @remocn/icon-arrow-left
• Arrow Right — Animated Lucide arrow-right icon — the shaft and head draw on, then the arrow nudges forward for CTAs, next-step pointer · npx shadcn@latest add @remocn/icon-arrow-right
• Arrow Up — Animated Lucide arrow-up icon — the shaft and head draw on, then the arrow nudges up for growth, improvement, or upward- · npx shadcn@latest add @remocn/icon-arrow-up
• At Sign — Animated Lucide at-sign icon — the inner 'a' draws and pops, then the outer swoosh re-traces its tail: a mention landing · npx shadcn@latest add @remocn/icon-at-sign
• Award — Animated Lucide award icon — the medal draws on, the ribbon unfurls beneath it, then the medal swings to rest. · npx shadcn@latest add @remocn/icon-award
• Bar Chart 3 — Animated Lucide bar-chart-3 icon — the axis draws on, then three bars rise left to right with overshoot: the classic gro · npx shadcn@latest add @remocn/icon-bar-chart-3
• Bell — Animated Lucide bell icon — the body draws on, the clapper follows, then the bell swings from its mount to signal a noti · npx shadcn@latest add @remocn/icon-bell
• Bookmark — Animated Lucide bookmark icon — draws on, then drops into place from above with a spring landing. · npx shadcn@latest add @remocn/icon-bookmark
• Calendar — Animated Lucide calendar icon — the pad draws on, then the binder rings dip and the page snaps into place. · npx shadcn@latest add @remocn/icon-calendar
• Camera — Animated Lucide camera icon — draws on, then the lens blinks shut and open like a shutter firing. · npx shadcn@latest add @remocn/icon-camera
• Check — Animated Lucide check icon — the stroke draws on, then stamps with a spring pop to mark a step, task, or claim as done. · npx shadcn@latest add @remocn/icon-check
• Check Circle — Animated Lucide circle-check icon — the ring draws clockwise, the checkmark traces in, then the whole mark pops to confi · npx shadcn@latest add @remocn/icon-check-circle
• Chevron Down — Animated Lucide chevron-down icon — draws on, then nudges downward with a fading echo. · npx shadcn@latest add @remocn/icon-chevron-down
• Chevron Left — Animated Lucide chevron-left icon — draws on, then nudges left with a fading echo. · npx shadcn@latest add @remocn/icon-chevron-left
• Chevron Right — Animated Lucide chevron-right icon — draws on, then nudges right with a fading echo. · npx shadcn@latest add @remocn/icon-chevron-right
• Chevron Up — Animated Lucide chevron-up icon — draws on, then nudges upward with a fading echo. · npx shadcn@latest add @remocn/icon-chevron-up
• Clock — Animated Lucide clock icon — the face draws on, then the hands sweep through discrete ticks. Loops by default. · npx shadcn@latest add @remocn/icon-clock
• Cloud — Animated Lucide cloud icon — draws on, then floats: a weightless bob and a half before settling. · npx shadcn@latest add @remocn/icon-cloud
• Code — Animated Lucide code icon — the angle brackets draw on, pull apart, and snap back around their code. · npx shadcn@latest add @remocn/icon-code
• Copy — Animated Lucide copy icon — the two sheets draw back-to-front, then the front sheet lifts and settles to read as a dupli · npx shadcn@latest add @remocn/icon-copy
• Credit Card — Animated Lucide credit-card icon — the card draws on, then the stripe swipes through and the card tips: payment accepted · npx shadcn@latest add @remocn/icon-credit-card
• Crown — Animated Lucide crown icon — descends into place from above, lands with a pop, then rocks regally to rest. · npx shadcn@latest add @remocn/icon-crown
• Database — Animated Lucide database icon — the cylinder draws on, then a write lands: the top disc pops and data settles down the s · npx shadcn@latest add @remocn/icon-database
• Dollar Sign — Animated Lucide dollar-sign icon — draws on, then the sign stretches tall: understated cha-ching. · npx shadcn@latest add @remocn/icon-dollar-sign
• Download — Animated Lucide download icon — the tray draws on, the arrow fades in, then drops into the tray with a squash on impact · npx shadcn@latest add @remocn/icon-download
• External Link — Animated Lucide external-link icon — the box and arrow draw on, then the arrow darts out toward the top-right for 'view · npx shadcn@latest add @remocn/icon-external-link
• Eye — Animated Lucide eye icon — draws on, then blinks once and refocuses its pupil. · npx shadcn@latest add @remocn/icon-eye
• Eye Off — Animated Lucide eye-off icon — the eye fragments draw on, then the slash cuts through and visibility dims. · npx shadcn@latest add @remocn/icon-eye-off
• File Text — Animated Lucide file-text icon — the page draws on, then the text lines type themselves in, top to bottom. · npx shadcn@latest add @remocn/icon-file-text
• Filter — Animated Lucide filter icon — the funnel draws on, then gives two quick shakes as results fall through. · npx shadcn@latest add @remocn/icon-filter
• Flame — Animated Lucide flame icon — the outline draws on, then flickers with a looping scale-and-skew wobble for hot features, · npx shadcn@latest add @remocn/icon-flame
• Folder — Animated Lucide folder icon — draws on, then the folder tips open for a peek and closes. · npx shadcn@latest add @remocn/icon-folder
• Gem — Animated Lucide gem icon — the stone draws on, then light catches it: facets re-trace in sequence with a flicker and a p · npx shadcn@latest add @remocn/icon-gem
• Gift — Animated Lucide gift icon — draws on, then the lid lifts for a peek and lands with a ribbon pop: almost unwrapped. · npx shadcn@latest add @remocn/icon-gift
• Globe — Animated Lucide globe icon — draws on, then the meridian sweeps west to east like the world turning. Loops by default. · npx shadcn@latest add @remocn/icon-globe
• Heart — Animated Lucide heart icon — the outline draws on, then a lub-dub heartbeat pulse for likes, favorites, or built-with-lo · npx shadcn@latest add @remocn/icon-heart
• Help Circle — Animated Lucide help-circle icon — the ring draws on, then the question mark re-draws and tilts like a curious head. · npx shadcn@latest add @remocn/icon-help-circle
• Home — Animated Lucide home icon — the house draws on, then the door re-draws open and the house settles: welcome home. · npx shadcn@latest add @remocn/icon-home
• Image — Animated Lucide image icon — the frame draws on, then the mountain redraws and the sun drifts into place like a photo de · npx shadcn@latest add @remocn/icon-image
• Inbox — Animated Lucide inbox icon — the tray draws on, then dips under the weight of an arriving item and springs back. · npx shadcn@latest add @remocn/icon-inbox
• Info — Animated Lucide info icon — the ring draws clockwise, the dot pops and stem draws in, then the dot bobs to draw a gentle · npx shadcn@latest add @remocn/icon-info
• Key — Animated Lucide key icon — draws on, then turns in an invisible lock and springs back. · npx shadcn@latest add @remocn/icon-key
• Layout Grid — Animated Lucide layout-grid icon — four tiles draw on, then re-pop into place clockwise like a dashboard assembling. · npx shadcn@latest add @remocn/icon-layout-grid
• Link — Animated Lucide link icon — two chain halves draw on, pull apart, and click together. · npx shadcn@latest add @remocn/icon-link
• Loader — Animated Lucide loader-circle icon — the arc draws on, then spins continuously for a loading or processing beat. Loops b · npx shadcn@latest add @remocn/icon-loader
• Lock — Animated Lucide lock icon — the body draws on, then the shackle lifts and slams shut with a confirming pop. · npx shadcn@latest add @remocn/icon-lock
• Log Out — Animated Lucide log-out icon — draws on, then the arrow steps out through the door frame with a fading echo. · npx shadcn@latest add @remocn/icon-log-out
• Mail — Animated Lucide mail icon — the envelope draws on, then the flap re-traces open and the whole envelope pops: you've got · npx shadcn@latest add @remocn/icon-mail
• Maximize — Animated Lucide maximize icon — four corner brackets draw on, then fly outward and spring back like a window going fulls · npx shadcn@latest add @remocn/icon-maximize
• Menu — Animated Lucide menu icon — the three bars slide in from the left, top to bottom, each overshooting into place. · npx shadcn@latest add @remocn/icon-menu
• Message Circle — Animated Lucide message-circle icon — the bubble draws on, then inflates from its tail like a message arriving. · npx shadcn@latest add @remocn/icon-message-circle
• Mic — Animated Lucide mic icon — draws on, then the capsule bounces twice like a level meter picking up voice. · npx shadcn@latest add @remocn/icon-mic
• Monitor — Animated Lucide monitor icon — the stand draws, then the screen powers on with a CRT-style unsquash. · npx shadcn@latest add @remocn/icon-monitor
• Moon — Animated Lucide moon icon — draws on, then rocks gently into place: settling in for the night. · npx shadcn@latest add @remocn/icon-moon
• More Horizontal — Animated Lucide more-horizontal icon — three dots pop in, then do a left-to-right thinking wave. · npx shadcn@latest add @remocn/icon-more-horizontal
• Package — Animated Lucide package icon — the box draws on, lands with a squash-and-stretch, then the tape seam seals it. · npx shadcn@latest add @remocn/icon-package
• Party Popper — Animated Lucide party-popper icon — the cone draws on, then confetti bursts outward as the cone recoils for launch, mile · npx shadcn@latest add @remocn/icon-party-popper
• Pause — Animated Lucide pause icon — the two bars draw on, then pinch toward each other and settle like a held breath. · npx shadcn@latest add @remocn/icon-pause
• Pencil — Animated Lucide pencil icon — draws on, then scribbles: the pencil rocks around its tip as if writing. · npx shadcn@latest add @remocn/icon-pencil
• Phone — Animated Lucide phone icon — draws on, then rings: three decaying rotation oscillations around center. · npx shadcn@latest add @remocn/icon-phone
• Play — Animated Lucide play icon — the triangle draws on, then presses in and springs forward like a play button being hit. · npx shadcn@latest add @remocn/icon-play
• Plus — Animated Lucide plus icon — the two strokes draw on, then the mark twirls 90deg with a scale pop for an energetic add or · npx shadcn@latest add @remocn/icon-plus
• Plus Circle — Animated Lucide plus-circle icon — the ring draws on, the plus crosses in, then the whole badge pops. · npx shadcn@latest add @remocn/icon-plus-circle
• Refresh Cw — Animated Lucide refresh-cw icon — the two arcs draw on, arrowheads pop, then the whole mark spins in cycles for sync, re · npx shadcn@latest add @remocn/icon-refresh-cw
• Rocket — Animated Lucide rocket icon — draws on, then lifts off: the ship rises on a tilt while the flame re-ignites, then eases · npx shadcn@latest add @remocn/icon-rocket
• Save — Animated Lucide save icon — the disk draws on, then presses down and writes: the label slot re-draws as data commits. · npx shadcn@latest add @remocn/icon-save
• Search — Animated Lucide search icon — the lens draws on, the handle extends, then the magnifier sweeps a small scanning path for · npx shadcn@latest add @remocn/icon-search
• Send — Animated Lucide send icon — the paper plane draws on, then darts forward with a wind-up and settles back for a send-mess · npx shadcn@latest add @remocn/icon-send
• Settings — Animated Lucide settings icon — the gear and center draw on, then the gear turns exactly one tooth for a settings, confi · npx shadcn@latest add @remocn/icon-settings
• Share 2 — Animated Lucide share-2 icon — three nodes draw on, then the connections re-trace and the receiving nodes pop as the sha · npx shadcn@latest add @remocn/icon-share-2
• Shield — Animated Lucide shield icon — draws on, then braces: a firm guard pulse that asserts protection. · npx shadcn@latest add @remocn/icon-shield
• Shopping Cart — Animated Lucide shopping-cart icon — draws on, then rolls forward to checkout, wheels popping as it stops. · npx shadcn@latest add @remocn/icon-shopping-cart
• Skip Forward — Animated Lucide skip-forward icon — draws on, then dashes forward past center and snaps against its end bar. · npx shadcn@latest add @remocn/icon-skip-forward
• Smartphone — Animated Lucide smartphone icon — draws on, then buzzes: three fast vibration oscillations. · npx shadcn@latest add @remocn/icon-smartphone
• Sparkles — Animated Lucide sparkles icon — the main sparkle draws on, the accents pop, then a looping twinkle for AI, magic, or pre · npx shadcn@latest add @remocn/icon-sparkles
• Star — Animated Lucide star icon — the outline draws on, then twinkles into place with a small rotate and scale pop for ratings · npx shadcn@latest add @remocn/icon-star
• Sun — Animated Lucide sun icon — the core draws on, then eight rays fan out clockwise and the sun swells: sunrise. · npx shadcn@latest add @remocn/icon-sun
• Tag — Animated Lucide tag icon — draws on, then swings from its hole like a price tag flicked by a shopper. · npx shadcn@latest add @remocn/icon-tag
• Target — Animated Lucide target icon — three rings draw in from outside, then the bullseye hits: inner dot pops and the board shu · npx shadcn@latest add @remocn/icon-target
• Terminal — Animated Lucide terminal icon — draws on, then the prompt nudges forward and the cursor blinks twice. · npx shadcn@latest add @remocn/icon-terminal
• Thumbs Up — Animated Lucide thumbs-up icon — the hand draws on, then springs up with an approving stamp for positive reviews, approv · npx shadcn@latest add @remocn/icon-thumbs-up
• Timer — Animated Lucide timer icon — draws on, then the start button clicks and the hand sweeps: the stopwatch is running. · npx shadcn@latest add @remocn/icon-timer
• Trash — Animated Lucide trash-2 icon — the can draws on, then the lid flips open and the contents vanish for a delete or cleanup · npx shadcn@latest add @remocn/icon-trash
• Trending Down — Animated Lucide trending-down icon — the line descends across, then the arrowhead lands with damped weight. · npx shadcn@latest add @remocn/icon-trending-down
• Trending Up — Animated Lucide trending-up icon — the line climbs across, then the arrowhead pops at the peak. · npx shadcn@latest add @remocn/icon-trending-up
• Trophy — Animated Lucide trophy icon — draws on, then hoists: the cup hops with a pop at the apex while its handles flash in. · npx shadcn@latest add @remocn/icon-trophy
• Upload — Animated Lucide upload icon — the tray draws on, the arrow fades in, then launches upward with a spring for an upload, p · npx shadcn@latest add @remocn/icon-upload
• User — Animated Lucide user icon — draws on, then gives a small presence nod: head dips as shoulders rise to meet it. · npx shadcn@latest add @remocn/icon-user
• User Plus — Animated Lucide user-plus icon — the figure draws on, then the plus strokes draw in and pop: a new member added. · npx shadcn@latest add @remocn/icon-user-plus
• Users — Animated Lucide users icon — the front figure draws on and pops, then the second figure slides in from behind: the team · npx shadcn@latest add @remocn/icon-users
• Video — Animated Lucide video icon — draws on, then the lens wedge pans out and snaps back to its shot. · npx shadcn@latest add @remocn/icon-video
• Volume 2 — Animated Lucide volume-2 icon — the speaker draws on, then the two sound waves ripple outward one after the other. · npx shadcn@latest add @remocn/icon-volume-2
• Volume X — Animated Lucide volume-x icon — the speaker draws on, then the X slashes in and the glyph shakes off the sound. · npx shadcn@latest add @remocn/icon-volume-x
• Wallet — Animated Lucide wallet icon — draws on, then the wallet thickens with a quiet x-scale: money in. · npx shadcn@latest add @remocn/icon-wallet
• X — Animated Lucide x icon — the two diagonals draw in crosswise, then the mark shakes to punctuate an error, removal, or di · npx shadcn@latest add @remocn/icon-x
• X Circle — Animated Lucide x-circle icon — the ring draws on, the X slashes in, and the badge shakes once: firmly rejected. · npx shadcn@latest add @remocn/icon-x-circle
• Zap — Animated Lucide zap icon — the bolt draws in fast, then flashes with a double blink for speed, performance, or instant-r · npx shadcn@latest add @remocn/icon-zap
• Paper Sticker — A taped paper chip that slaps onto the scene over two stop-motion poses, keeping a hand-placed tilt and per-pose wobble. · npx shadcn@latest add @remocn/paper-sticker