Spinner

A deterministic spinning arc — pure function of the Remotion frame

A motion atom: a looping animation that is a pure function of useCurrentFrame(). No states, no props to sequence — just a spinning arc that advances deterministically with the timeline. Safe in Remotion's headless per-frame renderer (no Date, Math.random, or requestAnimationFrame).

Installation

$ pnpm dlx shadcn@latest add @remocn/spinner

Usage

Minimal — inherits color from the surrounding text:

tsx

import { Spinner } from "@/components/remocn/spinner";
 
export const Scene = () => <Spinner />;

Sized and colored explicitly:

tsx

import { Spinner } from "@/components/remocn/spinner";
 
export const Scene = () => (
  <Spinner size={32} color="oklch(0.55 0.2 250)" speed={1.5} />
);

How rotation works

text

rotation (deg) = frame × speed × 6

At 30 fps with speed=1, one full rotation takes 20 frames (2 frames per 12°). Increase speed to spin faster without changing the composition fps.

Props5

Prop	Type	Default
size	number20 Width and height of the SVG in px.
color	string"currentColor" Stroke color. Defaults to currentColor so it inherits the surrounding text color.
speed	number1 Scales the playhead. rotation = frame × speed × 6 (deg). speed=2 spins twice as fast.
strokeWidth	number2.5 Arc stroke width in viewBox units (viewBox is 0 0 24 24).
className	string— Optional className passed to the SVG element.

sizenumber
Width and height of the SVG in px.
Default20
colorstring
Stroke color. Defaults to currentColor so it inherits the surrounding text color.
Default"currentColor"
speednumber
Scales the playhead. rotation = frame × speed × 6 (deg). speed=2 spins twice as fast.
Default1
strokeWidthnumber
Arc stroke width in viewBox units (viewBox is 0 0 24 24).
Default2.5
classNamestring
Optional className passed to the SVG element.