text

CountdownDisplay

Countdown timer with flip animation and urgency effects.

npx chaos add countdown-display

PREVIEW

00:42:13

USAGE

import { CountdownDisplay } from '@/components/chaos/text/countdown-display';

<CountdownDisplay target={new Date('2025-01-01')} />
<CountdownDisplay target={3600} variant="neon" flip />
<CountdownDisplay target={300} urgentThreshold={120} onComplete={() => alert('Done!')} />

PROPS

PropTypeDefault

targetTarget date/time or duration in seconds

Date | number-

formatDisplay format

"full" | "hms" | "ms" | "dhms""hms"

sizeSize variant

"sm" | "md" | "lg""md"

variantVisual variant

"default" | "minimal" | "neon" | "brutal" | "glitch""default"

accentColorAccent color

string"#ff0040"

showLabelsShow labels under numbers

booleantrue

compactCompact mode (less spacing)

booleanfalse

flipEnable flip animation

booleanfalse

urgentThresholdSeconds threshold for urgency effect

number60

onCompleteCallback when countdown reaches zero

() => void-

labelsLabels customization

{ days?: string; hours?: string; minutes?: string; seconds?: string }-