Status Cycle

Installation

$ pnpm dlx shadcn@latest add @snapcn/status-cycle

Component code

The exact file shadcn add copies into your project.

Usage

A prefix, a list of statuses and a list of chips. Everything else has a measured default.

// src/Root.tsx
import { Composition } from "remotion";
import { StatusCycle } from "@/components/snap-cn/status-cycle";

const Cycle = () => (
  <StatusCycle
    prefix="snapcn is"
    statuses={["animating", "transitioning", "rendering a scene", "installed"]}
    chips={["text-reveal", "phone-frame", "answer-stream", "word-flip"]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="StatusCycle"
    component={Cycle}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

durationInFrames has to cover the whole arc: the intro, one statusHold per status, the crossfade, and one chipStagger per chip. The default 150 fits the default content with a hold at the end; add roughly 18 frames per extra status and 8 per extra chip.

How the swap works

Three things happen on the same frame, and keeping them on the same frame is most of the effect.

The label rolls. The outgoing label translates up and out through the pill's top edge while the incoming one arrives from below, both hard-clipped by the pill's rounded box. There is no crossfade — the label's ink never dims — and the travel is one pill height.

The pill's width springs past its target. Not a spring, though: the curve is cubic-bezier(0.65, 0.2, 0.3, 1.5), and the y2 > 1 control value is the overshoot. A real spring cannot make this shape. One frame into an eleven-frame rise a spring released from rest is already 4.1% of the way there; the reference is at 0.65%, six times flatter, and no damping/stiffness pair fixes that without losing the early peak.

The line re-centres. The lockup is centred as a whole, so a widening pill pushes the prefix left and a narrowing one lets it back. The prefix does not re-animate; it only moves.

The label is laid out at its full final width and centred, and the widening pill reveals it from the middle outward — so during a morph you see the middle of the new label with both ends clipped. That is why the width is its own animated quantity and is never derived from a padded text box.

Content of any length

Every width in the scene is measured at runtime behind delayRender() — the prefix's glyph advances, each status label, each chip — so a longer status or a longer chip simply makes a wider box. Nothing is tuned to one sentence. Every other proportion is a fraction of the composition rather than a pixel, so the scene holds its shape at 720p, 1080p or a vertical crop.

Colour

Leave the colour props off and the scene paints from the design system: primary for the first field, background for the second, foreground for the pill and the ink, and a pale tint of the field for the pill's label. Pass any of them to override.

<StatusCycle
  fieldColor="#0f766e"
  pageColor="#f5f5f4"
  chipFills={["#ffffff", "#e7f5f3", "#0f766e"]}
/>

Overriding the motion

Every curve and duration is a measured default on the exported STATUS_CYCLE_MOTION, and motion is merged over it — so you override one without restating the rest.

import { Easing } from "remotion";

<StatusCycle
  motion={{
    // Flatten the overshoot out of the width morph.
    widthEase: Easing.bezier(0.4, 0, 0.2, 1),
    // And give the chips a slower step.
    scrollTau: 0.12,
  }}
/>

Props