{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "jitter",
  "title": "Jitter",
  "description": "A jitter animation primitive plus a ready-made vibration icon.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/base/ui/jitter.tsx",
      "content": "import * as React from \"react\";\nimport { AlarmClock } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./jitter.css\";\n\nexport type JitterAxis = \"both\" | \"horizontal\" | \"vertical\";\nexport type JitterIconAxis = JitterAxis;\n\nexport type JitterProps = React.ComponentProps<\"span\"> & {\n  /** The axis the content jitters on. Defaults to horizontal. */\n  axis?: JitterAxis;\n  /** Classes applied to the animated child wrapper. */\n  targetClassName?: string;\n};\n\nexport function Jitter({\n  axis = \"horizontal\",\n  className,\n  children,\n  targetClassName,\n  ...props\n}: JitterProps) {\n  return (\n    <span\n      data-slot=\"jitter\"\n      data-axis={axis}\n      className={cn(\"jitter inline-flex\", className)}\n      {...props}\n    >\n      <span\n        data-slot=\"jitter-target\"\n        className={cn(\"jitter-target inline-flex\", targetClassName)}\n      >\n        {children}\n      </span>\n    </span>\n  );\n}\n\nexport type JitterIconProps = React.ComponentProps<\"div\"> & {\n  /** The axis the icon jitters on. Defaults to horizontal. */\n  axis?: JitterAxis;\n};\n\nexport function JitterIcon({\n  axis = \"horizontal\",\n  className,\n  ...props\n}: JitterIconProps) {\n  return (\n    <div\n      data-slot=\"jitter-icon\"\n      data-axis={axis}\n      className={cn(\n        \"jitter jitter-icon flex flex-col items-center text-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        data-slot=\"jitter-icon-target\"\n        className=\"jitter-target w-full max-w-72\"\n      >\n        <AlarmClock aria-hidden=\"true\" className=\"h-auto w-full\" />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/jitter.tsx"
    },
    {
      "path": "registry/base/ui/jitter.css",
      "content": ".jitter,\n.jitter-icon {\n  --jitter-x: 3px;\n  --jitter-y: 0px;\n}\n\n.jitter-target {\n  backface-visibility: hidden;\n  transform-origin: center;\n  animation: jitter 480ms steps(1, end) both;\n}\n\n.jitter[data-axis=\"vertical\"],\n.jitter-icon[data-axis=\"vertical\"] {\n  --jitter-x: 0px;\n  --jitter-y: 3px;\n}\n\n.jitter[data-axis=\"both\"],\n.jitter-icon[data-axis=\"both\"] {\n  --jitter-x: 3px;\n  --jitter-y: 2px;\n}\n\n.jitter[data-axis=\"both\"] .jitter-target {\n  animation-name: jitter-both;\n}\n\n@keyframes jitter {\n  0%,\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n  8% {\n    transform: translate3d(\n      calc(var(--jitter-x) * -1),\n      calc(var(--jitter-y) * 1),\n      0\n    );\n  }\n  16% {\n    transform: translate3d(\n      calc(var(--jitter-x) * 0.9),\n      calc(var(--jitter-y) * -0.9),\n      0\n    );\n  }\n  26% {\n    transform: translate3d(\n      calc(var(--jitter-x) * -0.8),\n      calc(var(--jitter-y) * 0.8),\n      0\n    );\n  }\n  36% {\n    transform: translate3d(\n      calc(var(--jitter-x) * 0.67),\n      calc(var(--jitter-y) * -0.67),\n      0\n    );\n  }\n  48% {\n    transform: translate3d(\n      calc(var(--jitter-x) * -0.52),\n      calc(var(--jitter-y) * 0.52),\n      0\n    );\n  }\n  60% {\n    transform: translate3d(\n      calc(var(--jitter-x) * 0.4),\n      calc(var(--jitter-y) * -0.4),\n      0\n    );\n  }\n  72% {\n    transform: translate3d(\n      calc(var(--jitter-x) * -0.27),\n      calc(var(--jitter-y) * 0.27),\n      0\n    );\n  }\n  84% {\n    transform: translate3d(\n      calc(var(--jitter-x) * 0.15),\n      calc(var(--jitter-y) * -0.15),\n      0\n    );\n  }\n  92% {\n    transform: translate3d(\n      calc(var(--jitter-x) * -0.07),\n      calc(var(--jitter-y) * 0.07),\n      0\n    );\n  }\n}\n\n@keyframes jitter-both {\n  0%,\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n  8% {\n    transform: translate3d(-3px, 1.8px, 0);\n  }\n  16% {\n    transform: translate3d(2.7px, -1.8px, 0);\n  }\n  26% {\n    transform: translate3d(-2.4px, -1.6px, 0);\n  }\n  36% {\n    transform: translate3d(2px, 1.34px, 0);\n  }\n  48% {\n    transform: translate3d(-1.56px, 1.04px, 0);\n  }\n  60% {\n    transform: translate3d(1.2px, -0.8px, 0);\n  }\n  72% {\n    transform: translate3d(-0.81px, -0.54px, 0);\n  }\n  84% {\n    transform: translate3d(0.45px, 0.3px, 0);\n  }\n  92% {\n    transform: translate3d(-0.21px, 0.14px, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .jitter-target {\n    animation: none;\n  }\n}\n",
      "type": "registry:file",
      "target": "components/ui/jitter.css"
    }
  ],
  "meta": {
    "tags": [
      "svg",
      "svg-animation",
      "jitter",
      "axis",
      "primitive"
    ],
    "effects": [
      "jitter",
      "horizontal-jitter",
      "vertical-jitter"
    ]
  },
  "categories": [
    "effect"
  ],
  "type": "registry:ui"
}