# 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.
`Vibe` is the tonal tag; match it to the brand rather than mixing freely.

## Ai

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 

## 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) | 

## Social

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `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) | 
 | `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 wordmark lockup — this is a multi-chip cluster, not one mark; build a lightweight lockup 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) | 
 | `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) | 

## Ui Blocks

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `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) | 
 | `check-list` | A list of features, steps, or done-items should be read in full and then crossed off in a hand-made scene. | You need a live progress indicator or a stepper with state — use `progress-steps`. | 123f | paper | remocn | `@remocn/stop-motion`, `@remocn/handwrite` | [docs](https://remocn.dev/docs/ui-blocks/check-list.md) | 
 | `data-flow-pipes` | Visualizing a microservices or event-driven architecture where data moves between labeled services. | The workflow is sequential with discrete pass/fail steps — use `progress-steps` instead, which shows status clearly. | 180f | tech | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/data-flow-pipes.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) | 
 | `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) | 
 | `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) | 
 | `progress-steps` | Showing a CI/CD pipeline, onboarding checklist, or multi-phase workflow completing step by step. | The data is quantitative and you need to show magnitudes — use `animated-bar-chart` or `animated-line-chart` instead. | 150f | data | remocn | — | [docs](https://remocn.dev/docs/ui-blocks/progress-steps.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) | 
 | `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) | 

## 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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 

## Typography

| Component | Use for | Avoid for | Length | Vibe | Tier | Deps | Docs |
|---|---|---|---|---|---|---|---|
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 
 | `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) | 

## 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-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-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-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-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) | 
 | `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) |