# Remocn Component Index

> Router for every installable Remocn component. Scan the tables, pick candidates by
> `Use for` / `Avoid for`, then fetch only the component pages you need.

Full reference for one component — props, examples, all use / don't-use notes — lives at its
Docs link below. Every docs URL also serves raw Markdown: append `.md`.

Install any entry: `npx shadcn@latest add @remocn/<name>` (lands in `components/remocn/`;
`registryDependencies` install transitively).

`Length` is how many frames of motion the component itself runs at 30fps — for a transition it
is the value to pass to `linearTiming` / `springTiming`, for everything else it is the point at
which the animation has finished. It is a floor for the `Sequence`, not the whole beat: add hold
time on top when the element should stay on screen after it settles. `state-driven` means the
component renders purely from its `state` prop and has no duration of its own. `sustained` means
the component wraps a scene and lasts exactly as long as that scene does — budget no frames for
it and pass it no `state`. `transcript-driven` means the component renders from a timed
transcript (`captions: Caption[]`) and has no duration of its own — the `Sequence` must last at
least until the last word's `endMs`.
`Vibe` is the tonal tag; match it to the brand rather than mixing freely.

## Camera

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `cloth-reveal` | A logo, product or headline should be unveiled like a launch-event reveal. | The reveal is a move from one scene to the next rather than content under a sheet — use `page-turn`. | 34f | premium | remocn | — | [docs](https://remocn.dev/docs/camera/cloth-reveal.md) | 
 | `dolly-zoom` | A realization or a turning point in the story needs one unsettling, cinematic beat. | You need to move from one scene to the next, not a held shot — use `push-through`. | 36f | premium | remocn | — | [docs](https://remocn.dev/docs/camera/dolly-zoom.md) | 
 | `exploded-view` | An architecture or a product stack should be explained layer by layer, such as interface, engine, storage and hardware. | The object should turn to show its front and back rather than come apart — use `turntable`. | 50f | tech | remocn | — | [docs](https://remocn.dev/docs/camera/exploded-view.md) | 
 | `gravity-pile` | A beat about volume should feel physical, such as a pile of tasks, tickets or features. | The moment is a celebration that should shower the frame with color — use `confetti`. | 64f | playful | remocn | — | [docs](https://remocn.dev/docs/camera/gravity-pile.md) | 
 | `impact-shake` | A launch word, a price or a logo should land like it weighs a ton. | The landing only needs a light accent around a small element — use `trim-burst`. | 30f | social | remocn | — | [docs](https://remocn.dev/docs/camera/impact-shake.md) | 
 | `layered-cutout` | A logo or brand reveal that should feel tactile and dimensional, like paper cut by hand. | You need a landscape of depth layers with a sideways truck — use `parallax-depth`. | 140f | paper | remocn | — | [docs](https://remocn.dev/docs/camera/layered-cutout.md) | 
 | `parallax-depth` | An opener or a quiet beat needs a cinematic establishing shot, a slow sideways camera move across a sun and hills. | The subject is a screenshot, recording or long page the camera should travel across — use `stage`. | 60f | premium | remocn | — | [docs](https://remocn.dev/docs/camera/parallax-depth.md) | 
 | `tiny-planet` | A story about a city, a community or a global product needs a playful world-building beat. | The city should rise out of a grid tile by tile instead of bending — use `isometric-build`. | 40f | playful | remocn | — | [docs](https://remocn.dev/docs/camera/tiny-planet.md) | 
 | `turntable` | A physical-looking object, such as a credit card, a membership pass or a ticket, should be shown from every side. | The content is a long page or recording the camera should travel across — use `stage`. | 64f | premium | remocn | — | [docs](https://remocn.dev/docs/camera/turntable.md) | 

## Ai

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `agent-run` | A product demo needs the beat after the prompt, where an AI agent plans, calls tools and lands on a specific answer. | The scene is a prompt being typed into a recognizable chat product — use `claude-chat` or `chat-gpt` instead. | 310f | tech | remocn | — | [docs](https://remocn.dev/docs/ai/agent-run.md) | 
 | `chat-gpt` | Announcing a ChatGPT integration or GPT-powered feature where the OpenAI brand must be recognizable. | The product being demoed is Claude — use `claude-chat` instead to match Anthropic's UI and warm color palette. | 150f | tech | remocn | `@remocn/caret`, `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ai/chat-gpt.md) | 
 | `claude-chat` | Announcing a Claude integration or Anthropic-powered feature where the Claude brand must be visible. | The product is Claude Code CLI — use `claude-code` instead, which shows the terminal welcome screen with `cwd` and agent context. | 150f | tech | remocn | `@remocn/caret`, `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ai/claude-chat.md) | 
 | `claude-code` | Depicting a Claude Code / agentic-CLI workflow as a recognizable branded surface in a dev-tool demo. | You need a generic, unbranded terminal — use `terminal-simulator`. | 160f | tech | remocn | `@remocn/caret`, `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ai/claude-code.md) | 
 | `opencode` | Depicting the OpenCode TUI as a recognizable branded surface in a dev-tool demo. | You're depicting a different product — use the matching card (`claude-code`, `v0`, `chat-gpt`, `claude-chat`). | 150f | tech | remocn | `@remocn/caret`, `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ai/opencode.md) | 
 | `v0` | Depicting the Vercel v0 composer as a recognizable branded surface in a generative-UI demo. | You're depicting a different product — use the matching card (`chat-gpt`, `claude-chat`, `claude-code`, `opencode`). | 150f | tech | remocn | `@remocn/caret`, `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ai/v0.md) | 

## Compositions

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `ecosystem-constellation` | The story is "we plug into everything" — one hub product ringed by the tools it connects to. | You need your own integration logos; the eight marks are hardcoded in the file, so swapping them means editing the copied component. | 240f | tech | remocn | — | [docs](https://remocn.dev/docs/compositions/ecosystem-constellation.md) | 
 | `infinite-bento-pan` | You need an ambient establishing shot that says "a lot is happening here" without asking anyone to read a single number. | The figures on screen have to mean something — every counter, stat and chart here is sine-driven filler, so use `animated-line-chart` or `animated-bar-chart` for a number the viewer should actually read. | 300f | data | remocn | — | [docs](https://remocn.dev/docs/compositions/infinite-bento-pan.md) | 
 | `live-code-compilation` | You want to show cause and effect for a developer audience: a style prop finishes typing on the left and the button on the right changes on that exact frame. | The code on screen has to be yours — the eight typed fragments and the resulting button are hardcoded, while `glass-code-block` and `glass-code-walk` take arbitrary code as a `code` prop. | 260f | tech | remocn | — | [docs](https://remocn.dev/docs/compositions/live-code-compilation.md) | 

## Effects

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `confetti` | A milestone moment needs a celebratory payoff — product launch, plan completion, success screen. | The video has a clean, minimal, or corporate tone — confetti reads as celebration-specific and breaks professional pacing; use a subtle shader backdrop like `shader-grain-gradient` instead. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/effects/confetti.md) | 
 | `crumple-toss` | Discarding something on screen — the old plan, the wrong answer, the previous version. | You want a general element exit in a clean UI scene — this one is loud and physical; use a fade instead. | 27f | paper | remocn | `@remocn/stop-motion` | [docs](https://remocn.dev/docs/effects/crumple-toss.md) | 
 | `cursor-gravity` | An empty scene should reveal a call to action through a physical pulling gesture. | A cursor must accurately demonstrate an existing interface — use simulated-cursor. | 151f | playful | remocn | — | [docs](https://remocn.dev/docs/effects/cursor-gravity.md) | 
 | `glass-lens` | A launch video that moves from a headline to a product screen to a call to action in one continuous motion. | You only need the magnified word in a headline — use `glass-capsule`. | 180f | premium | remocn | — | [docs](https://remocn.dev/docs/effects/glass-lens.md) | 
 | `ink-arrow` | A hand-drawn annotation should point from one thing to another — callouts over paper or scrapbook scenes. | You need a straight technical connector or a diagram edge — this is a wobbly pen line with a personality, not a flowchart arrow. | 150f | paper | remocn | `@remocn/stop-motion`, `@remocn/brush` | [docs](https://remocn.dev/docs/effects/ink-arrow.md) | 
 | `keystroke` | A product demo shows a keyboard-first flow, such as a command palette, an editor or a triage queue, and the viewer should see the keys behind each action. | The interaction is pointing and clicking rather than pressing shortcuts — use `simulated-cursor`. | 166f | tech | remocn | — | [docs](https://remocn.dev/docs/effects/keystroke.md) | 
 | `paper-wobble` | Any block should carry the stop-motion reshoot wobble — headlines, cards, or content that must feel hand-placed rather than laid out. | The content should sit rock-still — UI simulations, code blocks being read. | 90f | paper | remocn | `@remocn/stop-motion` | [docs](https://remocn.dev/docs/effects/paper-wobble.md) | 
 | `radial-burst` | A product introduction needs a short abstract geometric opening before its title. | The effect should celebrate an action with scattered particles — use `confetti`. | 114f | playful | remocn | — | [docs](https://remocn.dev/docs/effects/radial-burst.md) | 
 | `scribble-circle` | Circling the one element that matters — a button, a number, a row in a screenshot. | You need a permanent border or a focus ring. This is a gesture that happens once, not a state. | 30f | paper | remocn | `@remocn/stop-motion`, `@remocn/brush` | [docs](https://remocn.dev/docs/effects/scribble-circle.md) | 
 | `simulated-cursor` | You are narrating a screen demo and need a synthetic cursor that moves predictably over a UI screenshot or recording | You need a real screen recording — this draws a synthetic overlay, not a capture of actual mouse movement | 150f | clean | remocn | — | [docs](https://remocn.dev/docs/effects/simulated-cursor.md) | 
 | `tv-power-off` | A scene should end like a device being switched off rather than fading out — the picture collapses, a dot lingers, and the frame is dead. | The tube look should hold for the whole scene instead of ending it — use `crt-screen`, which is a sustained filter with no duration of its own. | 18f | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/effects/tv-power-off.md) | 

## Graphic Looks

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `blueprint` | A hardware or product launch should show the object as an engineering drawing: measured, labelled and precise. | The product should come apart into labelled layers instead of being measured — use `exploded-view`. | 45f | tech | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/blueprint.md) | 
 | `brick-mosaic` | A logo, icon or emoji should be built out of toy bricks, one row at a time, for a playful reveal. | The mark should assemble from a few geometric pieces that spin and snap into place — use `puzzle-snap`. | 56f | playful | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/brick-mosaic.md) | 
 | `comic-panels` | A logo, product or headline should land with comic-book energy, framed in a hero panel with speed lines. | You only need the manga-style impact lines around an element, without the page — use `speed-lines`. | 36f | playful | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/comic-panels.md) | 
 | `duotone-beat` | A speaker, artist or team portrait should hit on the beat of a track, poster-style, for a promo or social cut. | The print look should hold steady on a live scene with full color separation — use `halftone-print`. | sustained | social | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/duotone-beat.md) | 
 | `embossed-mark` | A premium logo sign-off where the brand looks pressed into paper or metal. | You want a fast, simple logo entrance — use `logo-enter`. | 112f | premium | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/embossed-mark.md) | 
 | `fluted-glass` | A premium headline reveal that starts distorted and resolves to a sharp, clean title. | The reveal should be a frosted panel clearing around a stat — use `frosted-clear`. | 112f | premium | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/fluted-glass.md) | 
 | `frosted-clear` | Revealing one headline number ("10x") with a short label after building suspense behind frosted glass. | The reveal should use ribbed glass that slides away — use `fluted-glass`. | 100f | premium | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/frosted-clear.md) | 
 | `led-ticker` | A short announcement ("remocn is live") that should read like a stadium or station sign. | The text should loop continuously as a marquee — use `infinite-marquee`. | 93f | playful | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/led-ticker.md) | 
 | `line-boil` | A simple mark, icon or shape should feel hand-animated, with the restless line of traditional cel animation. | The thing being drawn is a word or a font's glyph outlines — use `outline-trace`. | 40f | playful | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/line-boil.md) | 
 | `long-shadow` | A flat icon, badge or logo mark should get the classic flat-design long shadow, with a little motion in it. | The subject is a word that should rise out of the plane on a solid 3D body — use `extrude-pop`. | 48f | clean | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/long-shadow.md) | 
 | `riso-print` | A title card, poster or logo should arrive as if it came off a two-color risograph, with visible misregistration and ink speckle. | An existing live scene, photo or video should be re-screened as a printed page for its whole duration — use `halftone-print`. | 34f | paper | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/riso-print.md) | 
 | `synthwave` | A scene needs an 80s retro backdrop: a music drop, a gaming or nostalgia beat, a late-night product teaser. | The camera should fly forward through space into the next scene — use `hyperspace`. | sustained | playful | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/synthwave.md) | 
 | `x-ray-scan` | A hardware launch should show what is inside the device: the board, the battery, the chip that matters. | The product should come apart into labelled layers — use `exploded-view`. | 32f | tech | remocn | — | [docs](https://remocn.dev/docs/graphic-looks/x-ray-scan.md) | 

## Layout

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `backdrop` | You need a scene background — wrap every composition in `Backdrop` rather than hardcoding background colors on individual components. | You need an infinitely looping ambient background as a standalone track — use a shader backdrop directly and let the composition handle framing. | 150f | clean | remocn | — | [docs](https://remocn.dev/docs/layout/backdrop.md) | 
 | `chat-to-preview-layout` | Showing an AI agent at work — the conversation starts as the subject, then yields the frame to what it produced | Both columns should stay the same size — this component exists for the ratio change; use a plain flex row | 120f | tech | remocn | — | [docs](https://remocn.dev/docs/layout/chat-to-preview-layout.md) | 
 | `drift` | Any static scene should feel alive — hero cards, feature panels, dashboards sitting between transitions. | The content is already animated with strong motion — layering drift on top of it doubles the movement and muddies the read. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/layout/drift.md) | 
 | `stage` | A product screen, website, image, or live React scene should read as a photographed object rather than a flat full-frame capture. | You only need a full-frame fill or rounded inset with no 3D presentation — use `backdrop`. | sustained | premium | remocn | `@remocn/scene-motion` | [docs](https://remocn.dev/docs/layout/stage.md) | 

## Media

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `before-after` | Showing a color grade, edit, retouch or redesign as a before and after. | The change is a whole UI switching theme — use `theme-flip`. | 112f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/before-after.md) | 
 | `device-morph` | Showing that a product or site is responsive, with the layout actually reflowing at each size. | The change is a light and dark theme switch — use `theme-flip`. | 170f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/device-morph.md) | 
 | `grid-montage` | A rhythmic recap montage of many scenes or screenshots cut to a beat. | Image shards should converge into a labelled layout — use `shards-to-grid`. | 138f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/grid-montage.md) | 
 | `looks-like-this` | A promise line such as what your next launch looks like, where the image is the answer. | The text is a question that rewrites itself into an answer beside the screenshot — use `shot-answers`. | 90f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/looks-like-this.md) | 
 | `panel-split` | An about-me or studio intro that grows from a single hero panel into a bento of bio, work and reel. | Only two sides are compared against each other — use `versus-split`. | 120f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/panel-split.md) | 
 | `screenshot-tour` | A guided walkthrough of one screenshot with three or so labelled regions. | All annotations should be visible together on a fixed frame — use `ui-callout`. | 177f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/screenshot-tour.md) | 
 | `shards-to-grid` | A media-heavy product beat that goes from a scatter of visuals to an organized grid. | You want a beat-cut montage of full-frame shots — use `grid-montage`. | 115f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/shards-to-grid.md) | 
 | `shot-answers` | A question-and-answer beat where the answer reuses most of the question's words. | The sentence should end by growing a thumbnail into the image — use `looks-like-this`, the inline-thumbnail twin of this scene. | 92f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/shot-answers.md) | 
 | `theme-flip` | Showing a dark mode or theme switch as a circular reveal flooding out from the toggle. | The change is a photo being graded rather than a UI theme — use `before-after`. | 74f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/theme-flip.md) | 
 | `up-close` | A two-part line such as up close it is one thing, from afar another, anchored on a real image. | The sentence should end with a thumbnail growing into the image — use `looks-like-this`. | 78f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/media/up-close.md) | 

## Logo Stings

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `accordion-unfold` | A print, stationery, travel or editorial brand wants a tactile reveal, like opening a folded brochure or map. | The logo should float freely on the background instead of on a card — use `spotlight` or `anamorphic-flare`. | 26f | paper | remocn | — | [docs](https://remocn.dev/docs/logo-stings/accordion-unfold.md) | 
 | `anamorphic-flare` | A film, studio, automotive or premium product needs a cinematic opener with a lens-flare look. | The light should search and land on the logo like a stage light — use `spotlight`. | 40f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/anamorphic-flare.md) | 
 | `bass-drop` | A trailer-style opener that builds tension before revealing the product name. | You want a soft, quiet reveal — use `first-light`. | 96f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/bass-drop.md) | 
 | `blink-cut` | A fast, loud word montage that ends on the product name. | Words should lock one at a time on reels — use `split-match`. | 108f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/blink-cut.md) | 
 | `bounce-logo` | A playful, meme-aware sting for a casual product or community video. | You need a serious, premium reveal — use `first-light`. | 150f | playful | remocn | — | [docs](https://remocn.dev/docs/logo-stings/bounce-logo.md) | 
 | `bracket-index` | A for-X, for-Y, for-Z beat that lists use cases before naming the product. | You want full-frame word flashes instead of brackets — use `blink-cut`. | 140f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/bracket-index.md) | 
 | `collab-lockup` | A partnership or integration announcement with two brands. | Only one brand is shown — use `first-light`. | 78f | clean | remocn | — | [docs](https://remocn.dev/docs/logo-stings/collab-lockup.md) | 
 | `cta-collapse-mark` | The final beat of a launch film: a call to action and URL that resolve into the logo. | The logo should come first and the message after — use `introducing`. | 120f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/cta-collapse-mark.md) | 
 | `dynamic-letter` | A logo sting for a design or type product that should show the identity is flexible. | A single shape should morph into the letter — use `shape-morph-o`. | 68f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/dynamic-letter.md) | 
 | `first-light` | A calm, premium logo reveal at the very start or end of a launch film. | You want an eyebrow line before the name — use `introducing`. | 86f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/first-light.md) | 
 | `flip-sting` | A kinetic logo sting where the letters act as a stencil for rapid flat frames. | You want a single hard slam rather than a flip-book — use `bass-drop`. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/flip-sting.md) | 
 | `flood-sting` | A tool-picker or integrations beat that should end by flooding into the brand. | You want the logo to ease in with no UI metaphor — use `first-light`. | 104f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/flood-sting.md) | 
 | `giant-mark-backdrop` | A prompt-to-video or AI-assistant beat where the typed request lands on a giant brand backdrop. | You want a plain logo reveal with no UI card — use `introducing`. | 110f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/giant-mark-backdrop.md) | 
 | `glyph-block-decode` | A name reveal for a studio or product with a URL the viewer should remember. | You want plain letters spelling out with no glitch — use `spell-out`. | 102f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/glyph-block-decode.md) | 
 | `glyph-matrix` | A countdown to launch that ends in the logo. | You want pixels that refine out of squares without a countdown — use `quadtree-mark`. | 141f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/glyph-matrix.md) | 
 | `gravity-grid` | A physics-flavoured reveal for a platform with weight and gravity as the metaphor. | A calm, flat reveal is enough — use `first-light`. | 112f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/gravity-grid.md) | 
 | `heat-trace` | A developer-tool or hardware launch where a thermal glow suits the brand. | You want a cool, calm reveal — use `first-light`. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/heat-trace.md) | 
 | `inflate` | A consumer, kids or casual app wants a soft, bouncy brand moment with a toy-like feel. | Your real logo must appear exactly as designed — the mark here is a fixed rounded square with a dot, so wrap your logo with `spotlight` or `orbit-lock`. | 35f | playful | remocn | — | [docs](https://remocn.dev/docs/logo-stings/inflate.md) | 
 | `ink-bloom` | A craft, editorial or analogue-flavoured brand reveal. | You want technical construction lines instead — use `logo-construct`. | 150f | paper | remocn | — | [docs](https://remocn.dev/docs/logo-stings/ink-bloom.md) | 
 | `introducing` | A product announcement that opens with Introducing and a one-line tagline. | The version number should be the hero — use `sequel-numeral`. | 86f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/introducing.md) | 
 | `light-signature` | A new-version reveal that carries a short eyebrow such as The all-new. | You want the eyebrow to settle and lift into place — use `introducing`. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/light-signature.md) | 
 | `light-trail-write` | A logo reveal that should feel hand-written with light. | The wordmark is traced as a heat gradient instead — use `heat-trace`. | 122f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/light-trail-write.md) | 
 | `liquid-fill` | A beverage, fintech or utility brand wants a reveal about filling up, loading or topping off. | Your logo is a detailed image rather than a single closed shape — wrap it with `spotlight` or `orbit-lock`. | 49f | clean | remocn | — | [docs](https://remocn.dev/docs/logo-stings/liquid-fill.md) | 
 | `logo-construct` | A design-system or brand-identity launch that wants to show how the mark is built. | A short sting under five seconds is needed — use `snap-click`. | 232f | paper | remocn | — | [docs](https://remocn.dev/docs/logo-stings/logo-construct.md) | 
 | `neon-sign` | The brand, venue or event has a nightlife, retro or hand-lettered feel and the sting should look like a lit sign. | Your logo is a filled image rather than a stroke path — wrap it with `spotlight` or `anamorphic-flare` instead. | 40f | playful | remocn | — | [docs](https://remocn.dev/docs/logo-stings/neon-sign.md) | 
 | `neural-pulse` | An AI product launch where a prompt goes in and the brand comes out. | The prompt should be typed into a UI card — use `giant-mark-backdrop`. | 206f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/neural-pulse.md) | 
 | `noise-forge-sting` | A launch opener that wants a heated, forged reveal of the brand. | You want a calm, quiet reveal with no heat — use `first-light`. | 90f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/noise-forge-sting.md) | 
 | `orbit-lock` | A tech, AI or infrastructure product needs an opener or closer where the logo arrives out of a small physical event. | Several partner or integration logos should arrive together as a group — use `logo-enter`. | 50f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/orbit-lock.md) | 
 | `paper-plane` | A write, render, launch workflow beat that ends on the brand. | A map of converging lines is wanted — use `transit-lines`. | 212f | paper | remocn | — | [docs](https://remocn.dev/docs/logo-stings/paper-plane.md) | 
 | `photo-halo` | A community or customer beat: a headline over real faces or screenshots that gather beside the logo. | You have no imagery to show — use `spell-out`. | 114f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/photo-halo.md) | 
 | `play-of-the-game` | A playful recap or hero-stat beat for a solo-builder launch, like shipped in 6 hours. | You need a calm, premium brand reveal — use `introducing`. | 58f | playful | remocn | — | [docs](https://remocn.dev/docs/logo-stings/play-of-the-game.md) | 
 | `puzzle-snap` | You have a wordmark but no animated mark, and the sting should build a simple geometric mark for you. | Your real logo must appear exactly as designed — the mark here is a fixed set of shapes, so wrap your own logo with `orbit-lock` or `spotlight`. | 38f | playful | remocn | — | [docs](https://remocn.dev/docs/logo-stings/puzzle-snap.md) | 
 | `quadtree-mark` | A logo reveal for an imaging, graphics or codec product, with pixels refining into the mark. | You want dots that ripple rather than squares that subdivide — use `ripple-mark`. | 98f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/quadtree-mark.md) | 
 | `ripple-mark` | A logo reveal that starts from a dot field, suited to a data or infrastructure brand. | You want squares that subdivide into the mark — use `quadtree-mark`. | 82f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/ripple-mark.md) | 
 | `sequel-numeral` | A v2 or sequel announcement where the version number is the hero. | The name matters more than the number — use `introducing`. | 98f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/sequel-numeral.md) | 
 | `shape-morph-o` | A playful logo reveal where one letter of the brand starts as a shape. | The letter should switch between styles rather than shapes — use `dynamic-letter`. | 123f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/shape-morph-o.md) | 
 | `signal-resolve` | A message about cutting through noise, such as monitoring, search or analytics. | A short sting under five seconds is needed — use `snap-click`. | 230f | tech | remocn | — | [docs](https://remocn.dev/docs/logo-stings/signal-resolve.md) | 
 | `snap-click` | A short, punchy logo sting with a tactile click. | You want soft, slow light instead of a slam — use `first-light`. | 45f | clean | remocn | — | [docs](https://remocn.dev/docs/logo-stings/snap-click.md) | 
 | `spell-out` | A name people mispronounce, where spelling it out is the hook. | You want a glitchy decode rather than a clean drop — use `glyph-block-decode`. | 103f | clean | remocn | — | [docs](https://remocn.dev/docs/logo-stings/spell-out.md) | 
 | `split-match` | A tagline made of a few short words, like build, ship, launch, that ends on the brand. | You want rapid full-frame word flashes — use `blink-cut`. | 109f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/split-match.md) | 
 | `spotlight` | A launch, keynote or event video should open with a theatrical reveal, the logo waiting in the dark until the light finds it. | The light should be a horizontal lens streak with a cinematic film feel — use `anamorphic-flare`. | 50f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/spotlight.md) | 
 | `squircle-wave` | A text-free logo reveal where a wave of motion ends on the mark alone. | You want the name shown beside the mark — use `ripple-mark`. | 72f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/squircle-wave.md) | 
 | `title-converge` | A slow, cinematic title card for a launch film that ends on the brand name. | You need a quick sting under three seconds — use `snap-click`. | 147f | clean | remocn | — | [docs](https://remocn.dev/docs/logo-stings/title-converge.md) | 
 | `transit-lines` | A platform or integrations product where many things converge in one place. | A prompt should resolve into the brand through nodes — use `neural-pulse`. | 96f | premium | remocn | — | [docs](https://remocn.dev/docs/logo-stings/transit-lines.md) | 
 | `word-burst-cards` | An everything-you-built beat where many screens or photos explode outward from a line of text. | A handful of photos should gather beside the logo instead — use `photo-halo`. | 80f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/logo-stings/word-burst-cards.md) | 

## Motion Graphics

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `bauhaus-build` | A launch or chapter opener should build an abstract geometric poster and end on an open band for the title. | The opener should burst and clear the whole frame instead of leaving shapes around the title — use `radial-burst`. | 125f | playful | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/bauhaus-build.md) | 
 | `chord-ring` | An integrations beat showing that your product connects with many tools around a central hub. | The tools should orbit in a constellation with depth — use `ecosystem-constellation`. | 116f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/chord-ring.md) | 
 | `dot-field-morph` | A feature tour where each capability is an icon formed from dots, ending on your logo. | You want birds flying into an arrow and then the mark — use `flock-form`. | 206f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/dot-field-morph.md) | 
 | `flock-form` | A logo reveal where hundreds of small shapes assemble into your brand mark. | The shape should cycle through icons before the logo — use `dot-field-morph`. | 148f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/flock-form.md) | 
 | `flow-field` | A title card, quote or hero shot needs a quiet, organic line texture behind it that keeps moving without drawing attention. | The backdrop should be soft color fields rather than thin lines — use `shader-mesh-gradient`. | sustained | premium | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/flow-field.md) | 
 | `fourier-sum` | Explaining how many simple parts combine into one result ("Many parts. One signal."). | You want to show a real data series over time — use `animated-line-chart`. | 142f | data | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/fourier-sum.md) | 
 | `isometric-build` | An opener or section break should build something in about a second, a small city or stack that reads as infrastructure, platform or growth. | The stack should come apart to explain layers, with labels — use `exploded-view`. | 38f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/isometric-build.md) | 
 | `life-grid` | A tech, AI or simulation story needs a background that visibly computes, with rule-based structures forming, colliding and dying. | The grid should be a pattern that resolves into a clean structure — use `truchet-flip`. | sustained | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/life-grid.md) | 
 | `mondrian-split` | A launch, section break, or product intro needs a bold, flat geometric opener that ends on a clean color field for the title. | The opener should feel round and energetic rather than rectilinear — use `radial-burst`. | 133f | playful | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/mondrian-split.md) | 
 | `path-search` | Explaining routing, search or an AI agent finding a path around obstacles. | You want a simple arrow showing flow between boxes — use `flow-arrow`. | 109f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/path-search.md) | 
 | `pattern-tile` | Explaining how a pattern or design system is built from one rule repeated and transformed. | The tiles should flip like Truchet cards, not build a wall — use `truchet-flip`. | 156f | playful | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/pattern-tile.md) | 
 | `pendulum-wave` | A scene needs a calm, hypnotic background loop that is clearly rule-based, with order dissolving into waves and snapping back into a line. | The loop should be a dense, organic texture rather than a row of distinct objects — use `flow-field`. | sustained | clean | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/pendulum-wave.md) | 
 | `phyllotaxis` | An opener or section break should grow something natural and precise in about two seconds, then keep a gentle idle motion. | The figure should be built from straight threads and morph between shapes — use `string-art`. | 74f | clean | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/phyllotaxis.md) | 
 | `ring-align` | A reveal of a single word ("Aligned.") that should feel like a lock clicking into place. | You want a physical lock-in of parts into a shape — use `orbit-lock`. | 98f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/ring-align.md) | 
 | `speed-lines` | An element should make a sharp entrance, such as a card, logo, or number that flies in fast, stretches with its speed, and lands with weight, overshooting a little and squashing on impact, while streaks trail it and die as it lands. | The landing needs a small burst of strokes popping outward from the point rather than lines converging from the frame edges — use `trim-burst`. | 31f | playful | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/speed-lines.md) | 
 | `squiggle` | A word, a number, or a button needs a live underline or accent on the frame it lands, such as a click, a count finishing, or a beat. | The underline should look hand-drawn, with ink grain and stop-motion poses — use `ink-underline`. | 66f | clean | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/squiggle.md) | 
 | `string-art` | A math, algorithm or engineering story needs a precise generative figure that builds itself and then transforms. | The figure should be a natural spiral of dots rather than straight threads — use `phyllotaxis`. | 288f | tech | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/string-art.md) | 
 | `topo-lines` | A title, quote or section card needs a quiet line texture behind it that moves slowly enough to read over. | The backdrop should be flowing strands rather than closed contours — use `flow-field`. | sustained | clean | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/topo-lines.md) | 
 | `trim-burst` | A click, tap or toggle needs a quick punctuation mark, a ring of strokes that zips out from the point and is gone in about half a second. | The moment is a celebration that should shower the frame with color — use `confetti`. | 18f | clean | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/trim-burst.md) | 
 | `truchet-flip` | A scene needs a flat geometric pattern bed that moves by one rule, each tile turning a quarter as a wave passes and the lines reconnecting across the frame. | The moment calls for a one-shot abstract burst that clears the frame for a title — use `radial-burst`. | 102f | clean | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/truchet-flip.md) | 
 | `venn-merge` | Explaining that your product sits at the overlap of two or three disciplines. | The idea is two pieces merging into one new shape — use `pill-morph`. | 116f | premium | remocn | — | [docs](https://remocn.dev/docs/motion-graphics/venn-merge.md) | 

## Product Scenes

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `ai-answer-sources` | A product beat showing an AI search or research assistant answering a question with cited sources. | The AI should run tools and show a step-by-step plan rather than cite sources — use `agent-run`. | 395f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/ai-answer-sources.md) | 
 | `ai-image-grid` | A product beat for an image generation tool: type a prompt, watch variations resolve, pick one. | You want a generic AI prompt-to-result flow with a button and loading skeleton — use `ai-prompt-flow`. | 205f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/ai-image-grid.md) | 
 | `analytics-funnel` | An analytics or growth product launch that needs to show a conversion funnel with real-looking drop-off per step. | You want a single chart line growing to a headline value — use `chart-morph` instead. | 125f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/analytics-funnel.md) | 
 | `app-store-listing` | A mobile app launch video that needs the now-on-the-store beat with rating, rank and screenshots. | You want the app's home screen and a placed widget after install — use `home-widget`. | 172f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/app-store-listing.md) | 
 | `audit-boxes` | A design linting, QA or accessibility tool should show the problems it finds on a real screen. | The marks should be neutral measurements rather than problems — use `redline-measure`. | 56f | clean | remocn | `@remocn/audit-core` | [docs](https://remocn.dev/docs/product-scenes/audit-boxes.md) | 
 | `bento-build` | A features overview where many capabilities need to read as one organized product. | You only have three short feature words — use `feature-trio`. | 141f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/bento-build.md) | 
 | `bracket-win` | A launch hook framed as a competition, where the product wins every round and ends on a champion plate. | The win is a ranking climb up a list, not a bracket — use `upvote-burst` instead. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/product-scenes/bracket-win.md) | 
 | `browser-extension` | A browser-extension, web-clipper or AI-summarizer launch where the value is acting on the page you are already on. | The product is a web app with its own UI, not an overlay on another page — use `url-bar-cta`. | 184f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/browser-extension.md) | 
 | `button-to-card` | A storefront-builder launch beat showing how an Add item button becomes a finished product listing. | You want the product grid to grow into a full admin app with sidebar — use `grid-to-app`. | 162f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/button-to-card.md) | 
 | `calendar-booking` | A scheduling or booking product beat: pick a day, pick a time, get confirmed. | You want a calendar that tags launch dates with event labels — use `calendar-pick`. | 122f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/calendar-booking.md) | 
 | `card-create` | A fintech launch beat showing how fast a user can issue and personalise a virtual or physical card. | The moment is sending money, not issuing a card — use `money-send`, which confirms a payment with a receipt. | 352f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/card-create.md) | 
 | `cart-add` | An e-commerce or storefront-builder launch beat showing a product page turning into a sale. | The story starts at payment, not the product page — use `coupon-apply`, which works on an order summary. | 168f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/cart-add.md) | 
 | `channel-reactions` | A social-proof beat where a launch announcement in a team chat collects emoji reactions and replies. | You want several collaborators moving around a shared canvas — use `multiplayer-cursors`. | 220f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/channel-reactions.md) | 
 | `chaos-to-order` | A problem-then-solution opener: too many tools and tabs, then one organized workspace. | The chaos is only notifications on a phone — use `notification-avalanche`. | 98f | tech | remocn | — | [docs](https://remocn.dev/docs/product-scenes/chaos-to-order.md) | 
 | `coupon-apply` | A billing or subscription launch beat where a discount code visibly lowers the order total. | The story is the shopper picking a product and adding it to a cart — use `cart-add`. | 155f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/coupon-apply.md) | 
 | `deploy-pipeline` | A developer-platform launch beat showing a deploy going from build to Ready. | You want a typed terminal session instead of a deployment page — use `terminal-simulator`. | 150f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/deploy-pipeline.md) | 
 | `design-audit` | A design tool, UI kit or design system launch needs a hero sequence that tells the whole review story. | Only the before-to-after sweep is needed — use `scan-fix`. | 332f | clean | remocn | `@remocn/audit-core` | [docs](https://remocn.dev/docs/product-scenes/design-audit.md) | 
 | `device-grows-around` | A creator or media analytics launch that zooms out from one metric card to reveal the full app screen around it. | You want a phone screen scrolling through several app states — use `phone-scroll` instead. | 165f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/device-grows-around.md) | 
 | `feature-flag-rollout` | A release-engineering beat showing a gradual rollout: toggle on, drag the percentage up, watch guardrails hold. | You want a build-and-deploy story with logs ending in Ready — use `deploy-pipeline`. | 182f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/feature-flag-rollout.md) | 
 | `file-dropzone` | A document, knowledge-base or asset-management launch where upload is the first action. | You want one file card filling an upload bar on a plain stage — use `drop-upload`. | 151f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/file-dropzone.md) | 
 | `flow-builder` | An automation or workflow-builder launch where a graph must read as buildable in seconds. | The graph is generated from a prompt with dotted trail lines — use `node-trail`. | 186f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/flow-builder.md) | 
 | `graph-relayout` | A beat explaining how one prompt fans out into many outputs, with the pipeline reshaping at each step. | You only need one prompt trailing dotted lines into a fixed chain of steps — use `node-trail`. | 130f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/graph-relayout.md) | 
 | `grid-to-app` | A commerce-platform launch beat that zooms from a few product tiles into the full admin dashboard. | You want a single button to morph into a new product card — use `button-to-card`. | 132f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/grid-to-app.md) | 
 | `heat-drain-reveal` | A planning or scheduling product beat that ends on launch day being marked. | You want a plain calendar picking a day and tagging dates — use `calendar-pick`. | 98f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/heat-drain-reveal.md) | 
 | `home-widget` | A launch for an app with a home-screen widget where setup should look effortless. | You want a lock-screen status that counts down in real time — use `live-activity`. | 256f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/home-widget.md) | 
 | `invite-team` | An onboarding or collaboration beat where a teammate invite is typed and sent in a few seconds. | You want several people working live on one canvas — use `multiplayer-cursors`. | 170f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/invite-team.md) | 
 | `invoice-paid` | A finance or billing launch beat showing an invoice moving from sent to viewed to paid. | You want a checkout total changing with a promo code — use `coupon-apply`. | 150f | paper | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/invoice-paid.md) | 
 | `layout-guides` | A layout, grid or responsive feature should show the structure under a screen. | Single distances and sizes should be measured — use `redline-measure`. | 54f | clean | remocn | `@remocn/audit-core` | [docs](https://remocn.dev/docs/product-scenes/layout-guides.md) | 
 | `leaderboard-climb` | A launch recap showing the product climbing a daily ranking after a launch day push. | You want the climb to end with a number one badge stamp — use `upvote-burst` instead. | 90f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/leaderboard-climb.md) | 
 | `live-activity` | A launch for an app with a live status (render, delivery, deploy) that lives on the lock screen. | You want a home-screen widget with a chart — use `home-widget`. | 260f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/live-activity.md) | 
 | `live-dashboard` | A payments or SaaS launch that needs a believable revenue dashboard with a growing chart and KPI cards. | The story is conversion drop-off between steps — use `analytics-funnel` instead. | 155f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/live-dashboard.md) | 
 | `macro-click` | A publishing or site-builder launch where one click is the pitch. | You want a browser window with a landing page whose CTA is clicked — use `url-bar-cta`. | 122f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/macro-click.md) | 
 | `mobile-paywall` | A subscription app launch beat showing the paywall, plan pick and trial start. | You want a full pricing table comparing several tiers on a web page — use `pricing-reveal`. | 225f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/mobile-paywall.md) | 
 | `money-send` | A fintech or payments launch beat showing how fast sending money is. | The scene is a subscription upgrade with plan cards — use `mobile-paywall`. | 230f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/money-send.md) | 
 | `multiplayer-cursors` | A collaboration launch beat where several named cursors work on one shared board at once. | The beat is a chat thread with reactions and replies — use `channel-reactions`. | 260f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/multiplayer-cursors.md) | 
 | `node-trail` | A beat showing one typed prompt expanding into a multi-step pipeline such as script, scenes, render, publish. | The graph should reshuffle between several layouts rather than grow once — use `graph-relayout`. | 154f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/node-trail.md) | 
 | `notification-avalanche` | An inbox, alerts or notification-management product where the problem is overload. | The chaos is desktop windows and chat toasts resolving into an app — use `chaos-to-order`. | 97f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/notification-avalanche.md) | 
 | `now-playing` | A music, podcast or audio-app launch where the player UI plus lyrics carry the story. | You want incoming alerts instead of playback — use `notification-avalanche`. | 268f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/now-playing.md) | 
 | `phone-scroll` | A mobile product beat showing a long feed or page being scrolled, with a one-line promise beside the phone. | You want three phones for a notification, a feed and a profile — use `phone-trio`. | 86f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/phone-scroll.md) | 
 | `phone-trio` | A portfolio, creator or personal-brand launch that needs profile, feed and notification in one frame. | You only need one phone and a long scrolling screen — use `phone-scroll`. | 104f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/phone-trio.md) | 
 | `pr-merge` | A developer-tool launch beat about code review: checks go green, one click merges, the status flips to Merged. | You want a build streaming logs and flipping to Ready — use `deploy-pipeline`. | 178f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/pr-merge.md) | 
 | `pricing-reveal` | A pricing-page announcement where a launch discount replaces the old price. | You only need one plan on a phone with a trial flow — use `mobile-paywall`. | 81f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/pricing-reveal.md) | 
 | `prompt-swell` | A launch video for an AI site or page builder: prompt in, finished landing page out. | You want a chat-driven build with files being written and a deploy step — use `prompt-to-app`. | 135f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/prompt-swell.md) | 
 | `prompt-to-app` | A launch video for an AI app builder showing prompt, plan, file writes and the finished site in one take. | You want a short prompt-to-page swell without chat or files — use `prompt-swell`. | 290f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/prompt-to-app.md) | 
 | `redline-measure` | A design tool, design system or UI kit launch should show that the spacing is measured, not eyeballed. | The marks should flag what is wrong with the fix next to it — use `audit-boxes`. | 63f | clean | remocn | `@remocn/audit-core` | [docs](https://remocn.dev/docs/product-scenes/redline-measure.md) | 
 | `ride-tracking` | A mobility, delivery or logistics launch where the beat is watch-it-come-to-you. | You want a lock-screen countdown instead of a map — use `live-activity`. | 244f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/ride-tracking.md) | 
 | `roadmap-timeline` | A planning or project-management launch where rescheduling must feel effortless. | You want a launch-date calendar, not a Gantt chart — use `calendar-pick`. | 158f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/roadmap-timeline.md) | 
 | `scan-fix` | A release should show the old build turning into the new one in a single sweep. | A divider should sweep sideways across an image — use `before-after`. | 100f | clean | remocn | `@remocn/audit-core` | [docs](https://remocn.dev/docs/product-scenes/scan-fix.md) | 
 | `send-fountain` | A launch beat where one prompt turns into a finished dashboard filled with a video, a metric and asset tiles. | You want a prompt to become a full app screen, not a dashboard of tiles — use `prompt-to-app`. | 144f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/send-fountain.md) | 
 | `sheet-formula` | A spreadsheet, analytics or no-code data product where type-once, fill-down, chart-it is the pitch. | The chart is the star and no spreadsheet is needed — use `animated-bar-chart`. | 270f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/sheet-formula.md) | 
 | `social-scheduler` | A social-media management or content-scheduling launch where schedule-in-a-click is the pitch. | You want a phone video feed with a double-tap heart — use `reels-feed`. | 206f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/social-scheduler.md) | 
 | `status-page` | A reliability or infrastructure launch beat that needs to show transparent uptime history. | You want live, ticking metrics and an activity feed — use `live-dashboard`. | 220f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/status-page.md) | 
 | `stock-scrub` | A trading or investing app launch beat showing live price data and a quick buy. | The data lives in a desktop analytics chart with tooltips — use `analytics-funnel`. | 255f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/stock-scrub.md) | 
 | `streak-reward` | A learning, fitness or habit app launch where retention is the pitch. | You want a gesture-driven card interaction — use `swipe-deck`. | 150f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/streak-reward.md) | 
 | `swipe-deck` | A discovery or matching app launch where swiping is the core mechanic. | You want a store page and install flow — use `app-store-listing`. | 156f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/swipe-deck.md) | 
 | `table-filter` | A CRM, database or ops-tool launch where filter, select, act is the loop to show. | You want to compute and chart columns — use `sheet-formula`. | 196f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/table-filter.md) | 
 | `tile-snake-loader` | A creative-tool or studio launch that needs a loading-into-a-polished-product reveal. | You want a gray wireframe that fills into the finished UI — use `wireframe-to-final`. | 176f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/tile-snake-loader.md) | 
 | `tilt-settle-list` | A beat that shows a player card with a ranked list of the user's most used items beside it. | The point is a leaderboard where one row climbs to first place — use `leaderboard-climb`. | 126f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/tilt-settle-list.md) | 
 | `timeline-editor` | A video-editing or motion tool launch where the editor UI itself is the demo. | You want a project roadmap with draggable bars — use `roadmap-timeline`. | 332f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/timeline-editor.md) | 
 | `token-tags` | A design system or theming launch should show that every color on screen comes from a named token. | The labels are measurements rather than names — use `redline-measure`. | 61f | clean | remocn | `@remocn/audit-core` | [docs](https://remocn.dev/docs/product-scenes/token-tags.md) | 
 | `video-call` | A team-collaboration launch beat where people join a call and one presenter shares a dashboard. | The product is a chat, not a call — use `channel-reactions`, which shows reactions in a message thread. | 300f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/video-call.md) | 
 | `video-watch-page` | A video platform or creator-tool launch where social proof (views, likes, subscribers) is the payoff. | You want a vertical reels feed with a double-tap heart — use `reels-feed`. | 190f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/video-watch-page.md) | 
 | `voice-agent` | A launch video for a voice AI product that needs to show a live call, the agent being cut off mid-sentence and a tool call completing. | The product is a text chat assistant, not a call — use `chat-flow` instead. | 322f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/voice-agent.md) | 
 | `whats-new-modal` | A product-update or release video where in-app announcements are the format. | You want a full changelog list scrolling — use `changelog-scroll`. | 224f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/whats-new-modal.md) | 
 | `wireframe-to-final` | A design or no-code launch that sells idea-to-product as one transformation. | You want scattered windows collapsing into a tracker — use `chaos-to-order`. | 168f | clean | remocn | — | [docs](https://remocn.dev/docs/product-scenes/wireframe-to-final.md) | 
 | `world-signups` | A growth beat showing signups arriving from cities around the world in real time. | You want a single metric chart stepping through stages, not a map — use `analytics-funnel`. | 175f | data | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/product-scenes/world-signups.md) | 

## Templates

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `brand-guidelines` | You want to introduce a brand system through its mark, colors, typography, and photography. | You need a multi-feature software demo rather than an identity film; use `launch-anything`. | 536f | premium | remocn-template | `@remocn/caret` | [docs](https://remocn.dev/docs/templates/brand-guidelines.md) | 
 | `fomo-limit-orders` | You want a complete trading-interface demo built from editable React and SVG layers. | You need a general product launch story; use `launch-anything`. | 554f | premium | remocn-template | — | [docs](https://remocn.dev/docs/templates/fomo-limit-orders.md) | 
 | `launch-anything` | You want a complete 26.7-second product film with editable text and demonstrations. | You want to introduce a complete visual identity; use `brand-guidelines`. | 800f | premium | remocn-template | `@remocn/shader-text-reveal` | [docs](https://remocn.dev/docs/templates/launch-anything.md) | 
 | `release-teaser` | You want a sixteen-second release announcement built around anticipation and a final brand reveal. | You need to show actual product interactions and workflows; use `launch-anything`. | 481f | premium | remocn-template | — | [docs](https://remocn.dev/docs/templates/release-teaser.md) | 
 | `workflow-console` | You want a complete 46.8-second CLI or automation demo with editable commands and results. | You only need one scrolling command; use `terminal-cursor-zoom`. | 1405f | tech | remocn-template | `@remocn/typed-split-wipe`, `@remocn/caret` | [docs](https://remocn.dev/docs/templates/workflow-console.md) | 

## Social

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `crash-zoom` | A hook beat for a short-form launch clip where a quiet tease must erupt into one big claim. | The claim needs two separate slams in a row (stop, then payoff) — use `hook-punch`. | 66f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/crash-zoom.md) | 
 | `duet-split` | A before-and-after claim such as "3 weeks vs 1 day" or "$12K vs $0" told as paired rows. | You are comparing two images or screenshots with a sweeping divider — use `before-after`. | 100f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/duet-split.md) | 
 | `github-sponsors` | A thank-you beat for funders — the heart draws itself, docks upward, and every sponsor avatar blur-staggers into a grid beneath it. | The milestone is a star count rather than funding — use `github-stars`, whose odometer counts up to a total. | 270f | social | remocn | `@remocn/soft-blur-in`, `@remocn/blur-out-up` | [docs](https://remocn.dev/docs/social/github-sponsors.md) | 
 | `github-stars` | Celebrating an OSS milestone — the count-up odometer landing on a star total is the payoff beat. | You only need the number to roll up without the stargazer fly-through — use `number-wheel` or `rolling-number`. | 120f | data | remocn | `@remocn/number-wheel` | [docs](https://remocn.dev/docs/social/github-stars.md) | 
 | `hook-punch` | The opening second of a vertical launch clip that has to stop the scroll with two slammed words. | The tease should build quietly before one slam, with speed lines — use `crash-zoom`. | 69f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/hook-punch.md) | 
 | `logo-enter` | Showing a cluster of brand/partner/integration logos arriving together ("works with…", an AI-tool lineup, an icon cloud). | You need a single product logo or wordmark lockup — this is a multi-chip cluster, not one mark; use a logo sting (`orbit-lock`, `spotlight`, `anamorphic-flare`) or resolve kinetic text (`kinetic-center-build`, `per-character-rise`) into the name. | 90f | social | remocn | — | [docs](https://remocn.dev/docs/social/logo-enter.md) | 
 | `milestone-roll` | Celebrating growth (renders, users, downloads) as a counter that climbs through 1K, 10K, 100K, 1M. | You need several unrelated stats shown at once — use `stat-sequence`. | 150f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/milestone-roll.md) | 
 | `pov-setup` | A social-style joke or relatable moment where a setup line precedes a one-word punchline. | The setup should be typed character by character with a caret — use `typewriter`. | 86f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/pov-setup.md) | 
 | `rating-laurel` | Social proof beat for an app or tool: one headline rating with a wreath and short review quotes. | You want pile-up social post cards rather than a rating — use `testimonial-stack`. | 250f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/rating-laurel.md) | 
 | `reels-feed` | A social-media launch beat showing your content in a stories-and-reels style phone feed. | You want several phone screens side by side — use `phone-trio`. | 280f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/reels-feed.md) | 
 | `speedrun-timer` | A launch video that frames shipping as a speedrun, with steps like script, edit, render and ship. | You only need one counting number, not a split table — use `rolling-number`. | 130f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/speedrun-timer.md) | 
 | `story-text` | An announcement caption ("okay, it's live") styled like a social story text sticker. | The words should follow a voiceover with a karaoke highlight — use `caption-karaoke`. | 138f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/story-text.md) | 
 | `testimonial-stack` | Social proof for a launch video: three or four customer quotes with name, role and handle. | You want one big quote as the hero line — use `quote-hero`. | 168f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/testimonial-stack.md) | 
 | `upvote-burst` | A launch-day ranking beat where your product overtakes rivals as votes tick up. | The list is a generic ranked table with no vote button or badge — use `leaderboard-climb`. | 103f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/upvote-burst.md) | 
 | `waitlist-swarm` | A waitlist or community milestone where many people arrive and assemble into your logo. | The shape should morph through several icons before the logo — use `dot-field-morph`. | 115f | social | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/waitlist-swarm.md) | 
 | `x-follow-card` | Showcasing a single X profile with the recognizable click-to-Follow payoff as the action beat. | You're aggregating follower growth or notifications rather than one profile — use `x-followers-overview`. | 165f | social | remocn | `@remocn/cursor` | [docs](https://remocn.dev/docs/social/x-follow-card.md) | 
 | `x-followers-overview` | A milestone or social-proof scene needs cycling follow notifications building to a total reveal. | You're highlighting one profile and a Follow click — use `x-follow-card`. | 360f | data | remocn | `@remocn/confetti` | [docs](https://remocn.dev/docs/social/x-followers-overview.md) | 
 | `year-in-review` | A year-in-review or wrapped recap for a product, with videos shipped, top feature and builder rank. | You want a short stats beat with large counting numbers — use `stat-sequence`. | 448f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/social/year-in-review.md) | 

## Transitions

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `ascii-dissolve` | The video has a retro, terminal, or print aesthetic — the text-grid dissolve reads as CRT or risograph texture. | The tone is soft or organic — use `grain-dissolve` or `perlin-dissolve` for a gentler texture instead. | 40f | tech | remocn | — | [docs](https://remocn.dev/docs/transitions/ascii-dissolve.md) | 
 | `band-open` | A title card reveal where one word or phrase opens up onto a photo. | You need a vertical reveal rather than a horizontal one — use `column-slide`. | 36f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/band-open.md) | 
 | `band-shift` | A fast swap from a short headline to a logo or closing line with a graphic, rhythmic motion. | The reveal should split vertically into columns — use `column-slide`. | 55f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/band-shift.md) | 
 | `baton-word` | A script-driven launch video where three or four short sentences should flow into each other word by word. | You need a single headline that appears once — use `staggered-fade-up`. | 177f | playful | remocn | — | [docs](https://remocn.dev/docs/transitions/baton-word.md) | 
 | `beam-sweep` | A beat where a working product screen gives way to a single confident statement. | You need a hard, flat edge between scenes with no glow — use `diagonal-split`. | 30f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/beam-sweep.md) | 
 | `bloom-ring` | A hero beat where a headline resolves into the brand mark with an expanding burst of warm light. | You want a crisp geometric reveal with no glow — use `ring-cut`. | 30f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/bloom-ring.md) | 
 | `card-swipe-cover` | Moving from a statement headline to a catalog of deliverables, templates or case studies. | The next scene is a single hero shot, not a card or gallery — use `diagonal-split`. | 30f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/card-swipe-cover.md) | 
 | `caret-collapse` | A beat that moves from a typed URL or status line into an input where the viewer takes the next step. | There is no typed text in the outgoing scene to anchor the caret — use `ring-cut` for a generic reveal. | 36f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/caret-collapse.md) | 
 | `caret-wipe` | Dev-tool, editor, or terminal demos where a typing cursor is the natural through-line between scenes. | The scenes aren't text or UI surfaces — the caret metaphor has nothing to type over. | 40f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/caret-wipe.md) | 
 | `color-bars` | Cutting between two product screenshots or scenes with a bold, colorful whip. | You want a single band of light rather than several colored bars — use `flash-sweep`. | 69f | playful | remocn | — | [docs](https://remocn.dev/docs/transitions/color-bars.md) | 
 | `column-slide` | A clean, rhythmic swap between two headlines such as a plan and its launch. | You want horizontal bands instead of vertical columns — use `band-shift`. | 66f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/column-slide.md) | 
 | `cue-word` | A rapid run of short claims where each line needs its own move and one emphasized word. | The lines should hand a word from one to the next — use `baton-word`. | 176f | playful | remocn | — | [docs](https://remocn.dev/docs/transitions/cue-word.md) | 
 | `diagonal-split` | A confident before-and-after swap between two statements, such as built in a weekend and launched on Monday. | You want an opening that is straight and symmetrical rather than angled — use `hairline-open`. | 70f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/diagonal-split.md) | 
 | `disc-pop` | Moving from typing a request into an AI tool to the finished video it produced. | The tone is restrained and editorial — use `hairline-open`. | 30f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/disc-pop.md) | 
 | `displacement` | A cut in a tech or interface demo should read as the picture being knocked out of register rather than blended. | You want the tearing concentrated in horizontal bands with a hard cut — use `glitch-cut`. | 18f | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/transitions/displacement.md) | 
 | `dither-dissolve` | The video has a retro, terminal, or print aesthetic — the dither reads as CRT/risograph texture. | The tone is soft and organic — the pixel grid reads technical; use `grain-dissolve` or `perlin-dissolve`. | 40f | tech | remocn | `@remocn/shader-dithering` | [docs](https://remocn.dev/docs/transitions/dither-dissolve.md) | 
 | `ember-burn` | A scene change should feel cinematic and physical — the frame is destroyed rather than blended away. | The cut has to be quick — a burn compressed under 24 frames reads as a smear; use `zoom-blur`. | 40f | premium | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/transitions/ember-burn.md) | 
 | `flash-sweep` | Cutting through a chain of three or four product shots with a quick, repeated light pass. | You want colored bars instead of a single light band — use `color-bars`. | 140f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/flash-sweep.md) | 
 | `focus-pull` | The tone is refined and editorial — premium product films, calm brand moments, testimonials. | The cut needs energy or direction — use `whip-pan` or `push-through`. | 46f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/focus-pull.md) | 
 | `glitch-cut` | The cut lands in a tech or developer-facing demo and should read as a deliberate broadcast artifact instead of a smooth blend. | Only a headline should glitch while the scene around it stays intact — use `rgb-glitch-text`. | 12f | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/transitions/glitch-cut.md) | 
 | `grain-dissolve` | The video has an editorial, textured, analog feel — grain reads as film and print. | The transition must be fast — under ~50 frames the intensity/softness sweep has no room to read. | 76f | premium | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/transitions/grain-dissolve.md) | 
 | `grid-wave` | A product or interface demo needs a cut with craft — the frame is handled as a surface rather than blended away. | The cut needs to be quick or invisible — this one asks to be watched; use `zoom-blur`. | 36f | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/transitions/grid-wave.md) | 
 | `hairline-open` | A calm, editorial swap between two statements, such as a plan and its result. | You want a screenshot or product scene revealed inside the slit — use `slit-reveal`. | 78f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/hairline-open.md) | 
 | `halftone-cut` | A print-flavored swap between two headlines, such as a draft and a final version. | You want to turn a whole existing scene into halftone print — use `halftone-print`. | 76f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/halftone-cut.md) | 
 | `hot-slab-morph` | A beat that moves from choosing a template to describing a video in your own words. | The two scenes share no panel to morph between — use `zoom-blur` for a general-purpose cut. | 24f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/hot-slab-morph.md) | 
 | `hyperspace` | A launch, release or "what's next" moment should feel like a jump to somewhere new. | The cut needs to be quick: the jump takes 56 frames to read; use `zoom-blur` or `whip-pan`. | 56f | tech | remocn | — | [docs](https://remocn.dev/docs/transitions/hyperspace.md) | 
 | `icon-scatter` | Playful product or app transitions where icons are part of the brand's visual language. | The piece is minimal or serious — use `fade-through` for a quieter cut instead. | 40f | playful | remocn | — | [docs](https://remocn.dev/docs/transitions/icon-scatter.md) | 
 | `iris-wipe` | You want an old-cartoon "that's all" beat: the iris closes on a subject, lingers, and reopens somewhere new. | The tone is serious or premium: the iris reads as a gag; use `fade-through` or `focus-pull`. | 36f | playful | remocn | — | [docs](https://remocn.dev/docs/transitions/iris-wipe.md) | 
 | `lens-zoom` | A high-energy beat drop or reveal needs a cinematic camera move — the cut hides inside the peak of the distortion. | You just need a clean depth punch-in without the optics — use `zoom-blur`, the cheap variant of this move. | 28f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/lens-zoom.md) | 
 | `letter-gate` | A launch video where a call-to-action headline hands off to a prompt or editor screen with a match cut on its own letters. | The outgoing headline is short or has no two adjacent letters worth enlarging — use `ring-cut` for a generic circular cut. | 26f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/letter-gate.md) | 
 | `light-burn-to-line` | A closing beat where a busy product screen should resolve into one calm line and a call to action. | The cut must be quick and clean — a light burn needs about 36 frames; use `flash-sweep` for a faster light swap. | 36f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/light-burn-to-line.md) | 
 | `light-leak` | The video has a film, lifestyle or nostalgic look and the cut should feel like light hitting the negative. | The video is a crisp UI or data piece where a warm burn looks out of place; use `fade-through`. | 20f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/light-leak.md) | 
 | `page-turn` | Act breaks in paper or scrapbook stop-motion videos — the current page physically leaves and the next scene is already living beneath it. | You need a smooth cinematic cut between UI scenes — use `whip-pan` or `push-through`. | 128f | paper | remocn | — | [docs](https://remocn.dev/docs/transitions/page-turn.md) | 
 | `paper-tear` | A reveal should land as a physical hit: a product, a headline or a price punching through the old scene. | The cut is routine and repeats often: the impact gets old fast; use `fade-through` or `whip-pan`. | 36f | paper | remocn | — | [docs](https://remocn.dev/docs/transitions/paper-tear.md) | 
 | `particle-dissolve` | A scene change should read as the picture breaking down into matter and reassembling, not as one image fading through another. | You only need texture over a plain crossfade — use `grain-dissolve`. | 36f | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/transitions/particle-dissolve.md) | 
 | `perlin-dissolve` | Organic, atmospheric chapter changes — nature, ambient, calm product films. | Fast cuts — the threshold sweep needs ~100 frames to read as a sweep, not a flicker. | 104f | premium | remocn | `@remocn/shader-perlin-noise` | [docs](https://remocn.dev/docs/transitions/perlin-dissolve.md) | 
 | `pixel-sort` | The video has a glitch, generative or data-art look and the cut should feel like the image is being processed. | The scenes are heavy React subtrees: each scene is painted once per column; lower columns or use `dither-dissolve`. | 30f | tech | remocn | — | [docs](https://remocn.dev/docs/transitions/pixel-sort.md) | 
 | `press-warp-dive` | An AI-prompt product demo where typing a request and hitting send should visibly launch the generated result. | There is no button or clickable control to anchor the cut — use `zoom-blur` for a general push into the next scene. | 30f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/press-warp-dive.md) | 
 | `push-through` | The narrative moves deeper into a topic — zooming in on a feature, entering a product, chapter descent. | Scenes are peers moving sideways — use `whip-pan`; the push implies hierarchy (outer → inner). | 40f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/push-through.md) | 
 | `replay-wipe` | A sports or event style recap in a launch video, cutting from a live moment to its replay. | The scenes need a quiet or editorial change — use `hairline-open`. | 102f | tech | remocn | — | [docs](https://remocn.dev/docs/transitions/replay-wipe.md) | 
 | `ring-burst` | Swapping a short headline for a logo or closing statement with a punchy, centered burst. | You want a soft glow rather than solid rings — use `bloom-ring`. | 65f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/ring-burst.md) | 
 | `ring-cut` | Swapping a short statement for a logo or closing line with a circular reveal from a chosen point. | You want a soft glow of light rather than hard rings — use `bloom-ring`. | 57f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/ring-cut.md) | 
 | `ripple-zoom` | A hero statement or logo deserves a camera move — the dolly-through-rings reads as arriving at the point. | The incoming scene has an opaque full-frame background — it hides the field and kills the depth illusion. | 88f | premium | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/transitions/ripple-zoom.md) | 
 | `shader-seam` | An OpenShaders material should dissolve in place to reveal the next scene. | A minimal typographic cut is enough — use `caret-wipe`. | 60f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/shader-seam.md) | 
 | `shader-spiral-pass` | A scene change should feel like flying through the center of a luminous spiral. | You need a continuous background without a scene change — use `shader-light-tunnel`. | 72f | premium | remocn | `@remocn/shader-light-tunnel` | [docs](https://remocn.dev/docs/transitions/shader-spiral-pass.md) | 
 | `shape-cut` | Swapping a short statement for a logo or closing line with a single bold shape that ends as a punctuation-like mark. | You want multiple rings expanding from a point — use `ring-cut`. | 76f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/shape-cut.md) | 
 | `slide-swap` | You want a scene-to-scene grammar with no overlap at all — the outgoing content is fully gone before the incoming content's first frame. | The stage colour has to change between scenes — this sequencer paints one constant canvas, while `spring-settle` crossfades the background inside a dedicated gap. | 210f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/slide-swap.md) | 
 | `slit-reveal` | Introducing a product with a title that rides a line of light before the screen is revealed. | You only need to swap two text statements — use `hairline-open`. | 132f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/slit-reveal.md) | 
 | `smoke-dissolve` | A reveal should feel like emerging from mist — moody, cinematic, mysterious openings. | Fast cuts — the ring expansion needs ~100 frames of runway. | 104f | premium | remocn | `@remocn/shader-smoke-ring` | [docs](https://remocn.dev/docs/transitions/smoke-dissolve.md) | 
 | `spring-settle` | The stage colour changes from scene to scene — the crossfade happens inside the empty gap, so it never muddies two scenes together. | You want directional momentum between scenes; `slide-swap` shoves the outgoing content off one edge and springs the next in from the opposite one. | 213f | premium | remocn | `@remocn/scene-motion` | [docs](https://remocn.dev/docs/transitions/spring-settle.md) | 
 | `strobe-montage` | A high-energy cut from an opening claim to the product prompt, with a burst of imagery in between. | The cut should be quiet and slow — use `hairline-open`. | 28f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/transitions/strobe-montage.md) | 
 | `swirl-dissolve` | A dramatic chapter break where the frame should visibly transform — reveals, act changes. | Fast cuts — under ~80 frames the twist arc collapses into noise. | 104f | premium | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/transitions/swirl-dissolve.md) | 
 | `tile-wave` | Swapping a short statement for a result or outcome word, such as Idea to Shipped, with a tactile grid motion. | You want a grid that lifts into solid blocks and carries a full-frame scene — use `grid-wave`. | 94f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/tile-wave.md) | 
 | `venetian-blinds` | You want a graphic, editorial cut with visible structure, like a magazine spread or a brand reel. | The scene is a heavy React subtree: the outgoing scene is painted once per slat; keep slats low or use `fade-through`. | 26f | premium | remocn | — | [docs](https://remocn.dev/docs/transitions/venetian-blinds.md) | 
 | `warp-dissolve` | Moving between chapters or moods — the melt reads as time passing or context shifting. | The transition must be fast — under ~50 frames the melt has no room to read and looks like a smeared crossfade. | 76f | premium | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/transitions/warp-dissolve.md) | 
 | `wave-wipe` | The transition should feel like physical motion — a swell washing over the frame, tides, page-over-page. | Scenes relate horizontally (steps in a flow) — the vertical sweep fights the reading direction. | 60f | premium | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/transitions/wave-wipe.md) | 
 | `whip-pan` | Cuts need to feel fast and energetic — feature-to-feature jumps, montage rhythm, tech demos. | The moment is calm or contemplative — the whip reads as urgency; use `focus-pull`. | 26f | playful | remocn | — | [docs](https://remocn.dev/docs/transitions/whip-pan.md) | 
 | `window-trail` | A before-and-after beat such as an old look versus a new look, or a rename or rebrand. | The old text should be visibly struck out rather than painted over — use `strikethrough-replace`. | 86f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/window-trail.md) | 
 | `zoom-blur` | You need a default, general-purpose cut for a product demo — the de-facto workhorse transition of the catalog. | The cut needs lateral direction — use `whip-pan`. | 18f | clean | remocn | — | [docs](https://remocn.dev/docs/transitions/zoom-blur.md) | 

## Ui Blocks

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `achievement-pop` | A milestones or gamification beat showing a user unlocking several achievements in sequence. | A single big milestone number is the point — use `milestone-roll`. | 112f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/achievement-pop.md) | 
 | `animated-bar-chart` | Showing comparative categorical metrics in a product demo — feature usage, plan distribution, benchmark scores. | The data represents change over time — continuous trends belong in `animated-line-chart`, not bars. | 90f | data | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/animated-bar-chart.md) | 
 | `animated-line-chart` | Showing growth or trend over time — revenue curve, DAU climb, error-rate drop. | The data is categorical (not time-ordered) — use `animated-bar-chart` to compare discrete values side by side. | 90f | data | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/animated-line-chart.md) | 
 | `border-beam` | A version or release announcement card that should feel premium and lit from the edge. | The beam should run as a shader on any frame rather than around a card — use `shader-pulsing-border`. | 117f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/border-beam.md) | 
 | `card-fan` | Presenting a handful of formats, templates or plans as a hand of cards with one highlighted. | The options should swipe through one at a time like a deck — use `swipe-deck`. | 98f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/card-fan.md) | 
 | `card-push-line` | An AI product beat that pairs a short headline with the prompt box it describes, such as a promise followed by proof. | You want the camera to ride the caret and punch in on a phrase — use `caret-dolly`, the dolly twin of this scene. | 120f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/card-push-line.md) | 
 | `caret-dolly` | An AI product launch where the typed prompt is the hero, with one phrase emphasized in extreme close-up. | The prompt box should sit still with a slash command and an attachment tile — use `card-push-line`, the same prompt card with a push-in instead of a caret dolly. | 120f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/caret-dolly.md) | 
 | `check-list` | A list of features, steps, or done-items should be read in full and then crossed off in a hand-made scene. | Labels need to wrap across lines, or the list needs numbering or nesting. One label, one line. | 123f | paper | remocn | `@remocn/stop-motion`, `@remocn/handwrite` | [docs](https://remocn.dev/docs/ui-blocks/check-list.md) | 
 | `code-morph` | A launch or product demo needs to show an API getting simpler, with the before and after code in one panel and the surviving tokens visibly traveling to their new places. | The code should simply appear line by line, with no before and after — use `glass-code-block`. | 114f | tech | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/code-morph.md) | 
 | `drop-upload` | A feature beat about importing a document, with the full drop, progress and success arc. | Several files go in at once and each resolves in turn — use `multi-file-drop`. | 128f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/drop-upload.md) | 
 | `ghost-complete` | An AI autocomplete or writing-assistant feature where the suggestion appears as ghost text before being accepted. | The prompt goes to a chat, not an inline editor — use `ai-prompt-flow`. | 89f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/ghost-complete.md) | 
 | `glass-code-block` | A landing or hero scene needs an animated code backdrop that reads as "premium dev tool." | The scene requires the code to be visibly typed out character by character — use `terminal-simulator` or `typewriter` instead. | 180f | tech | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/glass-code-block.md) | 
 | `glass-code-walk` | A code reveal needs camera motion — the frame stays pinned to the line currently typing, then pulls back so the whole file lands as the payoff. | The code panel should sit still in frame with no camera move — use `glass-code-block`, which this component wraps and animates. | 150f | tech | remocn | `@remocn/glass-code-block` | [docs](https://remocn.dev/docs/ui-blocks/glass-code-walk.md) | 
 | `glow-born-card` | A feature beat introducing an import or connect flow, where the headline splits open to make room for the dialog. | The dialog should simply appear inside a live UI flow — use `dialog`. | 112f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/glow-born-card.md) | 
 | `keycap-press` | A shortcut or command-palette feature, such as a two-key chord that opens everything. | You only need typed key labels appearing as text — use `keystroke`. | 84f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/keycap-press.md) | 
 | `launch-days` | A launch-week announcement where one day is spotlighted among a week of upcoming features. | You are listing release notes as a scrolling feed — use `changelog-scroll`. | 63f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/launch-days.md) | 
 | `macro-tab-name` | A feature beat about naming or renaming a document, project or workspace, shot as an extreme close-up of the tab. | You need a full browser window with an address bar and page content — use `url-bar-cta`. | 100f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/macro-tab-name.md) | 
 | `menu-pick` | A choose-your-path beat where the answer is obviously the last option, such as three ways to ship a launch. | You want a real dropdown opening from a button — use `dropdown-menu`. | 71f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/menu-pick.md) | 
 | `multi-file-drop` | An AI or builder product that takes a prompt plus attachments, shown as several files dropped in at once. | Only one file is involved and you want a progress bar and confirmation — use `drop-upload`. | 122f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/multi-file-drop.md) | 
 | `paper-sticker` | Short labels, chips, or callout notes should exist as physical taped paper on a stop-motion scene. | The content is long text or looks like interactive UI — this is a paper prop, not a component sim. | 120f | paper | remocn | `@remocn/stop-motion` | [docs](https://remocn.dev/docs/ui-blocks/paper-sticker.md) | 
 | `pill-morph` | A product intro that goes from brand mark to product window to feature list to app icon in one continuous shape. | You only need a brand mark revealing — use `logo-enter`. | 216f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/pill-morph.md) | 
 | `polaroid` | Media belongs in a hand-placed instant-photo frame with a handwritten caption. | You just need a plain rounded video frame with no paper story — use `backdrop` with padding. | 150f | paper | remocn | `@remocn/stop-motion`, `@remocn/handwrite` | [docs](https://remocn.dev/docs/ui-blocks/polaroid.md) | 
 | `query-cascade` | A search or answer-engine launch showing the one question that matters among many. | The answer should come with cited sources — use `ai-answer-sources`. | 148f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/query-cascade.md) | 
 | `reel` | Showing a sequence of screenshots or product shots that should bloom open one over the last in a fixed frame. | You need a single framed photo rather than a sequence — use `polaroid` instead. | 160f | clean | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/reel.md) | 
 | `rim-draw-card` | A feature beat about saving reusable instructions or a custom skill, shown as a card that builds itself. | The card is already on screen and you only want a light orbiting its edge — use `border-beam`. | 114f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/rim-draw-card.md) | 
 | `rotary-dial` | A performance or intensity claim such as render speed going from 1 to 10. | The number should just roll up without a control — use `rolling-number`. | 90f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/rotary-dial.md) | 
 | `search-reveal` | A product introduction should begin with a search for its name. | Words should fly and morph between phrases — use `kinetic-morph-text`. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/search-reveal.md) | 
 | `terminal-cursor-zoom` | One install command is the whole beat and it must stay legible in a vertical or small-screen crop — the camera holds the cursor at frame center at 2.8× zoom. | The session has multiple lines, logs, or success output — use `terminal-simulator`; this component types exactly one command line and the camera never leaves it. | 90f | tech | remocn | `@remocn/terminal-simulator` | [docs](https://remocn.dev/docs/ui-blocks/terminal-cursor-zoom.md) | 
 | `terminal-simulator` | Demoing a CLI tool install sequence (`npm install`, `npx shadcn add`, build output). | You only need to type a single short string — use `typewriter` instead, which is lighter and pairs with any layout. | 240f | tech | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/terminal-simulator.md) | 
 | `toggle-on` | A feature beat about a single setting being enabled, such as auto-captions or dark mode. | The toggle is part of a real settings screen with several rows — use `settings-toggle-flow`. | 56f | playful | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/toggle-on.md) | 
 | `toolbar-unfurl` | A feature beat introducing a set of editor tools, one caption per tool, such as select, text, draw and comment. | You are presenting more than four features or want them as cards in a grid — use `bento-build`. | 125f | tech | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/toolbar-unfurl.md) | 
 | `ui-callout` | Explaining three or so parts of a screen, each with a short title and body. | The camera should travel into each region instead of annotating — use `screenshot-tour`. | 105f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/ui-callout.md) | 
 | `url-bar-cta` | A call-to-action beat that ends on a web address and the page it opens. | You only need an address-like search pill that types and reveals a panel — use `search-reveal`. | 72f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/ui-blocks/url-bar-cta.md) | 

## Numbers

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `abacus-count` | A usage-stat beat where a number such as renders this week is counted up on abacus rods before it appears in big type. | You want digits that roll like a live odometer — use `live-ticker`. | 160f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/abacus-count.md) | 
 | `activity-rings` | A monthly or quarterly recap beat where three usage metrics all beat their goals at once. | You have one headline percentage to land, not three metrics — use `share-donut`. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/activity-rings.md) | 
 | `area-compare` | A size or footprint claim, such as a bundle shrinking from 1200 KB to 84 KB, where area makes it obvious. | You have more than two values to compare — use `spring-bars`. | 110f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/area-compare.md) | 
 | `balance-beam` | A value claim where one thing outweighs a pile of costs, such as hours, tools and revisions. | You have real measured values to compare — use `area-compare`. | 146f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/balance-beam.md) | 
 | `beat-count` | A beat-synced number reveal where the figure steps up in time with a track and squashes on every kick. | You want a smooth continuous count rather than discrete steps on a beat — use `live-ticker`. | 144f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/beat-count.md) | 
 | `beeswarm` | A distribution comparison where many individual dots show a before and after, such as 3.4 versus 10.6. | You want one smooth curve moving left — use `distribution-shift`. | 130f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/beeswarm.md) | 
 | `benchmark-race` | A performance claim where your product finishes a benchmark first and the multiplier lands above the lanes. | You want two stopwatches side by side with no lanes — use `timer-duel`. | 104f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/benchmark-race.md) | 
 | `block-city` | A growth beat where one big percentage should land after a cinematic flyover of a skyline. | You need a flat bar chart with readable category labels — use `spring-bars`. | 218f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/block-city.md) | 
 | `bracket-focus` | A metric that should feel measured or captured, such as render time or latency. | You want a crosshair lock on a chart peak - use `crosshair-lock`. | 62f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/bracket-focus.md) | 
 | `branch-tree` | A beat about variety or combinations, such as one component becoming dozens of variants. | Cells should divide on a grid rather than branch - use `cell-divide`. | 88f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/branch-tree.md) | 
 | `bubble-pack` | A beat showing what a product is used for, where one category clearly dominates the others. | The parts add up to a whole and you want a percentage reading — use `share-donut`. | 108f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/bubble-pack.md) | 
 | `calendar-pick` | A launch-date beat where a month grid fades in, a cursor clicks one day and an event label with a time range is typed into it. | You only want to announce a date with a calendar drawing itself and a glowing ring — use `launch-date`. | 168f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/numbers/calendar-pick.md) | 
 | `candle-rally` | A milestone beat for a record, such as an all-time high in usage, revenue or growth. | You want a smooth trend line rather than candles — use `growth-line`. | 126f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/candle-rally.md) | 
 | `carry-count` | A usage-stat beat where a number climbs in chunks and a small disc visibly carries a 1 into the next column. | You want digits that roll continuously like a live feed — use `live-ticker`. | 120f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/carry-count.md) | 
 | `cell-divide` | A doubling or exponential-growth beat where one dot divides into 2, 4, 8 up to 64 while the count rolls beside it. | You want a grid of discrete dots lit up to show a share of 100 — use `unit-grid`. | 136f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/cell-divide.md) | 
 | `chart-morph` | A data reveal where the same numbers should visibly transform from a ring into a trend chart. | You just need a clean line that draws on — use `growth-line`. | 155f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/chart-morph.md) | 
 | `chevron-run` | A growth stat, such as a percentage increase, that deserves an upward, momentum-driven entrance. | The number should come from a graph that draws itself - use `growth-line`. | 108f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/chevron-run.md) | 
 | `churn-count` | A huge-figure beat where a counter races up and the changing digits flash thin and blue before settling at full weight. | You want a slower number that builds with carries — use `carry-count`. | 97f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/churn-count.md) | 
 | `clock-sweep` | A time-saved beat such as 'from idea to video in 4 minutes' where a clock hand sweeps a glowing wedge to the number of minutes. | You want two competing timers rather than one dial — use `timer-duel`. | 117f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/clock-sweep.md) | 
 | `combo-counter` | A feature-rundown beat where each capability slams in as a hit and a combo meter climbs to 'PERFECT'. | You want a calm, readable list of features rather than rapid hits — use `stat-sequence`. | 102f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/combo-counter.md) | 
 | `compact-stat` | A big total, such as frames rendered, that should be shortened to a headline form like 1.2M on screen. | The count should stay as a full long number - use `row-count`. | 96f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/compact-stat.md) | 
 | `concentric-scale` | A scale story that jumps by orders of magnitude, such as one user to a hundred thousand. | Only two values are compared as discs - use `area-compare`. | 138f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/concentric-scale.md) | 
 | `contribution-heatmap` | A usage or activity beat where a year of daily cells fills in like a contribution graph before the total lands. | You want a plain big number with no supporting graphic — use `compact-stat`. | 96f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/contribution-heatmap.md) | 
 | `core-sum` | A scale claim where parallel pieces, such as cores or workers, each count up and then merge row by row into one huge total. | You want one number simply counting up with no parts — use `carry-count`. | 105f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/core-sum.md) | 
 | `countdown` | An opening beat that counts 3, 2, 1 in monumental numerals and lands on 'Live' or a product name. | You want a countdown to a specific calendar date, not 3-2-1 — use `launch-date`. | 92f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/countdown.md) | 
 | `crosshair-lock` | A beat that calls out one peak or outlier on a dot plot with a precise readout. | You need a full chart that draws in and trends — use `growth-line`. | 82f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/crosshair-lock.md) | 
 | `cut-stat` | A time-saved or cost-cut claim where a bar graph visibly shrinks beside the percentage. | You have several segments that shrink, not one bar — use `time-breakdown`. | 93f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/cut-stat.md) | 
 | `diminuendo` | A huge-number beat where the figure grows as it climbs and each trailing digit group is drawn smaller and quieter than the last. | You want a plain, evenly weighted figure — use `compact-stat`. | 78f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/diminuendo.md) | 
 | `distribution-shift` | A latency or load-time beat where a wide distribution visibly collapses to a faster one. | You have two groups of individual samples to compare — use `beeswarm`. | 160f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/distribution-shift.md) | 
 | `domino-run` | A compounding or chain-reaction story, such as one small step leading to a 10x result. | The multiplication should be shown with a flipping sign - use `times-turn`. | 135f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/domino-run.md) | 
 | `dot-globe` | A global-reach beat, such as countries served, where each arc represents a new market. | A flat map lighting up city by city is the look - use `dot-map`. | 210f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/dot-globe.md) | 
 | `dot-map` | A coverage beat, such as countries or regions served, shown as points lighting up across a map. | You want a rotating globe with flight arcs - use `dot-globe`. | 113f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/dot-map.md) | 
 | `dot-sort` | A share-of-choice beat where hundreds of dots sort into rows and the winning row is largest, such as 41%. | You want a gradient ring and one percentage — use `share-donut`. | 111f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/dot-sort.md) | 
 | `dumbbell-shift` | A before-and-after beat across several categories, where each row's dots slide apart. | You have only two time points and want slanted lines — use `slope-chart`. | 140f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/dumbbell-shift.md) | 
 | `figure-reels` | A funding or milestone announcement where a figure should land between rows of product imagery. | You have no images and want a number on a clean ground - use `figure-to-label`. | 116f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/numbers/figure-reels.md) | 
 | `figure-to-label` | A valuation or revenue announcement where the figure should turn into the word that names it. | Imagery should scroll behind the number - use `figure-reels`. | 117f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/numbers/figure-to-label.md) | 
 | `flash-count` | A photo-flavoured number reveal where the count races up and a camera flash pops on the final value. | You want a heavy slam-in with no photography metaphor — use `smash-count`. | 76f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/flash-count.md) | 
 | `flow-arrow` | A growth stat such as 3x where an upward dotted arrow should carry the energy. | You need real data on axes — use `growth-line`. | 122f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/flow-arrow.md) | 
 | `fraction-split` | A speed or efficiency claim such as 1/8 the time, where the fraction itself is the visual. | The share should be a pie-like ring - use `share-donut`. | 146f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/fraction-split.md) | 
 | `free-as-in` | A pricing or openness beat where one word needs several short qualifications. | The point is a list of fine print dropping away to one price - use `price-page`. | 105f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/free-as-in.md) | 
 | `fuchidori-count` | A sticker-style stat beat where a number counts up and gains a stacked outline border each time it passes a power of ten. | You want a plain figure with no outline effect — use `compact-stat`. | 76f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/fuchidori-count.md) | 
 | `galton-stack` | A reliability or speed claim, such as 95% of renders under 2s, backed by a visible bell curve. | You want two sample groups compared on one axis — use `beeswarm`. | 137f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/galton-stack.md) | 
 | `gear-shift` | A speed or momentum beat where a number accelerates through numbered gear steps, getting heavier and larger with each shift. | You want a single smooth ease with no stepped feel — use `compact-stat`. | 82f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/gear-shift.md) | 
 | `grid-snap-poster` | A version or release announcement laid out like a poster, with a giant number and a headline. | The version numeral should rise inside a glowing ring - use `version-hero`. | 106f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/grid-snap-poster.md) | 
 | `growth-line` | A growth story where a curve draws through milestones to a big endpoint such as 100k. | You want a compact glowing trend beside a stat — use `sparkline-thread`. | 148f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/growth-line.md) | 
 | `hatch-shade` | An editorial or paper-craft stat where the number should look engraved rather than typed. | The number should be woven from threads - use `thread-weave`. | 128f | paper | remocn | — | [docs](https://remocn.dev/docs/numbers/hatch-shade.md) | 
 | `hex-fill` | A percentage stat, such as cache hit rate, where the filled share of a grid is the visual. | The share should be a ring sweep - use `share-donut`. | 110f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/hex-fill.md) | 
 | `high-score` | A launch beat that frames shipping as beating the old record, with a player climbing an arcade leaderboard to the top slot. | The rank change should read as a real-world leaderboard or product ranking, not a retro arcade — use `rank-climb`. | 128f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/high-score.md) | 
 | `ipo-open` | A launch-day or funding beat dressed as a market open, with a ticker, a bell and a first-trade price. | You want a ticker row with a scrolling tape rather than a market open - use `ticker-tape`. | 103f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/ipo-open.md) | 
 | `launch-date` | A date-announcement beat where a calendar month draws itself, the launch day lights up and the date resolves into a clean numeric lockup. | You want a cursor clicking a day and typing an event into a realistic calendar UI — use `calendar-pick`. | 170f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/launch-date.md) | 
 | `lean-count` | A benchmark beat where a multiplier like 3.2x lands as the headline result of the video. | The figure is a large integer that should roll like an odometer — use `carry-count`. | 76f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/lean-count.md) | 
 | `level-up` | A gaming-flavoured launch beat that frames a major release as a level-up. | The milestone is a plain version number — use `version-hero`. | 106f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/level-up.md) | 
 | `line-cascade` | A hero number beat where the figure should feel built from raw material rather than faded in. | The number must be readable from the first frame — use `compact-stat`. | 124f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/line-cascade.md) | 
 | `live-ticker` | A usage-scale beat where a giant counter ticks up in real time while a feed of customer pills streams in and is absorbed by the number. | You want a quiet, static figure with no streaming feed — use `compact-stat`. | 133f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/live-ticker.md) | 
 | `log-rescale` | A growth story whose last value is orders of magnitude bigger than the first, such as 340 to 2.4M. | The values are close in size and need no rescale — use `spring-bars`. | 124f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/log-rescale.md) | 
 | `lumen-count` | A hero beat where one big metric, such as a component or user count, should glow on a dark stage. | The number should land with a hard, punchy cut instead of a smooth glow - use `smash-count`. | 86f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/lumen-count.md) | 
 | `magnitude-push` | A scale claim like 1000x or 10,000 where the number of digits is the point. | The number is a plain count that should tick up smoothly — use `tall-count`. | 114f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/magnitude-push.md) | 
 | `max-q` | A performance or scale beat told as a mission, with two metrics climbing together. | One headline number is enough — use `magnitude-push`. | 112f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/max-q.md) | 
 | `measure-dim` | A performance beat where your frame rate or speed is drawn as a bar and measured with technical dimension lines against the old figure. | You have more than two values to compare or need categories on an axis — use `benchmark-race`. | 84f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/measure-dim.md) | 
 | `module-count` | A playful or retro stat beat where the digits should read as LED-style modules on a grid. | You need a smooth rolling, odometer-style count - use `live-ticker`. | 98f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/module-count.md) | 
 | `moire-reveal` | A speed-up claim like 10x that should resolve out of visual noise. | The number should count up — use `tall-count`. | 130f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/moire-reveal.md) | 
 | `mvp-card` | A community or contributor spotlight styled like a sports award card. | The beat is a ranking against competitors — use `timing-tower`. | 62f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/mvp-card.md) | 
 | `number-mosaic` | A milestone beat, such as total renders or users, where the figure should emerge from a sea of data. | You need a quick, simple stat with no lockup - use `compact-stat`. | 114f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/number-mosaic.md) | 
 | `number-split` | A catalog or library count that should break down into categories. | The parts should read as proportions of a whole — use `share-donut`. | 110f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/number-split.md) | 
 | `off-the-charts` | A quarterly results beat where the last bar blows past a target line, such as 260% of plan. | Everything fits comfortably on one axis — use `spring-bars`. | 107f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/off-the-charts.md) | 
 | `packed-count` | A large audience number, such as views, replays or downloads, that should gain a digit at a time. | The figure should lean forward with italic energy - use `lean-count`. | 110f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/packed-count.md) | 
 | `pitch-over` | A measured value, such as frames rendered or seconds saved, that should feel gauged against a scale. | You want a dimension-line comparison of two values - use `measure-dim`. | 86f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/pitch-over.md) | 
 | `pixel-bars` | A short growth beat in a retro LED style, where the last column passes the rest and lands a stat. | You want smooth springy bars with an overshoot — use `spring-bars`. | 81f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/pixel-bars.md) | 
 | `plus-open` | A transition from a count such as 150 updates into the first line of a release recap. | You want a static headline stat — use `compact-stat`. | 106f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/plus-open.md) | 
 | `point-hop` | A latency or performance claim where unit scaling, such as seconds to microseconds, is the story. | The number is an ordinary count — use `tall-count`. | 119f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/point-hop.md) | 
 | `press-stat` | A single percentage-improvement claim such as edit time down 73 percent. | The headline is a multiplier — use `lean-count`. | 72f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/press-stat.md) | 
 | `price-page` | A pricing beat that joins to the message that the product is free or simple. | You want a receipt that totals to a single line - use `the-tab`. | 138f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/price-page.md) | 
 | `price-slate` | A pricing reveal where the new price should land with a spin and a gradient sweep. | Dozens of fine-print lines should disappear to leave the price - use `price-page`. | 99f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/price-slate.md) | 
 | `quadrant-plot` | A positioning beat that places competitors on a two-axis map and then lands your product in the best corner. | You compare against one rival across several attributes — use `radar-compare`. | 110f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/quadrant-plot.md) | 
 | `radar-compare` | A feature-comparison beat where your product's strengths bulge past a competitor's outline on a six-axis radar. | You only have one measure to compare and want a bar — use `measure-dim`. | 132f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/radar-compare.md) | 
 | `radial-bars` | Usage by hour or by day where the peak is the headline. | You show progress toward goals — use `activity-rings`. | 116f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/radial-bars.md) | 
 | `rank-climb` | A launch-day beat showing the product reaching the top of a ranking. | You show a live race with gaps and laps — use `timing-tower`. | 140f | social | remocn | — | [docs](https://remocn.dev/docs/numbers/rank-climb.md) | 
 | `raster-paint` | A big multiplier such as 10x that should feel like it is being rendered on screen. | You need a crisp, clean stat from the first frame — use `compact-stat`. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/raster-paint.md) | 
 | `res-climb` | A beat about quality, scale or fidelity where the number should literally sharpen into focus. | You need the digits to roll from a lower value to a higher one - use `packed-count`. | 70f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/res-climb.md) | 
 | `ridgeline` | A before-and-after story across several periods, where the latest distribution should stand out. | You have only two groups to compare — use `beeswarm`. | 122f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/ridgeline.md) | 
 | `roman-edition` | A numbered edition such as a launch week or release series shown as a numeral. | The number is a plain software version — use `version-hero`. | 132f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/roman-edition.md) | 
 | `row-count` | A very large figure, such as millions of frames rendered, where the digit groups themselves are part of the story. | The number is small and needs no stacked rows - use `compact-stat`. | 84f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/row-count.md) | 
 | `ruler-scrub` | A year or version reveal where a ruler scrubs past ticks and decelerates until the headline number, such as 2026, lands in the centre. | The target is a calendar date rather than a single number — use `launch-date`. | 124f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/ruler-scrub.md) | 
 | `sankey-flow` | A beat showing several sources or channels merging into one outcome, such as total videos rendered. | You want shares of a whole as a percentage — use `share-donut`. | 98f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/sankey-flow.md) | 
 | `score-bug` | A launch beat framed as a match result where the product beats the old way, in the style of a sports broadcast score bug. | You want a plain animated number with no sports framing — use `combo-counter`. | 82f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/score-bug.md) | 
 | `shape-pack` | A poster-style stat beat with a collage look. | You want a clean headline number — use `compact-stat`. | 103f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/shape-pack.md) | 
 | `share-donut` | A market-share or usage-share beat where one slice, such as 38%, is the headline. | You want rectangles sized by value with room for labels — use `treemap-split`. | 96f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/share-donut.md) | 
 | `shot-clock` | A deadline beat framed as a basketball shot clock that counts down, turns red for tenths and ends on a buzzer with 'Shipped'. | You want a rocket-launch style mission clock with telemetry — use `t-minus`. | 137f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/shot-clock.md) | 
 | `single-stroke` | A date or number reveal where a giant numeral is drawn in a single pen stroke on a teal field beside a coloured panel. | You want a full calendar drawn and the launch day highlighted — use `launch-date`. | 94f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/single-stroke.md) | 
 | `slim-count` | A countdown of work removed, such as keyframes or hours left to do by hand, ending on zero. | The count rises to a big achievement figure - use `tall-count`. | 84f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/slim-count.md) | 
 | `slope-chart` | A before-and-after beat across two time points where one line climbs far above the rest. | You want each row's before and after as dots on a track — use `dumbbell-shift`. | 124f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/slope-chart.md) | 
 | `smash-count` | A punchy stat reveal where the number should feel slammed into place, such as scenes made or shipped. | You want a smooth, glowing count - use `lumen-count`. | 60f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/smash-count.md) | 
 | `sparkline-thread` | A compact growth beat where a glowing trend line ends on a point and a +% stat counts up. | You want a full chart with milestones and a big endpoint — use `growth-line`. | 116f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/sparkline-thread.md) | 
 | `spec-sheet` | A beat listing product facts such as resolution, frame rate and license. | You compare two options side by side — use `versus-split`. | 84f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/spec-sheet.md) | 
 | `speed-trap` | A performance beat where a top-speed style readout locks on your headline number against last year's mark. | You want a single quiet figure with no bar or comparison — use `compact-stat`. | 65f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/speed-trap.md) | 
 | `split-flash` | A record-time beat where a lap-style clock races and freezes on a final value, then flashes a purple 'Fastest lap' band. | You want two clocks racing each other with a multiplier — use `timer-duel`. | 59f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/split-flash.md) | 
 | `spring-bars` | A comparison beat where one bar should win, such as the stiffest or strongest option of several. | You need labeled category axes and real units — use `log-rescale`. | 127f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/spring-bars.md) | 
 | `stacked-shift` | A market-share story across years where one series grows until it leads, such as 52%. | You only have one moment in time — use `share-donut`. | 150f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/stacked-shift.md) | 
 | `stat-inline` | A statement stat such as Builders shipped 12,480 launch videos, where the number must stay in context. | The number alone is the message — use `compact-stat`. | 107f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/stat-inline.md) | 
 | `stat-rail` | A proof beat with up to four stats stepping through next to a headline and a photo. | Each stat should count up big, one per beat — use `stat-sequence`. | 110f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/numbers/stat-rail.md) | 
 | `stat-sequence` | A social-proof beat of two to four headline numbers. | You have only one stat — use `compact-stat`. | 126f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/stat-sequence.md) | 
 | `stem-stretch` | A time-saved or duration claim such as 4 hours back every week. | You want a clean number with no stretching — use `compact-stat`. | 88f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/stem-stretch.md) | 
 | `streamgraph` | A trend beat with several layers over time where one layer swells into the headline share. | You need exact values at a few time points — use `stacked-shift`. | 110f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/streamgraph.md) | 
 | `stripe-count` | A loud, brand-colored stat beat where the whole frame becomes the accent color. | You want a quiet, dark stage rather than a full-bleed color - use `lumen-count`. | 98f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/stripe-count.md) | 
 | `studio-reflection` | A product-shot style hero number such as the size of a library. | The number should count up with a glow — use `lumen-count`. | 82f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/studio-reflection.md) | 
 | `t-minus` | A release-day beat framed as a mission countdown: a T-minus clock ticks to zero and 'LIFTOFF' slams in over a sunrise glow. | You want large cinematic 3-2-1 numerals with ring and slice transitions — use `countdown`. | 108f | tech | remocn | — | [docs](https://remocn.dev/docs/numbers/t-minus.md) | 
 | `tall-count` | A percentage-gain headline such as +240 percent. | The headline is a multiplier — use `lean-count`. | 78f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/tall-count.md) | 
 | `tally-marks` | A paper or hand-made beat where a big count should be earned one stroke at a time. | You need the number to arrive fast and clean - use `compact-stat`. | 152f | paper | remocn | — | [docs](https://remocn.dev/docs/numbers/tally-marks.md) | 
 | `the-tab` | A what-you-get beat where every included item carries the same price, such as zero. | Fine print should be removed one line at a time - use `price-page`. | 122f | clean | remocn | — | [docs](https://remocn.dev/docs/numbers/the-tab.md) | 
 | `thin-slab` | A time-saved beat that squeezes a thick slab for the old duration down to a thin one for the new duration while the number counts across. | You want a bar race between several contenders on a shared clock — use `benchmark-race`. | 108f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/thin-slab.md) | 
 | `thread-weave` | A craft-flavoured beat where a figure should look built row by row. | You want a clean digital stat — use `compact-stat`. | 97f | paper | remocn | — | [docs](https://remocn.dev/docs/numbers/thread-weave.md) | 
 | `ticker-tape` | A funding, valuation or growth moment told as a market quote. | The beat is an IPO price print — use `ipo-open`. | 130f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/ticker-tape.md) | 
 | `time-breakdown` | A time-saved claim where the segments of a workflow, such as editing, rendering and export, visibly shrink. | You have a single bar and a single percentage — use `cut-stat`. | 138f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/time-breakdown.md) | 
 | `timer-duel` | A speed-comparison beat where two stopwatches start together and the faster one stops first, with a big multiplier left on screen. | The two values should be shown as one slab that physically squeezes — use `thin-slab`. | 138f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/timer-duel.md) | 
 | `times-turn` | A multiplier claim such as 3x, where a percent sign flips into a times sign. | You want the multiplier to count up — use `lean-count`. | 92f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/times-turn.md) | 
 | `timing-tower` | A we-moved-up-the-ranking beat with a motorsport feel. | You rank products in a plain list — use `rank-climb`. | 143f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/timing-tower.md) | 
 | `treemap-split` | A catalog or usage breakdown where one category, such as 38%, is the headline and the rest are context. | You want a ring with a single percentage in the center — use `share-donut`. | 130f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/treemap-split.md) | 
 | `unit-grid` | A one in three or 33 percent claim shown as a countable share of dots. | You compare shares among competitors — use `share-donut`. | 104f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/unit-grid.md) | 
 | `uptime-strip` | A reliability beat for an API, hosting or infrastructure product. | You show a metric climbing over time — use `sparkline-thread`. | 103f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/uptime-strip.md) | 
 | `version-hero` | A release announcement where the version number is the hero. | The number is an edition counter — use `roman-edition`. | 96f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/version-hero.md) | 
 | `versus-split` | A head-to-head beat that pits the product against the old way on a diagonal split with a tale-of-the-tape of time, cost and effort. | The contest should read as a football-style scoreline — use `score-bug`. | 66f | playful | remocn | — | [docs](https://remocn.dev/docs/numbers/versus-split.md) | 
 | `waterfall-chart` | A revenue or metric bridge where gains and losses step from a start value to a total, such as $84k MRR. | You have simple category values with no running total — use `spring-bars`. | 111f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/waterfall-chart.md) | 
 | `weight-cut` | A size or weight stat, such as kilobytes saved, where the type itself should get lighter as the number shrinks. | The number should grow rather than shrink - use `lean-count`. | 82f | data | remocn | — | [docs](https://remocn.dev/docs/numbers/weight-cut.md) | 
 | `zero-stretch` | A count claim such as 200 components, where the unit word sits inside the number. | The stat is a duration with a unit word — use `stem-stretch`. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/numbers/zero-stretch.md) | 

## Typography

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `a-to-z` | A feature-list beat framed as an alphabet, where each item starts with the next letter and the finale lands on Z. | The items are not alphabetical or the alphabet joke does not fit — use `index-list`. | 128f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/a-to-z.md) | 
 | `absorb-stack` | A short poetic statement set as a centered stack of lines in a brand film. | You need one big loud headline rather than a stack — use `full-bleed-type`. | 60f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/absorb-stack.md) | 
 | `acronym-expand` | A feature-naming beat where a short acronym like MCP or SDK needs to be spelled out for the viewer. | The headline is a plain sentence with nothing to expand - use `tracking-in`. | 86f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/acronym-expand.md) | 
 | `anagram-shuffle` | A clever hook where two related words share the same letters, such as a product's before and after. | The words differ by a letter or two per step — use `word-ladder`. | 116f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/anagram-shuffle.md) | 
 | `and-you` | A who-it's-for beat that lists several audiences and ends by addressing the viewer. | You want three short benefit words instead of audiences — use `feature-trio`. | 127f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/and-you.md) | 
 | `answer-first` | A Q&A beat where the punchy answer should land before the question that explains it. | You need a back-and-forth between two speakers — use `overheard`. | 72f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/answer-first.md) | 
 | `aspect-slit` | A film-style title card for a product launch or release announcement. | You want a clean text reveal without letterbox bars — use `soft-blur-in`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/aspect-slit.md) | 
 | `axis-flex` | A beat about flexibility or range, where a single word shows off a variable font's width and weight. | You only want a weight swell across the letters with no width change — use `weight-wave`. | 124f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/axis-flex.md) | 
 | `baseline-drop` | A closing tagline where each word should land with weight, one beat after another. | The line is long enough to need several rows - use `line-by-line-slide`. | 94f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/baseline-drop.md) | 
 | `beam-split` | A headline that sets up a punchline, where the second phrase appears inside the opened gap. | There is no second phrase to place in the gap - use `blur-out-up`. | 116f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/beam-split.md) | 
 | `beta-thanks` | A thanks-to-testers or early-access closing beat in a release video. | You are announcing a launch with a long list of features — use `embargo-lift`. | 94f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/beta-thanks.md) | 
 | `block-swap` | A beat that rewrites one statement into another, such as a problem line replaced by the answer. | You only have a single line to reveal - use `mask-reveal-up`. | 120f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/block-swap.md) | 
 | `blur-out-up` | A title or tagline needs a graceful upward exit before the next scene cuts in. | You want a blurred entrance that resolves to crisp — that is `focus-blur-resolve`, which opens blurry and sharpens in. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/blur-out-up.md) | 
 | `bokeh-title` | An opening title for a premium or lifestyle launch where the headline should resolve from a blur of lights. | The scene needs crisp, fast type with no atmosphere - use `tracking-in`. | 152f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/bokeh-title.md) | 
 | `boss-bar` | A playful beat framing a legacy workflow as a boss that your features defeat one hit at a time. | You want a streak of eliminations ending in a banner — use `kill-feed`. | 124f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/boss-bar.md) | 
 | `bottom-up-letters` | A short punchy word or acronym should land with clear, visible per-character energy. | The text is a full sentence or phrase — the high stagger makes long strings feel sluggish; use `per-character-rise` (faster, more even) or `mask-reveal-up` (line-level) instead. | 60f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/bottom-up-letters.md) | 
 | `bug-dock` | A broadcast-style title where the brand shrinks into a corner bug and the message takes over. | You want the headline alone with no logo lockup — use `soft-blur-in`. | 114f | social | remocn | — | [docs](https://remocn.dev/docs/typography/bug-dock.md) | 
 | `caret-letter` | A brand or product-name reveal where a text caret becomes one letter of the name. | You just need a typed line with no morph — use `typewriter`. | 180f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/caret-letter.md) | 
 | `caret-swap` | One phrase should be replaced by another through a caret gesture: the cursor swells into a block that eats the old text, collapses back and types the new one. | You only need one phrase typed from empty — use `typewriter`. | 67f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/caret-swap.md) | 
 | `case-flip` | A headline beat where the casing itself is the joke, such as a quiet word turning LOUD. | You want letters decoding from random characters instead of flipping case — use `matrix-decode`. | 120f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/case-flip.md) | 
 | `centered-word-build` | A short statement should assemble one word at a time while every visible prefix stays centered and pushes closer. | Each new word should physically drive the existing line aside — use `word-push`. | 63f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/centered-word-build.md) | 
 | `changed-mind` | A testimonial that shows a customer's opinion evolving over time, with one quote edited in place. | You have several different testimonials from different people — use `quote-hero`. | 140f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/changed-mind.md) | 
 | `changelog-scroll` | A what's-new beat that shows a long history of releases and zooms into the latest one. | You want a live terminal-style log instead of a list — use `terminal-simulator`. | 108f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/changelog-scroll.md) | 
 | `chore-fold` | A before-and-after beat where a list of chores is replaced by one product line. | You want pain points to dim toward one claim rather than fold away — use `what-sticks`. | 146f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/chore-fold.md) | 
 | `chromatic-wave` | A held title — an album cover, a poster hold, a loop — needs slow, ambient distortion instead of a one-shot entrance. | You need a quick glitch accent rather than a five-second traveling wave — use `rgb-glitch-text`. | 150f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/chromatic-wave.md) | 
 | `chunk-stack` | A short slogan where each word gets its own line and one word is marked with a highlighter. | You want one giant word filling the frame — use `edge-fit`. | 94f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/chunk-stack.md) | 
 | `column-reflow` | A beat about layout, responsiveness or editorial typography where the text itself reflows. | You need a short punchy headline rather than a paragraph — use `soft-blur-in`. | 90f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/column-reflow.md) | 
 | `comet-headline` | A feature announcement where each word of the headline should be delivered with a trailing light. | The headline is a single short word - use `spring-scale-in`. | 81f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/comet-headline.md) | 
 | `cool-down` | A performance or efficiency claim where the visuals should feel calm and settled. | You want to show a number counting up — use `rolling-number`. | 92f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/cool-down.md) | 
 | `cooling-type` | A question or hook line that should feel written live, ending on an emphasized word. | You want a plain typed line with a blinking caret - use `typewriter`. | 110f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/cooling-type.md) | 
 | `counter-reveal` | A bold one-word status beat such as Beta or Live that hides a secondary line inside its letters. | The front word has few closed letterforms to reveal through - use `mask-reveal-up`. | 128f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/counter-reveal.md) | 
 | `cover-ring` | A launch statement over a collage of product photos that collapses into a punchline caption. | You have no photos and want text only - use `staggered-fade-up`. | 132f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/cover-ring.md) | 
 | `coy-denial` | A teaser where a loud denial is quietly undone by a tiny aside. | The punchline is an attribution below a quote — use `deadpan-box`. | 144f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/coy-denial.md) | 
 | `crew-of-one` | A credits-roll joke where one person plays every role, ending on who they are. | You want a list of benefits rather than credits — use `feature-trio`. | 138f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/crew-of-one.md) | 
 | `crunch` | A short story beat about a deadline, told in timestamped lines that build pressure. | You want several timestamped lines drifting past rather than one squeeze — use `story-dip`. | 170f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/crunch.md) | 
 | `cursor-frame` | A design-tool style beat where the headline is selected, moved and resized live. | You want the headline to just appear - use `staggered-fade-up`. | 184f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/cursor-frame.md) | 
 | `cut-off` | A joke where a long, tedious explanation is interrupted by a short, better answer. | The setup should be answered with a sheepish aside, not a hard cut — use `coy-denial`. | 110f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/cut-off.md) | 
 | `deadpan-box` | A joke or punchline beat where a quiet setup is flipped by the attribution that follows. | The quote is sincere praise from a real customer — use `quote-hero`. | 126f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/deadpan-box.md) | 
 | `depth-headline` | A product name or hero word that should feel layered with an object in front of it. | The headline needs to read clearly with nothing overlapping it - use `staggered-fade-up`. | 62f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/depth-headline.md) | 
 | `diff-swap` | A dev-tool beat showing the old painful way replaced by the new one. | The change is a single word inside a sentence — use `strikethrough-replace`. | 102f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/diff-swap.md) | 
 | `dot-type` | A rapid sequence of single words such as Think, Make, Ship, each formed from dots. | The words must stay readable at small sizes - use `typewriter`. | 158f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/dot-type.md) | 
 | `double-take` | A surprising claim that deserves a second look, such as a team-size or time-to-make stat. | The surprise is the answer to a question — use `answer-first`. | 134f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/double-take.md) | 
 | `drop-timer` | A product drop or launch teaser that counts down and smashes into a huge LIVE NOW payoff. | You want an escalating word sequence instead of a clock — use `escalate-cards`. | 111f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/drop-timer.md) | 
 | `echo-stack` | A one-word statement (a value, a promise) should hold the screen for a while and still feel alive. | The word should just appear and stay still — use `focus-blur-resolve`. | 26f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/echo-stack.md) | 
 | `edge-fit` | A rapid word montage where each word fills the frame edge to edge. | You want a stacked multi-word slogan — use `chunk-stack`. | 112f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/edge-fit.md) | 
 | `edit-ripple` | A beat about cause and effect, such as one edit changing the whole video. | You want objections each answered in turn — use `exactly`. | 196f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/edit-ripple.md) | 
 | `ellipsis-resolve` | A loading-to-done beat where a thinking indicator turns into a result word like Shipped. | The payoff is a full sentence - use `typewriter`. | 94f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/ellipsis-resolve.md) | 
 | `embargo-lift` | A launch-day announcement where the key facts are revealed from behind redaction bars. | You want a plain one-line reveal with no redaction look — use `mask-reveal-up`. | 102f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/embargo-lift.md) | 
 | `enhance-count` | A before and after message about quality, such as a rough draft becoming a finished piece. | You want a blur-in entrance only - use `focus-blur-resolve`. | 87f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/enhance-count.md) | 
 | `escalate-cards` | A rapid build-up where single words flash on cards, faster each time, until the last fills the frame. | You want a countdown clock — use `drop-timer`. | 65f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/escalate-cards.md) | 
 | `exactly` | A beat that answers common objections with a one-word agreement. | You want the answer to appear before the question — use `answer-first`. | 132f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/exactly.md) | 
 | `extrude-pop` | A short punchy word — a score, a verdict, a CTA — should land with physical weight, like a stamp rising off the page. | The text is long or small — the extruded body doubles the ink and turns a sentence into mush; keep it to one short word. | 48f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/extrude-pop.md) | 
 | `factor-out` | A feature beat where several actions share one location, tool or result. | The lines are separate claims to be dimmed toward one — use `what-sticks`. | 153f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/factor-out.md) | 
 | `fade-through` | One label, stat, or short phrase needs to swap cleanly into another in the same slot. | You want the incoming words to arrive one by one — use `per-word-crossfade` for a sequential word-level fade instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/fade-through.md) | 
 | `feather-settle` | A calm, reassuring closing line such as a soft landing or a gentle sign-off. | You need a fast, energetic entrance - use `rush-type`. | 111f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/feather-settle.md) | 
 | `feature-chips-flow` | A feature overview where rows of pills stream past and then snap into a cluster around the product logo. | You only have three features to show properly — use `feature-trio`. | 108f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/feature-chips-flow.md) | 
 | `feature-headline` | A feature spotlight with a New tag, a one-line headline and a short subhead. | You need a centered cinematic title with no tag - use `tracking-in`. | 39f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/feature-headline.md) | 
 | `feature-trio` | A three-benefit summary beat for a product, one short word per benefit. | Each feature needs a screenshot or UI view — use `feature-headline`. | 133f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/feature-trio.md) | 
 | `filler-cut` | A captions or editing-tool demo that shows filler words being removed from speech. | You want a before line diffed into an after line — use `diff-swap`. | 114f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/filler-cut.md) | 
 | `fine-print-up` | A terms or licensing beat where each promise turns into a line of fine print. | You want claims to dim toward one highlight instead of moving to the footer — use `what-sticks`. | 221f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/fine-print-up.md) | 
 | `flank-roll-swap` | A release announcement that swaps a studio name for an out-now line around a hero image. | You have no images and want a plain text swap — use `width-lock`. | 88f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/flank-roll-swap.md) | 
 | `flick-swap` | A feature rundown where several one-line claims cycle through in one scene. | You only have a single headline - use `feature-headline`. | 122f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/flick-swap.md) | 
 | `focus-blur-resolve` | A hero word or short phrase should feel like a camera lens pulling into focus. | You want a clean departure upward after a crisp entrance — that arc belongs to `blur-out-up`, which arrives clean and exits with upward blur. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/focus-blur-resolve.md) | 
 | `focus-front-swap` | A rhythmic three-line pitch that ends on a call to ship now. | Lines should swap by shifting layout rather than depth — use `layout-swap`. | 122f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/focus-front-swap.md) | 
 | `focus-pan-text` | A step-by-step status sequence, such as checks passing, ending on a ready message. | You have only one sentence - use `focus-blur-resolve`. | 113f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/focus-pan-text.md) | 
 | `fog-rise` | A big display word should materialize out of atmosphere — already at its size and position, resolving from heavy blur as if rising along the z-axis. | The whole line should sharpen at once without per-character order — use `focus-blur-resolve`. | 27f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/fog-rise.md) | 
 | `font-cycle` | A branding beat showing the same word in many typefaces before the chosen one lands. | You want one family flexing in width and weight, not different faces — use `axis-flex`. | 102f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/font-cycle.md) | 
 | `full-bleed-type` | A fast slogan where huge condensed caps words slam in one at a time and the last one lights up. | You want one word fitted edge to edge with a caption — use `edge-fit`. | 57f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/full-bleed-type.md) | 
 | `glass-capsule` | A headline where one key word should be magnified and re-styled as the point. | You want a flat highlight instead of glass - use `marker-highlight`. | 94f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/glass-capsule.md) | 
 | `glyph-anatomy` | A product for designers, a type or a design tool, should show its craft: the letters are built from points and curves on screen. | The outline should simply draw itself without points or handles — use `outline-trace`. | 66f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/glyph-anatomy.md) | 
 | `glyph-relay` | A setup-and-twist story beat where a phrase hands off between lines and ends on a giant question mark. | You only need a simple question and answer swap — use `hook-uncurl`. | 114f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/glyph-relay.md) | 
 | `gooey-morph` | A title reveal should feel liquid and organic — shapes fuse and hand their mass to the word instead of crossfading. | You need a plain text entrance without the shape build-up — use `soft-blur-in` or `mask-reveal-up`. | 76f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/gooey-morph.md) | 
 | `got-em` | A playful payoff for a giveaway or entry: a suspense line that explodes into a huge GOT EM. | You want a countdown build-up to the reveal — use `drop-timer`. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/got-em.md) | 
 | `gradient-scale-cut-text` | A title should begin at an imposing scale and resolve through a deliberately abrupt editorial cut. | The scale change must feel continuous — use `scale-down-fade` or `zoom-words`. | 36f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/gradient-scale-cut-text.md) | 
 | `grid-cell` | An announcement framed as a design-tool grid cell, such as a version or product name. | You want a plain typed line with no grid - use `typewriter`. | 130f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/grid-cell.md) | 
 | `half-built` | A roadmap beat showing what the product does now and what is coming. | Everything is shipped and you want a recap — use `week-shipped`. | 116f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/half-built.md) | 
 | `hand-count` | A stat, price, or count belongs in a hand-made scene — the number should arrive by being written, not by rolling. | The scene is a slick product UI or a dashboard metric — use `rolling-number` or `number-wheel`, which glide a mechanical typeface. | 54f | paper | remocn | `@remocn/stop-motion` | [docs](https://remocn.dev/docs/typography/hand-count.md) | 
 | `handwrite` | Captions, labels, and headlines should read as pen-written on paper — the core text voice of stop-motion scrapbook scenes. | You are simulating a terminal or an input being typed into — use `typewriter`. | 120f | paper | remocn | `@remocn/stop-motion` | [docs](https://remocn.dev/docs/typography/handwrite.md) | 
 | `headline-to-line` | A hero headline that should collapse into a sentence and finish typing a longer description. | The headline should only type, with no collapse — use `typewriter`. | 93f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/headline-to-line.md) | 
 | `hidden-word` | A reveal beat where a key word is concealed in a sentence and then pulled out as the headline. | You want a word highlighted in place without moving letters — use `inline-highlight`. | 152f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/hidden-word.md) | 
 | `hook-uncurl` | A hook that asks a question in stacked condensed caps and answers it as the lines uncurl. | You want a bigger story with a punchline glyph — use `glyph-relay`. | 78f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/hook-uncurl.md) | 
 | `hot-stage` | A closing beat that walks through build, render and ship stages, each new line displacing the last. | You have one short line and want a calm caption instead of a staged log — use `cool-down`. | 112f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/hot-stage.md) | 
 | `idea-set` | A two-line rough-to-finished beat where the second line is the payoff. | One line should change voice mid-line without rules or a ledger look — use `mono-voice`. | 106f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/idea-set.md) | 
 | `in-proportion` | An objection-handling beat where each customer worry is answered by a bigger, brighter reply. | There is only one question and one answer — use `answer-first`. | 180f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/in-proportion.md) | 
 | `indent-steps` | A write, render, ship sequence that should read like steps in an editor. | The lines should be typed out character by character — use `typewriter`. | 80f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/indent-steps.md) | 
 | `index-list` | A what's-inside beat that lists the main features of a release and lands on the one that matters most. | The lines should step in like indented code rather than a ruled index — use `indent-steps`. | 126f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/index-list.md) | 
 | `infinite-marquee` | A scene needs ambient motion in the background or as a decorative band between sections. | The text should enter, hold, then exit — that is a reveal animation, not a ticker; use `blur-out-up` or `mask-reveal-up` instead. | 180f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/infinite-marquee.md) | 
 | `ink-underline` | A hand-dragged ink underline belongs beneath a written headline, URL, or stat — pairs with `handwrite`, with `delay` set from `handwriteDuration`. | You are painting a highlight behind a word inside a sentence — use `marker-highlight`. | 120f | paper | remocn | `@remocn/stop-motion`, `@remocn/brush` | [docs](https://remocn.dev/docs/typography/ink-underline.md) | 
 | `inline-highlight` | One keyword inside a sentence needs to draw attention through a color shift without any background decoration. | You want a physical drawn marker or filled background behind the word — use `marker-highlight` for a visible paint-stroke effect instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/inline-highlight.md) | 
 | `inline-pill-takeover` | A sentence should transform an inline placeholder into a CTA without cutting to a separate title card. | Only one phrase should change color without affecting layout — use `inline-highlight`. | 30f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/inline-pill-takeover.md) | 
 | `inline-word-roll` | A headline keeps its opening phrase while cycling through audiences, benefits or outcomes. | Every new word should remain in the sentence — use `word-push`. | 75f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/inline-word-roll.md) | 
 | `intelligence-glow` | An AI feature beat that shows a prompt and its one-line answer, like a generated result. | You want the answer typed out with a visible cursor and no glow — use `typewriter`. | 148f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/intelligence-glow.md) | 
 | `italic-speed` | A speed or performance claim such as Faster that should feel like it is moving. | The word is long or lowercase and needs a calm entrance - use `soft-blur-in`. | 43f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/italic-speed.md) | 
 | `keep-words` | A closing manifesto beat with two or three beliefs that each boil down to one word. | You want every belief visible together as a full manifesto page — use `whole-page`. | 285f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/keep-words.md) | 
 | `kerning-snap` | A design-craft beat about typesetting, details or polish, where a word assembles precisely. | You want letters to ease in with a spacing change rather than snapping — use `tracking-in`. | 80f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/kerning-snap.md) | 
 | `kill-feed` | A playful recap where each shipped win lands as a kill in a game-style feed. | You want a single boss defeated by named hits — use `boss-bar`. | 69f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/kill-feed.md) | 
 | `kinetic-center-build` | A short headline should build word by word with satisfying kinetic momentum, locking centered at the end. | The text is long (7+ words) — the centering re-balance on each word becomes distracting; use `line-by-line-slide` for multi-word or multi-line phrases. | 60f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/kinetic-center-build.md) | 
 | `kinetic-morph-text` | A short sequence of phrases should feel like the same letters physically rearranging. | Words should switch with minimal movement — use `per-word-crossfade`. | 246f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/kinetic-morph-text.md) | 
 | `kinetic-warp` | A short, heavy display word needs a bold kinetic-typography moment where the whole word bends and snaps instead of individual letters animating. | You need a text entrance — the word is fully visible from frame 0 and only distorts; use `tracking-in` or `soft-blur-in` for reveals. | 100f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/kinetic-warp.md) | 
 | `known-terms` | A beat that maps familiar concepts to your product, such as a scene is a component. | You need a dictionary-style definition of a single term — use `verbed`. | 159f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/known-terms.md) | 
 | `ko-count` | A launch beat that builds suspense with a quick count to ten before a big verdict word. | You want a smooth numeric count-up of a metric, not a dramatic count — use `number-wheel`. | 98f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/ko-count.md) | 
 | `landing-confirmed` | A ship-day beat that treats the release like a landing: countdown, impact, then the big word. | You want a countdown that ends on a live URL rather than a landing — use `drop-timer`. | 114f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/landing-confirmed.md) | 
 | `layout-swap` | A feature headline that builds from one noun to a full promise. | Only one word changes inside a fixed sentence — use `pinned-word`. | 132f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/layout-swap.md) | 
 | `layover` | A journey beat where a word steps through intermediate stops before arriving. | You want a time phrase counting down to today — use `on-approach`, which is the close twin. | 142f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/layover.md) | 
 | `less-more` | A short manifesto beat that sets old effort against new payoff. | You have a longer list of points to step through — use `what-sticks`. | 104f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/less-more.md) | 
 | `letter-relay` | A brand or product name needs a playful reveal at the start of a launch video, one letter hopping after another. | The name should type in like a command or prompt - use `typewriter`. | 99f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/letter-relay.md) | 
 | `lights-out` | A launch countdown moment where the lights go out and the product name hits. | You want a calm reveal - use `soft-blur-in`. | 104f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/lights-out.md) | 
 | `line-by-line-slide` | A multi-line headline or short paragraph needs a flowing, line-by-line entrance with a matching exit. | The text is a single short phrase — the stagger has nothing to stage; use `mask-reveal-up` or `per-character-rise` for single-line reveals instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/line-by-line-slide.md) | 
 | `line-relief` | A hero title card where one huge word should first read as a topographic or radar-style relief. | The word must be readable from the first frame — use `full-bleed-type`. | 112f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/line-relief.md) | 
 | `liquid-word` | A before-and-after beat where an old word dissolves into the new one, such as draft turning into shipped. | The swap should read as an edit, like a correction - use `strikethrough-replace`. | 112f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/liquid-word.md) | 
 | `long-vowel` | A tagline that plays on emphasis, like a word drawn out for comic effect, followed by a short punchline. | You want letters to fly in and smear sideways - use `stretch-in`. | 81f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/long-vowel.md) | 
 | `loop-break` | A before and after beat that contrasts a tedious repeating workflow with a one-step fix. | You want the old line struck through and replaced in place — use `strikethrough-replace`. | 189f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/loop-break.md) | 
 | `macro-letter-pan` | A closing line where one word is the payoff and the camera should dwell on it before revealing the sentence. | You want the pan to end on a serif headline with a gradient fill - use `macro-pan`. | 84f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/macro-letter-pan.md) | 
 | `macro-pan` | A title that should feel shot with a macro lens, scanning across the letterforms. | You want a quick, clean entrance - use `staggered-fade-up`. | 134f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/macro-pan.md) | 
 | `magnet-letters` | A correction beat in a sentence, such as swapping one word for the better word, shown as a physical gag. | The swap should be quick and quiet - use `strikethrough-replace`. | 216f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/magnet-letters.md) | 
 | `marker-highlight` | A key phrase inside a sentence needs a physical, hand-drawn-feeling highlight that visually underscores the word. | You want a subtle color-only emphasis with no visible background — use `inline-highlight` for a clean color-shift with no marker block. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/marker-highlight.md) | 
 | `mask-reveal-up` | A multi-line headline or stacked list needs a clean, contained upward reveal that holds on screen. | You need an exit animation too — `mask-reveal-up` holds in place after reveal; use `line-by-line-slide` for a reveal that also exits to the right. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/mask-reveal-up.md) | 
 | `matrix-decode` | A hacker, terminal, or cyberpunk aesthetic is required and the scramble-to-reveal glyph effect is on-brand. | The content is a human sentence or marketing copy — the glitchy scramble reads as broken text to non-technical audiences; use `typewriter` for a clean character-by-character reveal with a more legible progression. | 90f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/matrix-decode.md) | 
 | `micro-scale-fade` | A label, subheading, or supporting text needs an entrance that feels polished without drawing attention to itself. | The reveal should be the hero moment with visible kinetic weight — use `kinetic-center-build` or `per-character-rise` for entrances that command attention. | 60f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/micro-scale-fade.md) | 
 | `mono-settle` | A developer-flavored message about moving from code to a finished result. | You want a plain two-line entrance - use `line-by-line-slide`. | 86f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/mono-settle.md) | 
 | `mono-voice` | A script-to-delivery message where the final word should be bigger and more expressive. | You only have two lines and want a quieter morph - use `mono-settle`. | 84f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/mono-voice.md) | 
 | `moves-up` | A roadmap beat showing what is shipping now and what is coming next. | Items are unfinished verbs that fill in and carry dates — use `half-built`. | 152f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/moves-up.md) | 
 | `name-gloss` | A naming beat where a two-part product or feature name is unpacked word by word. | You are mapping familiar concepts to yours, not glossing words — use `known-terms`. | 135f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/name-gloss.md) | 
 | `ndot-resolve` | A tech or hardware flavored title that should look like a display refreshing to final type. | You want a decode effect with scrambled characters - use `matrix-decode`. | 83f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/ndot-resolve.md) | 
 | `negation-drop` | A myth-busting beat where objections like you can't animate flip into you can. | The lines have no contractions to flip and should just stack in — use `hook-uncurl`. | 94f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/negation-drop.md) | 
 | `no-buts` | An objection-handling beat where each hesitation gets a short, confident reply. | The objection should shrink into a note and stay visible while the answer builds — use `in-proportion`. | 226f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/no-buts.md) | 
 | `nonstop` | A beat about a shorter path, such as steps removed between idea and export. | You need a time phrase leading to today — use `on-approach`. | 169f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/nonstop.md) | 
 | `not-yet` | A roadmap or honesty beat that admits current limits, each one ending in a hopeful word. | Only one line should flip from a negation to a positive — use `negation-drop`. | 173f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/not-yet.md) | 
 | `number-wheel` | A metric, stat, or count should animate to its value in a satisfying odometer roll. | The value is not an integer — this component is designed for whole numbers; format decimals upstream before passing them in. | 112f | data | remocn | — | [docs](https://remocn.dev/docs/typography/number-wheel.md) | 
 | `on-approach` | A launch countdown beat, such as in June, next week, tomorrow, today. | The cycling word should stop at several named stops — use `layover`, which plays almost the same. | 114f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/on-approach.md) | 
 | `out-of-context` | A punchy slogan where the final phrase flips the meaning, such as Stop making launch videos by hand. | The text is a single short word - use `spring-scale-in`. | 86f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/out-of-context.md) | 
 | `outline-fill-track-text` | A statement should hand focus from a lead word to a large numeric value in one continuous move. | The two texts should swap in place — use `value-swap` for a compact replacement. | 80f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/outline-fill-track-text.md) | 
 | `outline-trace` | A title should be drawn rather than revealed, like a trim path running around the real letterforms. | The text should look handwritten, stroke by stroke in a script face — use `handwrite`. | 44f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/outline-trace.md) | 
 | `oval-type` | A feature rundown that cycles through verbs before landing a short three-word tagline. | You only have one word to slam — use `full-bleed-type`. | 82f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/oval-type.md) | 
 | `overheard` | A question-and-answer exchange between two people, such as a customer or colleague overheard. | The message is one long testimonial from one person — use `quote-hero`. | 120f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/overheard.md) | 
 | `overnight` | A founder or customer story with a deadline that plays out across one evening, night and morning. | Each story line should drift across the frame on its own — use `story-dip`. | 150f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/overnight.md) | 
 | `parallax-lockup` | A multi-line brand statement that should settle into a tight typographic lockup. | The text is one short line - use `tracking-in`. | 98f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/parallax-lockup.md) | 
 | `pass-swap` | A three-line pitch where each beat is punctuated by a moving object. | You want focus pulls between lines, not a moving object — use `focus-front-swap`. | 122f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/pass-swap.md) | 
 | `path-ride` | A tagline or a short phrase should travel across the frame before it settles, leading the eye from one side to the other. | The line should be an accent on its own, with no text riding it — use `squiggle`. | 70f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/path-ride.md) | 
 | `path-text` | A before and after message about going from rough to refined. | You want text typed out character by character - use `typewriter`. | 86f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/path-text.md) | 
 | `peek-shut` | A teaser beat that shows a sliver of the product and then withholds the rest until launch day. | You want the full feature shown, not a glimpse — use `photo-fill-type`. | 126f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/peek-shut.md) | 
 | `per-character-rise` | A short word or phrase needs a crisp, sharp character-by-character entrance with even, readable stagger. | You want a dramatic staircase effect where each letter visibly lags the previous — use `bottom-up-letters` for the pronounced, wide-gap stagger instead. | 60f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/per-character-rise.md) | 
 | `per-word-crossfade` | Two short phrases need to swap with a soft, word-by-word transition that reads as calm and composed. | The transition should be a single-block fade with no word-level staging — use `fade-through` for a unified opacity swap instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/per-word-crossfade.md) | 
 | `period-drop` | An end card or a logo lockup should land with one physical, memorable beat. | The lockup is a row of brand marks rather than a word — use `logo-enter`. | 47f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/period-drop.md) | 
 | `perspective-marquee` | A dark, cinematic background treatment is needed with text rolling into a 3D vanishing point. | A flat, 2D looping ticker is sufficient — use `infinite-marquee` for a simpler, lighter strip with no perspective transform. | 240f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/perspective-marquee.md) | 
 | `perspective-squeeze` | A looping hold — an outro, a background title, a stream screen — needs constant, hypnotic typographic motion (the 225-frame track ends where it starts). | You need an entrance or a reveal — this is a sustained loop, the type is fully visible from frame 0; use `kinetic-warp` for a punchy display moment. | 225f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/perspective-squeeze.md) | 
 | `photo-caret` | A brand statement that should be written live with photos orbiting the text. | You have no photos to place around the text - use `cooling-type`. | 91f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/photo-caret.md) | 
 | `photo-fill-type` | A bold one-word title that should open into an image, such as a landscape or product shot. | You have no image and want text only - use `tracking-in`. | 136f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/photo-fill-type.md) | 
 | `phrase-list-bridge` | A beat that shows many options and then lands on one, such as browsing scenes and choosing a favorite. | You only want a pill to expand inside a sentence, with no list — use `inline-pill-takeover`. | 116f | clean | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/phrase-list-bridge.md) | 
 | `pinned-word` | A message where one keyword stays constant across several claims. | The fixed part is a phrase and the changing part is a short list — use `width-lock`. | 108f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/pinned-word.md) | 
 | `pitch-blanks` | A positioning beat that frames the pitch as a fill-in-the-blank: product, category, audience. | You want one word edited inside a sentence, not several blanks — use `word-insert`. | 141f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/pitch-blanks.md) | 
 | `plain-license` | A trust beat that translates a license or terms into a few plain words, such as free, for anyone, for anything. | You want tiny fine print under a big claim instead of a translation — use `fine-print-up`. | 184f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/plain-license.md) | 
 | `point-expand` | A run of two to five punchy claims, each building on the last, with a bold accent change between them. | The statements should arrive in a list with progress ticks and notes — use `feature-trio`. | 146f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/point-expand.md) | 
 | `point-intro` | A product announcement opener where one confident headline is written out and a colored point lands as the full stop. | You need several headlines swapping in sequence — use `rewrite-bars`. | 150f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/point-intro.md) | 
 | `post-script` | A closing card that thanks the viewer and then drops a final call to action as a P.S. | You only need a logo and a short tagline to close — use `blink-cut`. | 115f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/post-script.md) | 
 | `poster-crop` | A launch poster beat where a big headline crops in tight over a ruled ground with a kicker and date. | You only need a single plain headline with no poster furniture — use `scan-reveal`. | 112f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/poster-crop.md) | 
 | `prompt-restyle` | A beat showing how an AI prompt reshapes copy: typed instructions that make a headline bigger, tighter and styled. | You want a plain typed headline without the instruction chrome — use `typewriter`. | 130f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/prompt-restyle.md) | 
 | `pull-in` | A platform-coverage beat, such as now in vertical, 4K and your codebase. | You want a time-based countdown — use `on-approach`, which plays almost the same way. | 183f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/pull-in.md) | 
 | `pulse-line` | A product beat about speed or liveness where a heartbeat pulse runs through the headline. | You want a calm sweep of light across the text — use `shimmer-sweep`. | 103f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/pulse-line.md) | 
 | `quote-hero` | A customer testimonial in a launch or case-study video, with the key phrase marked. | The quote is a joke with a punchline attribution — use `deadpan-box`. | 246f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/quote-hero.md) | 
 | `rep-stack` | A one-word statement about repetition or iteration, like AGAIN. or REPEAT. | You have several different words, not one repeated word — use `word-stack`. | 60f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/rep-stack.md) | 
 | `rewrite-bars` | A feature walkthrough where one headline is rewritten into the next as bars sweep across it. | You only have one line and no rewrite is needed — use `scan-reveal`. | 161f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/rewrite-bars.md) | 
 | `rgb-glitch-text` | A tech, hacker, or cyberpunk scene needs a moment of digital corruption on a title. | You need a full text entrance animation — the glitch is a momentary effect, not a reveal; use `tracking-in` or `soft-blur-in` to bring text in. | 90f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/rgb-glitch-text.md) | 
 | `riddle-clues` | A teaser campaign beat that hints at the product through a few what it has but what it lacks riddles. | You want a single hesitant line answered by a reply — use `no-buts`. | 214f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/riddle-clues.md) | 
 | `ring-text` | A headline needs a dimensional object next to it, and the object itself should carry a short phrase. | The phrase should scroll flat across the frame — use `infinite-marquee`. | sustained | playful | remocn | — | [docs](https://remocn.dev/docs/typography/ring-text.md) | 
 | `rolling-number` | Animating a large integer metric on a stats or milestone slide (revenue, signups, impressions). | The value includes a prefix or suffix like `$99` or `1.2M` — use `slot-machine-roll` which accepts arbitrary strings instead. | 150f | data | remocn | — | [docs](https://remocn.dev/docs/typography/rolling-number.md) | 
 | `rolodex-flip` | Cycling package, feature, or value names inside a held line — install commands, "works with X" beats, plan-name cycling. | The values are numbers with a counting narrative — use `number-wheel` or `rolling-number`. | 110f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/rolodex-flip.md) | 
 | `round-slam` | A game-style announcement beat: a round or level call followed by a one-word finisher. | You want a count to ten before the verdict word — use `ko-count`. | 66f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/round-slam.md) | 
 | `rsvp` | A launch or event invite that spells out what, when and where, ending on how to join. | You want a thank-you sign-off followed by a P.S. line — use `post-script`. | 117f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/rsvp.md) | 
 | `rubberband-word` | A tension-and-release beat where a word is pulled tight and then snaps into its resolution. | The word change should morph letters smoothly, with no cursor - use `kinetic-morph-text`. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/rubberband-word.md) | 
 | `ruby-press` | A claim like subtitles for every market where the time frame keeps shrinking. | The swapped words need a stable width — use `width-lock`. | 134f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/ruby-press.md) | 
 | `ruler-align` | A message about precision, polish or alignment where messy text snaps into order. | You only need letter spacing to tighten, not baseline fixing - use `kerning-snap`. | 151f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/ruler-align.md) | 
 | `run-on` | A pain-point beat that shows a tedious workflow as one exhausting sentence before the fix. | The pain is a repeating loop of short steps rather than one sentence — use `loop-break`. | 188f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/run-on.md) | 
 | `rush-type` | A short phrase should cycle one forceful word at a time. | The text must remain readable throughout the motion — use `word-push` or `zoom-words`. | 104f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/rush-type.md) | 
 | `said-who` | A single short quote whose credibility comes from who said it, revealed bit by bit. | You have a longer testimonial with a role and company row — use `quote-hero`. | 140f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/said-who.md) | 
 | `scale-down-fade` | A headline needs a confident, minimal entrance without any kinetic exaggeration. | You want energy or playfulness — the scale-down reads as composed, not exciting; use `spring-scale-in` for an overshoot bounce instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/scale-down-fade.md) | 
 | `scan-reveal` | A section title where a scan line sweeps down and reveals the headline over an underline. | You need several headlines in sequence — use `rewrite-bars`. | 107f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/scan-reveal.md) | 
 | `scissors-cut` | A tagline where one phrase is cut out and replaced, such as swapping a slow timeline for a fast one. | The swap should be quiet and fast - use `strikethrough-replace`. | 202f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/scissors-cut.md) | 
 | `script-cut` | A how-we-made-it beat that shows one written line being split into separate shots. | A cut should remove filler words from a transcript — use `filler-cut`. | 176f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/script-cut.md) | 
 | `scrub-reveal` | A manifesto or value statement that should read like scrolling through a page and lighting up as you go. | You want a light sheen sweeping across muted text instead of a reading scrub — use `shimmer-sweep`. | 142f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/scrub-reveal.md) | 
 | `select-replace` | An editor-style beat that rewrites a slow plan into a fast one. | A single misspelling should be fixed in place — use `typo-fix`. | 130f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/select-replace.md) | 
 | `selection-snap` | A single word should read as something being designed: a design tool, a component library, a type or layout feature. | The word should enter with physical motion rather than change in place — use `stretch-in`. | 38f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/selection-snap.md) | 
 | `serif-rise` | An emotional or editorial line, like a before-and-after claim, that should feel crafted rather than techy. | The line is a bold sans statement that should slam in — use `full-bleed-type`. | 92f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/serif-rise.md) | 
 | `shader-text-reveal` | A short headline needs the hero shader reveal, one word at a time. | A quiet text entrance is enough — use `soft-blur-in`. | 48f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/shader-text-reveal.md) | 
 | `shadow-sweep-text` | A short statement should emerge through a dense shadow instead of fading or clipping into view. | The text should stay visible after entering — use `mask-reveal-up` for a one-way reveal. | 37f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/shadow-sweep-text.md) | 
 | `shared-axis-y` | Swapping two text values in a slide-deck style transition (A → B → C chained in `<Sequence>`). | You only need to bring text in for the first time with no outgoing content — use `short-slide-down` or `staggered-fade-up` for a clean entrance instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/shared-axis-y.md) | 
 | `shared-axis-z` | Conveying a zoom-in narrative: moving from a broad context to a focused point. | The swap is a lateral topic change with no depth relationship — use `shared-axis-y` for a horizontal-edit-style cut instead. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/shared-axis-z.md) | 
 | `shed-weight` | A typography-focused beat showing that a typeface holds up from tiny to huge sizes. | The point is a weight or width that animates on one word - use `axis-flex`. | 60f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/shed-weight.md) | 
 | `sheen-slide-in` | An intro title should arrive with momentum — a fast entrance, a long exponential settle and a barely visible final creep into center. | You want a repeating metallic shimmer loop rather than a single arrival — use `shimmer-sweep`. | 64f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/sheen-slide-in.md) | 
 | `shimmer-sweep` | Highlighting a product name or pricing tier with a refined, metallic gleam — luxury SaaS, pricing slides. | You need the text to enter the scene — shimmer-sweep does not animate the text in; use `tracking-in` or `soft-blur-in` for the entrance, then layer a shimmer if needed. | 120f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/shimmer-sweep.md) | 
 | `short-slide-down` | A multi-word headline should build its layout visibly — each word stacking to create a composed block. | You are swapping between two text values — use `shared-axis-y` which handles the outgoing text exit properly. | 60f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/short-slide-down.md) | 
 | `short-slide-right` | A short headline should enter with horizontal momentum — reads as forward motion or progress. | You are transitioning between two texts — use `shared-axis-z` (depth) or `shared-axis-y` (vertical swap) which handle the outgoing content. | 60f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/short-slide-right.md) | 
 | `slash-wipe` | A section title card where a bright slash wipes across and reveals a big title with a one-line sub. | You need a single headline with no wipe between sections — use `scan-reveal`. | 60f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/slash-wipe.md) | 
 | `slide-doors` | A rhythmic three-line pitch where each line is pushed out by the next, like doors sliding apart. | You need a single line, not a sequence — use `scan-reveal`. | 138f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/slide-doors.md) | 
 | `slit-scan` | A speed or performance claim where a single word resolves out of a streaked, fluted blur. | You want the word to slow down on a key syllable — use `speed-ramp-word`. | 98f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/slit-scan.md) | 
 | `slot-machine-roll` | Revealing a price change, plan upgrade, or before/after value where the string includes symbols (`$`, `%`, `×`). | The value is a large pure integer like `1,240,000` — use `rolling-number` which animates each decimal place independently and reads as a serious data metric. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/slot-machine-roll.md) | 
 | `soft-blur-in` | A hero headline needs the Apple-style per-character soft reveal — premium, airy, cinematic. | You want a hard exit animation — `soft-blur-in` is an entrance only; pair with `blur-out-up` in a `<Sequence>` for a matching exit. | 60f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/soft-blur-in.md) | 
 | `sold-out` | A scarcity beat for a limited drop, showing stock draining before a sold-out stamp. | You count down to a live time rather than draining stock — use `drop-timer`. | 122f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/sold-out.md) | 
 | `speed-ramp-word` | A line that rushes by and drops into slow motion on one key word for emphasis. | You want a streaked blur resolving into a word — use `slit-scan`. | 119f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/speed-ramp-word.md) | 
 | `spine-turn` | An agenda or chapter sequence where each title hands off to the next and stacks as a spine. | You want a numbered list that highlights row by row — use `index-list`. | 138f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/spine-turn.md) | 
 | `split-word` | A 'Now Available' style reveal where a status word appears inside the headline itself. | You want a gradient slash to wipe a large title in — use `slash-wipe`. | 94f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/split-word.md) | 
 | `spotlight-text` | A tech or developer-tool headline revealed by a spotlight that travels across dark type. | You want a bright band of shine over visible text — use `shimmer-sweep`. | 132f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/spotlight-text.md) | 
 | `spring-scale-in` | The scene calls for energy and bounce — product launches, celebration moments, fun CTAs. | The brand is serious, corporate, or premium — spring bounce reads as casual; use `scale-down-fade` or `soft-blur-in` for a composed entrance instead. | 60f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/spring-scale-in.md) | 
 | `squeeze-in` | A wordmark or short title should be uncovered by a clean wipe, as if a background-colored cover slides off it. | You want the whole word to collapse from a wide tracked-out state with blur — use `tracking-in`. | 34f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/squeeze-in.md) | 
 | `squeeze-out` | A headline that should feel pressed out and then settling, like a fresh print. | You want lines sliding up with a mask - use `mask-reveal-up`. | 64f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/squeeze-out.md) | 
 | `stack-letters` | A one-word title card for a release or milestone where the letters should physically land. | The message is a full sentence or several words — use `word-stack` for a stacked poster. | 106f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/stack-letters.md) | 
 | `staggered-fade-up` | A headline or body sentence is long and a simpler single-unit entrance would feel flat. | The text is very short (1–2 words) and the stagger has nothing to reveal gradually — use `scale-down-fade` or `spring-scale-in` for a single-unit entrance with more impact. | 90f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/staggered-fade-up.md) | 
 | `story-dip` | A short anecdote in three beats, such as setup, a snag and the fix, each with its own timestamp. | The story is a night-to-morning arc told over changing grounds — use `overnight`. | 132f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/story-dip.md) | 
 | `stretch-in` | A heavy display word needs a fast, physical entrance where the letterforms visibly deform — bars stretch long while stems keep their exact width. | The type is small or body-size — the smear reads at display sizes; use `per-character-rise` for smaller text. | 48f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/stretch-in.md) | 
 | `strikethrough-replace` | Showing a problem being replaced by a solution — the strike says you are crossing this out on purpose | There is no old text to cross out and you just need an entrance — use `staggered-fade-up` or `soft-blur-in` | 120f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/strikethrough-replace.md) | 
 | `stripe-mask` | A bold two-sentence statement that should be revealed through slanted stripes. | You want a single bold word slamming in — use `full-bleed-type`. | 100f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/stripe-mask.md) | 
 | `stripe-type` | A bold word needs a graphic, engineered entrance on a flat field, such as a product name or a section title. | The word should split along its letters rather than in horizontal bands — use `typed-split-wipe`. | 30f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/stripe-type.md) | 
 | `strobe-words` | A fast opener that cuts through a list of verbs, such as Plan, Write, Render, Ship. | The words should blink at a fixed rhythm and then cut to the logo with a one-line tagline — use `blink-cut`. | 68f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/strobe-words.md) | 
 | `tagline-justify` | A closing tagline that should lock up as a tidy poster block with a logo beneath it. | A paragraph should reflow its column width rather than set as a fixed block — use `column-reflow`. | 112f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/tagline-justify.md) | 
 | `tategaki-turn` | A tagline that plays on reading direction, with vertical Japanese-style columns turning to a line. | The phrase is long and should type out naturally — use `typewriter`. | 86f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/tategaki-turn.md) | 
 | `they-are-you` | An audience-recognition beat that describes the viewer in the third person, then turns it on them. | You want a list of audiences ending in a big and you — use `and-you`. | 93f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/they-are-you.md) | 
 | `three-steps` | A how-it-works beat that explains the product in three steps, such as install, compose, render. | You have a longer feature list that needs rows and a highlight — use `index-list`. | 118f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/three-steps.md) | 
 | `tittle-drop` | A hero line for a launch video where a small, witty typographic detail makes the headline memorable. | The headline has no i, j or trailing full stop, so nothing lands — use `per-word-crossfade`. | 175f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/tittle-drop.md) | 
 | `tldr-on-top` | A story beat that admits the full explanation is long and gives the short version first. | You only have one short claim and no long body — use `less-more` for a two-line contrast. | 130f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/tldr-on-top.md) | 
 | `top-down-letters` | A single uppercase word or short acronym should enter with structural weight — each letter landing like a stamp. | The text is more than ~8 characters — many letters dropping sequentially stretches the animation and the last letters feel delayed; use `staggered-fade-up` for longer phrases. | 60f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/top-down-letters.md) | 
 | `torn-edge` | A reveal that rips a paper sheet away to show a bold headline underneath. | You want a clean wipe with no paper texture — use `slash-wipe`. | 76f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/torn-edge.md) | 
 | `tracking-in` | A title word or brand name should feel like it is focusing into place — tracking collapse is the right metaphor for clarity, precision, or sharpness. | You want per-character stagger — `tracking-in` moves all letters as one unit; use `soft-blur-in` for a per-character blur-and-rise stagger instead. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/tracking-in.md) | 
 | `turnabout` | A positioning beat that flips the framing, such as from effort for the tool to effort from the tool. | The two lines share no words and just replace each other — use `layout-swap`. | 106f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/turnabout.md) | 
 | `two-hit` | A two-beat teaser where a first line is replaced by a second, like a premiere card. | You have more than two lines to cycle — use `rewrite-bars`. | 91f | social | remocn | — | [docs](https://remocn.dev/docs/typography/two-hit.md) | 
 | `type-fossil` | A creative process should move from earlier wording to a finished idea. | Letters must morph individually between phrases — use kinetic-morph-text. | 174f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/type-fossil.md) | 
 | `type-repeater` | One word should hit hard for a beat, with repetition giving it depth and energy around a still, readable center. | The repeats should stack in a quiet vertical column above and below the word — use `echo-stack`. | 90f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/type-repeater.md) | 
 | `type-wall` | A loud full-screen beat for one word, such as a section title, a manifesto word or a transition card. | One strip of scrolling text is enough, as a ticker or a separator — use `infinite-marquee`. | sustained | playful | remocn | — | [docs](https://remocn.dev/docs/typography/type-wall.md) | 
 | `typed-split-wipe` | A product or feature introduction should type itself cleanly before breaking into controlled directional fragments. | You need a conventional typewriter with a blinking caret and no exit — use `typewriter`. | 75f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/typed-split-wipe.md) | 
 | `typewriter` | Simulating a command being typed into a terminal or input — pairs with `terminal-simulator`. | The text is long — typing a paragraph at a readable speed eats far more frames than a viewer will wait; use `staggered-fade-up` or `blur-out-up` instead. | 120f | clean | remocn | `@remocn/remocn-ui`, `@remocn/caret` | [docs](https://remocn.dev/docs/typography/typewriter.md) | 
 | `typo-fix` | A quick-edit demo showing how easy a copy fix is. | Whole phrases should be selected and rewritten — use `select-replace`. | 80f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/typo-fix.md) | 
 | `uncomment-line` | A developer-product beat where three promises should read like code being switched on. | The audience is not technical and comment syntax would be noise — use `what-sticks`. | 74f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/uncomment-line.md) | 
 | `unmask-line` | A tech or developer-tool announcement where a monospace line is unmasked letter by letter. | You want a classic typing cursor — use `typewriter`. | 77f | tech | remocn | — | [docs](https://remocn.dev/docs/typography/unmask-line.md) | 
 | `value-swap` | A value changes at a specific story beat — before/after price, status promotion, a hex/token flip. | Values should cycle continuously as a montage — use `rolodex-flip` with its own rhythm instead. | 100f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/value-swap.md) | 
 | `verbed` | A brand-voice beat where the product name has become a verb among users. | You want a short punchy name reveal with no explanation — use `we-call-it`. | 174f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/verbed.md) | 
 | `wake-wipe` | A three-line pitch where each line is wiped away by a trailing wake and the last carries an accent word. | You want lines to slide apart like doors — use `slide-doors`. | 155f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/wake-wipe.md) | 
 | `walkout-name` | A launch-day intro beat that announces a founder or product by name with a nickname and a headline stat. | The name should arrive quietly with a polished, understated feel — use `name-gloss`. | 78f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/walkout-name.md) | 
 | `waveform-title` | A product beat about voice, audio or captions where a waveform line sits under the title. | You want a pulse running through the text itself — use `pulse-line`. | 114f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/waveform-title.md) | 
 | `we-call-it` | A category-naming beat where several loose descriptions resolve into one name. | You need the name defined like a dictionary entry — use `verbed`. | 164f | paper | remocn | — | [docs](https://remocn.dev/docs/typography/we-call-it.md) | 
 | `week-shipped` | A weekly changelog video that recaps what shipped each day. | Each item needs a longer description or screenshot — use `changelog-scroll`. | 116f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/week-shipped.md) | 
 | `weight-wave` | A tagline about motion or flexibility where the type itself should feel alive. | You need the headline to enter from off-screen or by letter — use `per-character-rise`. | 132f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/weight-wave.md) | 
 | `what-sticks` | A message-discipline beat that shows only one claim survives the viewer's memory. | You want a summary on top of the full copy — use `tldr-on-top`. | 170f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/what-sticks.md) | 
 | `which-means` | A feature beat that turns one capability into a chain of benefits. | You only need a short before-and-after contrast — use `less-more`. | 143f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/which-means.md) | 
 | `whole-page` | A mission or values beat for a long-form brand film. | You only need a short summary above the details — use `tldr-on-top`. | 344f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/whole-page.md) | 
 | `width-lock` | A claim with one slot that cycles through deliverables, such as trailer, captions, launch video. | The swapped word should be pressed with annotations — use `ruby-press`. | 143f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/width-lock.md) | 
 | `word-acts` | A feature-list beat where each word demonstrates itself, such as stretching, splitting, heavy or fast. | Every word should share one consistent motion style — use `kinetic-morph-text`. | 139f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/word-acts.md) | 
 | `word-gap-media` | A beat where media tiles slot into a gap inside a sentence, such as showing the screens behind the claim. | You only need a headline with no imagery — use `staggered-fade-up`. | 142f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/word-gap-media.md) | 
 | `word-insert` | A tagline that grows from a plain noun into a full promise. | Words should be replaced, not added — use `select-replace`. | 116f | clean | remocn | — | [docs](https://remocn.dev/docs/typography/word-insert.md) | 
 | `word-ladder` | A transformation beat such as idea to ship in a few steps. | The letters should be rearranged into one new word — use `anagram-shuffle`. | 154f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/word-ladder.md) | 
 | `word-pullback` | An opener that starts on one huge word and pulls the camera back to reveal the full sentence. | You want media inside the sentence — use `word-gap-media`. | 96f | premium | remocn | `@remocn/gsh` | [docs](https://remocn.dev/docs/typography/word-pullback.md) | 
 | `word-push` | A single tagline or closing phrase should build word by word with physical, push-driven motion instead of plain fades. | Several phrases must play in sequence with cuts between them — use `word-stream` for the multi-phrase flow. | 42f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/word-push.md) | 
 | `word-stack` | A manifesto or tagline beat of five to seven short words that builds one word at a time into a poster. | The words should appear in place, one at a time, without a scrolling stack — use `zoom-words`. | 99f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/word-stack.md) | 
 | `word-stream` | An intro or narration follows a voiceover and each phrase should build word by word at speaking pace. | There is only one static phrase to reveal — use `per-word-crossfade` for a single calm word-by-word entrance. | 63f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/word-stream.md) | 
 | `wrapped-squash` | A recap beat of two or three short caps lines, such as a year-in-review or shipped-this-quarter summary. | You have more than three lines or longer phrases — use `word-stack`. | 93f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/wrapped-squash.md) | 
 | `yes-run` | An objections-handling beat that says yes to a run of product questions. | Each answer is different and longer — use `which-means`. | 130f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/yes-run.md) | 
 | `your-name-here` | A template-style beat that tells the viewer to drop in their own product name. | The change is a whole headline, not a name slot — use `layout-swap`. | 146f | playful | remocn | — | [docs](https://remocn.dev/docs/typography/your-name-here.md) | 
 | `zoom-words` | An intro should open uncomfortably close: huge words appearing one by one while the camera tracks the growing line off-frame. | The whole phrase must fit the frame at rest — use `per-word-crossfade` or `word-stream`. | 63f | premium | remocn | — | [docs](https://remocn.dev/docs/typography/zoom-words.md) | 

## Filters

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `ascii-render` | A scene should arrive out of text — interpolate intensity from 1 to 0 and the UI resolves out of ASCII instead of just fading in. | The ASCII should only cover the cut between two scenes — use `ascii-dissolve`. | sustained | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/ascii-render.md) | 
 | `camera-lens` | A screencast looks sterile and you want it to read as filmed — this is the cheapest way to stop a recording looking like a render. | The story is a tube being watched — use `crt-screen`, which is uniformly sharp behind a phosphor mask and scanlines. | sustained | premium | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/camera-lens.md) | 
 | `crt-screen` | A scene should read as something displayed on a tube rather than rendered flat — retro terminals, arcade beats, an old dashboard being demoed. | The story is worn tape rather than a monitor — use `vhs-filter`, which degrades the signal instead of the display. | sustained | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/crt-screen.md) | 
 | `halftone-print` | A scene should read as something printed rather than displayed — zine-flavoured intros, riso posters, editorial title cards. | Only one element should feel papery while the rest of the scene stays clean — use `paper-sticker` or `paper-wobble`. | sustained | paper | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/halftone-print.md) | 
 | `hologram` | A feature should present as a projection rather than as a screen — a sci-fi flavoured reveal, a 'here is what is coming' beat. | The story is a physical display being watched rather than light standing in the air — use `crt-screen`. | sustained | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/hologram.md) | 
 | `pixelate-region` | A product demo shows real data — API keys, tokens, email addresses, account numbers — that must not leave the building. | The whole frame wants a treatment rather than a covered rectangle — `vhs-filter` and `crt-screen` work edge to edge. | sustained | clean | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/pixelate-region.md) | 
 | `security-cam` | A beat should play as surveillance footage — a cold open, a 'meanwhile, in production' aside, anything that wants to read as captured rather than presented. | The story is the glass a shot was taken through rather than the recorder it was written to — use `camera-lens`. | sustained | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/security-cam.md) | 
 | `sustained-glitch` | A tech or developer-facing scene should feel unstable for its whole run without the corruption ever settling into a constant texture. | The tearing should happen only at the cut between two scenes — use `glitch-cut`. | sustained | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/sustained-glitch.md) | 
 | `underwater-ripple` | A scene should sit under water for its whole run — calm premium backdrops, ambient hero loops, a title card that needs motion without a direction. | The water should be its own layer rather than something the scene is seen through — use `shader-caustics` behind a crisp scene. | sustained | premium | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/underwater-ripple.md) | 
 | `vhs-filter` | A scene should read as recovered tape footage rather than a clean render — retro product spots, 'here is what we shipped in 2003' beats, lo-fi title cards. | The artifact should live only at the cut between two scenes — use `glitch-cut`. | sustained | tech | remocn | `@remocn/canvas-presentation` | [docs](https://remocn.dev/docs/filters/components/vhs-filter.md) | 

## Captions

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `caption-active-pop` | A talking head or voiceover needs the everyday short-form caption look — the full phrase on screen with the spoken word lifting out of it. | One word should own the whole frame at a time — use `caption-word-pop`. | transcript-driven | social | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-active-pop.md) | 
 | `caption-blur-in` | Calm narration, a product film or a launch video where the captions should feel considered rather than loud — words come into focus instead of jumping in. | The video is short-form and high-energy — use `caption-bounce-in`, which gives each word a springy hop. | transcript-driven | premium | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-blur-in.md) | 
 | `caption-bounce-in` | Short-form video with an energetic voice — each word lands with a small hop, so the captions feel as lively as the delivery. | The tone is calm or premium and a bounce would feel cheap — use `caption-blur-in`, which resolves each word out of focus instead. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-bounce-in.md) | 
 | `caption-cube` | Punchy social or explainer video where each phrase change should feel like a physical beat — the caption turns over with the speaker instead of swapping. | The phrase change should be a flat roll with no depth — use `caption-slot`. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-cube.md) | 
 | `caption-dim-progress` | Captions have to be read rather than watched — tutorials, explainers, accessibility-first edits where nothing should move. | You want the position of the voice to feel physical, filling through each word at speaking pace — use `caption-karaoke`. | transcript-driven | clean | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-dim-progress.md) | 
 | `caption-drop` | Short-form or playful video where the captions should have weight — words land with a bounce and a slight tilt that settles, like they were dropped onto the line. | You want words to pop up from below with a small hop rather than fall from above — use `caption-bounce-in`. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-drop.md) | 
 | `caption-emoji` | Short-form social video where a few words deserve a visual punchline — an emoji lands on the beat the word is said. | The video is a calm explainer or a product walkthrough — use `caption-subtitle`, which keeps attention on the words. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-emoji.md) | 
 | `caption-handwrite` | A personal, journal-like video — vlog, founder story, voice memo — where the captions should feel written by the speaker rather than typeset. | There is no voiceover and the handwritten line is scripted on-screen copy — use `handwrite`. | transcript-driven | paper | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-handwrite.md) | 
 | `caption-highlight-box` | Short-form video where the caption has to be read at a glance — a solid block behind the spoken word is the loudest way to say where the voice is. | You want the voice's progress inside each word rather than a jump from word to word — use `caption-karaoke`. | transcript-driven | social | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-highlight-box.md) | 
 | `caption-karaoke` | A voiceover or talking head needs captions and the viewer should be able to read ahead — the full phrase is on screen, the fill only shows where the voice is. | There is no voiceover and the text is scripted — use `word-stream`, which paces phrases with its own timing. | transcript-driven | social | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-karaoke.md) | 
 | `caption-knockout` | The footage is worth seeing and you want the caption to frame it rather than cover it — the letters are windows onto whatever plays behind them. | The footage behind is flat or the same tone as the plate — the holes vanish; use `caption-subtitle`, whose plate carries solid text. | transcript-driven | premium | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-knockout.md) | 
 | `caption-label-maker` | A handmade, analog or DIY video wants captions with a physical object behind them — the tape is the legibility, so it reads over any footage. | You want typed characters with a caret and no surface behind them — use `caption-typewriter`. | transcript-driven | paper | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-label-maker.md) | 
 | `caption-marker` | Talking-head or explainer video where a few words carry the point — the marker lands on exactly those words, in time with the voice, and leaves the rest calm. | Every word should be marked as it is spoken, not just the keywords — use `caption-highlight-box`, whose box travels across the whole phrase. | transcript-driven | paper | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-marker.md) | 
 | `caption-outline` | Captions sit over busy, bright or fast-cut footage — the thick outline keeps every word readable without a plate or a shadow. | The spoken word should also spring in scale — use `caption-active-pop`, the motion counterpart of this style. | transcript-driven | social | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-outline.md) | 
 | `caption-prosody` | The way something is said matters as much as what is said — a slow, stretched word reads as emphasis and a quick aside shrinks, so the captions carry the speaker's rhythm without audio. | You want to choose which word is emphasised yourself — use `caption-stack`, which enlarges the keywords you pass. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-prosody.md) | 
 | `caption-redact` | Investigative, true-crime or reveal-style storytelling where the line should feel withheld until the speaker says it out loud. | The phrase should be readable before the voice reaches it — use `caption-dim-progress`, which shows every word dimmed instead of hidden. | transcript-driven | tech | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-redact.md) | 
 | `caption-rise` | Editorial video, interviews or a brand film where the captions should feel typeset — words rise into a fixed line with a confident ease-out and nothing extra. | The video is playful short-form and wants energy — use `caption-bounce-in`. | transcript-driven | clean | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-rise.md) | 
 | `caption-scramble` | The video is about software, security, AI or data and the captions should feel like a terminal decoding the voice as it speaks. | The tone is calm or editorial and the glyph noise would read as a glitch — use `caption-rise` or `caption-blur-in`. | transcript-driven | tech | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-scramble.md) | 
 | `caption-slice` | Tech, product or launch video where the captions should feel engineered — every word assembles itself on cue instead of fading in. | The arrival should be soft and quiet — use `caption-blur-in`. | transcript-driven | tech | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-slice.md) | 
 | `caption-slot` | Fast talking-head or social video where the caption should keep moving with the speaker without words animating individually. | The viewer should see which word is being spoken — use `caption-karaoke` or `caption-active-pop`. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-slot.md) | 
 | `caption-speaker` | An interview, podcast clip or two-person demo where the viewer has to know who is talking without seeing their mouth. | Only one person speaks — use `caption-karaoke`, which spends the colour on the voice's progress instead. | transcript-driven | social | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-speaker.md) | 
 | `caption-split-flap` | A launch, travel or tech video wants a mechanical, announcement-board feel — each word arrives as tiles flipping into place on cue. | You want letters to decode in place without tiles or a board look — use `caption-scramble`. | transcript-driven | tech | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-split-flap.md) | 
 | `caption-stack` | Short-form video where the captions are part of the design — each page reads as a small typographic poster, and the word that matters is the biggest thing on it. | The voice should be followed one word at a time in the middle of the frame — use `caption-word-pop`. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-stack.md) | 
 | `caption-stamp` | A punchy explainer or reaction video where one word per phrase should land with impact — the stamp hits on exactly that word, in time with the voice. | The emphasis should feel drawn rather than struck — use `caption-marker`, which swipes a highlighter behind the keyword. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-stamp.md) | 
 | `caption-subtitle` | Explainers, interviews and talking heads where the captions should be read, not watched — the accessibility-first option. | Short-form social video that needs the caption to carry energy — use `caption-karaoke` or `caption-active-pop`. | transcript-driven | clean | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-subtitle.md) | 
 | `caption-teleprompter` | The speech is long and continuous — an explainer, a talk, a narrated walkthrough — and the viewer benefits from seeing the line before and the line after. | You want one phrase at a time that replaces the last — use `caption-subtitle` for broadcast-style pages or `caption-slot` for a one-line roll. | transcript-driven | clean | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-teleprompter.md) | 
 | `caption-timeline` | The video is about audio, editing or timing — a podcast clip, a voice tool, a recording workflow — and the captions should look like a track being played back. | The captions need to be read comfortably for a long time — a moving strip is harder to follow; use `caption-subtitle` or `caption-teleprompter`. | transcript-driven | tech | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-timeline.md) | 
 | `caption-typewriter` | A voiceover walks through a terminal, an editor or a technical product, and the captions should feel typed rather than printed. | The text is scripted on-screen copy with no recording behind it — use `typewriter`, which types on its own clock. | transcript-driven | tech | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-typewriter.md) | 
 | `caption-underline` | You want to show where the voice is with the lightest possible mark — the words keep their colour and only a thin bar moves beneath them. | You want the active word itself to be loud, on a solid plate that travels with the voice — use `caption-highlight-box`. | transcript-driven | clean | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-underline.md) | 
 | `caption-weight` | You want captions that follow the voice with typography alone — no colour change, no box, just the active word gaining weight. | You need emphasis that reads at a glance on small vertical screens — use `caption-active-pop`, which adds colour and scale. | transcript-driven | premium | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-weight.md) | 
 | `caption-word-pop` | Punchy short-form talking heads where every word should hit — one word fills the centre of the frame and the next replaces it on the beat. | The viewer needs to read ahead of the voice — use `caption-karaoke`, which keeps the whole phrase on screen. | transcript-driven | playful | remocn | `@remocn/caption-core` | [docs](https://remocn.dev/docs/captions/components/caption-word-pop.md) | 

## Shaders

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `shader-caustics` | Water, light, or premium ambient backdrops where refracted-light filaments fit the mood. | You want structured cellular noise — use `shader-voronoi`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-caustics.md) | 
 | `shader-color-panels` | You want an architectural, glassy backdrop of translucent panes sliding past each other. | You want organic, flowing motion — use `shader-warp` or `shader-metaballs`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-color-panels.md) | 
 | `shader-dithering` | You want a retro/print, 1-bit ordered-dither texture over a moving gradient. | You want a centered dithered sphere — override `shape` (this wrapper defaults to full-bleed `"wave"`). | 150f | tech | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-dithering.md) | 
 | `shader-dot-orbit` | You want a structured dot-grid backdrop with gentle orbital motion. | You want a static dot grid — the static `dot-grid` shader is intentionally not shipped; use a CSS grid. | 150f | tech | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-dot-orbit.md) | 
 | `shader-gem-smoke` | Brand or logo reveals that want smoke living inside and around a mark. | You have no logo or mark to feed as `image` — use `shader-smoke-ring` or `shader-neuro-noise` for a shapeless field instead. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-gem-smoke.md) | 
 | `shader-god-rays` | A hero or reveal scene wants cinematic volumetric light rays from a corner source. | The brief bans decorative glow — this is a genuine volumetric shader, but keep `bloom`/`intensity` restrained so it does not read as an AI-slop glow. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-god-rays.md) | 
 | `shader-grain-gradient` | A gradient backdrop needs analog texture — the grain reads as film/print rather than flat digital. | You need crisp, clean color with no texture — use `shader-mesh-gradient`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient.md) | 
 | `shader-grain-gradient-arcade` | A retro, game-like intro with bold color dots. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | playful | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/arcade.md) | 
 | `shader-grain-gradient-blush` | A soft, friendly scene for consumer or creator products. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | playful | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/blush.md) | 
 | `shader-grain-gradient-dune` | An earthy, analog scene with heavy sand-like grain. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | paper | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/dune.md) | 
 | `shader-grain-gradient-horizon` | A wide landscape mood with a warm band across the middle of the frame. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/horizon.md) | 
 | `shader-grain-gradient-nebula` | A cosmic, mysterious intro for AI or space-themed products. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | tech | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/nebula.md) | 
 | `shader-grain-gradient-orb` | A single glowing object behind a centered title or logo. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/orb.md) | 
 | `shader-grain-gradient-sunrise` | A rising, hopeful moment such as a launch day or a new chapter. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/sunrise.md) | 
 | `shader-grain-gradient-tide` | A pulsing, sonar-like ring behind a centered stat or logo. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | tech | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/tide.md) | 
 | `shader-grain-gradient-ultraviolet` | A loud, electric hero for a bold launch or a music-style edit. | The video must use your brand colors — start from `shader-grain-gradient` and set `colors`. | 150f | tech | remocn | `@remocn/shader-grain-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-grain-gradient/ultraviolet.md) | 
 | `shader-light-tunnel` | A title reveal or product intro needs a luminous forward flight through a tunnel. | A quiet background should leave attention on dense UI — use `shader-mesh-gradient`. | 90f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-light-tunnel.md) | 
 | `shader-liquid-metal` | A premium, industrial, or luxury scene wants a brushed/molten metal surface. | You want a centered metallic emblem — override `shape` back to a paper shape (this wrapper defaults to full-bleed `"none"`). | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-liquid-metal.md) | 
 | `shader-mesh-gradient` | You need a quality, production-grade gradient backdrop. | You want a structured, geometric background — use `shader-dot-orbit` or `shader-voronoi`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient.md) | 
 | `shader-mesh-gradient-aurora` | A night-sky backdrop for AI, data or developer-tool launches. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | tech | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/aurora.md) | 
 | `shader-mesh-gradient-dusk` | An evening, end-of-day mood behind a launch title or a closing card. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/dusk.md) | 
 | `shader-mesh-gradient-ember` | A bold, warm hero for an announcement that should feel energetic. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/ember.md) | 
 | `shader-mesh-gradient-ink` | A monochrome, editorial backdrop that lets a colored product shot lead. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | clean | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/ink.md) | 
 | `shader-mesh-gradient-lagoon` | A fresh, bright product intro that should feel calm and open. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | clean | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/lagoon.md) | 
 | `shader-mesh-gradient-lavender` | A gentle, dreamy title card that should stay quiet behind copy. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/lavender.md) | 
 | `shader-mesh-gradient-mint` | A fresh health, finance or productivity intro on a light palette. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | clean | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/mint.md) | 
 | `shader-mesh-gradient-peach` | A warm, friendly lifestyle or wellness scene with soft film texture. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | premium | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/peach.md) | 
 | `shader-mesh-gradient-synthwave` | A dark, retro-futuristic scene with a warm glow at one edge. | The video must use your brand colors — start from `shader-mesh-gradient` and set `colors`. | 150f | tech | remocn | `@remocn/shader-mesh-gradient` | [docs](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/synthwave.md) | 
 | `shader-metaballs` | A playful or organic scene wants lava-lamp blobs merging and splitting. | The brand is strictly serious/corporate — metaballs read playful. | 150f | playful | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-metaballs.md) | 
 | `shader-neuro-noise` | An AI / ML / tech scene wants an organic neural-web texture that reads as "intelligence". | You want smooth cloud noise instead of web filaments — use `shader-perlin-noise` or `shader-simplex-noise`. | 150f | tech | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-neuro-noise.md) | 
 | `shader-perlin-noise` | You want a soft, cloudy, organic backdrop that drifts slowly and stays calm. | You want a smoother, more flowing field — use `shader-simplex-noise`. | 150f | clean | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-perlin-noise.md) | 
 | `shader-pulsing-border` | You want a pulsing lit frame around the scene edges to contain foreground content. | The brief bans decorative glow — keep `bloom`/`intensity` restrained so the border does not read as AI-slop neon. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-pulsing-border.md) | 
 | `shader-simplex-noise` | You want the smoothest of the noise backdrops — fewer directional artifacts than Perlin. | You want cloudier, softer fog — use `shader-perlin-noise`. | 150f | clean | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-simplex-noise.md) | 
 | `shader-smoke-ring` | You want a single soft, centered smoke ring as a focal atmospheric element. | You need a full-bleed edge-to-edge texture — this is a centered object; use a noise or gradient shader. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-smoke-ring.md) | 
 | `shader-spiral` | You want a hypnotic, rotating radial background with visible arm structure. | You want closed concentric rings rather than open arms — use `shader-swirl`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-spiral.md) | 
 | `shader-strata` | Calm, grounded, geological ambient backdrops — foundations, stability, "built on" narratives. | You want motion with a clear direction or flow — use `shader-warp`. | 150f | clean | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-strata.md) | 
 | `shader-swirl` | You want a hypnotic, radial background with clear banded structure around a center. | You want free-flowing liquid folds rather than concentric bands — use `shader-warp`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-swirl.md) | 
 | `shader-swirl-candy` | A sweet, pastel opener for a playful consumer product. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | playful | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/candy.md) | 
 | `shader-swirl-citrus` | A juicy, upbeat opener with bold summer colors. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | playful | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/citrus.md) | 
 | `shader-swirl-ember` | A fiery vortex for an intense, energetic beat. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | premium | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/ember.md) | 
 | `shader-swirl-hypno` | A high-contrast, hypnotic beat that pulls the eye to the center. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | playful | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/hypno.md) | 
 | `shader-swirl-lilac` | A dreamy, soft swirl that stays out of the way of copy. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | premium | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/lilac.md) | 
 | `shader-swirl-neon` | A neon vortex behind a centered logo reveal. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | tech | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/neon.md) | 
 | `shader-swirl-retro` | A seventies-style spiral for a vintage or nostalgic edit. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | playful | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/retro.md) | 
 | `shader-swirl-sunburst` | A retro, sunny burst sweeping in behind a title. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | playful | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/sunburst.md) | 
 | `shader-swirl-tide` | A calm, silky whirlpool that feels deep rather than loud. | The video must use your brand colors — start from `shader-swirl` and set `colors`. | 150f | premium | remocn | `@remocn/shader-swirl` | [docs](https://remocn.dev/docs/shaders/components/shader-swirl/tide.md) | 
 | `shader-voronoi` | You want a cellular, crystalline backdrop that shifts and re-tessellates. | You want soft, structureless fog — use `shader-perlin-noise` or `shader-simplex-noise`. | 150f | tech | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-voronoi.md) | 
 | `shader-warp` | A hero scene wants organic, liquid motion that feels alive but stays out of the way. | Text legibility over the whole frame is critical — raise `softness` and keep `distortion` low, or use a solid `backdrop`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-warp.md) | 
 | `shader-warp-acid` | A loud, attention-grabbing beat or a quick hype cut. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | playful | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/acid.md) | 
 | `shader-warp-cream` | A barely-moving warm backdrop behind dense text or UI. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | clean | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/cream.md) | 
 | `shader-warp-deep-sea` | A rhythmic, banded background with steady directional motion. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | tech | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/deep-sea.md) | 
 | `shader-warp-marble` | An editorial, material-like backdrop in neutral cream and charcoal. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | premium | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/marble.md) | 
 | `shader-warp-ocean` | A glossy, high-contrast fluid scene with crisp dark edges. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | tech | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/ocean.md) | 
 | `shader-warp-rose-gold` | A soft satin backdrop for beauty, fashion or lifestyle products. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | premium | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/rose-gold.md) | 
 | `shader-warp-silk` | A luxurious, soft-motion hero for a premium brand moment. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | premium | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/silk.md) | 
 | `shader-warp-storm` | A dramatic, turbulent intro in deep violet. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | premium | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/storm.md) | 
 | `shader-warp-sunset` | A warm, liquid backdrop that feels alive without hard edges. | The video must use your brand colors — start from `shader-warp` and set `colors`. | 150f | premium | remocn | `@remocn/shader-warp` | [docs](https://remocn.dev/docs/shaders/components/shader-warp/sunset.md) | 
 | `shader-water` | A scene wants a calm, aquatic atmosphere with gentle refracted highlights. | The palette must be warm or vibrant — water reads cool by design; recolor via `colorHighlight`/`colorBack` or choose another shader. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-water.md) | 
 | `shader-weave` | Tactile, crafted, "made-of" textures — fabric, mesh, or substrate metaphors. | You want a smooth gradient field — use `shader-mesh-gradient`. | 150f | premium | remocn | — | [docs](https://remocn.dev/docs/shaders/components/shader-weave.md) | 

## Ui

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `ai-prompt-flow` | Demoing an AI product's whole prompt-to-answer experience in one self-contained scene | You only need a button press with a loading state — use `button` with `state="loading"` | 230f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/input`, `@remocn/button`, `@remocn/skeleton`, `@remocn/skeleton-block`, `@remocn/toast` | [docs](https://remocn.dev/docs/ui/blocks/ai-prompt-flow.md) | 
 | `chat-flow` | A scene needs a messaging conversation that carries your own brand tokens instead of a real platform's chrome. | The video must read as Telegram — use `telegram-chat-flow`, which owns the tailed bubbles, in-bubble timestamps, and double-check marks. | 360f | social | remocn-ui | `@remocn/remocn-ui`, `@remocn/caret`, `@remocn/message-bubble`, `@remocn/typing-indicator` | [docs](https://remocn.dev/docs/ui/blocks/chat-flow.md) | 
 | `checkout-flow` | Demoing a SaaS payment or upgrade UX end-to-end with cursor navigation and toast confirmation. | You only need a payment form without cursor animation — compose `field`, `input`, `button` manually. | state-driven | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/toggle-group`, `@remocn/input`, `@remocn/checkbox`, `@remocn/button`, `@remocn/field`, `@remocn/blur-in`, `@remocn/cursor`, `@remocn/toast` | [docs](https://remocn.dev/docs/ui/blocks/checkout-flow.md) | 
 | `imessage-chat-flow` | The scene must read as iMessage — gray incoming and blue outgoing tailed bubbles with tapback badges at the outer top corner. | The scene must read as Telegram — use `telegram-chat-flow` for in-bubble timestamps, double-check marks, and reaction chips. | 360f | social | remocn-ui | `@remocn/remocn-ui`, `@remocn/caret`, `@remocn/typing-indicator` | [docs](https://remocn.dev/docs/ui/blocks/imessage-chat-flow.md) | 
 | `onboarding-stepper-flow` | Demoing a multi-step onboarding experience — account setup, plan choice, preferences — in one scene | The flow is a payment checkout — use `checkout-flow`, which is cursor-driven with card entry and a toast | 175f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/stepper`, `@remocn/input`, `@remocn/radio`, `@remocn/switch`, `@remocn/button` | [docs](https://remocn.dev/docs/ui/blocks/onboarding-stepper-flow.md) | 
 | `settings-toggle-flow` | Showing a complete settings interaction walkthrough for a product demo — zero assembly required. | You need only one control type — use `switch`, `select`, or `slider` individually instead. | state-driven | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/switch`, `@remocn/select`, `@remocn/slider`, `@remocn/button`, `@remocn/blur-in`, `@remocn/cursor`, `@remocn/toast` | [docs](https://remocn.dev/docs/ui/blocks/settings-toggle-flow.md) | 
 | `signup-flow` | Showing a full onboarding or signup flow in a product launch or demo video. | You need a generic form with custom fields — compose `input` + `button` + `cursor` manually instead. | state-driven | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/cursor`, `@remocn/input`, `@remocn/button`, `@remocn/toast`, `@remocn/field`, `@remocn/blur-in` | [docs](https://remocn.dev/docs/ui/blocks/signup-flow.md) | 
 | `telegram-chat-flow` | The scene must read as Telegram — blue tailed bubbles, in-bubble timestamps, and double-check delivery marks. | The scene must read as iMessage — use `imessage-chat-flow` for gray incoming bubbles, the Delivered label, and tapback badges. | 360f | social | remocn-ui | `@remocn/remocn-ui`, `@remocn/caret` | [docs](https://remocn.dev/docs/ui/blocks/telegram-chat-flow.md) | 
 | `accordion` | Showing a collapsible FAQ or settings section expanding on a timeline cue. | The content is always visible — there is no collapse state; lay it out statically instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/accordion.md) | 
 | `alert-dialog` | Showing a destructive confirmation dialog (delete, reset, revoke) in a product demo. | The action is non-destructive or form-based — use `dialog` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/alert-dialog.md) | 
 | `blur-in` | Revealing an arbitrary JSX subtree (card, image, composed scene) with a premium blur entrance. | You're animating a text-only line — use a purpose-built text reveal (`soft-blur-in`, `staggered-fade-up`) instead of wrapping raw text. | 120f | premium | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/blur-in.md) | 
 | `button` | Showing the full interactive lifecycle of a CTA — hover → press → loading → success — on the timeline. | You need a selectable row inside a menu — use `dropdown-menu-item` or `command-menu-item` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/spinner` | [docs](https://remocn.dev/docs/ui/components/button.md) | 
 | `caret` | Placing a blinking insertion cursor beside a text node or at the end of a typed string. | You need the full input UX (focus ring, border, value reveal) — use `input` instead, which owns its own caret. | 120f | tech | remocn-ui | — | [docs](https://remocn.dev/docs/ui/components/caret.md) | 
 | `checkbox` | Showing a task being checked off in a to-do or onboarding list. | The choice is mutually exclusive within a group — use `radio` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/checkbox.md) | 
 | `combobox` | Showing a searchable/filterable dropdown with a typed query narrowing the list on the timeline. | The list is not filterable and selection is direct — use `select` (non-filterable dropdown) instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/input`, `@remocn/select-item` | [docs](https://remocn.dev/docs/ui/components/combobox.md) | 
 | `command-menu` | Demoing a ⌘K palette opening with a typed query filtering icon-labeled commands. | The list has no icons or keyboard shortcuts and is triggered from a button — use `dropdown-menu` instead. | 120f | tech | remocn-ui | `@remocn/remocn-ui`, `@remocn/command-menu-item` | [docs](https://remocn.dev/docs/ui/components/command-menu.md) | 
 | `context-menu` | Showing a right-click menu appearing at a cursor position over content in a product demo. | The menu is triggered from a button in the UI — use `dropdown-menu` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/dropdown-menu-item` | [docs](https://remocn.dev/docs/ui/components/context-menu.md) | 
 | `cursor` | Guiding the viewer's attention through a UI by animating a pointer between elements. | You need a blinking text insertion cursor — use `caret` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/cursor.md) | 
 | `dialog` | Showing a non-destructive modal (edit form, settings, profile update) opening and closing on the timeline. | The action is irreversible or destructive — use `alert-dialog` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/dialog.md) | 
 | `drawer` | Showing a mobile-style bottom sheet sliding up from the edge of the frame. | The overlay should be a centered modal — use `dialog` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/drawer.md) | 
 | `dropdown-menu` | Showing a button that opens an action list — the classic "Options" or account menu pattern. | The menu is invoked by right-click at a cursor position — use `context-menu` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/button`, `@remocn/dropdown-menu-item` | [docs](https://remocn.dev/docs/ui/components/dropdown-menu.md) | 
 | `field` | Laying out labeled form controls — label, animated control, description hint — with consistent spacing | You need the control itself to animate — `field` is layout only; put `input` or `button` inside it | state-driven | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/field.md) | 
 | `input` | Showing a text field being focused, typed into, or validated at a specific frame. | The trigger needs to open a searchable list — use `combobox` instead (which wraps input internally). | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/caret` | [docs](https://remocn.dev/docs/ui/components/input.md) | 
 | `message-bubble` | You are hand-timing a single message landing on a beat you control, driving `style` from `useMessageBubbleTransition`. | You want a whole scripted conversation with a composer, typing beats, and reactions — use `chat-flow`, which schedules bubbles for you. | state-driven | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/message-bubble.md) | 
 | `popover` | Showing a hover-card with richer content (title + description) than a single-line tooltip label allows. | You only need a single-line label — use `tooltip` instead (lighter, no title/description structure). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/popover.md) | 
 | `progress` | Showing a loading, upload, or completion bar animating to a target value. | The state is binary (done/not done) — use `switch` instead. | 120f | data | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/progress.md) | 
 | `radio` | Demonstrating a single-choice selection moment in a form walkthrough. | The control is binary on/off — use `switch` instead (sliding thumb reads more naturally for toggles). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/radio.md) | 
 | `resizable` | Demonstrating a code/preview split pane layout with its ratio animating across frames. | You need fixed-width layout panels — plain CSS grid or flex avoids the drag-state overhead entirely. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/resizable.md) | 
 | `select` | Demonstrating a dropdown menu opening and an option being highlighted or selected on the timeline. | You only need to show one item row in isolation — use `select-item` directly without the panel overhead. | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/button`, `@remocn/select-item` | [docs](https://remocn.dev/docs/ui/components/select.md) | 
 | `select-menu` | A vertical single-choice menu where one option is highlighted and the highlight should glide smoothly between options as the selection changes. | Options must open a reveal panel — use `select` instead. | 128f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/select-menu.md) | 
 | `sheet` | Showing a slide-in edit panel or settings drawer with backdrop dim in a product demo. | You need a full blocking modal with centered placement — use `alert-dialog` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/sheet.md) | 
 | `skeleton` | Showing a loading state resolving to real content — the skeleton fades out as real UI fades in. | You only need a single shimmer rectangle — use `skeleton-block` directly (no state API, no crossfade overhead). | 120f | clean | remocn-ui | `@remocn/remocn-ui`, `@remocn/skeleton-block` | [docs](https://remocn.dev/docs/ui/components/skeleton.md) | 
 | `skeleton-block` | Building a custom skeleton layout by composing individual shimmer rectangles at precise dimensions | You want shimmer and real content to crossfade automatically — use `skeleton`, which takes a loading/loaded state and children | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/skeleton-block.md) | 
 | `slider` | Demonstrating a range control being dragged to a target value with hover/press thumb states. | You need to show completion percentage with no thumb — use `progress` instead (fill-only, no interaction states). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/slider.md) | 
 | `spinner` | Showing a loading indicator inside a button after a click (hover → press → loading state). | You need a full-width loading bar with a track — use `progress` instead. | 120f | clean | remocn-ui | — | [docs](https://remocn.dev/docs/ui/components/spinner.md) | 
 | `stepper` | Showing a multi-step onboarding, checkout, or wizard flow advancing through numbered steps. | Steps have no sequential order — use `tabs` instead (tab switching without numbered connectors). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/stepper.md) | 
 | `switch` | Showing a toggle being flipped in a settings panel walkthrough. | The choice is one of multiple mutually exclusive options — use `radio` or `select` instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/switch.md) | 
 | `tabs` | Showing a tabbed UI switching between content panels in a product demo. | Steps are sequential and ordered — use `stepper` instead (numbered connectors + check marks). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/tabs.md) | 
 | `toast` | Showing a success/error notification appear after an action (form submit, save, API call). | The feedback is persistent and must not auto-dismiss — use a banner or inline alert component instead. | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/toast.md) | 
 | `toggle-group` | Showing a segmented control switching between view modes, time ranges, or mutually exclusive options. | You need content panels that crossfade below the control — use `tabs` instead (full panel area + indicator). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/toggle-group.md) | 
 | `tooltip` | Showing a hover tooltip appearing next to a UI element in a product walkthrough. | You need title + description in the overlay — use `popover` instead (richer two-field content with optional children). | 120f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/tooltip.md) | 
 | `typing-indicator` | Signalling that a reply or an answer is being composed — drop it inside a `message-bubble` or any container. | The wait is an async operation rather than a conversation — use `spinner`, or `skeleton` when the placeholder resolves to content. | 90f | clean | remocn-ui | `@remocn/remocn-ui` | [docs](https://remocn.dev/docs/ui/components/typing-indicator.md) |