Shimmer Sweep

A bright shine travels across muted text to draw attention

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

Usage

tsx
// 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}
  />
);

Props7

PropTypeDefault
textrequired
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
number96

Font size in pixels

fontWeight
number700

CSS font-weight

speed
number1

Multiplier for animation speed

className
string—

Optional className passed to the shine span

  • textrequiredstring

    The text to animate the shine across

  • baseColorstring

    Dim color of the text underneath the shine

    Default"#3f3f46"

  • shineColorstring

    Color of the moving highlight gradient

    Default"#fafafa"

  • fontSizenumber

    Font size in pixels

    Default96

  • fontWeightnumber

    CSS font-weight

    Default700

  • speednumber

    Multiplier for animation speed

    Default1

  • classNamestring

    Optional className passed to the shine span