Harmonograph

About this component

Harmonograph

A live Canvas 2D harmonograph: two damped pendulums over a slowly turning table draw one fine ink line into a rosette, and each finished figure rests briefly, fades away completely and only then gives way to the next, one figure at a time. The plate sways gently in 3D and leans toward the cursor; a click starts a new figure. Ink and paper, pace, pause between figures, line width and strength, damping, table spin, complexity, tilt and plate shape are all props. It pauses offscreen and shows a finished figure for reduced motion.

Usage

The import and the props worth knowing about, in one place.

import { Harmonograph } from "@/components/beste/component/harmonograph";

<Harmonograph className="aspect-square w-full max-w-[560px]" />

<Harmonograph
  className="aspect-square w-full max-w-md"
  inkColor="var(--primary)"   // any CSS color, tokens included
  duration={8}                // seconds per figure
  hold={0.4}                  // rest before the next figure starts
  complexity={0.9}            // more intricate ratios
  spin={0.2}                  // a calmer table
  tilt={0.8}                  // stronger sway and lean
  round={false}               // square sheet instead of a round plate
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
inkColorstring—Color of the ink line. Any CSS color, tokens included.
paperColorstring—Color of the plate the line is drawn on.
durationnumber—Seconds one figure takes to draw.
holdnumber—Seconds a finished figure rests before the next one begins drawing over its fading ghost.
lineWidthnumber—Width of the ink line, in pixels.
lineOpacitynumber—Strength of the ink, 0 to 1. Overlapping passes build up darker.
dampingnumber—How slowly the pendulums settle, 0 (short, open figures) to 1 (long, dense rosettes).
spinnumber—How far the table turns under the pen, 0 (still table) to 1 (strong spiral).
complexitynumber—Range of frequency ratios the pendulums pick from, 0 (simple loops) to 1 (intricate knots).
tiltnumber—How far the plate sways and leans toward the cursor, 0 (flat) to 1.
roundboolean—Round plate; turn off for a square sheet.
interactiveboolean—The plate leans toward the cursor and a click starts a new figure.
pausedboolean—Freeze the drawing and the sway where they are.
classNamestring—
childrenReactNode—

More Media components

View all Media
A model in wide striped trousers leaning on a teal wallA glass perfume bottle casting amber shadows on warm paperA woman in a dark check coat walking down a city streetOrange poppies against a clear blue skyA singer with one hand raised in stage smoke and red light
A model in a bright yellow fleece set on a concrete courtA red swing carousel spinning against a pale skyA woman with short hair looking back over her shoulderA dropper bottle of golden oil on a round wooden boardA model in a red jersey and black jacket against a teal sky
Portrait of a bearded man in a dark shirt