Shimmer Sweep

A bright shine travels across muted text to draw attention

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

PropTypeDefaultDescription
textrequired
stringThe 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
number96Font size in pixels
fontWeight
number700CSS font-weight
speed
number1Multiplier for animation speed
className
stringOptional className passed to the shine span