Flap Clock, animated React component

A team world clock on a split-flap board. Every row is a city: its local time and name on enamel flaps in the row's own colour, and whether they're asleep, starting their morning, working or done for the day. When a minute turns, the flaps clatter round to the new time. Drag the handle along the sky strip underneath to look up to twelve hours either way (“what time is it for everyone if we meet at four?”): the whole board flips as you go, and the count at the top says how many people would be working. Now snaps it back to the live time. Keyboard: the handle is a slider; arrows move by a quarter hour, Page Up and Page Down by an hour, Home returns to now.

Pro
Dashboards

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Team clock

Where everyone is in their day.

2 of 5 working

San Francisco, Noah: 13:42 Thu, working.
WorkingNoahThu−8h
New York, Maya: 16:42 Thu, working.
WorkingMayaThu−5h
London, Sam: 21:42 Thu, night.
NightSamThusame as you
Bengaluru, Priya: 03:12 Fri, asleep.
AsleepPriyaFri+5h 30m
Tokyo, Ken: 06:42 Fri, morning.
MorningKenFri+9h

Live. Your time is Thu 21:42

Flap Clock

Demo it by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
cities	FlapCity[]	CITIES	The cities shown in the component.
hour12	boolean	false	12-hour clock with am/pm; 24-hour by default
workHours	[number, number]	[9, 17]	local working hours, start and end (24h); 9 to 17 by default
title	string	"Team clock"	The title shown in the component.
onScrub	(time: Date, offsetMinutes: number) => void	—	called as the visitor plans a time: the moment they're looking at and its distance from now in minutes
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Flap Clock is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
NewSound
Global Deploy
Pro
NewSound
Storage Clean
Pro
NewSound
Empty Chart
Pro
New
Sort Stack

Flap Clock, animated React component

Play with it

Team clock

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Flap Clock, animated React component

Play with it

Team clock

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More dashboards