Shimmer Sweep
A bright shine travels across muted text to draw attention
Installation
$ pnpm dlx shadcn@latest add @remocn/shimmer-sweepUsage
// 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 |
|---|---|---|---|
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 | 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 |