Kinetic

A growing collection of drop-in React components — clocks, weather, and more on the way. Each one is themeable, dependency-light, and installs with a single shadcn command.

kinetic.yxsh.in

---

Components

Component	Description
clock-clock-24	24 analog clocks that choreograph their hands to spell the time. Wave, spiral, and scatter animations.
led-clock	Seven-segment LED alarm clock with blinking colon and a date / day-of-week side panel.

---

Installation

Register the @kinetic namespace once in your components.json:

{
  "registries": {
    "@kinetic": "https://kinetic.yxsh.in/r/{name}.json"
  }
}

Then add any component by name:

npx shadcn@latest add @kinetic/clock-clock-24
npx shadcn@latest add @kinetic/led-clock

Or use the full URL directly (no setup required):

npx shadcn@latest add https://kinetic.yxsh.in/r/clock-clock-24.json
npx shadcn@latest add https://kinetic.yxsh.in/r/led-clock.json

If you haven't initialized shadcn/ui yet, run npx shadcn@latest init first.

---

Usage

Clock Clock 24

import { KineticClock } from "@/components/clock-clock-24"

export default function Page() {
  return (
    <KineticClock
      mode="active"            // "active" | "medium" | "quiet"
      format="24h"             // "24h" | "12h"
      size={700}               // outer width in px
      bodyColor="#ffffff"      // clock body (panel + faces derived)
      handColor="#111111"      // clock hands
      timeZone="America/New_York"
    />
  )
}

LED Clock

import { LedClock } from "@/components/led-clock"

export default function Page() {
  return (
    <LedClock
      size={600}               // outer width in px
      format="24h"             // "24h" | "12h"
      showDate={true}          // toggle the date / day panel
      timeZone="Asia/Tokyo"
    />
  )
}

---

Props

KineticClock

Prop	Type	Default	Description
mode	"active" | "medium" | "quiet"	"active"	active — Wave → Spiral → Scatter → Time. medium — Wave → Spiral → Time. quiet — time only.
format	"12h" | "24h"	"24h"	Time format.
size	number	700	Outer width in pixels.
bodyColor	string	"#ffffff"	Clock body color — panel, faces, rims, and dial shadows are all derived from it.
handColor	string	"#111111"	Color of the clock hands.
timeZone	string	undefined	IANA timezone (e.g. "Asia/Tokyo"). Omit for local time.

LedClock

Prop	Type	Default	Description
size	number	600	Outer width in pixels. Height derives from a 2.55:1 ratio.
format	"12h" | "24h"	"24h"	Time format.
showDate	boolean	true	Show the month / date / day-of-week panel.
timeZone	string	undefined	IANA timezone. Omit for local time.

---

Theming (KineticClock)

Self-contained — no CSS variables or global setup required. Pass bodyColor and handColor directly; the panel, faces, rims, and inner dial shadows are all derived from bodyColor, and the shadow depth adapts automatically for dark vs. light bodies.

---

Development

npm install
npm run dev            # Start the demo site
npm run registry:build # Regenerate public/r/*.json from registry/
npm run build          # Full production build (runs registry:build first)
npm run lint           # Lint

Component sources live in registry/<component-name>/. The demo site imports directly from there — no duplicate files, no drift.

---