{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-skeleton-shimmer",
  "type": "registry:ui",
  "title": "Skeleton / Shimmer",
  "description": "Communicate loading progress with a low-contrast shimmer across placeholders.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "polish-effects"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/skeleton-shimmer/",
  "files": [
    {
      "path": "src/registry/primitives/skeleton-shimmer.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/skeleton-shimmer.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nexport type SkeletonShimmerPrimitiveProps = {\n  children: ReactNode;\n  duration?: number;\n  intensity?: number;\n  label?: string;\n  className?: string;\n};\n\nexport function SkeletonShimmerPrimitive({\n  children,\n  duration = 1.4,\n  intensity = 0.14,\n  label = \"Loading\",\n  className,\n}: SkeletonShimmerPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <div className={`relative isolate overflow-hidden ${className ?? \"\"}`} role=\"status\" aria-label={label}>\n      {children}\n      <motion.span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-y-0 -left-1/2 w-1/2 skew-x-[-16deg]\"\n        style={{ background: `linear-gradient(90deg, transparent, rgba(255,255,255,${intensity}), transparent)` }}\n        animate={{ transform: reduceMotion ? \"translate3d(0, 0, 0)\" : \"translate3d(300%, 0, 0)\" }}\n        transition={{ duration, ease: \"linear\", repeat: reduceMotion ? 0 : Infinity, repeatDelay: 0.12 }}\n      />\n    </div>\n  );\n}\n"
    }
  ]
}