Text Select

Installation

$ pnpm dlx shadcn@latest add @snapcn/text-select

Component code

The exact file shadcn add copies into your project.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { TextSelect } from "@/components/snap-cn/text-select";

const Claim = () => <TextSelect headline="One command into your project." />;

export const RemotionRoot = () => (
  <Composition
    id="TextSelect"
    component={Claim}
    durationInFrames={72}
    fps={30}
    width={1280}
    height={720}
  />
);

Any line, any length — the stagger, the push and the drag all follow from it:

<TextSelect
  headline="Copy the command. Paste it. Ship the video."
  accentColor="#7c3aed"
  cutAt={1.6}
  selectAt={1.9}
/>

The newest word is the accent

Every word arrives in the accent colour, holds it for exactly one beat — 208ms, the same as the stagger — and cools to the foreground over the next. So there is always exactly one coloured word on the line, and it walks left to right ahead of the reader. Measured on the reference: the first word is still fully blue when the second lands, and fully dark by the time the third does.

The last word has no next word to hand off to. On the reference it cools as the selection is dragged over it, in half the time the drag takes, so by the time the line is selected it is all one colour. That is the rule here too.

The line comes forward, smoothly

The reference gets to 2.39× between two adjacent frames — the ink is 215px wide on one and 516px on the next, with the single dropped frame between them the only place an in-between could have hidden. Set zoomDuration={0} and you get exactly that.

It is not the default, because at 30fps a step does not read as coming forward; it reads as an edit. The default is a 420ms ramp on cubic-bezier(0.2, 0.6, 0.35, 1), and three things make it a move rather than a shimmer:

• The scale is pivoted on the baseline, and the baseline is measured — a zero-sized inline-block sitting on it, read back through delayRender. The rasteriser gives glyph origins no vertical sub-pixel precision at all, so any pivot that moves the baseline makes the type climb the pixel grid in whole-pixel jumps: sit still, jump, sit still.
• text-rendering: geometricPrecision, because hinting bends each glyph so its stems land on whole pixels — and as the size slides, every stem re-snaps and the letterforms boil.
• will-change only while the push is running, and only in the Player. In a render it hands the scale to the compositor, which resamples a bitmap instead of re-rasterising real type.

Measured on the rendered frames: the ink width moves 91, 76, 61, 45, 34, 24, 19, 14, 11, 9, 5, 8 px per frame and then stops. One frame under a pixel, which is a settle. No direction reversals.

The selection is a drag, and it shines

It is 31% of the way across on its first frame and spends the back half of its time covering the last 5% — easeOutQuint over 260ms. The right edge is a hard vertical line with no rounding, because that is what a caret dragging through text leaves behind.

The fill is a gradient, not a flat wash, and that is measurable: read the reference's selection column by column, taking a value per column that no glyph can reach, and it runs 211 → 178 at 0.33 → 222 at 0.59 → 190. A 2.8× swing in strength between its deepest point and its bright band. selectionSheen is that curve, twelve stops of [position, multiple of selectionOpacity].

The band is anchored to the box, not to the page: across the drag it sits at 0.58 of whatever width the box has reached that frame (0.584, 0.571, 0.580, 0.603, 0.585, 0.576, 0.589 …). A CSS gradient painted on a growing element does that for free — and it is why the shine appears to travel while the selection is being pulled across.

…and then a glint crosses it

The sheen above stops the instant the drag lands, and a highlight that stops moving stops shining. So a second, narrow band is swept across the finished box on its own clock — linearly, because a specular is a light source passing a surface, not something that settles. At the defaults it covers 78px a frame from its first frame to its last, so there is no frame of it you cannot see.

It is not just a light band, and this is the part worth knowing before you build one yourself. White over a light page has almost no room to work in: measured on the render, white at 0.34 over a fill sitting at R 230 lifts it eight levels — quieter than the static gradient it was supposed to be shining on. Going brighter does not fix it; there is only 25 levels of headroom above the fill in the first place.

So the glint is shaped like a real specular on a coloured gel — a bright core with deepened shoulders either side, painted in the selection's own colour, where the light compresses the film. There is plenty of room downward. Measured on the rendered frames, isolated by differencing against a frame with the band off the edge:

A 40-to-60 level band, moving. shineOpacity={0} turns it off and leaves you the reference's plain sheen.

Every one of those is a prop.

The line arrives from the right — all of it

This is the measurement that took longest to see. When the second word lands, the first one moves — but so does the second, by the same ten pixels. A line that had merely grown a word would not do that: the old word would shift left by half the new word's width and the new word would not shift at all.

So it is not the layout re-centring and it is not the new word widening into place. The entire line arrives half an em to the right on every word and settles back, which reads as the line being nudged along rather than stretched. lineShift is that, and it re-triggers on each word rather than only the first.

It fits any line

The selection is sized off a hidden copy of the line's offsetWidth, measured once behind delayRender(). Not measureText — a canvas ruler knows nothing about CSS tracking or word-spacing, and a box drawn to a width the line does not actually have is a visible five percent out. The words are laid out in normal flow rather than flex for a related reason: a flex container drops whitespace-only text nodes, so the spaces between words vanish and the line renders narrower than it measures.

Colour and wording

The proportions and the timing are measured. The colours and the wording are not — the reference is a specific product with a specific blue, and neither belongs in a component that ships to strangers. The paint is the shadcn token set, the accent and the selection both come from theme.primary unless you say otherwise, and the line is a prop.

Props