Kinetic Wall
A grid of miniature analog clocks whose hands choreograph to spell words — inspired by kinetic clock installations.
Clock hands align to form letterforms
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/kinetic-wall.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/kinetic-wall.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["HELLO", "WORLD"] | Array of words to cycle through. |
| transitionDuration | number | 5000 | Duration of the movement phase in milliseconds. |
| holdDuration | number | 2000 | Duration to hold the formed word in milliseconds. |
| clockSize | number | 36 | Diameter of each clock face in pixels. |
| gap | number | 4 | Gap between clocks in pixels. |
| handColor | string | — | Color of the clock hands. Defaults to themed ink color. |
| className | string | — | Additional CSS classes. |