Selection Snap

$ pnpm dlx shadcn@latest add @remocn/selection-snap

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { SelectionSnap } from "@/components/remocn/selection-snap";
 
const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <SelectionSnap text="Frame" accent="#ff4d1a" selectionColor="#3d5afe" />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="SelectionSnap"
    component={Title}
    durationInFrames={75}
    fps={30}
    width={1280}
    height={720}
  />
);

The word starts at fromWeight inside four corner brackets. Around frame 14 the frame snaps tight with a small overshoot while the weight runs to toWeight and the color turns to accent. The bracket arms grow along the edges until they close into a one-pixel box, the eight handles pop in corners first, and the badge counts up to the snapped box size in reference px.

The weight is continuous because Inter from @remotion/google-fonts is one variable file: the component drives font-variation-settings. The box is a wrapper around the text, so it follows the word as it widens. With a static fontFamily the weight steps through the faces you load instead of gliding.

The component paints no background and centers the word in its parent. Sizes are reference px at a 720px-tall composition and scale with height / 720.