# 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](https://skills.varg.ai/component/varg.anime-jp-subtitles.md) — 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](https://skills.varg.ai/component/hf.caption-blend-difference.md) — 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](https://skills.varg.ai/component/hf.caption-camera-follow.md) — 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](https://skills.varg.ai/component/hf.caption-clip-wipe.md) — Left-to-right clip-path wipe reveal per word · `npx hyperframes add caption-clip-wipe`
- [Editorial Emphasis](https://skills.varg.ai/component/hf.caption-editorial-emphasis.md) — Dual-font system with dramatic size contrast for emphasis words · `npx hyperframes add caption-editorial-emphasis`
- [Emoji Pop](https://skills.varg.ai/component/hf.caption-emoji-pop.md) — Emoji integration with stroked text and horizontal squeeze entrance · `npx hyperframes add caption-emoji-pop`
- [Glitch RGB](https://skills.varg.ai/component/hf.caption-glitch-rgb.md) — RGB chromatic aberration with CRT scanline overlay · `npx hyperframes add caption-glitch-rgb`
- [Gradient Fill](https://skills.varg.ai/component/hf.caption-gradient-fill.md) — Gradient-clipped text with elastic bounce entrance · `npx hyperframes add caption-gradient-fill`
- [Highlight](https://skills.varg.ai/component/hf.caption-highlight.md) — Red background sweep behind each active word, TikTok-style · `npx hyperframes add caption-highlight`
- [Kinetic Slam](https://skills.varg.ai/component/hf.caption-kinetic-slam.md) — Full-screen single-word display with alternating entrance directions · `npx hyperframes add caption-kinetic-slam`
- [Matrix Decode](https://skills.varg.ai/component/hf.caption-matrix-decode.md) — Character scramble animation before text reveal · `npx hyperframes add caption-matrix-decode`
- [Neon Accent](https://skills.varg.ai/component/hf.caption-neon-accent.md) — Multi-color neon glow accents with wiggle drift animation · `npx hyperframes add caption-neon-accent`
- [Neon Glow](https://skills.varg.ai/component/hf.caption-neon-glow.md) — Cyan and magenta neon glow with keyword accent colors · `npx hyperframes add caption-neon-glow`
- [Parallax Layers](https://skills.varg.ai/component/hf.caption-parallax-layers.md) — Behind-subject 3D text layering with vertical stretch effect · `npx hyperframes add caption-parallax-layers`
- [Particle Burst](https://skills.varg.ai/component/hf.caption-particle-burst.md) — Keyword words trigger colored particle explosions · `npx hyperframes add caption-particle-burst`
- [Pill Karaoke](https://skills.varg.ai/component/hf.caption-pill-karaoke.md) — Pill-shaped container with per-word karaoke color highlight · `npx hyperframes add caption-pill-karaoke`
- [Texture](https://skills.varg.ai/component/hf.caption-texture.md) — 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](https://skills.varg.ai/component/hf.caption-weight-shift.md) — Elegant font-weight transition between caption lines · `npx hyperframes add caption-weight-shift`
- [Caption Active Pop](https://skills.varg.ai/component/remocn.caption-active-pop.md) — 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](https://skills.varg.ai/component/remocn.caption-blur-in.md) — 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](https://skills.varg.ai/component/remocn.caption-bounce-in.md) — 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](https://skills.varg.ai/component/remocn.caption-cube.md) — 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](https://skills.varg.ai/component/remocn.caption-dim-progress.md) — 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](https://skills.varg.ai/component/remocn.caption-drop.md) — 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](https://skills.varg.ai/component/remocn.caption-emoji.md) — 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](https://skills.varg.ai/component/remocn.caption-handwrite.md) — 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](https://skills.varg.ai/component/remocn.caption-highlight-box.md) — 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](https://skills.varg.ai/component/remocn.caption-karaoke.md) — 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](https://skills.varg.ai/component/remocn.caption-knockout.md) — 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](https://skills.varg.ai/component/remocn.caption-label-maker.md) — 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](https://skills.varg.ai/component/remocn.caption-marker.md) — 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](https://skills.varg.ai/component/remocn.caption-outline.md) — 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](https://skills.varg.ai/component/remocn.caption-prosody.md) — 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](https://skills.varg.ai/component/remocn.caption-redact.md) — 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](https://skills.varg.ai/component/remocn.caption-rise.md) — 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](https://skills.varg.ai/component/remocn.caption-scramble.md) — 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](https://skills.varg.ai/component/remocn.caption-slice.md) — 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](https://skills.varg.ai/component/remocn.caption-slot.md) — 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](https://skills.varg.ai/component/remocn.caption-speaker.md) — 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](https://skills.varg.ai/component/remocn.caption-split-flap.md) — 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](https://skills.varg.ai/component/remocn.caption-stack.md) — 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](https://skills.varg.ai/component/remocn.caption-stamp.md) — 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](https://skills.varg.ai/component/remocn.caption-subtitle.md) — 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](https://skills.varg.ai/component/remocn.caption-teleprompter.md) — 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](https://skills.varg.ai/component/remocn.caption-timeline.md) — 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](https://skills.varg.ai/component/remocn.caption-typewriter.md) — 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](https://skills.varg.ai/component/remocn.caption-underline.md) — 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](https://skills.varg.ai/component/remocn.caption-weight.md) — 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](https://skills.varg.ai/component/remocn.caption-word-pop.md) — 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](https://skills.varg.ai/component/varg.anime-triple-split.md) — 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](https://skills.varg.ai/component/varg.music-video.md) — 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](https://skills.varg.ai/component/hf.beat-accent.md) — A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay. · `npx hyperframes add beat-accent`
- [Beat Freeze Cut](https://skills.varg.ai/component/hf.beat-freeze-cut.md) — 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](https://skills.varg.ai/component/hf.beat-pulse-background.md) — An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid. · `npx hyperframes add beat-pulse-background`
- [Beat Timeline](https://skills.varg.ai/component/hf.beat-timeline.md) — 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](https://skills.varg.ai/component/hf.icon-morph-beat.md) — 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](https://skills.varg.ai/component/remocn.duotone-beat.md) — 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](https://skills.varg.ai/component/varg.apple-notes-video.md) — 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](https://skills.varg.ai/component/hf.avatar-group-hover.md) — A distance-falloff avatar group lift with bouncy hover return · `npx hyperframes add avatar-group-hover`
- [Camera Scan Gate](https://skills.varg.ai/component/hf.camera-scan-gate.md) — 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](https://skills.varg.ai/component/hf.card-resize.md) — A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel · `npx hyperframes add card-resize`
- [Dynamic Grid](https://skills.varg.ai/component/hf.dynamic-grid.md) — A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes · `npx hyperframes add dynamic-grid`
- [Focus Swap](https://skills.varg.ai/component/hf.focus-swap.md) — 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](https://skills.varg.ai/component/hf.icon-swap.md) — A scale-and-blur icon swap primitive for toolbar and action state changes · `npx hyperframes add icon-swap`
- [Input Feedback](https://skills.varg.ai/component/hf.input-feedback.md) — 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](https://skills.varg.ai/component/hf.ios26-liquid-glass.md) — 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](https://skills.varg.ai/component/hf.keyframe-scrub-stack.md) — A keyframe-sequenced stack of cards with offset timing and easing presets. · `npx hyperframes add keyframe-scrub-stack`
- [Menu Morph](https://skills.varg.ai/component/hf.menu-morph.md) — A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus · `npx hyperframes add menu-morph`
- [Modal Morph](https://skills.varg.ai/component/hf.modal-morph.md) — 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](https://skills.varg.ai/component/hf.notes-reveal.md) — 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](https://skills.varg.ai/component/hf.notes-typing.md) — 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](https://skills.varg.ai/component/hf.page-slide.md) — A transitions.dev-inspired page slide primitive with outgoing and incoming panels · `npx hyperframes add page-slide`
- [Settings Toggle Flow](https://skills.varg.ai/component/hf.settings-toggle-flow.md) — A composed settings flow with preference rows, toggle switches, and active-state feedback · `npx hyperframes add settings-toggle-flow`
- [Signup Flow](https://skills.varg.ai/component/hf.signup-flow.md) — A composed signup flow with social action, email field, password field, and submit button · `npx hyperframes add signup-flow`
- [Success Check](https://skills.varg.ai/component/hf.success-check.md) — A success check primitive with ring pop, path draw, and subtle rotate blur · `npx hyperframes add success-check`
- [Tabs Slide Indicator](https://skills.varg.ai/component/hf.tabs-slide-indicator.md) — A pill indicator transition that slides between active tabs · `npx hyperframes add tabs-slide-indicator`
- [Tilt Card](https://skills.varg.ai/component/hf.tilt-card.md) — A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax · `npx hyperframes add tilt-card`
- [Toggle Flip](https://skills.varg.ai/component/hf.toggle-flip.md) — 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](https://skills.varg.ai/component/hf.ui-3d-reveal.md) — Perspective 3D reveal animation for UI elements · `npx hyperframes add ui-3d-reveal`
- [UI Focus Zoom](https://skills.varg.ai/component/hf.ui-focus-zoom.md) — 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](https://skills.varg.ai/component/hf.vector-editor-rig.md) — 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](https://skills.varg.ai/component/remocn.accordion.md) — 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](https://skills.varg.ai/component/remocn.ai-prompt-flow.md) — 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](https://skills.varg.ai/component/remocn.alert-dialog.md) — 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](https://skills.varg.ai/component/remocn.button.md) — 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](https://skills.varg.ai/component/remocn.caret.md) — 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](https://skills.varg.ai/component/remocn.checkbox.md) — 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](https://skills.varg.ai/component/remocn.combobox.md) — 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](https://skills.varg.ai/component/remocn.command-menu.md) — 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](https://skills.varg.ai/component/remocn.command-menu-item.md) — 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](https://skills.varg.ai/component/remocn.context-menu.md) — 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](https://skills.varg.ai/component/remocn.dialog.md) — 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](https://skills.varg.ai/component/remocn.drawer.md) — 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](https://skills.varg.ai/component/remocn.dropdown-menu.md) — 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](https://skills.varg.ai/component/remocn.dropdown-menu-item.md) — 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](https://skills.varg.ai/component/remocn.field.md) — 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](https://skills.varg.ai/component/remocn.input.md) — 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](https://skills.varg.ai/component/remocn.popover.md) — 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](https://skills.varg.ai/component/remocn.radio.md) — 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](https://skills.varg.ai/component/remocn.resizable.md) — 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](https://skills.varg.ai/component/remocn.search-reveal.md) — 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](https://skills.varg.ai/component/remocn.select.md) — 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](https://skills.varg.ai/component/remocn.select-item.md) — 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](https://skills.varg.ai/component/remocn.select-menu.md) — 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](https://skills.varg.ai/component/remocn.settings-toggle-flow.md) — 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](https://skills.varg.ai/component/remocn.sheet.md) — 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](https://skills.varg.ai/component/remocn.signup-flow.md) — 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](https://skills.varg.ai/component/remocn.skeleton.md) — 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](https://skills.varg.ai/component/remocn.skeleton-block.md) — 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](https://skills.varg.ai/component/remocn.slider.md) — 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](https://skills.varg.ai/component/remocn.switch.md) — 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](https://skills.varg.ai/component/remocn.tabs.md) — 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](https://skills.varg.ai/component/remocn.toast.md) — 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](https://skills.varg.ai/component/remocn.toggle-group.md) — 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](https://skills.varg.ai/component/remocn.tooltip.md) — 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](https://skills.varg.ai/component/remocn.v0.md) — 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](https://skills.varg.ai/component/motionprimitives.animated-background.md) — 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](https://skills.varg.ai/component/varg.card-catalog-explainer.md) — 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](https://skills.varg.ai/component/hf.app-showcase.md) — Fitness app product showcase with three floating smartphone screens · `npx hyperframes add app-showcase`
- [HeyGen Avatar Promo Card](https://skills.varg.ai/component/hf.heygen-avatar-promo-card.md) — 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](https://skills.varg.ai/component/hf.offset-path-traveler.md) — A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit. · `npx hyperframes add offset-path-traveler`
- [Play Mode](https://skills.varg.ai/component/hf.play-mode.md) — Playful elastic animations · `npx hyperframes init my-video --example play-mode`
- [Product Promo](https://skills.varg.ai/component/hf.product-promo.md) — Multi-scene product showcase with SVG assets · `npx hyperframes init my-video --example product-promo`
- [Product Turntable](https://skills.varg.ai/component/hf.product-turntable.md) — 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](https://skills.varg.ai/component/hf.soft-blob-touch.md) — 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](https://skills.varg.ai/component/hf.state-chip-rail.md) — 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](https://skills.varg.ai/component/hf.sticky-mock-swap.md) — 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](https://skills.varg.ai/component/hf.tracing-beam.md) — 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](https://skills.varg.ai/component/hf.typed-prompt.md) — 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](https://skills.varg.ai/component/hf.velocity-throw-snap.md) — 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](https://skills.varg.ai/component/hf.vignelli.md) — Bold typography with red accents · `npx hyperframes init my-video --example vignelli`
- [Product Showcase](https://skills.varg.ai/component/remocn.launch-anything.md) — 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](https://skills.varg.ai/component/varg.iphone-duo-fold.md) — 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](https://skills.varg.ai/component/hf.browser-device-stage.md) — 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](https://skills.varg.ai/component/hf.device-frame-stage.md) — 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](https://skills.varg.ai/component/hf.multi-device-splay.md) — 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](https://skills.varg.ai/component/hf.parallax-device-dive.md) — 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](https://skills.varg.ai/component/hf.vfx-iphone-device.md) — 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](https://skills.varg.ai/component/magicui.iphone.md) — 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](https://skills.varg.ai/component/magicui.safari.md) — 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](https://skills.varg.ai/component/aceternity.macbook-scroll.md) — 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](https://skills.varg.ai/component/varg.liquid-thorn-logo.md) — 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](https://skills.varg.ai/component/hf.extruded-logo.md) — 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](https://skills.varg.ai/component/hf.frost-sequence-camera-orbit.md) — 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](https://skills.varg.ai/component/hf.gooey-split.md) — 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](https://skills.varg.ai/component/hf.logo-brand-close.md) — 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](https://skills.varg.ai/component/hf.logo-sting.md) — 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](https://skills.varg.ai/component/hf.scan-band.md) — 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](https://skills.varg.ai/component/hf.wordmark-tiles.md) — A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP · `npx hyperframes add wordmark-tiles`
- [Accordion Unfold](https://skills.varg.ai/component/remocn.accordion-unfold.md) — 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](https://skills.varg.ai/component/remocn.anamorphic-flare.md) — 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](https://skills.varg.ai/component/remocn.brand-guidelines.md) — 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](https://skills.varg.ai/component/remocn.brick-mosaic.md) — 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](https://skills.varg.ai/component/remocn.inflate.md) — 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](https://skills.varg.ai/component/remocn.liquid-fill.md) — 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](https://skills.varg.ai/component/remocn.neon-sign.md) — 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](https://skills.varg.ai/component/remocn.orbit-lock.md) — 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](https://skills.varg.ai/component/remocn.puzzle-snap.md) — 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](https://skills.varg.ai/component/remocn.spotlight.md) — 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](https://skills.varg.ai/component/reactbits.metallic-paint.md) — 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](https://skills.varg.ai/component/varg.stamp-carousel.md) — 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](https://skills.varg.ai/component/hf.carousel-circle-1.md) — 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](https://skills.varg.ai/component/hf.carousel-circle-2.md) — 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](https://skills.varg.ai/component/hf.carousel-circle-3.md) — 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](https://skills.varg.ai/component/hf.carousel-circle-4.md) — 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](https://skills.varg.ai/component/hf.carousel-circle-5.md) — 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](https://skills.varg.ai/component/hf.carousel-orbit-1.md) — 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](https://skills.varg.ai/component/hf.carousel-orbit-2.md) — 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](https://skills.varg.ai/component/hf.carousel-orbit-3.md) — 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](https://skills.varg.ai/component/hf.carousel-orbit-4.md) — 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](https://skills.varg.ai/component/hf.carousel-orbit-5.md) — 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](https://skills.varg.ai/component/hf.carousel-path-1.md) — 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](https://skills.varg.ai/component/hf.carousel-path-2.md) — 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](https://skills.varg.ai/component/hf.carousel-path-3.md) — 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](https://skills.varg.ai/component/hf.carousel-path-4.md) — 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](https://skills.varg.ai/component/hf.carousel-path-5.md) — 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](https://skills.varg.ai/component/hf.carousel-text-circle-1.md) — 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](https://skills.varg.ai/component/hf.carousel-text-circle-2.md) — 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](https://skills.varg.ai/component/hf.carousel-text-circle-3.md) — 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](https://skills.varg.ai/component/hf.carousel-text-circle-4.md) — 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](https://skills.varg.ai/component/hf.carousel-text-circle-5.md) — 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](https://skills.varg.ai/component/hf.carousel-vision-1.md) — 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](https://skills.varg.ai/component/hf.carousel-vision-2.md) — 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](https://skills.varg.ai/component/hf.carousel-vision-3.md) — 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](https://skills.varg.ai/component/hf.carousel-vision-4.md) — 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](https://skills.varg.ai/component/hf.carousel-vision-5.md) — 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](https://skills.varg.ai/component/hf.cinemagraph.md) — 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](https://skills.varg.ai/component/hf.cuboid-carousel.md) — A chain of bevelled cuboids rides a travelling wave as a content carousel. · `npx hyperframes add cuboid-carousel`
- [Gallery Tunnel](https://skills.varg.ai/component/hf.gallery-tunnel.md) — 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](https://skills.varg.ai/component/hf.perspective-marquee.md) — A 3D tilted marquee with depth feel as items roll toward the horizon. · `npx hyperframes add perspective-marquee`
- [Screen Flow Carousel](https://skills.varg.ai/component/hf.screen-flow-carousel.md) — 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](https://skills.varg.ai/component/hf.share-sheet-carousel.md) — 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](https://skills.varg.ai/component/remocn.polaroid.md) — An instant-photo frame with a handwritten caption for video, images, or live compositions. · `npx shadcn@latest add @remocn/polaroid`
- [Reel](https://skills.varg.ai/component/remocn.reel.md) — 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](https://skills.varg.ai/component/magicui.marquee.md) — 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](https://skills.varg.ai/component/aceternity.3d-marquee.md) — 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](https://skills.varg.ai/component/codrops.scroll-3d-grid.md) — 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](https://skills.varg.ai/component/fancy.circling-elements.md) — 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](https://skills.varg.ai/component/fancy.marquee-along-svg-path.md) — A ribbon of colourful tiles snaking along a looping curve across the frame · `npx shadcn add @fancy/marquee-along-svg-path`
- [Simple Marquee](https://skills.varg.ai/component/fancy.simple-marquee.md) — Rows of gradient tiles scrolling sideways at different speeds under a serif title · `npx shadcn add @fancy/simple-marquee`
- [Box Carousel](https://skills.varg.ai/component/fancy.box-carousel.md) — Photos on the faces of a 3D box that turns to bring the next image forward · `npx shadcn add @fancy/box-carousel`
- [Infinite Slider](https://skills.varg.ai/component/motionprimitives.infinite-slider.md) — A row of logos glides sideways forever in a seamless loop · `npx motion-primitives@latest add infinite-slider`

## Camera moves

- [varg Previz](https://skills.varg.ai/component/varg.previz.md) — 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)](https://skills.varg.ai/component/hf.camera-dolly-zoom.md) — 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](https://skills.varg.ai/component/hf.camera-rig-depth-stack.md) — A 3D camera-rig-style card stack with depth, parallax, and focus shift. · `npx hyperframes add camera-rig-depth-stack`
- [Camera Shake](https://skills.varg.ai/component/hf.camera-shake.md) — 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](https://skills.varg.ai/component/hf.cinematic-zoom.md) — Shader transition with dramatic zoom blur · `npx hyperframes add cinematic-zoom`
- [Drift Hold](https://skills.varg.ai/component/hf.drift-hold.md) — 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](https://skills.varg.ai/component/hf.filmed-screen.md) — 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](https://skills.varg.ai/component/hf.focus-rack.md) — Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax · `npx hyperframes add focus-rack`
- [Orbit Card](https://skills.varg.ai/component/hf.orbit-card.md) — A single feature card orbits a dot sphere on approved Blender camera motion. · `npx hyperframes add orbit-card`
- [Pan Stations](https://skills.varg.ai/component/hf.pan-stations.md) — 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](https://skills.varg.ai/component/hf.parallax-unzoom.md) — 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](https://skills.varg.ai/component/hf.parallax-zoom.md) — 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](https://skills.varg.ai/component/hf.pull-back-reveal.md) — 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](https://skills.varg.ai/component/hf.push-in.md) — A centered headline gains focus through one slow, continuous camera push and a gentle fade out. · `npx hyperframes add push-in`
- [Rack Focus](https://skills.varg.ai/component/hf.rack-focus.md) — 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](https://skills.varg.ai/component/hf.scroll-camera-story.md) — 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](https://skills.varg.ai/component/hf.yt-camera-move.md) — 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](https://skills.varg.ai/component/remocn.camera-lens.md) — 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](https://skills.varg.ai/component/remocn.cloth-reveal.md) — 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](https://skills.varg.ai/component/remocn.dolly-zoom.md) — 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](https://skills.varg.ai/component/remocn.exploded-view.md) — 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](https://skills.varg.ai/component/remocn.gravity-pile.md) — 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](https://skills.varg.ai/component/remocn.impact-shake.md) — 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](https://skills.varg.ai/component/remocn.parallax-depth.md) — 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](https://skills.varg.ai/component/remocn.tiny-planet.md) — 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](https://skills.varg.ai/component/remocn.turntable.md) — 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](https://skills.varg.ai/component/hf.agent-cursor.md) — 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](https://skills.varg.ai/component/hf.cursor-annotate.md) — 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](https://skills.varg.ai/component/hf.cursor-context-menu.md) — 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](https://skills.varg.ai/component/hf.cursor-drag-drop.md) — 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](https://skills.varg.ai/component/hf.cursor-glyph-trail.md) — 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](https://skills.varg.ai/component/hf.cursor-marquee-select.md) — 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](https://skills.varg.ai/component/hf.cursor-text-select.md) — 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](https://skills.varg.ai/component/hf.cursor-zoom-follow.md) — 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](https://skills.varg.ai/component/hf.dart-cursor.md) — 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](https://skills.varg.ai/component/hf.gesture-tap.md) — 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](https://skills.varg.ai/component/hf.lottie-character-walk.md) — 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](https://skills.varg.ai/component/hf.magnetic-cursor.md) — 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](https://skills.varg.ai/component/hf.multiplayer-cursors.md) — 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](https://skills.varg.ai/component/hf.oversized-cursor.md) — 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](https://skills.varg.ai/component/hf.press-ripple.md) — 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](https://skills.varg.ai/component/hf.pull-to-refresh.md) — 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](https://skills.varg.ai/component/hf.spotlight-card.md) — A card with a scripted cursor spotlight and lit border. · `npx hyperframes add spotlight-card`
- [Swipe Rail](https://skills.varg.ai/component/hf.swipe-rail.md) — 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](https://skills.varg.ai/component/hf.touch-indicator.md) — 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](https://skills.varg.ai/component/hf.yt-circle-pointer.md) — Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick · `npx hyperframes add yt-circle-pointer`
- [UI Cursor](https://skills.varg.ai/component/remocn.cursor.md) — 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](https://skills.varg.ai/component/remocn.cursor-gravity.md) — A rounded triangular cursor tugs a button out of the screen edge with pulsed elastic resistance. · `npx shadcn@latest add @remocn/cursor-gravity`
- [Keystroke](https://skills.varg.ai/component/remocn.keystroke.md) — 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](https://skills.varg.ai/component/remocn.simulated-cursor.md) — Animated mouse cursor moving between waypoints with click ripple feedback. · `npx shadcn@latest add @remocn/simulated-cursor`

## Chats & messages

- [AI Answer Rank](https://skills.varg.ai/component/hf.ai-answer-rank.md) — 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](https://skills.varg.ai/component/hf.ai-chat-reveal.md) — 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](https://skills.varg.ai/component/hf.chat-message.md) — 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](https://skills.varg.ai/component/hf.chat-thread.md) — 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](https://skills.varg.ai/component/hf.chatgpt-exchange.md) — 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](https://skills.varg.ai/component/hf.claude-exchange.md) — 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](https://skills.varg.ai/component/hf.message-thread-reveal.md) — 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](https://skills.varg.ai/component/hf.thread-message-stack.md) — A source-owned editable conversation stack with arbitrary incoming and outgoing messages · `npx hyperframes add thread-message-stack`
- [Typing Indicator](https://skills.varg.ai/component/hf.typing-indicator.md) — 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](https://skills.varg.ai/component/remocn.chat-flow.md) — 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](https://skills.varg.ai/component/remocn.chat-gpt.md) — 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](https://skills.varg.ai/component/remocn.chat-to-preview-layout.md) — Two-column layout where chat shrinks and preview expands. · `npx shadcn@latest add @remocn/chat-to-preview-layout`
- [Claude Chat](https://skills.varg.ai/component/remocn.claude-chat.md) — 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](https://skills.varg.ai/component/remocn.imessage-chat-flow.md) — 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](https://skills.varg.ai/component/remocn.message-bubble.md) — 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](https://skills.varg.ai/component/remocn.telegram-chat-flow.md) — 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](https://skills.varg.ai/component/remocn.typing-indicator.md) — 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](https://skills.varg.ai/component/hf.animated-bar-chart.md) — A compact data card with deterministic bar growth and value callouts. · `npx hyperframes add animated-bar-chart`
- [Bar Chart Race](https://skills.varg.ai/component/hf.bar-chart-race.md) — 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](https://skills.varg.ai/component/hf.chart-story.md) — 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](https://skills.varg.ai/component/hf.data-chart.md) — Animated bar + line chart with staggered reveal, NYT-style typography, and value labels · `npx hyperframes add data-chart`
- [Decline Chart](https://skills.varg.ai/component/hf.decline-chart.md) — 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](https://skills.varg.ai/component/hf.mk-line-graph.md) — 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](https://skills.varg.ai/component/hf.mk-usage-arc.md) — Thin circular gauge that draws on while its percentage counts up; one helper call drives both · `npx hyperframes add mk-usage-arc`
- [NYT Graph](https://skills.varg.ai/component/hf.nyt-graph.md) — Animated data chart in print editorial style · `npx hyperframes init my-video --example nyt-graph`
- [Week in Merges](https://skills.varg.ai/component/hf.week-in-merges.md) — 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](https://skills.varg.ai/component/remocn.animated-bar-chart.md) — Bars spring up from the baseline in a staggered cascade. · `npx shadcn@latest add @remocn/animated-bar-chart`
- [Animated Line Chart](https://skills.varg.ai/component/remocn.animated-line-chart.md) — 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](https://skills.varg.ai/component/hf.apple-money-count.md) — 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](https://skills.varg.ai/component/hf.count-up.md) — 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](https://skills.varg.ai/component/hf.mk-progress-stat.md) — 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](https://skills.varg.ai/component/hf.number-wheel.md) — A rolling digit counter primitive for metrics, prices, counts, and scoreboards · `npx hyperframes add number-wheel`
- [Bauhaus Build](https://skills.varg.ai/component/remocn.bauhaus-build.md) — 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](https://skills.varg.ai/component/remocn.hand-count.md) — 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](https://skills.varg.ai/component/remocn.isometric-build.md) — 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](https://skills.varg.ai/component/remocn.number-wheel.md) — 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](https://skills.varg.ai/component/remocn.rolling-number.md) — 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](https://skills.varg.ai/component/reactbits.count-up.md) — 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](https://skills.varg.ai/component/magicui.number-ticker.md) — 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](https://skills.varg.ai/component/fancy.basic-number-ticker.md) — 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](https://skills.varg.ai/component/animateui.sliding-number.md) — An odometer number whose digits roll on little wheels up to their final value · `npm install @animate-ui/react motion`
- [Animated Number](https://skills.varg.ai/component/motionprimitives.animated-number.md) — 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](https://skills.varg.ai/component/motionprimitives.sliding-number.md) — Clock digits slide vertically into place as each second ticks over · `npx motion-primitives@latest add sliding-number`
- [Counter](https://skills.varg.ai/component/animata.counter.md) — 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](https://skills.varg.ai/component/hf.arc-motion-path.md) — A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation. · `npx hyperframes add arc-motion-path`
- [Hand-Drawn Arrow](https://skills.varg.ai/component/hf.hw-arrow.md) — 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](https://skills.varg.ai/component/hf.hw-boil.md) — 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](https://skills.varg.ai/component/hf.hw-box-label.md) — 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](https://skills.varg.ai/component/hf.hw-callout-circle.md) — 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](https://skills.varg.ai/component/hf.hw-frame.md) — 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](https://skills.varg.ai/component/hf.hw-path-text.md) — 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](https://skills.varg.ai/component/hf.hw-scribble-transition.md) — 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](https://skills.varg.ai/component/hf.hw-text-cloud.md) — 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](https://skills.varg.ai/component/hf.hw-title.md) — 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](https://skills.varg.ai/component/hf.hw-underline.md) — Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on · `npx hyperframes add hw-underline`
- [Handwritten Write-On Title](https://skills.varg.ai/component/hf.hw-write-title.md) — 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](https://skills.varg.ai/component/hf.inline-highlight.md) — A clean marker-style inline highlight that animates behind text using a CSS scale variable · `npx hyperframes add inline-highlight`
- [Marker Checklist Card](https://skills.varg.ai/component/hf.marker-checklist-card.md) — 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](https://skills.varg.ai/component/hf.marker-highlight.md) — 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](https://skills.varg.ai/component/hf.mk-callout-highlight.md) — 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](https://skills.varg.ai/component/hf.vox-annotate.md) — 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](https://skills.varg.ai/component/hf.yt-feather-highlight.md) — 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](https://skills.varg.ai/component/remocn.blueprint.md) — 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](https://skills.varg.ai/component/remocn.handwrite.md) — 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](https://skills.varg.ai/component/remocn.ink-arrow.md) — 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](https://skills.varg.ai/component/remocn.ink-underline.md) — 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](https://skills.varg.ai/component/remocn.inline-highlight.md) — Animates one word inside a sentence from a base color to a brand color. · `npx shadcn@latest add @remocn/inline-highlight`
- [Marker Highlight](https://skills.varg.ai/component/remocn.marker-highlight.md) — Colored marker block draws behind a phrase as the text color shifts. · `npx shadcn@latest add @remocn/marker-highlight`
- [Scribble Circle](https://skills.varg.ai/component/remocn.scribble-circle.md) — 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](https://skills.varg.ai/component/remocn.squiggle.md) — 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](https://skills.varg.ai/component/fancy.text-highlighter.md) — 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](https://skills.varg.ai/component/hf.ascii-render-pass.md) — 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](https://skills.varg.ai/component/hf.ascii-trail-reveal.md) — 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](https://skills.varg.ai/component/hf.fractal-noise.md) — 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](https://skills.varg.ai/component/hf.gabor-noise.md) — 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](https://skills.varg.ai/component/hf.worley-noise.md) — 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](https://skills.varg.ai/component/remocn.ascii-render.md) — 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](https://skills.varg.ai/component/remocn.flow-field.md) — 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](https://skills.varg.ai/component/remocn.life-grid.md) — 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](https://skills.varg.ai/component/remocn.phyllotaxis.md) — 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](https://skills.varg.ai/component/remocn.string-art.md) — 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](https://skills.varg.ai/component/remocn.topo-lines.md) — 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](https://skills.varg.ai/component/remocn.truchet-flip.md) — 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](https://skills.varg.ai/component/reactbits.dither.md) — 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](https://skills.varg.ai/component/vanta.globe.md) — A pink wireframe globe ringed with spikes, turning slowly off-centre over a faint net on dark purple · `npm i vanta`
- [Net](https://skills.varg.ai/component/vanta.net.md) — Pink nodes and connecting lines forming a loose 3D mesh that rotates slowly on dark purple · `npm i vanta`
- [Trunk](https://skills.varg.ai/component/vanta.trunk.md) — Dozens of thin wobbling rings around an empty centre, like tree rings drawn in one pen · `npm i vanta`
- [Topology](https://skills.varg.ai/component/vanta.topology.md) — Thin green strands streaming along a flow field, combing into a contour-like texture on dark teal · `npm i vanta`
- [Dots](https://skills.varg.ai/component/vanta.dots.md) — A spiky orange starburst of lines turning above a faint rolling grid of dots on charcoal · `npm i vanta`
- [Links](https://skills.varg.ai/component/tsparticles.links.md) — 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](https://skills.varg.ai/component/tsparticles.triangles.md) — 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](https://skills.varg.ai/component/tsparticles.sea-anemone.md) — 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](https://skills.varg.ai/component/tsparticles.matrix.md) — 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](https://skills.varg.ai/component/animateui.glyph-background.md) — 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](https://skills.varg.ai/component/animateui.topography-background.md) — 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](https://skills.varg.ai/component/hf.aurora.md) — 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](https://skills.varg.ai/component/hf.aurora-drift.md) — 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](https://skills.varg.ai/component/hf.flowing-gradient.md) — 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](https://skills.varg.ai/component/hf.mesh-gradient.md) — 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](https://skills.varg.ai/component/hf.mesh-gradient-bg.md) — A render-safe mesh gradient using animated radial layers. · `npx hyperframes add mesh-gradient-bg`
- [Minimal Gradient Background](https://skills.varg.ai/component/hf.mk-background.md) — 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](https://skills.varg.ai/component/hf.mk-emphasis-type.md) — Oversized low-contrast background word drifting slowly behind the subject — typography as texture · `npx hyperframes add mk-emphasis-type`
- [Rounded Media Grid](https://skills.varg.ai/component/hf.mk-placeholder-grid.md) — 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](https://skills.varg.ai/component/hf.vfx-anamorphic-flare.md) — 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](https://skills.varg.ai/component/hf.vfx-liquid-background.md) — Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surfa · `npx hyperframes add vfx-liquid-background`
- [Backdrop](https://skills.varg.ai/component/remocn.backdrop.md) — 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](https://skills.varg.ai/component/magicui.retro-grid.md) — Synthwave floor grid in perspective rolling toward the viewer under a pink-to-orange title · `npx shadcn@latest add @magicui/retro-grid`
- [Flickering Grid](https://skills.varg.ai/component/magicui.flickering-grid.md) — A grid of tiny grey squares twinkling at random brightness, like a dim LED wall · `npx shadcn@latest add @magicui/flickering-grid`
- [Warp Background](https://skills.varg.ai/component/magicui.warp-background.md) — A card floats in a perspective tunnel while coloured light streaks race along the grid walls · `npx shadcn@latest add @magicui/warp-background`
- [Ripple](https://skills.varg.ai/component/magicui.ripple.md) — Soft concentric rings around a centred word, breathing in and out in a staggered wave · `npx shadcn@latest add @magicui/ripple`
- [Waves](https://skills.varg.ai/component/vanta.waves.md) — A glossy faceted blue water surface rolling in slow swells, filling the frame edge to edge · `npm i vanta`
- [Rings](https://skills.varg.ai/component/vanta.rings.md) — Neon arcs in green, pink, orange and blue orbiting a tangled core of rings, tilted in 3D on charcoal · `npm i vanta`
- [Halo](https://skills.varg.ai/component/shadergradient.halo.md) — 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](https://skills.varg.ai/component/shadergradient.pensive.md) — 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](https://skills.varg.ai/component/shadergradient.mint.md) — 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](https://skills.varg.ai/component/shadergradient.interstella.md) — 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](https://skills.varg.ai/component/shadergradient.nighty-night.md) — 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](https://skills.varg.ai/component/shadergradient.viola.md) — 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](https://skills.varg.ai/component/shadergradient.universe.md) — 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](https://skills.varg.ai/component/shadergradient.sunset.md) — 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](https://skills.varg.ai/component/shadergradient.mandarin.md) — 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](https://skills.varg.ai/component/shadergradient.cotton-candy.md) — 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](https://skills.varg.ai/component/aceternity.aurora-background.md) — 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](https://skills.varg.ai/component/aceternity.background-gradient-animation.md) — 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](https://skills.varg.ai/component/aceternity.wavy-background.md) — 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](https://skills.varg.ai/component/aceternity.background-lines.md) — Thin colored curves draw themselves across a black frame in staggered waves behind centered text · `npx shadcn@latest add @aceternity/background-lines`
- [Ambient](https://skills.varg.ai/component/tsparticles.ambient.md) — 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](https://skills.varg.ai/component/fancy.animated-gradient-with-svg.md) — 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](https://skills.varg.ai/component/animateui.bubble-background.md) — 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](https://skills.varg.ai/component/animateui.gradient-background.md) — A purple-to-pink diagonal gradient sliding slowly back and forth across the frame · `npx shadcn@latest add @animate-ui/backgrounds-gradient`
- [Animated Beam](https://skills.varg.ai/component/animata.animated-beam.md) — 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](https://skills.varg.ai/component/heropatterns.topography.md) — Wavy contour lines like a topographic map, tiled seamlessly over a solid color · `curl -LO https://heropatterns.com/svg/topography.zip`
- [Jigsaw](https://skills.varg.ai/component/heropatterns.jigsaw.md) — Interlocking jigsaw-puzzle outlines covering the frame in a seamless grid · `curl -LO https://heropatterns.com/svg/jigsaw.zip`
- [Overcast](https://skills.varg.ai/component/heropatterns.overcast.md) — Beveled square panels, each holding a slashed circle, tiled like embossed metal plates · `curl -LO https://heropatterns.com/svg/overcast.zip`
- [Formal Invitation](https://skills.varg.ai/component/heropatterns.formal-invitation.md) — Bold parallel wave bands, like the lining of a formal invitation envelope · `curl -LO https://heropatterns.com/svg/formal-invitation.zip`
- [Bubbles](https://skills.varg.ai/component/heropatterns.bubbles.md) — Scattered dots and rings of different sizes, like rising soda bubbles · `curl -LO https://heropatterns.com/svg/bubbles.zip`
- [Wiggle](https://skills.varg.ai/component/heropatterns.wiggle.md) — Rows of short squiggly lines running diagonally across the frame · `curl -LO https://heropatterns.com/svg/wiggle.zip`
- [Circuit Board](https://skills.varg.ai/component/heropatterns.circuit-board.md) — Dense traces and pads of a printed circuit board, tiled edge to edge · `curl -LO https://heropatterns.com/svg/circuit-board.zip`
- [Hexagons](https://skills.varg.ai/component/heropatterns.hexagons.md) — A honeycomb of thin hexagon outlines · `curl -LO https://heropatterns.com/svg/hexagons.zip`
- [Graph Paper](https://skills.varg.ai/component/heropatterns.graph-paper.md) — A fine graph-paper grid with a darker line every tenth square · `curl -LO https://heropatterns.com/svg/graph-paper.zip`
- [Floating Cogs](https://skills.varg.ai/component/heropatterns.floating-cogs.md) — Gears and cogs of different sizes scattered across the frame · `curl -LO https://heropatterns.com/svg/floating-cogs.zip`
- [Charlie Brown](https://skills.varg.ai/component/heropatterns.charlie-brown.md) — Tight zigzag chevron stripes, like the stripe on a famous cartoon shirt · `curl -LO https://heropatterns.com/svg/charlie-brown.zip`
- [I Like Food](https://skills.varg.ai/component/heropatterns.i-like-food.md) — 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](https://skills.varg.ai/component/heropatterns.brick-wall.md) — Running-bond brick courses with thin mortar lines · `curl -LO https://heropatterns.com/svg/brick-wall.zip`
- [Endless Clouds](https://skills.varg.ai/component/heropatterns.endless-clouds.md) — Stacked overlapping arcs, like stylized clouds or Japanese wave scales · `curl -LO https://heropatterns.com/svg/endless-clouds.zip`
- [Moroccan](https://skills.varg.ai/component/heropatterns.moroccan.md) — Ornate Moroccan lantern outlines locked together in a lattice · `curl -LO https://heropatterns.com/svg/moroccan.zip`

## Social proof

- [Avatar Cloud](https://skills.varg.ai/component/hf.avatar-cloud.md) — 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](https://skills.varg.ai/component/hf.logo-wall.md) — 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](https://skills.varg.ai/component/hf.social-proof-card.md) — 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](https://skills.varg.ai/component/hf.star-rating-fill.md) — 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](https://skills.varg.ai/component/hf.testimonial-card.md) — 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](https://skills.varg.ai/component/hf.testimonial-proof-card.md) — 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](https://skills.varg.ai/component/hf.trust-strip.md) — 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](https://skills.varg.ai/component/remocn.github-sponsors.md) — 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](https://skills.varg.ai/component/remocn.github-stars.md) — 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](https://skills.varg.ai/component/remocn.logo-enter.md) — 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](https://skills.varg.ai/component/hf.badge-pop.md) — A transitions.dev-inspired notification badge pop with elastic scale and count reveal · `npx hyperframes add badge-pop`
- [Curtain Reveal](https://skills.varg.ai/component/hf.curtain-reveal.md) — 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](https://skills.varg.ai/component/hf.echo-smear.md) — Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time · `npx hyperframes add echo-smear`
- [Echo Trail](https://skills.varg.ai/component/hf.echo-trail.md) — 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](https://skills.varg.ai/component/hf.gloss-sweep.md) — A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still. · `npx hyperframes add gloss-sweep`
- [Ink Bleed Reveal](https://skills.varg.ai/component/hf.ink-bleed-reveal.md) — 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](https://skills.varg.ai/component/hf.iris-reveal.md) — 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](https://skills.varg.ai/component/hf.light-sweep-pass.md) — 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](https://skills.varg.ai/component/hf.number-pop-in.md) — A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal · `npx hyperframes add number-pop-in`
- [Outline Draw](https://skills.varg.ai/component/hf.outline-draw.md) — 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](https://skills.varg.ai/component/hf.panel-reveal.md) — A panel reveal primitive with height expansion and content fade · `npx hyperframes add panel-reveal`
- [Physical Exit](https://skills.varg.ai/component/hf.physical-exit.md) — 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](https://skills.varg.ai/component/hf.radial-surround.md) — 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](https://skills.varg.ai/component/hf.sheet-spring-up.md) — 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](https://skills.varg.ai/component/hf.shimmer-sweep.md) — 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](https://skills.varg.ai/component/hf.skeleton-reveal.md) — A skeleton loader transition that pulses, then cross-fades into content · `npx hyperframes add skeleton-reveal`
- [Slit Scan Reveal](https://skills.varg.ai/component/hf.slit-scan-reveal.md) — 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](https://skills.varg.ai/component/hf.spring-pop.md) — 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](https://skills.varg.ai/component/hf.spring-stack-shuffle.md) — 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](https://skills.varg.ai/component/hf.stagger-cascade.md) — 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](https://skills.varg.ai/component/hf.stagger-lattice.md) — A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames. · `npx hyperframes add stagger-lattice`
- [Staggered Fade Up](https://skills.varg.ai/component/hf.staggered-fade-up.md) — Words fade in and slide up one after another with configurable delay. · `npx hyperframes add staggered-fade-up`
- [Stop Motion Cadence](https://skills.varg.ai/component/hf.stop-motion-cadence.md) — 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](https://skills.varg.ai/component/hf.svg-mask-reveal.md) — A soft token-colored sweep reveals media only through an editable SVG wordmark mask. · `npx hyperframes add svg-mask-reveal`
- [Long Shadow](https://skills.varg.ai/component/remocn.long-shadow.md) — 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](https://skills.varg.ai/component/remocn.speed-lines.md) — 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](https://skills.varg.ai/component/magicui.border-beam.md) — 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](https://skills.varg.ai/component/fancy.float.md) — An album cover bobbing and tilting gently in 3D above its caption, as if floating in water · `npx shadcn add @fancy/float`
- [Glow Effect](https://skills.varg.ai/component/motionprimitives.glow-effect.md) — A blurred multicolor glow behind a card or button, its hue shifting around the edges · `npx motion-primitives@latest add glow-effect`
- [Border Trail](https://skills.varg.ai/component/motionprimitives.border-trail.md) — 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](https://skills.varg.ai/component/motionprimitives.animated-group.md) — 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](https://skills.varg.ai/component/hf.before-after-wipe.md) — 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](https://skills.varg.ai/component/hf.comparison-split.md) — 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](https://skills.varg.ai/component/hf.split-tilt-cards.md) — 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](https://skills.varg.ai/component/hf.blob.md) — 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](https://skills.varg.ai/component/hf.chrome-orb.md) — 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](https://skills.varg.ai/component/hf.color-wheel.md) — 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](https://skills.varg.ai/component/hf.falling-lines.md) — 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](https://skills.varg.ai/component/hf.frost.md) — 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](https://skills.varg.ai/component/hf.godrays.md) — 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](https://skills.varg.ai/component/hf.heatmap.md) — Thermal colours flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT). · `npx hyperframes add heatmap`
- [Holographic](https://skills.varg.ai/component/hf.holographic.md) — 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](https://skills.varg.ai/component/hf.lens-flare.md) — 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](https://skills.varg.ai/component/hf.light-edge.md) — 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](https://skills.varg.ai/component/hf.liquid-glass-widgets.md) — Frosted glass stat cards, showcase panel and pill chips over an aurora shader background · `npx hyperframes add liquid-glass-widgets`
- [Marble](https://skills.varg.ai/component/hf.marble.md) — 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](https://skills.varg.ai/component/hf.nebula.md) — 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](https://skills.varg.ai/component/hf.obsidian.md) — 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](https://skills.varg.ai/component/hf.plasma.md) — 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](https://skills.varg.ai/component/hf.plastic.md) — 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](https://skills.varg.ai/component/hf.prism.md) — 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](https://skills.varg.ai/component/hf.ripples.md) — 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](https://skills.varg.ai/component/hf.sine-wave.md) — 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](https://skills.varg.ai/component/hf.spiral.md) — 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](https://skills.varg.ai/component/hf.strands.md) — 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](https://skills.varg.ai/component/hf.stripes.md) — 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](https://skills.varg.ai/component/hf.swirl.md) — 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](https://skills.varg.ai/component/hf.thin-film.md) — 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](https://skills.varg.ai/component/hf.vfx-liquid-glass.md) — VFX composition block · `npx hyperframes add vfx-liquid-glass`
- [Magnetic](https://skills.varg.ai/component/hf.vfx-magnetic.md) — VFX composition block · `npx hyperframes add vfx-magnetic`
- [Portal](https://skills.varg.ai/component/hf.vfx-portal.md) — VFX composition block · `npx hyperframes add vfx-portal`
- [Shatter](https://skills.varg.ai/component/hf.vfx-shatter.md) — VFX composition block · `npx hyperframes add vfx-shatter`
- [Voronoi](https://skills.varg.ai/component/hf.voronoi.md) — 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](https://skills.varg.ai/component/hf.water.md) — 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](https://skills.varg.ai/component/remocn.shader-caustics.md) — A field of refracted light — the bright filaments light makes through a rippling surface. · `npx shadcn@latest add @remocn/shader-caustics`
- [Shader Color Panels](https://skills.varg.ai/component/remocn.shader-color-panels.md) — Overlapping translucent color panels sliding past each other. · `npx shadcn@latest add @remocn/shader-color-panels`
- [Shader Dithering](https://skills.varg.ai/component/remocn.shader-dithering.md) — Ordered-dither shading over an animated gradient field. · `npx shadcn@latest add @remocn/shader-dithering`
- [Shader Dot Orbit](https://skills.varg.ai/component/remocn.shader-dot-orbit.md) — Dots orbiting on concentric paths across the frame. · `npx shadcn@latest add @remocn/shader-dot-orbit`
- [Shader Gem Smoke](https://skills.varg.ai/component/remocn.shader-gem-smoke.md) — 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](https://skills.varg.ai/component/remocn.shader-god-rays.md) — Volumetric light rays radiating from an off-screen source. · `npx shadcn@latest add @remocn/shader-god-rays`
- [Shader Grain Gradient](https://skills.varg.ai/component/remocn.shader-grain-gradient.md) — 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](https://skills.varg.ai/component/remocn.shader-grain-gradient-arcade.md) — Retro grainy dots in orange, yellow and green on black. · `npx shadcn@latest add @remocn/shader-grain-gradient-arcade`
- [Shader Grain Gradient Blush](https://skills.varg.ai/component/remocn.shader-grain-gradient-blush.md) — Pastel pink and apricot blob morphing on warm off-white. · `npx shadcn@latest add @remocn/shader-grain-gradient-blush`
- [Shader Grain Gradient Dune](https://skills.varg.ai/component/remocn.shader-grain-gradient-dune.md) — Sandy grain wave in tan, caramel and rust. · `npx shadcn@latest add @remocn/shader-grain-gradient-dune`
- [Shader Grain Gradient Horizon](https://skills.varg.ai/component/remocn.shader-grain-gradient-horizon.md) — Peach horizon band rolling between navy and pale sky. · `npx shadcn@latest add @remocn/shader-grain-gradient-horizon`
- [Shader Grain Gradient Nebula](https://skills.varg.ai/component/remocn.shader-grain-gradient-nebula.md) — Magenta and cyan glow blooming from the corners of deep space. · `npx shadcn@latest add @remocn/shader-grain-gradient-nebula`
- [Shader Grain Gradient Orb](https://skills.varg.ai/component/remocn.shader-grain-gradient-orb.md) — Large grainy sphere in periwinkle, violet and pink. · `npx shadcn@latest add @remocn/shader-grain-gradient-orb`
- [Shader Grain Gradient Sunrise](https://skills.varg.ai/component/remocn.shader-grain-gradient-sunrise.md) — Grainy wave of coral and gold rising over a plum night. · `npx shadcn@latest add @remocn/shader-grain-gradient-sunrise`
- [Shader Grain Gradient Tide](https://skills.varg.ai/component/remocn.shader-grain-gradient-tide.md) — Teal ripple ring pulsing out of a dark sea-green core. · `npx shadcn@latest add @remocn/shader-grain-gradient-tide`
- [Shader Grain Gradient Ultraviolet](https://skills.varg.ai/component/remocn.shader-grain-gradient-ultraviolet.md) — Electric magenta and blue blob morphing on ultraviolet black. · `npx shadcn@latest add @remocn/shader-grain-gradient-ultraviolet`
- [Light Tunnel](https://skills.varg.ai/component/remocn.shader-light-tunnel.md) — Fly straight through a tunnel made from the original OpenShaders hero shader. · `npx shadcn@latest add @remocn/shader-light-tunnel`
- [Shader Liquid Metal](https://skills.varg.ai/component/remocn.shader-liquid-metal.md) — Molten metallic surface with flowing specular highlights. · `npx shadcn@latest add @remocn/shader-liquid-metal`
- [Shader Mesh Gradient](https://skills.varg.ai/component/remocn.shader-mesh-gradient.md) — WebGL mesh gradient backdrop driven per-frame for deterministic Remotion renders. · `npx shadcn@latest add @remocn/shader-mesh-gradient`
- [Shader Mesh Gradient Aurora](https://skills.varg.ai/component/remocn.shader-mesh-gradient-aurora.md) — Cyan and violet ribbons swirling out of a near-black sky. · `npx shadcn@latest add @remocn/shader-mesh-gradient-aurora`
- [Shader Mesh Gradient Dusk](https://skills.varg.ai/component/remocn.shader-mesh-gradient-dusk.md) — Violet dusk with coral and peach light drifting through deep indigo. · `npx shadcn@latest add @remocn/shader-mesh-gradient-dusk`
- [Shader Mesh Gradient Ember](https://skills.varg.ai/component/remocn.shader-mesh-gradient-ember.md) — Molten orange and amber pooling in dark oxblood. · `npx shadcn@latest add @remocn/shader-mesh-gradient-ember`
- [Shader Mesh Gradient Ink](https://skills.varg.ai/component/remocn.shader-mesh-gradient-ink.md) — Monochrome ink folds in charcoal and silver with grain. · `npx shadcn@latest add @remocn/shader-mesh-gradient-ink`
- [Shader Mesh Gradient Lagoon](https://skills.varg.ai/component/remocn.shader-mesh-gradient-lagoon.md) — Bright aqua and teal shallows with a deep-blue undertow. · `npx shadcn@latest add @remocn/shader-mesh-gradient-lagoon`
- [Shader Mesh Gradient Lavender](https://skills.varg.ai/component/remocn.shader-mesh-gradient-lavender.md) — Soft lilac and pink haze with grain-softened edges. · `npx shadcn@latest add @remocn/shader-mesh-gradient-lavender`
- [Shader Mesh Gradient Mint](https://skills.varg.ai/component/remocn.shader-mesh-gradient-mint.md) — 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](https://skills.varg.ai/component/remocn.shader-mesh-gradient-peach.md) — Warm peach and cream glow with a whisper of film grain. · `npx shadcn@latest add @remocn/shader-mesh-gradient-peach`
- [Shader Mesh Gradient Synthwave](https://skills.varg.ai/component/remocn.shader-mesh-gradient-synthwave.md) — Night-purple field lit by a warm coral sunset glow. · `npx shadcn@latest add @remocn/shader-mesh-gradient-synthwave`
- [Shader Metaballs](https://skills.varg.ai/component/remocn.shader-metaballs.md) — Organic blobs merging and splitting like lava. · `npx shadcn@latest add @remocn/shader-metaballs`
- [Shader Neuro Noise](https://skills.varg.ai/component/remocn.shader-neuro-noise.md) — Organic neural-web noise field that slowly morphs. · `npx shadcn@latest add @remocn/shader-neuro-noise`
- [Shader Perlin Noise](https://skills.varg.ai/component/remocn.shader-perlin-noise.md) — Classic Perlin noise clouds drifting across the frame. · `npx shadcn@latest add @remocn/shader-perlin-noise`
- [Shader Pulsing Border](https://skills.varg.ai/component/remocn.shader-pulsing-border.md) — Glowing border frame that pulses around the edges. · `npx shadcn@latest add @remocn/shader-pulsing-border`
- [Shader Simplex Noise](https://skills.varg.ai/component/remocn.shader-simplex-noise.md) — Simplex noise flow field, smoother than Perlin. · `npx shadcn@latest add @remocn/shader-simplex-noise`
- [Shader Smoke Ring](https://skills.varg.ai/component/remocn.shader-smoke-ring.md) — Soft smoke ring curling and dissipating in place. · `npx shadcn@latest add @remocn/shader-smoke-ring`
- [Shader Spiral](https://skills.varg.ai/component/remocn.shader-spiral.md) — Rotating spiral arms radiating from the center. · `npx shadcn@latest add @remocn/shader-spiral`
- [Shader Strata](https://skills.varg.ai/component/remocn.shader-strata.md) — Fine horizontal sediment layers displaced by fbm noise, each drifting at its own depth. · `npx shadcn@latest add @remocn/shader-strata`
- [Shader Swirl](https://skills.varg.ai/component/remocn.shader-swirl.md) — Concentric bands swirling around a center point. · `npx shadcn@latest add @remocn/shader-swirl`
- [Shader Swirl Candy](https://skills.varg.ai/component/remocn.shader-swirl-candy.md) — Pastel pink, lilac and sky-blue spiral, soft and sweet. · `npx shadcn@latest add @remocn/shader-swirl-candy`
- [Shader Swirl Citrus](https://skills.varg.ai/component/remocn.shader-swirl-citrus.md) — Juicy yellow, pink and green bands spiralling on cream. · `npx shadcn@latest add @remocn/shader-swirl-citrus`
- [Shader Swirl Ember](https://skills.varg.ai/component/remocn.shader-swirl-ember.md) — Gold and orange fire bands spinning around a dark core. · `npx shadcn@latest add @remocn/shader-swirl-ember`
- [Shader Swirl Hypno](https://skills.varg.ai/component/remocn.shader-swirl-hypno.md) — High-contrast black and white hypnotic spiral. · `npx shadcn@latest add @remocn/shader-swirl-hypno`
- [Shader Swirl Lilac](https://skills.varg.ai/component/remocn.shader-swirl-lilac.md) — Dreamy lilac and baby-blue swirl around a dark eye. · `npx shadcn@latest add @remocn/shader-swirl-lilac`
- [Shader Swirl Neon](https://skills.varg.ai/component/remocn.shader-swirl-neon.md) — Neon teal, purple and pink vortex around a dark core. · `npx shadcn@latest add @remocn/shader-swirl-neon`
- [Shader Swirl Retro](https://skills.varg.ai/component/remocn.shader-swirl-retro.md) — Seventies spiral in orange, sand and teal. · `npx shadcn@latest add @remocn/shader-swirl-retro`
- [Shader Swirl Sunburst](https://skills.varg.ai/component/remocn.shader-swirl-sunburst.md) — Retro cream and orange bands sweeping in from above. · `npx shadcn@latest add @remocn/shader-swirl-sunburst`
- [Shader Swirl Tide](https://skills.varg.ai/component/remocn.shader-swirl-tide.md) — Silky blue bands twisting into a deep navy whirlpool. · `npx shadcn@latest add @remocn/shader-swirl-tide`
- [Shader Voronoi](https://skills.varg.ai/component/remocn.shader-voronoi.md) — Animated Voronoi cells shifting and re-tessellating. · `npx shadcn@latest add @remocn/shader-voronoi`
- [Shader Warp](https://skills.varg.ai/component/remocn.shader-warp.md) — Domain-warped color field that folds and stretches like liquid. · `npx shadcn@latest add @remocn/shader-warp`
- [Shader Warp Acid](https://skills.varg.ai/component/remocn.shader-warp-acid.md) — Loud lime and cyan fluid swirling over black. · `npx shadcn@latest add @remocn/shader-warp-acid`
- [Shader Warp Cream](https://skills.varg.ai/component/remocn.shader-warp-cream.md) — Soft peach-to-coral cream gradient with a gentle drift. · `npx shadcn@latest add @remocn/shader-warp-cream`
- [Shader Warp Deep Sea](https://skills.varg.ai/component/remocn.shader-warp-deep-sea.md) — Diagonal teal bands rippling through midnight blue. · `npx shadcn@latest add @remocn/shader-warp-deep-sea`
- [Shader Warp Marble](https://skills.varg.ai/component/remocn.shader-warp-marble.md) — Cream and charcoal marble veins swirling together. · `npx shadcn@latest add @remocn/shader-warp-marble`
- [Shader Warp Ocean](https://skills.varg.ai/component/remocn.shader-warp-ocean.md) — Glossy aqua currents traced with dark ink edges. · `npx shadcn@latest add @remocn/shader-warp-ocean`
- [Shader Warp Rose Gold](https://skills.varg.ai/component/remocn.shader-warp-rose-gold.md) — Satin rose-gold folds with a soft sheen. · `npx shadcn@latest add @remocn/shader-warp-rose-gold`
- [Shader Warp Silk](https://skills.varg.ai/component/remocn.shader-warp-silk.md) — Violet and pink liquid silk folding in slow waves. · `npx shadcn@latest add @remocn/shader-warp-silk`
- [Shader Warp Storm](https://skills.varg.ai/component/remocn.shader-warp-storm.md) — Deep violet and lavender storm of marbled fluid. · `npx shadcn@latest add @remocn/shader-warp-storm`
- [Shader Warp Sunset](https://skills.varg.ai/component/remocn.shader-warp-sunset.md) — Marbled coral, peach and wine flowing like warm liquid. · `npx shadcn@latest add @remocn/shader-warp-sunset`
- [Shader Water](https://skills.varg.ai/component/remocn.shader-water.md) — Caustic water-surface ripples with subtle refraction. · `npx shadcn@latest add @remocn/shader-water`
- [Shader Weave](https://skills.varg.ai/component/remocn.shader-weave.md) — 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](https://skills.varg.ai/component/reactbits.aurora.md) — 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](https://skills.varg.ai/component/reactbits.silk.md) — Violet silk folds rippling diagonally, a soft sheen running along each crease · `npx shadcn@latest add @react-bits/Silk-JS-CSS`
- [Threads](https://skills.varg.ai/component/reactbits.threads.md) — 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](https://skills.varg.ai/component/reactbits.iridescence.md) — Pastel holographic sheen in cyan, pink and violet, flowing like oil on water · `npx shadcn@latest add @react-bits/Iridescence-JS-CSS`
- [Galaxy](https://skills.varg.ai/component/reactbits.galaxy.md) — Layered starfield twinkling and drifting toward the camera, the brightest stars with soft flares · `npx shadcn@latest add @react-bits/Galaxy-JS-CSS`
- [Balatro](https://skills.varg.ai/component/reactbits.balatro.md) — 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](https://skills.varg.ai/component/reactbits.liquid-chrome.md) — 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](https://skills.varg.ai/component/reactbits.lightning.md) — A single electric-blue lightning bolt crackling down the frame, flickering and re-branching · `npx shadcn@latest add @react-bits/Lightning-JS-CSS`
- [Orb](https://skills.varg.ai/component/reactbits.orb.md) — 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](https://skills.varg.ai/component/reactbits.beams.md) — 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](https://skills.varg.ai/component/reactbits.light-rays.md) — 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](https://skills.varg.ai/component/reactbits.prism.md) — 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](https://skills.varg.ai/component/reactbits.plasma.md) — Smoky pale plasma folding over itself in slow silky curls · `npx shadcn@latest add @react-bits/Plasma-JS-CSS`
- [Dark Veil](https://skills.varg.ai/component/reactbits.dark-veil.md) — Dark violet veil of light rippling slowly, like a lit curtain behind fog · `npx shadcn@latest add @react-bits/DarkVeil-JS-CSS`
- [Prismatic Burst](https://skills.varg.ai/component/reactbits.prismatic-burst.md) — 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](https://skills.varg.ai/component/reactbits.laser-flow.md) — 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](https://skills.varg.ai/component/vanta.fog.md) — Soft orange, peach and cream fog with hints of mauve, folding slowly across the whole frame · `npm i vanta`
- [Clouds](https://skills.varg.ai/component/vanta.clouds.md) — A pale blue sky over soft drifting clouds, with the sun glowing at the top of the frame · `npm i vanta`
- [Clouds2](https://skills.varg.ai/component/vanta.clouds2.md) — Flying low over a thick bank of volumetric clouds, with blue sky above · `npm i vanta`
- [Cells](https://skills.varg.ai/component/vanta.cells.md) — Lime and deep-green cell membranes glowing and shifting like a living microscope slide · `npm i vanta`
- [Halo](https://skills.varg.ai/component/vanta.halo.md) — An iridescent ring of pink, white and teal light swirling slowly on a deep navy field · `npm i vanta`
- [Cloud Shader](https://skills.varg.ai/component/aceternity.cloud-shader.md) — 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](https://skills.varg.ai/component/codrops.webgl-blobs.md) — 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](https://skills.varg.ai/component/hf.blue-sweater-intro-video.md) — Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. · `npx hyperframes add blue-sweater-intro-video`
- [Facet Morph](https://skills.varg.ai/component/hf.facet-morph.md) — 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](https://skills.varg.ai/component/hf.locked-nucleus-orbit.md) — A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup. · `npx hyperframes add locked-nucleus-orbit`
- [SVG Stroke Trace](https://skills.varg.ai/component/hf.svg-stroke-trace.md) — 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](https://skills.varg.ai/component/hf.whiteboard-ink.md) — 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](https://skills.varg.ai/component/hf.yt-logo-intro.md) — 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](https://skills.varg.ai/component/remocn.release-teaser.md) — 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](https://skills.varg.ai/component/codrops.rapid-layers-animation.md) — 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](https://skills.varg.ai/component/codrops.image-stack-intro.md) — 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](https://skills.varg.ai/component/codrops.intro-trail-effect.md) — 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](https://skills.varg.ai/component/hf.blur-in.md) — An Operator Black word-level content reveal that resolves its own text from controlled blur · `npx hyperframes add blur-in`
- [Blur Out Up](https://skills.varg.ai/component/hf.blur-out-up.md) — Words arrive clean and depart upward with increasing blur for airy exits. · `npx hyperframes add blur-out-up`
- [Bottom Up Letters](https://skills.varg.ai/component/hf.bottom-up-letters.md) — Splits text into letters and reveals each glyph from below with deterministic staggered timing · `npx hyperframes add bottom-up-letters`
- [Caret Swap](https://skills.varg.ai/component/hf.caret-swap.md) — 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](https://skills.varg.ai/component/hf.focus-blur-resolve.md) — 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](https://skills.varg.ai/component/hf.line-by-line-slide.md) — Each line enters from the left with staggered slide and exits to the right. · `npx hyperframes add line-by-line-slide`
- [Line Swap](https://skills.varg.ai/component/hf.line-swap.md) — 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](https://skills.varg.ai/component/hf.matrix-decode.md) — Random scramble resolves left-to-right into the target text. · `npx hyperframes add matrix-decode`
- [Morph Text](https://skills.varg.ai/component/hf.morph-text.md) — 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](https://skills.varg.ai/component/hf.per-word-rise.md) — 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](https://skills.varg.ai/component/hf.rgb-glitch-text.md) — RGB-offset text copies jitter briefly for a controlled glitch window. · `npx hyperframes add rgb-glitch-text`
- [Scramble Reveal](https://skills.varg.ai/component/hf.scramble-reveal.md) — 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](https://skills.varg.ai/component/hf.shared-axis-y.md) — Per-word vertical shared-axis transition for sharp editorial swaps. · `npx hyperframes add shared-axis-y`
- [Shared Axis Z](https://skills.varg.ai/component/hf.shared-axis-z.md) — Scale-based shared-axis transition for focus shifts and context depth. · `npx hyperframes add shared-axis-z`
- [Slot Machine Roll](https://skills.varg.ai/component/hf.slot-machine-roll.md) — A vertical reel scrolls characters from one value to another. · `npx hyperframes add slot-machine-roll`
- [Soft Blur In](https://skills.varg.ai/component/hf.soft-blur-in.md) — A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts · `npx hyperframes add soft-blur-in`
- [Stitched Text Draw](https://skills.varg.ai/component/hf.stitched-text-draw.md) — 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](https://skills.varg.ai/component/hf.streaming-text.md) — 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](https://skills.varg.ai/component/hf.strikethrough-replace.md) — Draw a strike line across old text, then reveal the replacement. · `npx hyperframes add strikethrough-replace`
- [Text Shimmer](https://skills.varg.ai/component/hf.text-shimmer.md) — 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](https://skills.varg.ai/component/hf.text-stagger.md) — A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words · `npx hyperframes add text-stagger`
- [Text State Swap](https://skills.varg.ai/component/hf.text-state-swap.md) — A text state swap primitive with outgoing blur and incoming lift · `npx hyperframes add text-state-swap`
- [Texture Mask Text](https://skills.varg.ai/component/hf.texture-mask-text.md) — 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](https://skills.varg.ai/component/hf.top-down-letters.md) — Letters descend from above in a pronounced staircase with zero blur. · `npx hyperframes add top-down-letters`
- [Tracking In](https://skills.varg.ai/component/hf.tracking-in.md) — A precise letter-spacing reveal for premium headings and interface labels · `npx hyperframes add tracking-in`
- [Typewriter](https://skills.varg.ai/component/hf.typewriter.md) — Character-by-character text reveal with a deterministic blinking cursor. · `npx hyperframes add typewriter`
- [Variable Font Flex](https://skills.varg.ai/component/hf.variable-font-flex.md) — 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](https://skills.varg.ai/component/hf.vfx-text-cursor.md) — 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](https://skills.varg.ai/component/remocn.blur-in.md) — 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](https://skills.varg.ai/component/remocn.blur-out-up.md) — Words arrive clean and depart upward with increasing blur for airy exits. · `npx shadcn@latest add @remocn/blur-out-up`
- [Bottom-Up Letters](https://skills.varg.ai/component/remocn.bottom-up-letters.md) — 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](https://skills.varg.ai/component/remocn.caret-swap.md) — 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](https://skills.varg.ai/component/remocn.centered-word-build.md) — 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](https://skills.varg.ai/component/remocn.chromatic-wave.md) — 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](https://skills.varg.ai/component/remocn.echo-stack.md) — 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](https://skills.varg.ai/component/remocn.extrude-pop.md) — 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](https://skills.varg.ai/component/remocn.fade-through.md) — 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](https://skills.varg.ai/component/remocn.focus-blur-resolve.md) — 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](https://skills.varg.ai/component/remocn.fog-rise.md) — 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](https://skills.varg.ai/component/remocn.glyph-anatomy.md) — 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](https://skills.varg.ai/component/remocn.gooey-morph.md) — 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](https://skills.varg.ai/component/remocn.gradient-scale-cut-text.md) — 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](https://skills.varg.ai/component/remocn.infinite-marquee.md) — Seamlessly looping horizontal text strip with optional stroke style. · `npx shadcn@latest add @remocn/infinite-marquee`
- [Inline Pill Takeover](https://skills.varg.ai/component/remocn.inline-pill-takeover.md) — 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](https://skills.varg.ai/component/remocn.inline-word-roll.md) — 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](https://skills.varg.ai/component/remocn.line-by-line-slide.md) — 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](https://skills.varg.ai/component/remocn.mask-reveal-up.md) — Lines reveal upward with a soft masked feel and compact stagger. · `npx shadcn@latest add @remocn/mask-reveal-up`
- [Matrix Decode](https://skills.varg.ai/component/remocn.matrix-decode.md) — Random scramble resolves left-to-right into the target text. · `npx shadcn@latest add @remocn/matrix-decode`
- [Micro Scale Fade](https://skills.varg.ai/component/remocn.micro-scale-fade.md) — 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](https://skills.varg.ai/component/remocn.outline-fill-track-text.md) — 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](https://skills.varg.ai/component/remocn.outline-trace.md) — 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](https://skills.varg.ai/component/remocn.path-ride.md) — 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](https://skills.varg.ai/component/remocn.per-character-rise.md) — Letters slide up from below with no blur — crisp, deliberate, kinetic. · `npx shadcn@latest add @remocn/per-character-rise`
- [Per-Word Crossfade](https://skills.varg.ai/component/remocn.per-word-crossfade.md) — 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](https://skills.varg.ai/component/remocn.period-drop.md) — 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](https://skills.varg.ai/component/remocn.perspective-marquee.md) — 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](https://skills.varg.ai/component/remocn.perspective-squeeze.md) — 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](https://skills.varg.ai/component/remocn.rgb-glitch-text.md) — Three RGB-offset text copies jitter for a brief glitch window. · `npx shadcn@latest add @remocn/rgb-glitch-text`
- [Ring Text](https://skills.varg.ai/component/remocn.ring-text.md) — 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](https://skills.varg.ai/component/remocn.rolodex-flip.md) — 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](https://skills.varg.ai/component/remocn.rush-type.md) — 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](https://skills.varg.ai/component/remocn.scale-down-fade.md) — Subtle premium settle-in with a restrained scale-down fade on exit. · `npx shadcn@latest add @remocn/scale-down-fade`
- [Selection Snap](https://skills.varg.ai/component/remocn.selection-snap.md) — 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](https://skills.varg.ai/component/remocn.shader-text-reveal.md) — Reveal words through the original OpenShaders hero shader, then settle into white type. · `npx shadcn@latest add @remocn/shader-text-reveal`
- [Shadow Sweep Text](https://skills.varg.ai/component/remocn.shadow-sweep-text.md) — 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](https://skills.varg.ai/component/remocn.shared-axis-y.md) — Per-word hard-cut transition with staircase timing for sharp editorial swaps. · `npx shadcn@latest add @remocn/shared-axis-y`
- [Shared Axis Z](https://skills.varg.ai/component/remocn.shared-axis-z.md) — Scale-based shared-axis transition for focus shifts and context depth. · `npx shadcn@latest add @remocn/shared-axis-z`
- [Sheen Slide In](https://skills.varg.ai/component/remocn.sheen-slide-in.md) — 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](https://skills.varg.ai/component/remocn.shimmer-sweep.md) — Light shine sweeps across muted text via background-clip:text. · `npx shadcn@latest add @remocn/shimmer-sweep`
- [Short Slide Down](https://skills.varg.ai/component/remocn.short-slide-down.md) — 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](https://skills.varg.ai/component/remocn.short-slide-right.md) — 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](https://skills.varg.ai/component/remocn.slot-machine-roll.md) — Vertical reel scrolls characters from one value to another. · `npx shadcn@latest add @remocn/slot-machine-roll`
- [Soft Blur In](https://skills.varg.ai/component/remocn.soft-blur-in.md) — 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](https://skills.varg.ai/component/remocn.spring-scale-in.md) — 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](https://skills.varg.ai/component/remocn.squeeze-in.md) — 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](https://skills.varg.ai/component/remocn.staggered-fade-up.md) — Words fade in and slide up one after another with a configurable delay. · `npx shadcn@latest add @remocn/staggered-fade-up`
- [Stretch In](https://skills.varg.ai/component/remocn.stretch-in.md) — 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](https://skills.varg.ai/component/remocn.strikethrough-replace.md) — Draws a strike line across old text then reveals new text in its place. · `npx shadcn@latest add @remocn/strikethrough-replace`
- [Stripe Type](https://skills.varg.ai/component/remocn.stripe-type.md) — 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](https://skills.varg.ai/component/remocn.top-down-letters.md) — 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](https://skills.varg.ai/component/remocn.tracking-in.md) — Letter-spacing collapses and blur clears with a springy motion. · `npx shadcn@latest add @remocn/tracking-in`
- [Type Fossil](https://skills.varg.ai/component/remocn.type-fossil.md) — 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](https://skills.varg.ai/component/remocn.type-repeater.md) — 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](https://skills.varg.ai/component/remocn.type-wall.md) — 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](https://skills.varg.ai/component/remocn.typed-split-wipe.md) — 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](https://skills.varg.ai/component/remocn.typewriter.md) — Character-by-character text reveal with a deterministic blinking cursor. · `npx shadcn@latest add @remocn/typewriter`
- [Value Swap](https://skills.varg.ai/component/remocn.value-swap.md) — 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](https://skills.varg.ai/component/remocn.word-push.md) — 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](https://skills.varg.ai/component/remocn.word-stream.md) — 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](https://skills.varg.ai/component/remocn.zoom-words.md) — 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](https://skills.varg.ai/component/reactbits.split-text.md) — Headline letters rising into place one by one with a soft stagger · `npx shadcn@latest add @react-bits/SplitText-JS-CSS`
- [Blur Text](https://skills.varg.ai/component/reactbits.blur-text.md) — 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](https://skills.varg.ai/component/reactbits.shiny-text.md) — 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](https://skills.varg.ai/component/reactbits.decrypted-text.md) — Random characters scrambling and resolving into a sentence, hacker-terminal style · `npx shadcn@latest add @react-bits/DecryptedText-JS-CSS`
- [Rotating Text](https://skills.varg.ai/component/reactbits.rotating-text.md) — 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](https://skills.varg.ai/component/reactbits.ascii-text.md) — 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](https://skills.varg.ai/component/reactbits.true-focus.md) — 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](https://skills.varg.ai/component/magicui.text-animate.md) — A line of text appears letter by letter, each character rising out of a blur · `npx shadcn@latest add @magicui/text-animate`
- [Hyper Text](https://skills.varg.ai/component/magicui.hyper-text.md) — 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](https://skills.varg.ai/component/magicui.typing-animation.md) — 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](https://skills.varg.ai/component/magicui.sparkles-text.md) — Bold word with small four-point stars popping up, spinning and fading around its letters · `npx shadcn@latest add @magicui/sparkles-text`
- [Aurora Text](https://skills.varg.ai/component/magicui.aurora-text.md) — A headline word filled with slowly shifting aurora colours, pink through purple to blue · `npx shadcn@latest add @magicui/aurora-text`
- [Text Generate Effect](https://skills.varg.ai/component/aceternity.text-generate-effect.md) — 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](https://skills.varg.ai/component/aceternity.typewriter-effect.md) — 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](https://skills.varg.ai/component/aceternity.flip-words.md) — 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](https://skills.varg.ai/component/aceternity.container-text-flip.md) — 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](https://skills.varg.ai/component/aceternity.colourful-text.md) — 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](https://skills.varg.ai/component/codrops.type-shuffle-animation.md) — Monospace profile text and an ASCII portrait scrambling through random characters before settling · `git clone https://github.com/codrops/TypeShuffleAnimation`
- [Text Block Transitions](https://skills.varg.ai/component/codrops.text-block-transitions.md) — 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](https://skills.varg.ai/component/codrops.typography-motion.md) — 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](https://skills.varg.ai/component/codrops.scroll-blur-typography.md) — 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](https://skills.varg.ai/component/fancy.vertical-cut-reveal.md) — 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](https://skills.varg.ai/component/fancy.text-rotate.md) — 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](https://skills.varg.ai/component/fancy.typewriter.md) — A phrase typed and deleted letter by letter with a blinking cursor, cycling through endings · `npx shadcn add @fancy/typewriter`
- [Scramble In](https://skills.varg.ai/component/fancy.scramble-in.md) — 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](https://skills.varg.ai/component/animateui.gradient-text.md) — 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](https://skills.varg.ai/component/animateui.shimmering-text.md) — 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](https://skills.varg.ai/component/animateui.typing-text.md) — Words typed one character at a time behind a blinking cursor, held, erased and replaced · `npm install @animate-ui/react motion`
- [Morphing Text](https://skills.varg.ai/component/animateui.morphing-text.md) — 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](https://skills.varg.ai/component/animateui.rotating-text.md) — 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](https://skills.varg.ai/component/animateui.rolling-text.md) — 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](https://skills.varg.ai/component/animateui.splitting-text.md) — 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](https://skills.varg.ai/component/motionprimitives.text-effect.md) — 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](https://skills.varg.ai/component/motionprimitives.text-shimmer.md) — A bright highlight sweeps across grey monospace text, like a 'generating…' status label · `npx motion-primitives@latest add text-shimmer`
- [Text Shimmer Wave](https://skills.varg.ai/component/motionprimitives.text-shimmer-wave.md) — 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](https://skills.varg.ai/component/motionprimitives.text-scramble.md) — Monospace letters churn through random characters before settling into the final word · `npx motion-primitives@latest add text-scramble`
- [Text Roll](https://skills.varg.ai/component/motionprimitives.text-roll.md) — 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](https://skills.varg.ai/component/motionprimitives.text-loop.md) — 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](https://skills.varg.ai/component/motionprimitives.text-morph.md) — A button label morphs between two words, shared letters gliding into their new positions · `npx motion-primitives@latest add text-morph`
- [Glitch text](https://skills.varg.ai/component/animata.glitch-text.md) — 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](https://skills.varg.ai/component/animata.soft-blur-in.md) — 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](https://skills.varg.ai/component/animata.per-character-rise.md) — 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](https://skills.varg.ai/component/animata.focus-blur-resolve.md) — 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](https://skills.varg.ai/component/animata.gibberish-text.md) — 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](https://skills.varg.ai/component/animata.wave-reveal.md) — 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](https://skills.varg.ai/component/animata.typing-text.md) — 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](https://skills.varg.ai/component/animata.text-flip.md) — "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](https://skills.varg.ai/component/hf.camcorder-hud.md) — Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder · `npx hyperframes add camcorder-hud`
- [News Ticker](https://skills.varg.ai/component/hf.news-ticker.md) — Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl. · `npx hyperframes add news-ticker`
- [Segmentation Flood](https://skills.varg.ai/component/hf.segmentation-flood.md) — 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](https://skills.varg.ai/component/hf.telemetry-hud.md) — 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](https://skills.varg.ai/component/hf.ticker-takeover.md) — 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](https://skills.varg.ai/component/hf.canopy-part-title.md) — Leaves sweep through the frame and part to reveal the headline. · `npx hyperframes add canopy-part-title`
- [Glass Hero](https://skills.varg.ai/component/hf.glass-hero.md) — 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](https://skills.varg.ai/component/hf.glass-shard-title.md) — Glass shards fly in through fog and tile themselves into the headline. · `npx hyperframes add glass-shard-title`
- [Titlecard Calm](https://skills.varg.ai/component/hf.titlecard-calm.md) — 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](https://skills.varg.ai/component/hf.titlecard-lockup.md) — 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](https://skills.varg.ai/component/hf.weight-wave.md) — 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](https://skills.varg.ai/component/hf.wireframe-portal-title.md) — 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](https://skills.varg.ai/component/hf.yt-prism-title.md) — 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](https://skills.varg.ai/component/aceternity.lamp-effect.md) — 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](https://skills.varg.ai/component/hf.char-slam-explode.md) — 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](https://skills.varg.ai/component/hf.extended-keyframe.md) — 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](https://skills.varg.ai/component/hf.kinetic-center-build.md) — 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](https://skills.varg.ai/component/hf.kinetic-type.md) — Bold kinetic typography promo · `npx hyperframes init my-video --example kinetic-type`
- [Kinetic Type Swap](https://skills.varg.ai/component/hf.kinetic-type-swap.md) — 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](https://skills.varg.ai/component/hf.shutter-slam.md) — 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](https://skills.varg.ai/component/hf.split-flap-board.md) — 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](https://skills.varg.ai/component/hf.variable-axis-type.md) — 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](https://skills.varg.ai/component/remocn.kinetic-center-build.md) — 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](https://skills.varg.ai/component/remocn.kinetic-morph-text.md) — Letters lift, rotate, and softly reshape into editable phrases with sampled outline trails. · `npx shadcn@latest add @remocn/kinetic-morph-text`
- [Kinetic Warp](https://skills.varg.ai/component/remocn.kinetic-warp.md) — A coarse mesh warp bends a whole word in staccato beats, one axis per keyframe. · `npx shadcn@latest add @remocn/kinetic-warp`
- [Word Rotate](https://skills.varg.ai/component/magicui.word-rotate.md) — 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](https://skills.varg.ai/component/magicui.morphing-text.md) — 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](https://skills.varg.ai/component/aceternity.text-flipping-board.md) — 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](https://skills.varg.ai/component/codrops.repetitive-typography.md) — 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](https://skills.varg.ai/component/codrops.circular-text-effect.md) — 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](https://skills.varg.ai/component/codrops.on-scroll-typography-animations.md) — 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](https://skills.varg.ai/component/fancy.breathing-text.md) — 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](https://skills.varg.ai/component/fancy.text-along-path.md) — 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](https://skills.varg.ai/component/motionprimitives.spinning-text.md) — A short phrase set around a circle rotates steadily, like a stamp badge · `npx motion-primitives@latest add spinning-text`
- [Kinetic Center Build](https://skills.varg.ai/component/animata.kinetic-center-build.md) — 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](https://skills.varg.ai/component/animata.circular-text.md) — 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](https://skills.varg.ai/component/hf.chromatic-aberration-wipe.md) — A fast slide wipe with RGB channel split on peak frames. · `npx hyperframes add chromatic-aberration-wipe`
- [Colorama Wipe](https://skills.varg.ai/component/hf.colorama-wipe.md) — 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](https://skills.varg.ai/component/hf.cross-warp-morph.md) — Shader transition with cross-warped morphing · `npx hyperframes add cross-warp-morph`
- [Cut the Curve](https://skills.varg.ai/component/hf.cut-the-curve.md) — 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](https://skills.varg.ai/component/hf.directional-wipe.md) — A directional scene push that slides one panel over another. · `npx hyperframes add directional-wipe`
- [Domain Warp Dissolve](https://skills.varg.ai/component/hf.domain-warp-dissolve.md) — Shader transition with fractal noise domain warping · `npx hyperframes add domain-warp-dissolve`
- [Fade Through](https://skills.varg.ai/component/hf.fade-through.md) — 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](https://skills.varg.ai/component/hf.flash-through-white.md) — Shader transition with white flash crossfade · `npx hyperframes add flash-through-white`
- [Gravitational Lens](https://skills.varg.ai/component/hf.gravitational-lens.md) — Shader transition with gravitational lensing distortion · `npx hyperframes add gravitational-lens`
- [Grid Pixelate Wipe](https://skills.varg.ai/component/hf.grid-pixelate-wipe.md) — 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](https://skills.varg.ai/component/hf.halftone-dissolve.md) — 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](https://skills.varg.ai/component/hf.match-cut.md) — 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](https://skills.varg.ai/component/hf.micro-transitions.md) — 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](https://skills.varg.ai/component/hf.mk-clone-wall-transition.md) — 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](https://skills.varg.ai/component/hf.morph-swap.md) — 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](https://skills.varg.ai/component/hf.ordered-dither-pass.md) — 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](https://skills.varg.ai/component/hf.particle-text-dissolve.md) — 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](https://skills.varg.ai/component/hf.per-word-crossfade.md) — Words gently fade into place with a short vertical drift for calm keynote rhythm. · `npx hyperframes add per-word-crossfade`
- [Ridged Burn](https://skills.varg.ai/component/hf.ridged-burn.md) — Shader transition with ridged turbulence burn effect · `npx hyperframes add ridged-burn`
- [Ripple Waves](https://skills.varg.ai/component/hf.ripple-waves.md) — Shader transition with concentric ripple wave distortion · `npx hyperframes add ripple-waves`
- [Rubber Band Bumper](https://skills.varg.ai/component/hf.rubber-band-bumper.md) — 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](https://skills.varg.ai/component/hf.sdf-iris.md) — Shader transition with signed distance field iris reveal · `npx hyperframes add sdf-iris`
- [Swirl Vortex](https://skills.varg.ai/component/hf.swirl-vortex.md) — Shader transition with swirling vortex distortion · `npx hyperframes add swirl-vortex`
- [Text Match Cut](https://skills.varg.ai/component/hf.text-match-cut.md) — 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](https://skills.varg.ai/component/hf.thermal-distortion.md) — Shader transition with heat haze thermal distortion · `npx hyperframes add thermal-distortion`
- [3D Transitions](https://skills.varg.ai/component/hf.transitions-3d.md) — Showcase of 3D perspective flip and rotate transitions · `npx hyperframes add transitions-3d`
- [Blur Transitions](https://skills.varg.ai/component/hf.transitions-blur.md) — Showcase of blur-based transitions between scenes · `npx hyperframes add transitions-blur`
- [Cover Transitions](https://skills.varg.ai/component/hf.transitions-cover.md) — Showcase of cover/uncover slide transitions · `npx hyperframes add transitions-cover`
- [Destruction Transitions](https://skills.varg.ai/component/hf.transitions-destruction.md) — Showcase of destructive break-apart transitions · `npx hyperframes add transitions-destruction`
- [Dissolve Transitions](https://skills.varg.ai/component/hf.transitions-dissolve.md) — Showcase of dissolve and fade transitions · `npx hyperframes add transitions-dissolve`
- [Distortion Transitions](https://skills.varg.ai/component/hf.transitions-distortion.md) — Showcase of warp and distortion transitions · `npx hyperframes add transitions-distortion`
- [Grid Transitions](https://skills.varg.ai/component/hf.transitions-grid.md) — Showcase of grid-based tile transitions · `npx hyperframes add transitions-grid`
- [Light Transitions](https://skills.varg.ai/component/hf.transitions-light.md) — Showcase of light-based glow and flash transitions · `npx hyperframes add transitions-light`
- [Mechanical Transitions](https://skills.varg.ai/component/hf.transitions-mechanical.md) — Showcase of mechanical shutter and iris transitions · `npx hyperframes add transitions-mechanical`
- [Other Transitions](https://skills.varg.ai/component/hf.transitions-other.md) — Showcase of miscellaneous creative transitions · `npx hyperframes add transitions-other`
- [Push Transitions](https://skills.varg.ai/component/hf.transitions-push.md) — Showcase of push and slide transitions · `npx hyperframes add transitions-push`
- [Radial Transitions](https://skills.varg.ai/component/hf.transitions-radial.md) — Showcase of radial wipe and reveal transitions · `npx hyperframes add transitions-radial`
- [Scale Transitions](https://skills.varg.ai/component/hf.transitions-scale.md) — Showcase of scale and zoom transitions · `npx hyperframes add transitions-scale`
- [Type Match Cut](https://skills.varg.ai/component/hf.type-match-cut.md) — 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](https://skills.varg.ai/component/hf.whip-pan.md) — Shader transition simulating a fast camera whip pan · `npx hyperframes add whip-pan`
- [Whip Pan Cut](https://skills.varg.ai/component/hf.whip-pan-cut.md) — 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](https://skills.varg.ai/component/hf.zoom-through-transition.md) — A transition that zooms through a focal card into the next scene. · `npx hyperframes add zoom-through-transition`
- [ASCII Dissolve](https://skills.varg.ai/component/remocn.ascii-dissolve.md) — Dissolve one scene into the next through a drifting field of ASCII glyphs. · `npx shadcn@latest add @remocn/ascii-dissolve`
- [Caret Wipe](https://skills.varg.ai/component/remocn.caret-wipe.md) — Sweep a typing caret across the frame, wiping the outgoing scene into the next. · `npx shadcn@latest add @remocn/caret-wipe`
- [Displacement](https://skills.varg.ai/component/remocn.displacement.md) — 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](https://skills.varg.ai/component/remocn.dither-dissolve.md) — A dithering shader transition that dissolves one scene into the next. · `npx shadcn@latest add @remocn/dither-dissolve`
- [Ember Burn](https://skills.varg.ai/component/remocn.ember-burn.md) — 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](https://skills.varg.ai/component/remocn.focus-pull.md) — 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](https://skills.varg.ai/component/remocn.glitch-cut.md) — 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](https://skills.varg.ai/component/remocn.grain-dissolve.md) — 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](https://skills.varg.ai/component/remocn.grid-wave.md) — 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](https://skills.varg.ai/component/remocn.hyperspace.md) — 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](https://skills.varg.ai/component/remocn.icon-scatter.md) — 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](https://skills.varg.ai/component/remocn.iris-wipe.md) — 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](https://skills.varg.ai/component/remocn.lens-zoom.md) — 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](https://skills.varg.ai/component/remocn.light-leak.md) — 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](https://skills.varg.ai/component/remocn.mondrian-split.md) — 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](https://skills.varg.ai/component/remocn.page-turn.md) — 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](https://skills.varg.ai/component/remocn.paper-tear.md) — 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](https://skills.varg.ai/component/remocn.particle-dissolve.md) — 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](https://skills.varg.ai/component/remocn.perlin-dissolve.md) — 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](https://skills.varg.ai/component/remocn.pixel-sort.md) — 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](https://skills.varg.ai/component/remocn.push-through.md) — 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](https://skills.varg.ai/component/remocn.ripple-zoom.md) — 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](https://skills.varg.ai/component/remocn.shader-seam.md) — Dissolve a stationary OpenShaders material to uncover the next scene. · `npx shadcn@latest add @remocn/shader-seam`
- [Shader Spiral Pass](https://skills.varg.ai/component/remocn.shader-spiral-pass.md) — 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](https://skills.varg.ai/component/remocn.slide-swap.md) — 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](https://skills.varg.ai/component/remocn.smoke-dissolve.md) — A smoke-ring shader transition that expands the ring outward to reveal the next scene. · `npx shadcn@latest add @remocn/smoke-dissolve`
- [Spring Settle](https://skills.varg.ai/component/remocn.spring-settle.md) — 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](https://skills.varg.ai/component/remocn.swirl-dissolve.md) — A swirl shader transition that unwinds open and winds shut to reveal the next scene. · `npx shadcn@latest add @remocn/swirl-dissolve`
- [Venetian Blinds](https://skills.varg.ai/component/remocn.venetian-blinds.md) — 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](https://skills.varg.ai/component/remocn.warp-dissolve.md) — 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](https://skills.varg.ai/component/remocn.wave-wipe.md) — 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](https://skills.varg.ai/component/remocn.whip-pan.md) — 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](https://skills.varg.ai/component/remocn.zoom-blur.md) — 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](https://skills.varg.ai/component/glt.cross-zoom.md) — The first shot rushes into a radial zoom blur that bursts open and resolves on the next shot · `npm install gl-transitions`
- [DreamyZoom](https://skills.varg.ai/component/glt.dreamy-zoom.md) — Zooms and twists into a white flash, then spins back out onto the next shot · `npm install gl-transitions`
- [DirectionalWarp](https://skills.varg.ai/component/glt.directional-warp.md) — A diagonal wipe whose leading edge smears and stretches the pixels it passes over · `npm install gl-transitions`
- [LinearBlur](https://skills.varg.ai/component/glt.linear-blur.md) — Both shots soften into a heavy blur, crossfade, then pull back into focus on the next · `npm install gl-transitions`
- [BurnThrough](https://skills.varg.ai/component/glt.burn-through.md) — Noisy holes burn through the first shot with glowing orange edges, revealing the next · `npm install gl-transitions`
- [GlitchMemories](https://skills.varg.ai/component/glt.glitch-memories.md) — A crossfade broken into offset, color-split blocks, like a corrupted video file · `npm install gl-transitions`
- [GlitchDisplace](https://skills.varg.ai/component/glt.glitch-displace.md) — The frame liquefies into a washed-out displacement glitch and snaps onto the next shot · `npm install gl-transitions`
- [StripDatamoshGlitch](https://skills.varg.ai/component/glt.strip-datamosh-glitch.md) — Datamosh: torn horizontal strips, chroma shift and scan noise drag the first shot into the next · `npm install gl-transitions`
- [Revolve](https://skills.varg.ai/component/glt.revolve.md) — The first shot spins into a zooming, motion-blurred vortex that unwinds into the next · `npm install gl-transitions`
- [Cube](https://skills.varg.ai/component/glt.cube.md) — Both shots sit on the faces of a 3D cube that turns over a glossy floor reflection · `npm install gl-transitions`
- [Doorway](https://skills.varg.ai/component/glt.doorway.md) — The first shot splits and swings open like double doors as the next shot comes forward · `npm install gl-transitions`
- [Swap](https://skills.varg.ai/component/glt.swap.md) — The two shots slide past each other in 3D, trading places over a reflective floor · `npm install gl-transitions`
- [InvertedPageCurl](https://skills.varg.ai/component/glt.inverted-page-curl.md) — The first shot peels back from the corner like a curling page, revealing the next beneath · `npm install gl-transitions`
- [BookFlip](https://skills.varg.ai/component/glt.book-flip.md) — The first shot turns over like a book page, right to left, and lands on the next · `npm install gl-transitions`
- [StereoViewer](https://skills.varg.ai/component/glt.stereo-viewer.md) — Both shots shrink into rounded cards that slide past each other, like a stereo-viewer reel · `npm install gl-transitions`
- [Dreamy](https://skills.varg.ai/component/glt.dreamy.md) — A soft crossfade in which both shots ripple sideways in slow waves, like a dream sequence · `npm install gl-transitions`
- [WaterDrop](https://skills.varg.ai/component/glt.water-drop.md) — Rings ripple out from the center like a drop hitting water while the shots crossfade · `npm install gl-transitions`
- [Wind](https://skills.varg.ai/component/glt.wind.md) — A ragged left-to-right wipe that blows the first shot away in horizontal streaks · `npm install gl-transitions`
- [Swirl](https://skills.varg.ai/component/glt.swirl.md) — Both shots twist into a spinning vortex at the center, then unwind onto the next · `npm install gl-transitions`
- [Morph](https://skills.varg.ai/component/glt.morph.md) — Each shot warps along the other's colors, a liquid morph that melts one image into the next · `npm install gl-transitions`
- [ButterflyWaveScrawler](https://skills.varg.ai/component/glt.butterfly-wave-scrawler.md) — Wavy, color-split ripples scramble the frame into psychedelic bands before the next shot settles · `npm install gl-transitions`
- [CrazyParametricFun](https://skills.varg.ai/component/glt.crazy-parametric-fun.md) — The frame is flung into hypnotic concentric bands along a parametric curve, then settles on the next · `npm install gl-transitions`
- [Kaleidoscope](https://skills.varg.ai/component/glt.kaleidoscope.md) — The shots fold into a spinning kaleidoscope of mirrored wedges and open onto the next · `npm install gl-transitions`
- [FilmBurn](https://skills.varg.ai/component/glt.film-burn.md) — Warm, glowing film-burn light leaks wash over the shot and fade out on the next · `npm install gl-transitions`
- [DoomMelt](https://skills.varg.ai/component/glt.doom-melt.md) — The first shot melts down the screen in uneven dripping columns, like the classic Doom screen wipe · `npm install gl-transitions`
- [LuminanceMelt](https://skills.varg.ai/component/glt.luminance-melt.md) — The first shot drips away in noisy vertical streaks, tone by tone, revealing the next · `npm install gl-transitions`
- [PolkaDotsCurtain](https://skills.varg.ai/component/glt.polka-dots-curtain.md) — The next shot appears through a grid of polka dots that grow until they cover the frame · `npm install gl-transitions`
- [Mosaic](https://skills.varg.ai/component/glt.mosaic.md) — The camera pulls back over a wall of rotated tiles from both shots, pans, and settles on the next · `npm install gl-transitions`
- [Pixelize](https://skills.varg.ai/component/glt.pixelize.md) — Both shots break into chunky 8-bit pixels, crossfade, then sharpen back into the next · `npm install gl-transitions`
- [GridFlip](https://skills.varg.ai/component/glt.grid-flip.md) — 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](https://skills.varg.ai/component/codrops.slideshow-animations.md) — 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](https://skills.varg.ai/component/codrops.shape-slideshow.md) — 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](https://skills.varg.ai/component/codrops.pixel-transition.md) — 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](https://skills.varg.ai/component/codrops.layers-animation.md) — 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](https://skills.varg.ai/component/codrops.kinetic-type-page-transition.md) — 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](https://skills.varg.ai/component/codrops.grid-flow-effect.md) — 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](https://skills.varg.ai/component/codrops.infinite-menu-background.md) — 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](https://skills.varg.ai/component/codrops.zoom-slideshow.md) — 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](https://skills.varg.ai/component/codrops.glitchy-grid-slideshow.md) — 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](https://skills.varg.ai/component/hf.chromatic-radial-split.md) — Shader transition with chromatic aberration radial split · `npx hyperframes add chromatic-radial-split`
- [Glitch](https://skills.varg.ai/component/hf.glitch.md) — Shader transition with digital glitch artifacts · `npx hyperframes add glitch`
- [Grade Split Reveal](https://skills.varg.ai/component/hf.grade-split-reveal.md) — 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](https://skills.varg.ai/component/hf.hologram.md) — 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](https://skills.varg.ai/component/hf.motion-blur.md) — After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame · `npx hyperframes add motion-blur`
- [Hologram](https://skills.varg.ai/component/remocn.hologram.md) — 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](https://skills.varg.ai/component/remocn.line-boil.md) — 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](https://skills.varg.ai/component/remocn.pixelate-region.md) — 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](https://skills.varg.ai/component/remocn.security-cam.md) — 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](https://skills.varg.ai/component/remocn.sustained-glitch.md) — 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](https://skills.varg.ai/component/remocn.synthwave.md) — 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](https://skills.varg.ai/component/remocn.underwater-ripple.md) — 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](https://skills.varg.ai/component/remocn.x-ray-scan.md) — 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](https://skills.varg.ai/component/motionprimitives.progressive-blur.md) — 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](https://skills.varg.ai/component/hf.code-3d-extrude.md) — 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](https://skills.varg.ai/component/hf.code-diff.md) — 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](https://skills.varg.ai/component/hf.code-highlight.md) — 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](https://skills.varg.ai/component/hf.code-morph.md) — 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](https://skills.varg.ai/component/hf.code-particle-assemble.md) — 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](https://skills.varg.ai/component/hf.code-scroll.md) — 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](https://skills.varg.ai/component/hf.code-shader-dissolve.md) — 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](https://skills.varg.ai/component/hf.code-slice-hero.md) — 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](https://skills.varg.ai/component/hf.code-snippet-apple-terminal-pro.md) — 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](https://skills.varg.ai/component/hf.code-snippet-dark-2026.md) — 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](https://skills.varg.ai/component/hf.code-snippet-dark-modern.md) — 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](https://skills.varg.ai/component/hf.code-terminal-run.md) — 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](https://skills.varg.ai/component/hf.code-typing.md) — Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation. · `npx hyperframes add code-typing`
- [Terminal Simulator](https://skills.varg.ai/component/hf.terminal-simulator.md) — A terminal window types commands and streams log output. · `npx hyperframes add terminal-simulator`
- [Agent Run](https://skills.varg.ai/component/remocn.agent-run.md) — 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](https://skills.varg.ai/component/remocn.claude-code.md) — 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](https://skills.varg.ai/component/remocn.code-morph.md) — 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](https://skills.varg.ai/component/remocn.glass-code-block.md) — 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](https://skills.varg.ai/component/remocn.glass-code-walk.md) — 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](https://skills.varg.ai/component/remocn.live-code-compilation.md) — 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](https://skills.varg.ai/component/remocn.opencode.md) — 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](https://skills.varg.ai/component/remocn.terminal-cursor-zoom.md) — 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](https://skills.varg.ai/component/remocn.terminal-simulator.md) — Terminal window that types out commands and rolls old lines off the top. · `npx shadcn@latest add @remocn/terminal-simulator`
- [Workflow Console](https://skills.varg.ai/component/remocn.workflow-console.md) — 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](https://skills.varg.ai/component/magicui.terminal.md) — Dark macOS-style terminal types a command, then prints green check lines one after another · `npx shadcn@latest add @magicui/terminal`

## Particles & physics

- [Confetti](https://skills.varg.ai/component/hf.confetti.md) — A deterministic celebration burst with seeded particles and gravity. · `npx hyperframes add confetti`
- [Liquid Metal](https://skills.varg.ai/component/hf.liquid-metal.md) — 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](https://skills.varg.ai/component/hf.particle-image-reveal.md) — 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](https://skills.varg.ai/component/hf.pendulum-swing.md) — 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](https://skills.varg.ai/component/hf.snow.md) — 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](https://skills.varg.ai/component/hf.spiral-galaxy.md) — 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](https://skills.varg.ai/component/hf.starfield.md) — 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](https://skills.varg.ai/component/hf.sun-burst.md) — 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](https://skills.varg.ai/component/remocn.confetti.md) — 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](https://skills.varg.ai/component/remocn.pendulum-wave.md) — 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](https://skills.varg.ai/component/remocn.radial-burst.md) — 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](https://skills.varg.ai/component/remocn.trim-burst.md) — 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](https://skills.varg.ai/component/reactbits.particles.md) — Sparse 3D field of glowing dots slowly turning and bobbing in depth · `npx shadcn@latest add @react-bits/Particles-JS-CSS`
- [Ballpit](https://skills.varg.ai/component/reactbits.ballpit.md) — 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](https://skills.varg.ai/component/magicui.particles.md) — Fine white dots drifting slowly in random directions across black, nudged away by the cursor · `npx shadcn@latest add @magicui/particles`
- [Meteors](https://skills.varg.ai/component/magicui.meteors.md) — Thin meteor streaks with fading tails falling at an angle across a dark panel · `npx shadcn@latest add @magicui/meteors`
- [Confetti](https://skills.varg.ai/component/magicui.confetti.md) — Colourful paper confetti bursts out over a title and flutters down out of frame · `npx shadcn@latest add @magicui/confetti`
- [Birds](https://skills.varg.ai/component/vanta.birds.md) — A flock of small pink low-poly birds wheeling and scattering across a deep navy sky · `npm i vanta`
- [Background Beams With Collision](https://skills.varg.ai/component/aceternity.background-beams-with-collision.md) — 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](https://skills.varg.ai/component/aceternity.sparkles.md) — Fine white particles twinkle in a band under a glowing blue horizon line below a big wordmark · `npx shadcn@latest add @aceternity/sparkles`
- [Vortex](https://skills.varg.ai/component/aceternity.vortex.md) — 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](https://skills.varg.ai/component/aceternity.shooting-stars-and-stars-background.md) — A dim star field twinkles while occasional shooting stars streak diagonally across the frame · `npx shadcn@latest add @aceternity/shooting-stars`
- [Confetti](https://skills.varg.ai/component/tsparticles.confetti.md) — 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](https://skills.varg.ai/component/tsparticles.confetti-explosions.md) — 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](https://skills.varg.ai/component/tsparticles.confetti-falling.md) — 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](https://skills.varg.ai/component/tsparticles.confetti-parade.md) — 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](https://skills.varg.ai/component/tsparticles.confetti-bundle.md) — Two side cannons firing confetti in from the bottom corners, arcing up and raining down over the middle · `pnpm add @tsparticles/confetti`
- [Fireworks](https://skills.varg.ai/component/tsparticles.fireworks.md) — 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](https://skills.varg.ai/component/tsparticles.snow.md) — 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](https://skills.varg.ai/component/tsparticles.stars.md) — 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](https://skills.varg.ai/component/tsparticles.hyperspace.md) — 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](https://skills.varg.ai/component/tsparticles.fire.md) — Sparse orange embers drifting upward over a deep red radial vignette · `pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-<name>`
- [Gravity](https://skills.varg.ai/component/fancy.gravity.md) — Coloured pill tags dropping into the frame and tumbling into a pile under real physics · `npx shadcn add @fancy/gravity`
- [Screensaver](https://skills.varg.ai/component/fancy.screensaver.md) — A stack of photos bouncing off the frame edges like the old DVD screensaver logo · `npx shadcn add @fancy/screensaver`
- [Fireworks Background](https://skills.varg.ai/component/animateui.fireworks-background.md) — 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](https://skills.varg.ai/component/animateui.gravity-stars-background.md) — 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](https://skills.varg.ai/component/animateui.hole-background.md) — 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](https://skills.varg.ai/component/animateui.stars-background.md) — 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](https://skills.varg.ai/component/animata.shooting-stars.md) — 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](https://skills.varg.ai/component/animata.boids-ecosystem.md) — 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](https://skills.varg.ai/component/hf.conic-progress-ring.md) — 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](https://skills.varg.ai/component/hf.svg-line-draw-loader.md) — An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline. · `npx hyperframes add svg-line-draw-loader`
- [UI Progress](https://skills.varg.ai/component/remocn.progress.md) — 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](https://skills.varg.ai/component/remocn.spinner.md) — 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](https://skills.varg.ai/component/hf.constellation-hub.md) — 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](https://skills.varg.ai/component/hf.decision-tree.md) — Animated flowchart with branching paths · `npx hyperframes init my-video --example decision-tree`
- [Exploded Stack](https://skills.varg.ai/component/hf.exploded-stack.md) — 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](https://skills.varg.ai/component/hf.flowchart.md) — Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction · `npx hyperframes add flowchart`
- [Flowchart Vertical](https://skills.varg.ai/component/hf.flowchart-vertical.md) — Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction · `npx hyperframes add flowchart-vertical`
- [Hand-Drawn Flowchart](https://skills.varg.ai/component/hf.hw-pipeline.md) — Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list · `npx hyperframes add hw-pipeline`
- [Ecosystem Constellation](https://skills.varg.ai/component/remocn.ecosystem-constellation.md) — A central logo orbited by integration satellites with pulsing data lines. · `npx shadcn@latest add @remocn/ecosystem-constellation`
- [Animated Beam](https://skills.varg.ai/component/magicui.animated-beam.md) — 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](https://skills.varg.ai/component/magicui.orbiting-circles.md) — 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](https://skills.varg.ai/component/animata.orbiting-items-3-d.md) — 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](https://skills.varg.ai/component/hf.cosmic-orb.md) — 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](https://skills.varg.ai/component/hf.goo.md) — 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](https://skills.varg.ai/component/hf.macos-tahoe-liquid-glass.md) — 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](https://skills.varg.ai/component/hf.three-orbiting-cards.md) — A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders. · `npx hyperframes add three-orbiting-cards`
- [Hyperspeed](https://skills.varg.ai/component/reactbits.hyperspeed.md) — 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](https://skills.varg.ai/component/hf.cta-close.md) — 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](https://skills.varg.ai/component/hf.cta-lockup.md) — 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](https://skills.varg.ai/component/hf.logo-outro.md) — Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill · `npx hyperframes add logo-outro`
- [Store Badge Lockup](https://skills.varg.ai/component/hf.store-badge-lockup.md) — 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](https://skills.varg.ai/component/hf.editorial-flash-overlay.md) — Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal · `npx hyperframes add editorial-flash-overlay`
- [Freeze-Frame Dressing](https://skills.varg.ai/component/hf.freeze-frame-dressing.md) — Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject · `npx hyperframes add freeze-frame-dressing`
- [Grain Field](https://skills.varg.ai/component/hf.grain-field.md) — 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](https://skills.varg.ai/component/hf.grain-overlay.md) — Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition · `npx hyperframes add grain-overlay`
- [Halftone Field](https://skills.varg.ai/component/hf.halftone-field.md) — 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](https://skills.varg.ai/component/hf.light-leak.md) — Shader transition with cinematic light leak overlay · `npx hyperframes add light-leak`
- [Organic Light Leak Overlay](https://skills.varg.ai/component/hf.organic-light-leak-overlay.md) — Finite CSS light-leak overlay for memory beats and motivated transitions · `npx hyperframes add organic-light-leak-overlay`
- [Paper Collage Reveal](https://skills.varg.ai/component/hf.paper-collage-reveal.md) — 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](https://skills.varg.ai/component/hf.torn-paper-rip.md) — 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](https://skills.varg.ai/component/hf.vignette.md) — Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center · `npx hyperframes add vignette`
- [Warm Grain](https://skills.varg.ai/component/hf.warm-grain.md) — Cream aesthetic with grain texture · `npx hyperframes init my-video --example warm-grain`
- [Scanline Board Background](https://skills.varg.ai/component/hf.yt-lcd-background.md) — 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](https://skills.varg.ai/component/hf.yt-screen-warp.md) — 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](https://skills.varg.ai/component/hf.yt-vertical-fill.md) — 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](https://skills.varg.ai/component/remocn.brush.md) — 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](https://skills.varg.ai/component/remocn.crt-screen.md) — 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](https://skills.varg.ai/component/remocn.crumple-toss.md) — 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](https://skills.varg.ai/component/remocn.halftone-print.md) — 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](https://skills.varg.ai/component/remocn.paper-wobble.md) — Per-pose reshoot jitter that makes any content feel hand-placed on a desk. · `npx shadcn@latest add @remocn/paper-wobble`
- [Riso Print](https://skills.varg.ai/component/remocn.riso-print.md) — 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](https://skills.varg.ai/component/remocn.tv-power-off.md) — 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](https://skills.varg.ai/component/remocn.vhs-filter.md) — 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](https://skills.varg.ai/component/reactbits.noise.md) — 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](https://skills.varg.ai/component/aceternity.spotlight-new.md) — 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](https://skills.varg.ai/component/hf.grid-card-assemble.md) — 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](https://skills.varg.ai/component/hf.mk-specs-list.md) — 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](https://skills.varg.ai/component/remocn.check-list.md) — 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](https://skills.varg.ai/component/hf.headline-slam.md) — 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](https://skills.varg.ai/component/magicui.video-text.md) — 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](https://skills.varg.ai/component/hf.instagram-follow.md) — Animated Instagram follow overlay with profile card and follow button · `npx hyperframes add instagram-follow`
- [Liquid Glass Notification](https://skills.varg.ai/component/hf.liquid-glass-notification.md) — Frosted glass notification cards floating over an aurora shader background · `npx hyperframes add liquid-glass-notification`
- [macOS Notification](https://skills.varg.ai/component/hf.macos-notification.md) — Animated macOS-style notification banner with app icon and message · `npx hyperframes add macos-notification`
- [Native Notification Pop](https://skills.varg.ai/component/hf.native-notification-pop.md) — 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](https://skills.varg.ai/component/hf.notification-cascade.md) — 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](https://skills.varg.ai/component/hf.notification-pileup.md) — 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](https://skills.varg.ai/component/hf.notification-stack.md) — 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](https://skills.varg.ai/component/hf.overwhelm-surround.md) — 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](https://skills.varg.ai/component/hf.reddit-post.md) — Animated Reddit post card overlay with upvotes and comments · `npx hyperframes add reddit-post`
- [Scroll Feed](https://skills.varg.ai/component/hf.scroll-feed.md) — 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](https://skills.varg.ai/component/hf.slack-notification-ad.md) — A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff · `npx hyperframes add slack-notification-ad`
- [Spotify Now Playing](https://skills.varg.ai/component/hf.spotify-card.md) — Animated Spotify now-playing card with album art and progress bar · `npx hyperframes add spotify-card`
- [TikTok Follow](https://skills.varg.ai/component/hf.tiktok-follow.md) — Animated TikTok follow overlay with profile card and follow button · `npx hyperframes add tiktok-follow`
- [VPN YouTube Spot](https://skills.varg.ai/component/hf.vpn-youtube-spot.md) — 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](https://skills.varg.ai/component/hf.x-follow-card.md) — A social follow card with avatar, handle, and follower motion. · `npx hyperframes add x-follow-card`
- [X Post Card](https://skills.varg.ai/component/hf.x-post.md) — Animated X/Twitter post card overlay with engagement metrics · `npx hyperframes add x-post`
- [Comment Cards](https://skills.varg.ai/component/hf.yt-comment-card.md) — 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](https://skills.varg.ai/component/remocn.x-follow-card.md) — 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](https://skills.varg.ai/component/remocn.x-followers-overview.md) — 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](https://skills.varg.ai/component/magicui.animated-list.md) — 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](https://skills.varg.ai/component/hf.lower-third-bild.md) — 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](https://skills.varg.ai/component/hf.lt-accent-underline.md) — 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](https://skills.varg.ai/component/hf.lt-bold-block.md) — 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](https://skills.varg.ai/component/hf.lt-clean-bar.md) — 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](https://skills.varg.ai/component/hf.lt-color-block.md) — 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](https://skills.varg.ai/component/hf.lt-dark-card.md) — 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](https://skills.varg.ai/component/hf.lt-kicker-name.md) — 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](https://skills.varg.ai/component/hf.lt-mask-reveal.md) — 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](https://skills.varg.ai/component/hf.lt-neon-border.md) — 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](https://skills.varg.ai/component/hf.lt-side-rule.md) — 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](https://skills.varg.ai/component/hf.lt-soft-pill.md) — 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](https://skills.varg.ai/component/hf.lt-stack-bars.md) — 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](https://skills.varg.ai/component/hf.yt-lower-third.md) — Animated YouTube subscribe lower third with avatar and channel info · `npx hyperframes add yt-lower-third`

## Maps & globes

- [North Korea Locked Down](https://skills.varg.ai/component/hf.north-korea-locked-down.md) — 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](https://skills.varg.ai/component/hf.nyc-paris-flight.md) — 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](https://skills.varg.ai/component/hf.spain-map.md) — Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projec · `npx hyperframes add spain-map`
- [US Map](https://skills.varg.ai/component/hf.us-map.md) — 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](https://skills.varg.ai/component/hf.us-map-bubble.md) — 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](https://skills.varg.ai/component/hf.us-map-flow.md) — 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](https://skills.varg.ai/component/hf.us-map-hex.md) — 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](https://skills.varg.ai/component/hf.world-map.md) — Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth pr · `npx hyperframes add world-map`
- [Globe](https://skills.varg.ai/component/magicui.globe.md) — 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](https://skills.varg.ai/component/aceternity.github-globe.md) — A dark-blue dotted 3D globe spins slowly while glowing arcs fly between cities · `npx shadcn@latest add @aceternity/globe`
- [World Map](https://skills.varg.ai/component/aceternity.world-map.md) — 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](https://skills.varg.ai/component/hf.onboarding-stepper-flow.md) — A composed onboarding flow with milestone rail, active step card, and next-action button · `npx hyperframes add onboarding-stepper-flow`
- [UI Onboarding Stepper Flow](https://skills.varg.ai/component/remocn.onboarding-stepper-flow.md) — 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](https://skills.varg.ai/component/remocn.stepper.md) — 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](https://skills.varg.ai/component/hf.oscilloscope-trace.md) — CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decay · `npx hyperframes add oscilloscope-trace`
- [Waveform](https://skills.varg.ai/component/hf.waveform.md) — 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](https://skills.varg.ai/component/hf.separator.md) — A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal · `npx hyperframes add separator`
- [Swiss Grid](https://skills.varg.ai/component/hf.swiss-grid.md) — Structured grid layout · `npx hyperframes init my-video --example swiss-grid`
- [Comic Panels](https://skills.varg.ai/component/remocn.comic-panels.md) — 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](https://skills.varg.ai/component/remocn.drift.md) — 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](https://skills.varg.ai/component/remocn.infinite-bento-pan.md) — A camera diagonally drifts across an oversized bento grid behind a soft vignette. · `npx shadcn@latest add @remocn/infinite-bento-pan`
- [Stage](https://skills.varg.ai/component/remocn.stage.md) — 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](https://skills.varg.ai/component/remocn.canvas-presentation.md) — 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](https://skills.varg.ai/component/remocn.caption-core.md) — 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](https://skills.varg.ai/component/remocn.icons-core.md) — 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](https://skills.varg.ai/component/remocn.remocn-ui.md) — Shared timeline-fold hook, theme context, and color math for remocn UI primitives. · `npx shadcn@latest add @remocn/remocn-ui`
- [Scene Motion](https://skills.varg.ai/component/remocn.scene-motion.md) — 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](https://skills.varg.ai/component/remocn.stop-motion.md) — 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](https://skills.varg.ai/component/remocn.checkout-flow.md) — 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](https://skills.varg.ai/component/remocn.fomo-limit-orders.md) — 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](https://skills.varg.ai/component/remocn.icon-activity.md) — 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](https://skills.varg.ai/component/remocn.icon-alert-triangle.md) — 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](https://skills.varg.ai/component/remocn.icon-arrow-down.md) — 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](https://skills.varg.ai/component/remocn.icon-arrow-left.md) — 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](https://skills.varg.ai/component/remocn.icon-arrow-right.md) — 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](https://skills.varg.ai/component/remocn.icon-arrow-up.md) — 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](https://skills.varg.ai/component/remocn.icon-at-sign.md) — 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](https://skills.varg.ai/component/remocn.icon-award.md) — 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](https://skills.varg.ai/component/remocn.icon-bar-chart-3.md) — 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](https://skills.varg.ai/component/remocn.icon-bell.md) — 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](https://skills.varg.ai/component/remocn.icon-bookmark.md) — Animated Lucide bookmark icon — draws on, then drops into place from above with a spring landing. · `npx shadcn@latest add @remocn/icon-bookmark`
- [Calendar](https://skills.varg.ai/component/remocn.icon-calendar.md) — 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](https://skills.varg.ai/component/remocn.icon-camera.md) — 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](https://skills.varg.ai/component/remocn.icon-check.md) — 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](https://skills.varg.ai/component/remocn.icon-check-circle.md) — 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](https://skills.varg.ai/component/remocn.icon-chevron-down.md) — Animated Lucide chevron-down icon — draws on, then nudges downward with a fading echo. · `npx shadcn@latest add @remocn/icon-chevron-down`
- [Chevron Left](https://skills.varg.ai/component/remocn.icon-chevron-left.md) — Animated Lucide chevron-left icon — draws on, then nudges left with a fading echo. · `npx shadcn@latest add @remocn/icon-chevron-left`
- [Chevron Right](https://skills.varg.ai/component/remocn.icon-chevron-right.md) — Animated Lucide chevron-right icon — draws on, then nudges right with a fading echo. · `npx shadcn@latest add @remocn/icon-chevron-right`
- [Chevron Up](https://skills.varg.ai/component/remocn.icon-chevron-up.md) — Animated Lucide chevron-up icon — draws on, then nudges upward with a fading echo. · `npx shadcn@latest add @remocn/icon-chevron-up`
- [Clock](https://skills.varg.ai/component/remocn.icon-clock.md) — 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](https://skills.varg.ai/component/remocn.icon-cloud.md) — Animated Lucide cloud icon — draws on, then floats: a weightless bob and a half before settling. · `npx shadcn@latest add @remocn/icon-cloud`
- [Code](https://skills.varg.ai/component/remocn.icon-code.md) — 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](https://skills.varg.ai/component/remocn.icon-copy.md) — 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](https://skills.varg.ai/component/remocn.icon-credit-card.md) — 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](https://skills.varg.ai/component/remocn.icon-crown.md) — 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](https://skills.varg.ai/component/remocn.icon-database.md) — 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](https://skills.varg.ai/component/remocn.icon-dollar-sign.md) — Animated Lucide dollar-sign icon — draws on, then the sign stretches tall: understated cha-ching. · `npx shadcn@latest add @remocn/icon-dollar-sign`
- [Download](https://skills.varg.ai/component/remocn.icon-download.md) — 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](https://skills.varg.ai/component/remocn.icon-external-link.md) — 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](https://skills.varg.ai/component/remocn.icon-eye.md) — Animated Lucide eye icon — draws on, then blinks once and refocuses its pupil. · `npx shadcn@latest add @remocn/icon-eye`
- [Eye Off](https://skills.varg.ai/component/remocn.icon-eye-off.md) — 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](https://skills.varg.ai/component/remocn.icon-file-text.md) — 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](https://skills.varg.ai/component/remocn.icon-filter.md) — 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](https://skills.varg.ai/component/remocn.icon-flame.md) — 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](https://skills.varg.ai/component/remocn.icon-folder.md) — Animated Lucide folder icon — draws on, then the folder tips open for a peek and closes. · `npx shadcn@latest add @remocn/icon-folder`
- [Gem](https://skills.varg.ai/component/remocn.icon-gem.md) — 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](https://skills.varg.ai/component/remocn.icon-gift.md) — 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](https://skills.varg.ai/component/remocn.icon-globe.md) — 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](https://skills.varg.ai/component/remocn.icon-heart.md) — 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](https://skills.varg.ai/component/remocn.icon-help-circle.md) — 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](https://skills.varg.ai/component/remocn.icon-home.md) — 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](https://skills.varg.ai/component/remocn.icon-image.md) — 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](https://skills.varg.ai/component/remocn.icon-inbox.md) — 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](https://skills.varg.ai/component/remocn.icon-info.md) — 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](https://skills.varg.ai/component/remocn.icon-key.md) — Animated Lucide key icon — draws on, then turns in an invisible lock and springs back. · `npx shadcn@latest add @remocn/icon-key`
- [Layout Grid](https://skills.varg.ai/component/remocn.icon-layout-grid.md) — 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](https://skills.varg.ai/component/remocn.icon-link.md) — Animated Lucide link icon — two chain halves draw on, pull apart, and click together. · `npx shadcn@latest add @remocn/icon-link`
- [Loader](https://skills.varg.ai/component/remocn.icon-loader.md) — 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](https://skills.varg.ai/component/remocn.icon-lock.md) — 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](https://skills.varg.ai/component/remocn.icon-log-out.md) — 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](https://skills.varg.ai/component/remocn.icon-mail.md) — 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](https://skills.varg.ai/component/remocn.icon-maximize.md) — 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](https://skills.varg.ai/component/remocn.icon-menu.md) — 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](https://skills.varg.ai/component/remocn.icon-message-circle.md) — 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](https://skills.varg.ai/component/remocn.icon-mic.md) — 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](https://skills.varg.ai/component/remocn.icon-monitor.md) — 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](https://skills.varg.ai/component/remocn.icon-moon.md) — 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](https://skills.varg.ai/component/remocn.icon-more-horizontal.md) — 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](https://skills.varg.ai/component/remocn.icon-package.md) — 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](https://skills.varg.ai/component/remocn.icon-party-popper.md) — 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](https://skills.varg.ai/component/remocn.icon-pause.md) — 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](https://skills.varg.ai/component/remocn.icon-pencil.md) — 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](https://skills.varg.ai/component/remocn.icon-phone.md) — Animated Lucide phone icon — draws on, then rings: three decaying rotation oscillations around center. · `npx shadcn@latest add @remocn/icon-phone`
- [Play](https://skills.varg.ai/component/remocn.icon-play.md) — 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](https://skills.varg.ai/component/remocn.icon-plus.md) — 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](https://skills.varg.ai/component/remocn.icon-plus-circle.md) — 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](https://skills.varg.ai/component/remocn.icon-refresh-cw.md) — 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](https://skills.varg.ai/component/remocn.icon-rocket.md) — 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](https://skills.varg.ai/component/remocn.icon-save.md) — 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](https://skills.varg.ai/component/remocn.icon-search.md) — 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](https://skills.varg.ai/component/remocn.icon-send.md) — 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](https://skills.varg.ai/component/remocn.icon-settings.md) — 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](https://skills.varg.ai/component/remocn.icon-share-2.md) — 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](https://skills.varg.ai/component/remocn.icon-shield.md) — Animated Lucide shield icon — draws on, then braces: a firm guard pulse that asserts protection. · `npx shadcn@latest add @remocn/icon-shield`
- [Shopping Cart](https://skills.varg.ai/component/remocn.icon-shopping-cart.md) — 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](https://skills.varg.ai/component/remocn.icon-skip-forward.md) — 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](https://skills.varg.ai/component/remocn.icon-smartphone.md) — Animated Lucide smartphone icon — draws on, then buzzes: three fast vibration oscillations. · `npx shadcn@latest add @remocn/icon-smartphone`
- [Sparkles](https://skills.varg.ai/component/remocn.icon-sparkles.md) — 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](https://skills.varg.ai/component/remocn.icon-star.md) — 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](https://skills.varg.ai/component/remocn.icon-sun.md) — 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](https://skills.varg.ai/component/remocn.icon-tag.md) — 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](https://skills.varg.ai/component/remocn.icon-target.md) — 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](https://skills.varg.ai/component/remocn.icon-terminal.md) — 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](https://skills.varg.ai/component/remocn.icon-thumbs-up.md) — 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](https://skills.varg.ai/component/remocn.icon-timer.md) — 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](https://skills.varg.ai/component/remocn.icon-trash.md) — 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](https://skills.varg.ai/component/remocn.icon-trending-down.md) — 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](https://skills.varg.ai/component/remocn.icon-trending-up.md) — 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](https://skills.varg.ai/component/remocn.icon-trophy.md) — 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](https://skills.varg.ai/component/remocn.icon-upload.md) — 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](https://skills.varg.ai/component/remocn.icon-user.md) — 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](https://skills.varg.ai/component/remocn.icon-user-plus.md) — 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](https://skills.varg.ai/component/remocn.icon-users.md) — 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](https://skills.varg.ai/component/remocn.icon-video.md) — 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](https://skills.varg.ai/component/remocn.icon-volume-2.md) — 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](https://skills.varg.ai/component/remocn.icon-volume-x.md) — 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](https://skills.varg.ai/component/remocn.icon-wallet.md) — 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](https://skills.varg.ai/component/remocn.icon-x.md) — 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](https://skills.varg.ai/component/remocn.icon-x-circle.md) — 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](https://skills.varg.ai/component/remocn.icon-zap.md) — 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](https://skills.varg.ai/component/remocn.paper-sticker.md) — 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`