Text Rewrite

Installation

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

Component code

The exact file shadcn add copies into your project.

Usage

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

const Claim = () => (
  <TextRewrite headline="Or just add snapcn" keep={1} append="registry" />
);

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

The whole gesture is three props. keep counts words off the end — everything before them is what gets swept away:

<TextRewrite
  headline="Ship it by hand or ship it with snapcn"
  keep={1}
  append="in an afternoon"
  accentColor="#7c3aed"
/>

The erase is a clip, not a deletion

This is the measurement everything else follows from. As the opening of the line is taken away, letters are cut in half by a vertical edge — "Or" becomes ")r" becomes "r" — and the words that survive never move a pixel. A word-by-word delete would have re-laid the line out on every step, and across 183 frames the recording plainly does not.

So there is no deletion here at all. There is a window with overflow: hidden whose left edge sweeps right over text that is standing still.

The rewrite is that same edge, run the other way

The window's right edge then sweeps right, revealing the new ending a fraction of a letter at a time, while the line slides to where its new content belongs.

Those are two independent measurements — the clip edge, and the line's centre — and they land on one shared progress to within 0.001 of the travel. Fitted separately:

Two different signals, two different halves of the gesture, the same curve. It is cubic-bezier(0.42, 0, 0.19, 1), and it is an ease-in-out — which is the whole character of the move. The edge creeps for four frames, crosses the sentence in twelve, and settles for twelve more. An ease-out would have read as a deletion. This reads as something being read, and then taken away.

The mark rides the edge

The trailing mark sits 0.4em clear of the last visible letter, not of the end of the line — through the typing, through the erase, and through the rewrite, where the last visible letter is often only half a letter. Measured, it is a constant 54px from the window's right edge on every frame of the gesture.

That is what keeps the whole thing reading as one object rather than as a line with a decoration next to it. The default is the snapcn mark; markPath takes any path drawn in a 0 0 100 100 box, and markSize={0} leaves the line bare.

The line opens, it does not reflow

When a word lands, both ends of the line move outward by the same amount over the same five frames — +18, +8, +4, +2, +1 px on the right and the mirror of that on the left — while the centre never leaves 404 of 810. The word itself is drawn at full width from its first frame and fades: on the reference it lands whole and pale, overlapping the mark, and the mark slides clear over the next four frames.

So the line's width is tweened around a fixed centre. Nothing is clipped while the line is being written, and nothing jumps.

The size change is a cut

188px of ink on one frame and 453px on the next — 2.41×, with no intermediate frame anywhere in the recording. zoomDuration={0} is that, and it is the default here because it is what the reference does.

Give it a duration and it becomes a smooth push, and the pivot moves with it: a cut has no in-between frame to judder on, so it pivots on the line's optical centre (which is what the reference does — its small line and its full-size line share a centre at y 224 of 458, not a baseline). A ramp does have in-between frames, and there the pivot has to be the measured baseline, because the rasteriser gives glyph origins no vertical sub-pixel precision and any pivot that moves the baseline makes the type climb the grid in whole-pixel jumps.

<TextRewrite zoomDuration={0.2} />  // a push instead of a cut, pivot follows

The selection, and its sheen

The drag is 28% across by 17ms, 54% by 33ms, 71% by 50ms — an easeOut of degree 3.5 over 200ms, and it starts on the same frame the line comes forward. That was measured without touching the gradient at all: take nineteen fixed columns across the line and find the frame the warmth arrives in each. A quint, the obvious guess, is far too fast off the mark and misses the first two points by twenty points of travel.

The fill is a gradient, and it is measurably the same one on every frame it appears: read column by column across eight frames spanning three box widths and two phases — 402px selected, 272px after the rewrite, 193px mid-erase — and it lands in the same place every time. Deepest at 0.36, palest at 0.575, a 3.2× swing. It is painted on the box rather than on the page, which is why it appears to travel as the box is dragged and then eaten.

The deselect is nine frames and linear to within 6% of the travel. Nothing about it eases; the selection is simply dropped.

Every one of those is a prop.

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 terracotta and a specific claim, and neither belongs in a component that ships to strangers. The paint is the shadcn token set, the accent and the sheen both come from theme.primary unless you say otherwise, the mark is ours, and the line is a prop.

Props