{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer",
  "title": "Shimmer",
  "description": "A slow sweep of light across text still being worked on.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/ai/shimmer.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { colors, durations, media } from \"@/lib/constella/tokens.stylex\";\n\ntype ShimmerProps = Omit<\n  useRender.ComponentProps<\"span\">,\n  \"className\" | \"style\"\n> & {\n  sx?: Sx;\n};\n\nconst rtl = \":is([dir='rtl'], [dir='rtl'] *)\";\nconst spread = \"calc(3ch + 40px)\";\nconst mid = `color-mix(in oklch, ${colors.textPrimary}, currentColor 50%)`;\n\nconst sweep = stylex.keyframes({\n  from: { backgroundPosition: \"100% 0\" },\n  to: { backgroundPosition: \"0 0\" },\n});\n\nconst styles = stylex.create({\n  // A band of primary text sweeping across the text's own color, start to end.\n  shimmer: {\n    animationDirection: { default: null, [rtl]: \"reverse\" },\n    animationDuration: durations.shimmer,\n    animationIterationCount: \"infinite\",\n    animationName: { default: sweep, [media.reducedMotion]: \"none\" },\n    animationTimingFunction: \"linear\",\n    backgroundClip: \"text\",\n    backgroundImage: {\n      default: `linear-gradient(110deg, currentColor calc(50% - ${spread}), ${mid} calc(50% - ${spread} * 0.5), ${colors.textPrimary} 50%, ${mid} calc(50% + ${spread} * 0.5), currentColor calc(50% + ${spread}))`,\n      [media.reducedMotion]: \"none\",\n    },\n    backgroundPosition: \"0 0\",\n    backgroundRepeat: \"no-repeat\",\n    backgroundSize: `calc(200% + ${spread} * 2) 100%`,\n    WebkitBackgroundClip: \"text\",\n    WebkitTextFillColor: {\n      default: \"transparent\",\n      [media.reducedMotion]: \"currentColor\",\n    },\n  },\n});\n\n/** Text still being worked on: a slow sweep of light across it. */\nfunction Shimmer({ render, sx, ...props }: ShimmerProps) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(props, stylex.props(styles.shimmer, sx)),\n    render,\n    state: { slot: \"shimmer\" },\n  });\n}\n\nexport { Shimmer };\nexport type { ShimmerProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/shimmer/index.md",
  "type": "registry:ui"
}