{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "effort-slider",
  "title": "Effort Slider",
  "description": "A slider for picking how hard an AI should reason, with a brain knob, flowing reasoning sparkles and color themes.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/clover-ui/effort-slider.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from \"motion/react\";\nimport { Brain } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface EffortSliderProps extends Omit<\n  React.ComponentProps<\"div\">,\n  \"defaultValue\" | \"onChange\" | \"children\"\n> {\n  levels?: string[];\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number, level: string) => void;\n  recommended?: number;\n  tags?: string[];\n  theme?: EffortSliderTheme;\n  label?: string;\n  size?: EffortSliderSize;\n  disabled?: boolean;\n}\n\nexport type EffortSliderSize = \"default\" | \"sm\";\n\nconst SIZES: Record<\n  EffortSliderSize,\n  { height: number; inset: number; knob: number; gap: string }\n> = {\n  default: { height: 24, inset: 12, knob: 30, gap: \"mt-4\" },\n  sm: { height: 18, inset: 9, knob: 22, gap: \"mt-2.5\" },\n};\n\nconst SNAP = { duration: 0.22, ease: [0.22, 1, 0.36, 1] } as const;\n\nconst SLAM = { duration: 0.15, ease: [0.55, 0, 0.9, 0.6] } as const;\n\nconst DEFAULT_LEVELS = [\"Low\", \"Medium\", \"High\", \"Max\"];\n\nconst DEFAULT_TAGS = [\"Fastest\", \"Faster\", \"Smarter\", \"Smartest\"];\n\nconst PARTICLES = [\n  { top: 18, size: 2, delay: 0, twinkle: 1.1 },\n  { top: 62, size: 1.5, delay: -0.7, twinkle: 0.8 },\n  { top: 38, size: 2, delay: -1.6, twinkle: 1.3 },\n  { top: 80, size: 1.5, delay: -2.3, twinkle: 0.9 },\n  { top: 28, size: 1.5, delay: -3.1, twinkle: 1.2 },\n  { top: 50, size: 2, delay: -3.8, twinkle: 0.7 },\n  { top: 72, size: 2, delay: -4.6, twinkle: 1 },\n  { top: 12, size: 1.5, delay: -5.2, twinkle: 1.4 },\n  { top: 44, size: 1.5, delay: -1.1, twinkle: 0.9 },\n  { top: 86, size: 2, delay: -2.8, twinkle: 1.1 },\n  { top: 24, size: 2, delay: -4.1, twinkle: 0.8 },\n  { top: 56, size: 1.5, delay: -5.6, twinkle: 1.2 },\n];\n\nexport type EffortSliderTheme = \"aurora\" | \"ocean\" | \"ember\" | \"forest\" | \"mono\";\n\ntype Tone = { light: string; dark: string; brain: string; line: string };\n\ntype Palette = {\n  tones: Tone[];\n  max: { light: string; dark: string; glowLight: string; glowDark: string };\n};\n\nconst THEMES: Record<EffortSliderTheme, Palette> = {\n  aurora: {\n    tones: [\n      { light: \"#9a9cc8\", dark: \"#3b3d63\", brain: \"#b4b7ee\", line: \"#262850\" },\n      { light: \"#a596c6\", dark: \"#4a3d6b\", brain: \"#c3aef0\", line: \"#33245c\" },\n      { light: \"#c69aae\", dark: \"#6a3a56\", brain: \"#f9a8d4\", line: \"#6b1530\" },\n    ],\n    max: {\n      light: \"#e26d88\",\n      dark: \"#b4455a\",\n      glowLight: \"rgb(255 255 255 / 0.18)\",\n      glowDark: \"rgb(255 150 170 / 0.35)\",\n    },\n  },\n  ocean: {\n    tones: [\n      { light: \"#8fb3c9\", dark: \"#2c4a5e\", brain: \"#a9d8f0\", line: \"#163447\" },\n      { light: \"#7fb0d6\", dark: \"#2e5379\", brain: \"#9cc9f5\", line: \"#183a5c\" },\n      { light: \"#7fc3c4\", dark: \"#285e63\", brain: \"#8fe3dc\", line: \"#0f4247\" },\n    ],\n    max: {\n      light: \"#36a9bb\",\n      dark: \"#2a8a99\",\n      glowLight: \"rgb(255 255 255 / 0.18)\",\n      glowDark: \"rgb(140 230 240 / 0.35)\",\n    },\n  },\n  ember: {\n    tones: [\n      { light: \"#d9b38c\", dark: \"#5e4429\", brain: \"#f5c99a\", line: \"#4a2f14\" },\n      { light: \"#e3a37f\", dark: \"#6b3a24\", brain: \"#f7b48f\", line: \"#55240f\" },\n      { light: \"#e58f8f\", dark: \"#6e2a2a\", brain: \"#ff9e9e\", line: \"#5a1414\" },\n    ],\n    max: {\n      light: \"#e0573a\",\n      dark: \"#b8432a\",\n      glowLight: \"rgb(255 255 255 / 0.18)\",\n      glowDark: \"rgb(255 180 130 / 0.35)\",\n    },\n  },\n  forest: {\n    tones: [\n      { light: \"#a7c4a0\", dark: \"#33503a\", brain: \"#b6e3ad\", line: \"#1c3a22\" },\n      { light: \"#9cc79b\", dark: \"#2f5a3b\", brain: \"#a8e6a8\", line: \"#173f22\" },\n      { light: \"#c3cf8a\", dark: \"#535d25\", brain: \"#e2f09a\", line: \"#3a4210\" },\n    ],\n    max: {\n      light: \"#93b83a\",\n      dark: \"#6f8f1f\",\n      glowLight: \"rgb(255 255 255 / 0.18)\",\n      glowDark: \"rgb(210 240 140 / 0.35)\",\n    },\n  },\n  mono: {\n    tones: [\n      { light: \"#c4c4c9\", dark: \"#3a3a3f\", brain: \"#d4d4d8\", line: \"#27272a\" },\n      { light: \"#b0b0b7\", dark: \"#46464d\", brain: \"#e4e4e7\", line: \"#27272a\" },\n      { light: \"#9b9ba3\", dark: \"#55555c\", brain: \"#fafafa\", line: \"#18181b\" },\n    ],\n    max: {\n      light: \"#6a6a73\",\n      dark: \"#8a8a93\",\n      glowLight: \"rgb(255 255 255 / 0.2)\",\n      glowDark: \"rgb(255 255 255 / 0.25)\",\n    },\n  },\n};\n\nconst BACKING = [\n  { cx: 9, cy: 5, r: 3 },\n  { cx: 15, cy: 5, r: 3 },\n  { cx: 7, cy: 9, r: 4 },\n  { cx: 17, cy: 9, r: 4 },\n  { cx: 6, cy: 14, r: 4 },\n  { cx: 18, cy: 14, r: 4 },\n  { cx: 8, cy: 18, r: 4 },\n  { cx: 16, cy: 18, r: 4 },\n];\n\nfunction BrainKnob() {\n  return (\n    <span className=\"relative block size-full\">\n      <svg aria-hidden viewBox=\"0 0 24 24\" className=\"absolute inset-0 size-full\">\n        <g className=\"fill-(--effort-brain)\">\n          {BACKING.map((lobe) => (\n            <circle key={`${lobe.cx}-${lobe.cy}`} {...lobe} />\n          ))}\n          <rect x=\"7\" y=\"5\" width=\"10\" height=\"14\" />\n        </g>\n      </svg>\n      <Brain\n        aria-hidden\n        strokeWidth={2.6}\n        className=\"absolute inset-0 size-full text-(--effort-line)\"\n      />\n    </span>\n  );\n}\n\nconst clamp = (value: number, min = 0, max = 1) => Math.min(max, Math.max(min, value));\n\nconst TRAIL = 140;\n\nconst DRIFT_CSS =\n  \"@keyframes effort-slider-drift-a{from{transform:translate3d(-20%,0,0)}to{transform:translate3d(20%,0,0)}}\" +\n  \"@keyframes effort-slider-flow{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate3d(100%,0,0);opacity:0}}\" +\n  \"@keyframes effort-slider-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.6)}}\";\n\nconst stopAt = (index: number, count: number) => (count <= 1 ? 1 : index / (count - 1));\n\nconst RESTING = { light: \"#a1a1aa\", dark: \"#3f3f46\", brain: \"#a1a1aa\", line: \"#3f3f46\" };\n\nconst toneFor = (index: number, count: number, tones: Tone[]) => {\n  if (index <= 0 && count > 1) return RESTING;\n  const top = Math.max(1, count - 1);\n  const step = Math.round(((clamp(index, 1, top) - 1) / Math.max(1, top - 1)) * (tones.length - 1));\n  return tones[step];\n};\n\nfunction effortTone(index: number, count: number, theme: EffortSliderTheme = \"aurora\") {\n  return toneFor(index, count, (THEMES[theme] ?? THEMES.aurora).tones);\n}\n\nconst maxGradient = (palette: Palette, count: number, mode: \"light\" | \"dark\") => {\n  const segments = Math.max(1, count - 1);\n  const hot = palette.max[mode];\n  const stops = Array.from({ length: segments }, (_, k) => {\n    const middle = (((k + 0.5) / segments) * 100).toFixed(1);\n    if (k === segments - 1) return `${hot} ${middle}%`;\n    const level = toneFor(k + 1, count, palette.tones);\n    const tone =\n      mode === \"light\" ? `color-mix(in oklab, ${level.light} 80%, ${level.line})` : level.dark;\n    return `color-mix(in oklab, ${tone} 72%, ${hot}) ${middle}%`;\n  });\n  const glow = mode === \"light\" ? palette.max.glowLight : palette.max.glowDark;\n  return `radial-gradient(70px 140% at 100% 50%, ${glow}, transparent), linear-gradient(90deg, ${stops.join(\", \")}, ${hot} 100%)`;\n};\n\nconst leftAt = (fraction: number, inset: number) =>\n  `calc(${inset}px + (100% - ${inset * 2}px) * ${fraction})`;\n\nfunction EffortSlider({\n  levels = DEFAULT_LEVELS,\n  value,\n  defaultValue,\n  onValueChange,\n  recommended,\n  theme = \"aurora\",\n  tags = DEFAULT_TAGS,\n  label = \"Effort\",\n  size = \"default\",\n  disabled = false,\n  className,\n  style,\n  ...props\n}: EffortSliderProps) {\n  const reduceMotion = useReducedMotion();\n  const { height, inset, knob, gap } = SIZES[size];\n  const count = Math.max(1, levels.length);\n  const last = count - 1;\n  const [inner, setInner] = React.useState(() => Math.round(clamp(defaultValue ?? 1, 0, last)));\n  const current = Math.round(clamp(value ?? inner, 0, last));\n  const level = levels[current] ?? \"\";\n  const palette = THEMES[theme] ?? THEMES.aurora;\n  const tone = toneFor(current, count, palette.tones);\n  const maxed = count > 1 && current === last;\n  const tag =\n    recommended !== undefined && Math.round(recommended) === current\n      ? \"Recommended\"\n      : (tags[current] ?? \"\");\n  const particlesRef = React.useRef<HTMLSpanElement | null>(null);\n\n  React.useEffect(() => {\n    const host = particlesRef.current;\n    if (!host || typeof host.getAnimations !== \"function\") return;\n    const rate = 0.5 + stopAt(current, count) * 2.5;\n    for (const animation of host.getAnimations({ subtree: true })) {\n      if (\"animationName\" in animation && animation.animationName === \"effort-slider-flow\") {\n        animation.updatePlaybackRate(rate);\n      }\n    }\n  }, [current, count, reduceMotion]);\n\n  const [start] = React.useState(() => stopAt(current, count));\n  const head = useMotionValue(start);\n  const draggingRef = React.useRef(false);\n  const movedRef = React.useRef(false);\n  const pressXRef = React.useRef(0);\n  const pressIndexRef = React.useRef(0);\n  const targetRef = React.useRef<number | null>(null);\n  const trackRef = React.useRef<HTMLDivElement | null>(null);\n  const fillRef = React.useRef<HTMLDivElement | null>(null);\n  const thumbRef = React.useRef<HTMLDivElement | null>(null);\n  const trailRef = React.useRef<HTMLDivElement | null>(null);\n\n  const commit = React.useCallback(\n    (next: number) => {\n      const index = Math.round(clamp(next, 0, last));\n      if (index === current) return;\n      if (value === undefined) setInner(index);\n      onValueChange?.(index, levels[index] ?? \"\");\n    },\n    [current, last, levels, onValueChange, value],\n  );\n\n  const moveTo = React.useCallback(\n    (fraction: number) => {\n      if (targetRef.current === fraction && head.isAnimating()) return;\n      targetRef.current = fraction;\n      if (reduceMotion) head.jump(fraction);\n      else animate(head, fraction, count > 1 && fraction >= 1 ? SLAM : SNAP);\n    },\n    [count, head, reduceMotion],\n  );\n\n  React.useEffect(() => {\n    if (draggingRef.current) return;\n    moveTo(stopAt(current, count));\n  }, [current, count, moveTo]);\n\n  React.useEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n    let width = track.getBoundingClientRect().width;\n    const fill = fillRef.current;\n    const thumb = thumbRef.current;\n    if (thumb) thumb.style.left = \"0px\";\n    const streak = trailRef.current;\n    const edgeAt = () => inset + clamp(head.get()) * (width - inset * 2);\n    let length = 0;\n    let pace = 0;\n    let side = -1;\n    let lastEdge = edgeAt();\n    let lastTime = 0;\n    let frame = 0;\n    const sweep = (now: number) => {\n      const dt = lastTime ? Math.min(0.05, (now - lastTime) / 1000) : 1 / 60;\n      lastTime = now;\n      const edge = edgeAt();\n      const speed = (edge - lastEdge) / Math.max(dt, 1 / 240);\n      lastEdge = edge;\n      pace += (speed - pace) * Math.min(1, dt * 10);\n      if (Math.abs(pace) > 30) side = pace > 0 ? -1 : 1;\n      const target = Math.min(TRAIL, Math.abs(pace) * 0.1);\n      length += (target - length) * Math.min(1, dt * (target > length ? 18 : 7));\n      if (streak) {\n        streak.style.transform = `translate3d(${edge.toFixed(2)}px, 0, 0) scaleX(${((side * length) / TRAIL).toFixed(3)})`;\n        streak.style.opacity = Math.min(1, length / 36).toFixed(3);\n      }\n      if (length > 0.5 || Math.abs(pace) > 1) {\n        frame = requestAnimationFrame(sweep);\n      } else {\n        frame = 0;\n        lastTime = 0;\n        length = 0;\n        pace = 0;\n        if (streak) streak.style.opacity = \"0\";\n      }\n    };\n    const place = () => {\n      if (!width) return;\n      const edge = edgeAt();\n      if (fill) {\n        fill.style.transform = `translate3d(${(edge - width).toFixed(2)}px, 0, 0)`;\n        fill.style.opacity = clamp((edge - inset) / 10).toFixed(3);\n      }\n      if (thumb) thumb.style.transform = `translate3d(${(edge - knob / 2).toFixed(2)}px, 0, 0)`;\n      if (streak && !frame && !reduceMotion) frame = requestAnimationFrame(sweep);\n    };\n    place();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? null\n        : new ResizeObserver(() => {\n            width = track.getBoundingClientRect().width;\n            place();\n          });\n    observer?.observe(track);\n    const unsubscribe = head.on(\"change\", place);\n    return () => {\n      unsubscribe();\n      observer?.disconnect();\n      cancelAnimationFrame(frame);\n    };\n  }, [head, reduceMotion, inset, knob]);\n\n  const fractionAt = (clientX: number) => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect || rect.width <= inset * 2) return head.get();\n    return clamp((clientX - rect.left - inset) / (rect.width - inset * 2));\n  };\n\n  const nearestStop = (fraction: number) => (count <= 1 ? 0 : Math.round(fraction * last));\n\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (disabled || event.button !== 0) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    event.currentTarget.focus({ preventScroll: true });\n    draggingRef.current = true;\n    movedRef.current = false;\n    pressXRef.current = event.clientX;\n    pressIndexRef.current = nearestStop(fractionAt(event.clientX));\n    moveTo(stopAt(pressIndexRef.current, count));\n  };\n\n  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (!draggingRef.current) return;\n    if (!movedRef.current && Math.abs(event.clientX - pressXRef.current) < 4) return;\n    movedRef.current = true;\n    head.jump(fractionAt(event.clientX));\n  };\n\n  const release = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (!draggingRef.current) return;\n    draggingRef.current = false;\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    const index = movedRef.current ? nearestStop(fractionAt(event.clientX)) : pressIndexRef.current;\n    commit(index);\n    moveTo(stopAt(index, count));\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const keys: Record<string, number> = {\n      ArrowRight: current + 1,\n      ArrowUp: current + 1,\n      ArrowLeft: current - 1,\n      ArrowDown: current - 1,\n      PageUp: current + 1,\n      PageDown: current - 1,\n      Home: 0,\n      End: last,\n    };\n    if (!(event.key in keys)) return;\n    event.preventDefault();\n    commit(keys[event.key]);\n  };\n\n  return (\n    <div\n      data-slot=\"effort-slider\"\n      data-disabled={disabled || undefined}\n      className={cn(\n        \"text-card-foreground w-full max-w-xs rounded-lg border border-transparent p-4 select-none\",\n        \"[background:linear-gradient(var(--effort-surface),var(--effort-surface))_padding-box,linear-gradient(180deg,var(--effort-edge-top),var(--effort-edge-mid)_50%,var(--effort-edge-bottom))_border-box]\",\n        \"[--effort-edge-bottom:color-mix(in_oklab,var(--foreground)_14%,transparent)] [--effort-edge-mid:color-mix(in_oklab,var(--foreground)_8%,transparent)] [--effort-edge-top:color-mix(in_oklab,var(--foreground)_22%,transparent)] [--effort-surface:var(--card)]\",\n        \"dark:[--effort-edge-bottom:color-mix(in_oklab,var(--foreground)_16%,transparent)] dark:[--effort-edge-mid:color-mix(in_oklab,var(--foreground)_9%,transparent)] dark:[--effort-edge-top:color-mix(in_oklab,var(--foreground)_34%,transparent)] dark:[--effort-surface:color-mix(in_oklab,var(--card),var(--foreground)_6%)]\",\n        \"[--effort-fill:color-mix(in_oklab,var(--effort-fill-light)_80%,var(--effort-line))] dark:[--effort-fill:var(--effort-fill-dark)]\",\n        \"[--effort-max:var(--effort-max-light)] dark:[--effort-max:var(--effort-max-dark)]\",\n        disabled && \"opacity-50\",\n        className,\n      )}\n      style={\n        {\n          \"--effort-fill-light\": tone.light,\n          \"--effort-fill-dark\": tone.dark,\n          \"--effort-brain\": tone.brain,\n          \"--effort-line\": tone.line,\n          \"--effort-max-light\": maxGradient(palette, count, \"light\"),\n          \"--effort-max-dark\": maxGradient(palette, count, \"dark\"),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {!reduceMotion && (\n        <style href=\"effort-slider-drift\" precedence=\"default\">\n          {DRIFT_CSS}\n        </style>\n      )}\n      <div className=\"flex items-center justify-between gap-3 text-sm whitespace-nowrap\">\n        <div className=\"flex min-w-0 items-baseline gap-1.5\">\n          {label && <span className=\"text-muted-foreground shrink-0\">{label}</span>}\n          <span className=\"inline-grid\">\n            <AnimatePresence initial={false}>\n              <motion.span\n                key={level}\n                initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: \"0.25em\" }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: \"-0.25em\" }}\n                transition={{ duration: reduceMotion ? 0 : 0.4, ease: [0.32, 0.72, 0, 1] }}\n                className=\"text-[13px] font-medium text-(--effort-line) [grid-area:1/1] dark:text-(--effort-brain)\"\n              >\n                {level}\n              </motion.span>\n            </AnimatePresence>\n          </span>\n        </div>\n        <span className=\"inline-grid shrink-0 justify-items-end\">\n          <AnimatePresence initial={false}>\n            {tag && (\n              <motion.span\n                key={tag}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: reduceMotion ? 0 : 0.2, ease: \"easeOut\" }}\n                className=\"bg-muted text-muted-foreground rounded-md px-1.5 py-0.5 text-xs [grid-area:1/1] dark:bg-[color-mix(in_oklab,var(--card),var(--foreground)_12%)]\"\n              >\n                {tag}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </span>\n      </div>\n\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={label || \"Effort\"}\n        aria-valuemin={0}\n        aria-valuemax={last}\n        aria-valuenow={current}\n        aria-valuetext={level}\n        aria-disabled={disabled || undefined}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={release}\n        onPointerCancel={release}\n        onKeyDown={onKeyDown}\n        className={cn(\n          \"group/effort relative touch-none [contain:layout_style] outline-none\",\n          gap,\n          disabled ? \"pointer-events-none\" : \"cursor-pointer\",\n        )}\n        style={{ height }}\n      >\n        <div className=\"bg-muted absolute inset-0 overflow-hidden rounded-[5px]\">\n          <div aria-hidden className=\"absolute inset-0\">\n            <div\n              ref={fillRef}\n              className=\"absolute inset-y-0 left-0 w-full [mask-image:linear-gradient(90deg,rgb(0_0_0/0.6),rgb(0_0_0/0.6)_calc(100%_-_240px),#000_100%)] will-change-transform\"\n              style={{\n                transform: `translateX(calc(${leftAt(start, inset)} - 100%))`,\n                opacity: start > 0 ? 1 : 0,\n              }}\n            >\n              <span className=\"absolute inset-0 bg-(--effort-fill) transition-[background-color] duration-300\" />\n              <span\n                className={cn(\n                  \"absolute inset-0 bg-(image:--effort-max) transition-opacity duration-300\",\n                  maxed ? \"opacity-100\" : \"opacity-0\",\n                )}\n              />\n              {!reduceMotion && (\n                <span\n                  className=\"absolute inset-y-0 -left-1/2 w-[200%] bg-[linear-gradient(90deg,transparent_20%,color-mix(in_oklab,var(--effort-brain)_14%,transparent)_50%,transparent_80%)] will-change-transform\"\n                  style={{\n                    animation: \"effort-slider-drift-a 6s ease-in-out infinite alternate\",\n                    animationPlayState: current === 0 ? \"paused\" : \"running\",\n                  }}\n                />\n              )}\n              {!reduceMotion && (\n                <span ref={particlesRef} className=\"absolute inset-0\">\n                  {PARTICLES.map((particle, index) => (\n                    <span\n                      key={index}\n                      className=\"absolute inset-0 will-change-transform\"\n                      style={{\n                        animation: `effort-slider-flow 6s linear ${particle.delay}s infinite`,\n                        animationPlayState: current === 0 ? \"paused\" : \"running\",\n                      }}\n                    >\n                      <span\n                        className=\"absolute left-0 rounded-full bg-[color-mix(in_oklab,var(--effort-line)_75%,var(--effort-brain))] shadow-[0_0_4px_var(--effort-brain)] dark:bg-(--effort-brain)\"\n                        style={{\n                          top: `${particle.top}%`,\n                          width: particle.size,\n                          height: particle.size,\n                          animation: `effort-slider-twinkle ${particle.twinkle}s ease-in-out infinite`,\n                        }}\n                      />\n                    </span>\n                  ))}\n                </span>\n              )}\n            </div>\n          </div>\n          <div\n            ref={trailRef}\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-0 left-0 origin-left bg-[linear-gradient(90deg,var(--effort-streak),transparent)] [mask-image:repeating-linear-gradient(180deg,#000_0_4px,rgb(0_0_0/0.35)_4px_8px)] opacity-0 will-change-transform [--effort-streak:color-mix(in_oklab,var(--effort-line)_60%,var(--effort-brain))] dark:[mask-image:repeating-linear-gradient(180deg,#000_0_4px,rgb(0_0_0/0.55)_4px_8px)] dark:[--effort-streak:var(--effort-brain)]\"\n            style={{ width: TRAIL }}\n          />\n          {levels.map((name, index) => {\n            const marked = recommended !== undefined && Math.round(recommended) === index;\n            return (\n              <span\n                key={`${name}-${index}`}\n                aria-hidden\n                className={cn(\n                  \"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full transition-[width,height,background-color] duration-150 ease-out\",\n                  marked ? \"h-[10px] w-[3px]\" : index === 0 ? \"h-1 w-0.5\" : \"h-[7px] w-0.5\",\n                  index < current && current > 0\n                    ? marked\n                      ? \"bg-white/90\"\n                      : \"bg-white/60\"\n                    : marked\n                      ? \"bg-muted-foreground/70\"\n                      : \"bg-muted-foreground/40\",\n                  index === current && \"opacity-0\",\n                )}\n                style={{ left: leftAt(stopAt(index, count), inset) }}\n              />\n            );\n          })}\n        </div>\n        <div\n          ref={thumbRef}\n          aria-hidden\n          className=\"pointer-events-none absolute will-change-transform\"\n          style={{\n            width: knob,\n            height: knob,\n            top: (height - knob) / 2,\n            left: leftAt(start, inset),\n            transform: \"translateX(-50%)\",\n          }}\n        >\n          <span className=\"block size-full\">\n            <BrainKnob />\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nEffortSlider.displayName = \"EffortSlider\";\n\nexport { EffortSlider, BrainKnob, effortTone };\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "addedAt": "2026-10-16"
  },
  "type": "registry:component"
}