# Shimmer Sweep
URL: https://remocn.dev/docs/typography/shimmer-sweep

A bright shine travels across muted text to draw attention

- Install: `npx shadcn@latest add @remocn/shimmer-sweep`
- Vibe: premium
- Natural length: 120f @ 30fps

## Installation

```bash
npx 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}
  />
);
```

## 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 |

## Use when
- Highlighting a product name or pricing tier with a refined, metallic gleam — luxury SaaS, pricing slides.
- The text is already visible and you want a continuous or looped attention effect rather than an entrance.
- The design calls for a dark background where a light sweep across dark text creates contrast without a harsh cut.

## Don't use when
- You need the text to enter the scene — shimmer-sweep does not animate the text in; use `tracking-in` or `soft-blur-in` for the entrance, then layer a shimmer if needed.
- The brand aesthetic is casual or energetic — the metallic sweep reads as premium/luxury; use `spring-scale-in` or `staggered-fade-up` for a lighter feel.
- You want per-character color or gradient control — `shimmer-sweep` sweeps a single shine beam; use `rgb-glitch-text` for character-level color splitting.