Light Sweep Text
Light Sweep Text text animation for Remotion.
PrimitiveAdvanced
light-sweep-text30fps · 960×540
Install
$ npx remotion-ui@latest add light-sweep-textA specular highlight travelling across the type, clipped to the glyphs.
The gradient is 2.2× the width of the line, so bandWidth (the shine's half-width in percent of that gradient) controls how much of the line is lit at once: the default 8 is a hard streak, 14 lights up about three fifths of it. Widen the band for a long sweep, or the highlight spends the ends of its travel clear of the text.
easing defaults to an ease-in-out, which is right for a short accent. A sweep long enough to read as light moving should pass Easing.linear: a specular reflection travels at constant speed.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/light-sweep-text- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { LightSweepText } from "@/remotion/primitives/light-sweep-text";
<LightSweepText text="Light pass" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | - | Text with gradient sweep. |