Interactive Demo

Customize the clock and see changes in real-time.

Content

Target

Randomize

Colors

Digit Font

Digit Color

#ffffff

Card background (top)

#1a1a1a

Card background (bottom)

#0f0f0f

Segments

dayshoursminutesseconds

Separator

LabelsShow Labels

Animation

Bounce intensity

8°

Size & Spacing

Scale

1.0

Border radius

0.5rem

Group gap

Card gap

Clock shadow

Generated Code

<FlipClock
  targetDate={new Date("2027-01-01T00:00:00")}
/>