Shimmer Sweep
A bright shine travels across muted text to draw attention
Installation
$ pnpm dlx shadcn@latest add @remocn/shimmer-sweepUsage
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
| Prop | Type | Default |
|---|---|---|
| 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
Default
96 - fontWeightnumber
CSS font-weight
Default
700 - speednumber
Multiplier for animation speed
Default
1 - classNamestring
Optional className passed to the shine span