Pendulum Wave

Four levels of graded pendulums (15 per level) rendered on canvas, with physics-based swing animations tied to the system clock. The pendulums drift out of phase and snap into flat alignment at the top of every minute. Five visual themes - Atmospheric Depth, Trompe L'Oeil Volume, Glass & Brass, Long Exposure, and Circular Mobile - cycle on click or spacebar. Includes a live digital clock readout and screen-reader announcements on each minute change.

pendulum-wave-preview

--:--:--
Day -- · Local Time
Loading clock.

Loading preview...

Why it helps: A pendulum wave creates a mesmerizing visual effect that combines physics, art, and timekeeping. The snap-to-alignment at each minute mark adds a satisfying rhythmic element that invites repeated viewing.

Also good to know:

-Canvas rendering means no DOM accessibility for the animation content
-requestAnimationFrame loop continues even when tab is hidden - visibilitychange listener mitigates this but adds complexity
-The Google Fonts dependency for JetBrains Mono is required for the digital readout

Source

components/live/PendulumWave.tsx

// Loading source...

Usage

example.tsx

import { PendulumWave } from "@/components/live/PendulumWave";

<PendulumWave
  className="w-full aspect-video"
/>
import { PendulumWave } from "@/components/live/PendulumWave";

<PendulumWave
  className="w-full aspect-video"
/>

Props

className-

string

Additional CSS classes.

style-

CSSProperties

Inline styles.