Shimmer Sweep · remocn

A typography primitive that layers a gradient shine on top of muted base text using background-clip: text. The gradient sweeps horizontally across the text, lighting up letters as it passes. Great for AI and generation moments.

Installation

$ pnpm dlx shadcn@latest add @remocn/shimmer-sweep

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ShimmerSweep } from "@/components/remocn/shimmer-sweep";

const ShimmerSweepScene = () => (
  <ShimmerSweep text="Generating..." fontSize={96} />
);

export const RemotionRoot = () => (
  <Composition
    id="ShimmerSweep"
    component={ShimmerSweepScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`text`required	`string`	—	The text to animate the shine across.
`baseColor`	`string`	`"#3f3f46"`	Dim color of the text underneath the shine.
`shineColor`	`string`	`"#fafafa"`	Color of the moving highlight gradient.
`fontSize`	`number`	`96`	Font size in pixels.
`fontWeight`	`number`	`700`	CSS font-weight.
`speed`	`number`	`1`	Multiplier for animation speed.
`className`	`string`	—	Optional className passed to the shine span.

Notes

Background-clip support

This effect relies on background-clip: text. It works in all modern browsers and Remotion's Chromium renderer.