Glow Pulse
A rhythmic glow for CTAs and live indicators. Install with npx remotion-ui@latest add glow-pulse.
PrimitivePrimitives
$ npx remotion-ui@latest add glow-pulseThe thing that says this one.
import { GlowPulse } from "@/remotion/primitives/glow-pulse";
<GlowPulse mode="beat" periodInFrames={36}>
<CtaPill />
</GlowPulse>Why it is a wrapper
The glow is a drop-shadow filter, not a box-shadow, so it follows the alpha
of whatever it wraps — a pill, a ring, a piece of type, an SVG mark — instead of
the bounding box. That is the entire reason this is a component and not a class:
a box-shadow on a circular badge glows in a square.
Two shapes
breathe is a sine, for something ambient that should not demand attention.
beat rises in the first eighth of the cycle and decays across the rest, which
is why a live dot reads as pulsing rather than as fading in and out. Add echo
for the second, smaller tap that turns a metronome into a heartbeat.
floor matters more than intensity
A live indicator that reaches zero reads as broken. The pulse rides above a
standing glow set by floor, and dropping that to 0 is the fastest way to make
a working component look like a bug.
scale adds a small size change at the top of the pulse. It is optional, but a
glow that changes brightness while the element stays exactly still reads as a
lighting change rather than as the element itself pulsing.
The glow is a `drop-shadow` filter, so it follows the alpha of whatever it wraps — a pill, a ring, type, an SVG mark — rather than the bounding box. `floor` matters more than `intensity`: a live indicator that reaches zero reads as broken.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/glow-pulse- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: color, radius, intensity, floor, 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
import { GlowPulse } from "@/remotion/primitives/glow-pulse";
<GlowPulse mode="beat" periodInFrames={36}>
<CtaPill />
</GlowPulse>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | What glows. |
| color | string | "#e8b86d" | Glow colour. |
| radius | number | 26 | Glow radius at full brightness, in px. |
| intensity | number | 1 | Brightness at the top of the pulse. |
| floor | number | 0.28 | Brightness at the bottom. Never 0 for a live indicator. |
| periodInFrames | number | 36 | Length of one pulse. |
| mode | "breathe" | "beat" | "breathe" | `breathe` is a sine; `beat` is a fast attack and a long decay. |
| scale | number | 0.04 | Scale added at the top of the pulse. 0 glows without moving. |
| halo | number | 2.4 | Halo behind the element, as a multiple of `radius`. 0 removes it. |
| echo | number | 0 | Second, smaller tap per cycle — a heartbeat rather than a metronome. |