Flip Clock

Live Interactive Stage

The Flip Clock is an authentic mechanical split-flap display built natively with Framer Motion (motion), React 19, and CSS 3D perspective transforms. It replicates physical airport departure boards, retro Solari di Udine clocks, and vintage train timetable displays with realistic flap-fold dynamics, internal lighting gradients, and zero third-party canvas engines.

Installation

$ pnpm add motion lucide-react

Usage

1. Real-time Local Clock

Displays hours, minutes, and seconds synchronized with local system time.

import { FlipClock } from "@/components/flip-clock"
export function ClockExample() {  return (    <FlipClock      mode="clock"      size="md"      variant="default"      showSeconds={true}      showLabels={true}      sound={true}    />  )}

2. Date & Time with Weekday & Month

Shows Day of week (WED), Day of Month (17), Month (09), Year (2026), alongside hours, minutes, and seconds.

<FlipClock  mode="date-time"  size="md"  variant="default"  showDayOfWeek={true}  showDate={true}  showMonth={true}  showYear={true}  showHours={true}  showMinutes={true}  showSeconds={true}/>

3. Countdown Timer

Counts down towards a specific target timestamp or duration with zero-time callback.

<FlipClock  mode="countdown"  targetDate={new Date("2027-01-01T00:00:00")}  showDays={true}  showHours={true}  showMinutes={true}  showSeconds={true}  onComplete={() => alert("Countdown reached zero!")}/>

4. Stopwatch / Elapsed Time

Counts up with pause, resume, and reset capabilities.

<FlipClock mode="stopwatch" isPaused={false} size="lg" variant="amber" />

5. Dynamic Counter

Flips arbitrary numeric or string values (e.g. live visitor counts, fundraising totals).

<FlipClock  mode="counter"  value={1348}  label="VISITORS"  size="xl"  variant="blueprint"/>

Engineering & Architecture

• Custom 3D Motion Physics: Powered natively by Framer Motion (motion) and CSS 3D perspective transforms (rotateX, preserve-3d, backface culling) with realistic flap-folding dynamics, subpixel border alignment, and internal gradient shading without heavy third-party canvas engines.
• SSR & Hydration Resilient: Microtask-deferred initial state calculation and declarative template reconciliation prevent hydration mismatches across static site generation (SSG) in Vite and TanStack Start.
• Synthesized Web Audio Clicks: Generates procedural mechanical split-flap click sounds via the browser's native Web Audio API oscillator synthesis — requiring zero external audio assets or third-party sound libraries.
• Container Query Scaling: Supports standard fixed scales (sm, md, lg, xl) and a fluid size="full" mode powered by CSS Container Queries ([container-type:inline-size] and cqw), adapting seamlessly to fill 100% of any parent container.

API Reference

FlipClock