Pulsing Indicator

A tiny UI primitive for signalling activity. An inner dot breathes via Math.sin(frame) mapped to scale and opacity, while an outer ring "pings" outward on a separate phase.

Installation

$ pnpm dlx shadcn@latest add @remocn/pulsing-indicator

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { PulsingIndicator } from "@/components/remocn/pulsing-indicator";

const PulsingIndicatorScene = () => (
  <PulsingIndicator color="#22c55e" size={16} speed={8} />
);

export const RemotionRoot = () => (
  <Composition
    id="PulsingIndicator"
    component={PulsingIndicatorScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`color`	`string`	`"#22c55e"`	Dot and ring color.
`size`	`number`	`16`	Dot diameter in pixels. The ring expands beyond this.
`speed`	`number`	`8`	Lower = faster pulse. The value is the frame divisor inside Math.sin.
`background`	`string`	`"white"`	Background color of the surrounding container.
`className`	`string`	—	Optional className passed to the outer container.

Notes

Deterministic pulse

Animation is driven by Math.sin(frame / speed) — no setInterval, no randomness, fully frame-accurate on every render.