shadcn/app/public/registry/styles/default/ticker.json

{
  "name": "ticker",
  "description": "Stock ticker or news ticker component",
  "dependencies": [
    "react-ticker"
  ],
  "files": [
    {
      "name": "ticker.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TickerProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  speed?: number\n  direction?: \"left\" | \"right\"\n  pauseOnHover?: boolean\n}\n\nconst Ticker = React.forwardRef<HTMLDivElement, TickerProps>(\n  (\n    {\n      className,\n      children,\n      speed = 50,\n      direction = \"left\",\n      pauseOnHover = true,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"group relative overflow-hidden\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex w-fit animate-scroll\",\n            pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n          )}\n          style={{\n            animationDuration: `${speed}s`,\n            animationDirection: direction === \"right\" ? \"reverse\" : \"normal\",\n          }}\n        >\n          {children}\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\nTicker.displayName = \"Ticker\"\n\nexport { Ticker }\n"
    }
  ],
  "type": "components:ui"
}