❍Kinetic Wall
08 / 08display

Kinetic Wall

A grid of miniature analog clocks whose hands choreograph to spell words — inspired by kinetic clock installations.

displaycanvasanimation

Clock hands align to form letterforms

Installation

▸ Run the following command

npx shadcn@latest add https://mellowui.com/r/kinetic-wall.json

▸ Or install manually

  1. Copy the source from the Code tab above.
  2. Place it at components/mellow/kinetic-wall.tsx
  3. Import and use.

API Reference

PropTypeDefaultDescription
wordsstring[]["HELLO", "WORLD"]Array of words to cycle through.
transitionDurationnumber5000Duration of the movement phase in milliseconds.
holdDurationnumber2000Duration to hold the formed word in milliseconds.
clockSizenumber36Diameter of each clock face in pixels.
gapnumber4Gap between clocks in pixels.
handColorstring—Color of the clock hands. Defaults to themed ink color.
classNamestring—Additional CSS classes.