{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero-countdown", "type": "registry:block", "title": "Countdown hero", "description": "Live timer tied to a required real deadline, flip digits, minute-level polite announcements and an expired state.", "author": "StoreKit ", "categories": [ "hero", "any" ], "dependencies": [ "motion" ], "registryDependencies": [ "https://storekit-eight.vercel.app/r/cn.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "hero/hero-countdown.tsx", "content": "\"use client\"\n\nimport { useEffect, useMemo, useState } from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Countdown hero tied to a real deadline. `deadline` is required and must be\n the actual end of the sale or the real shipping cutoff; there is no\n evergreen or resetting mode, because fake urgency breaks trust and FTC\n guidance. The visual timer ticks every second and is hidden from screen\n readers; a polite live region announces the remaining time at most once\n a minute. When the deadline passes the timer is replaced by `expired`\n copy (or the block renders nothing with `hideWhenExpired`). The timer\n renders on the client only so server and client markup agree. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\n\nconst PRIMARY =\n \"sk-btn inline-flex min-h-12 items-center justify-center py-2.5 text-center leading-tight rounded-sk-btn bg-sk-accent px-7 text-[15px] font-medium text-sk-accent-ink outline-none transition-[filter,transform] duration-200 ease-sk-out hover:brightness-[1.06] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\nconst SECONDARY =\n \"sk-btn inline-flex min-h-12 items-center justify-center py-2.5 text-center leading-tight rounded-sk-btn border border-sk-line px-7 text-[15px] font-medium text-sk-ink outline-none transition-[background-color,transform] duration-200 ease-sk-out hover:bg-sk-ink/[0.04] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n\nfunction split(ms: number) {\n const s = Math.max(0, Math.floor(ms / 1000))\n return { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60 }\n}\n\nfunction spoken(ms: number) {\n const { d, h, m } = split(ms)\n const parts = [d && `${d} day${d === 1 ? \"\" : \"s\"}`, h && `${h} hour${h === 1 ? \"\" : \"s\"}`, `${m} minute${m === 1 ? \"\" : \"s\"}`].filter(Boolean)\n return parts.join(\", \")\n}\n\nfunction Digit({ value, reduce }: { value: string; reduce: boolean | null }) {\n return (\n \n \n \n {value}\n \n \n \n )\n}\n\nexport function HeroCountdown({\n deadline,\n eyebrow = \"Final weekend\",\n label = \"Sale ends in\",\n headline = \"20% off every routine, ends Sunday.\",\n subcopy = \"Applied automatically at checkout. Subscriptions lock in the sale price for your first three deliveries.\",\n expired = \"This sale has ended. Sign up to hear about the next one first.\",\n hideWhenExpired = false,\n primaryCta = { label: \"Shop the sale\", href: \"#\" },\n secondaryCta = { label: \"See what's included\", href: \"#\" },\n image = \"/placeholder.webp\",\n imageAlt = \"\",\n className,\n}: {\n /** The real end of the sale or the real shipping cutoff. ISO string, epoch ms or Date. */\n deadline: string | number | Date\n eyebrow?: string\n /** Sits above the timer, e.g. \"Sale ends in\" or \"Order within\". */\n label?: string\n headline?: string\n subcopy?: string\n expired?: string\n hideWhenExpired?: boolean\n primaryCta?: Cta\n secondaryCta?: Cta\n image?: string\n imageAlt?: string\n className?: string\n}) {\n const reduce = useReducedMotion()\n const sk = useSkBlock(\"hero\", \"hero-countdown\")\n const end = useMemo(() => new Date(deadline).getTime(), [deadline])\n const valid = Number.isFinite(end)\n const [now, setNow] = useState(null)\n\n useEffect(() => {\n if (!valid) return\n setNow(Date.now())\n const id = setInterval(() => setNow(Date.now()), 1000)\n return () => clearInterval(id)\n }, [valid])\n\n const left = now === null ? null : end - now\n const done = !valid || (left !== null && left <= 0)\n // Changes once a minute, so the live region speaks at most once a minute.\n const minuteText = left !== null && left > 0 ? `${spoken(left)} left` : \"\"\n const endsAt = useMemo(\n () => (now !== null && valid ? new Intl.DateTimeFormat(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"2-digit\" }).format(end) : \"\"),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [end, valid, now === null]\n )\n\n if (done && hideWhenExpired && now !== null) return null\n\n const t = split(left ?? 0)\n const cells: [string, string][] = [\n [String(t.d).padStart(2, \"0\"), \"Days\"],\n [String(t.h).padStart(2, \"0\"), \"Hours\"],\n [String(t.m).padStart(2, \"0\"), \"Min\"],\n [String(t.s).padStart(2, \"0\"), \"Sec\"],\n ]\n\n return (\n
\n
\n \n

{eyebrow}

\n

\n {headline}\n

\n\n
\n {done && now !== null ? (\n

{expired}

\n ) : (\n <>\n

\n {label}\n {endsAt ? (\n \n ) : null}\n

\n
\n {cells.map(([v, l]) => (\n
\n \n {now === null ? \"--\" : (\n <>\n \n \n \n )}\n \n {l}\n
\n ))}\n
\n \n )}\n

\n {minuteText}\n

\n
\n\n

{subcopy}

\n \n \n\n \n {imageAlt}\n \n
\n
\n )\n}\n", "type": "registry:block", "target": "components/storekit/hero/hero-countdown.tsx" } ], "docs": "`deadline` is required and must be the real sale end or shipping cutoff. There is no evergreen mode. Use `hideWhenExpired` to remove the block after it passes.", "meta": { "section": "hero", "variant": "countdown", "niche": [ "any" ], "commerce": [ "cta", "urgency" ], "previewHeight": 620 } }