{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-timer",
  "type": "registry:ui",
  "title": "Animated Timer",
  "description": "A beautiful animated clock with sliding digits and gradient border.",
  "files": [
    {
      "path": "registry/new-york/ui/animated-timer.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TimerCharProps {\n  char: string\n}\n\nfunction TimerChar({ char }: TimerCharProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [height, setHeight] = React.useState(0)\n\n  React.useEffect(() => {\n    if (ref.current) {\n      setHeight(ref.current.offsetHeight)\n    }\n  }, [])\n\n  if (char === \":\") {\n    return (\n      <div className=\"flex items-center justify-center h-[60px] md:h-[100px] lg:h-[150px] w-5 md:w-10 lg:w-12\">\n        <span className=\"text-white text-4xl md:text-6xl lg:text-8xl\">:</span>\n      </div>\n    )\n  }\n\n  const number = parseInt(char, 10)\n  const top = height > 0 ? number * height * -1 : 0\n\n  return (\n    <div\n      ref={ref}\n      className=\"relative h-[60px] md:h-[100px] lg:h-[150px] w-[30px] md:w-[50px] lg:w-[80px] overflow-hidden\"\n    >\n      <div\n        className=\"absolute left-0 flex flex-col w-full transition-[top] duration-200 ease-out\"\n        style={{ top }}\n      >\n        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((digit) => (\n          <div\n            key={digit}\n            className=\"flex items-center justify-center h-[60px] md:h-[100px] lg:h-[150px] w-full\"\n          >\n            <span\n              className={cn(\n                \"text-white transition-all duration-300\",\n                number === digit\n                  ? \"text-4xl md:text-6xl lg:text-8xl opacity-100\"\n                  : \"text-2xl md:text-3xl lg:text-4xl opacity-5\",\n              )}\n            >\n              {digit}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\ninterface AnimatedTimerProps {\n  className?: string\n  showSeconds?: boolean\n  use24Hour?: boolean\n}\n\nexport function AnimatedTimer({\n  className,\n  showSeconds = true,\n  use24Hour = true,\n}: AnimatedTimerProps) {\n  const [time, setTime] = React.useState<Date | null>(null)\n  const [mounted, setMounted] = React.useState(false)\n\n  React.useEffect(() => {\n    setMounted(true)\n    setTime(new Date())\n  }, [])\n\n  React.useEffect(() => {\n    if (!mounted) return\n\n    const interval = setInterval(() => {\n      setTime(new Date())\n    }, 1000)\n\n    return () => clearInterval(interval)\n  }, [mounted])\n\n  const formatSegment = (segment: number): string => {\n    return segment < 10 ? `0${segment}` : String(segment)\n  }\n\n  const getHours = (hours: number): number => {\n    if (use24Hour) return hours\n    return hours % 12 === 0 ? 12 : hours % 12\n  }\n\n  const getTimeString = (): string => {\n    if (!time) return showSeconds ? \"00:00:00\" : \"00:00\"\n\n    const hours = formatSegment(getHours(time.getHours()))\n    const minutes = formatSegment(time.getMinutes())\n    const seconds = formatSegment(time.getSeconds())\n\n    return showSeconds\n      ? `${hours}:${minutes}:${seconds}`\n      : `${hours}:${minutes}`\n  }\n\n  const chars = getTimeString().split(\"\")\n\n  // Show skeleton during SSR\n  if (!mounted) {\n    return (\n      <div\n        className={cn(\n          \"rounded-xl md:rounded-2xl lg:rounded-[22px] bg-gradient-to-br from-blue-600 to-red-500 p-1\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center bg-zinc-900 rounded-lg md:rounded-xl lg:rounded-[20px] px-3 md:px-4 lg:px-5\">\n          {chars.map((char, index) => (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center justify-center\",\n                char === \":\"\n                  ? \"h-[60px] md:h-[100px] lg:h-[150px] w-5 md:w-10 lg:w-12\"\n                  : \"h-[60px] md:h-[100px] lg:h-[150px] w-[30px] md:w-[50px] lg:w-[80px]\",\n              )}\n            >\n              <span className=\"text-white text-4xl md:text-6xl lg:text-8xl opacity-20\">\n                {char}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl md:rounded-2xl lg:rounded-[22px] bg-gradient-to-br from-blue-600 to-red-500 p-1\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center bg-zinc-900 rounded-lg md:rounded-xl lg:rounded-[20px] px-3 md:px-4 lg:px-5\">\n        {chars.map((char, index) => (\n          <TimerChar key={index} char={char} />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}