{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-knob-gallery-playful",
  "type": "registry:ui",
  "title": "Playful Knob Kit",
  "description": "Eight authored SVG knob surfaces: pearl, candy, glass, jelly and playful geometry.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/gallery-knob-gallery-core.json"
  ],
  "files": [
    {
      "path": "components/ui/knob-gallery-playful.tsx",
      "content": "/**\n * Source: https://pluginui.com/controls\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\nimport { useId } from \"react\"\nimport {\n  knobAngle,\n  type GalleryKnobDesignProps,\n  type KnobOption,\n} from \"maruaudio/ui/shared/knob-gallery-types\"\n\ntype Material =\n  \"candy\" | \"pearl\" | \"flower\" | \"jelly\" | \"lens\" | \"dent\" | \"spark\" | \"acrylic\"\n\nconst radians = (degrees: number) => (degrees * Math.PI) / 180\nconst point = (radius: number, angle: number) => ({\n  x: 50 + Math.sin(radians(angle)) * radius,\n  y: 50 - Math.cos(radians(angle)) * radius,\n})\n\n/** Transform the geometry, never its lighting coordinate system. */\nfunction radialShape(kind: \"flower\" | \"spark\", angle: number) {\n  const segments = kind === \"flower\" ? 160 : 192\n  return (\n    Array.from({ length: segments }, (_, index) => {\n      const theta = (index * 360) / segments\n      const radius =\n        kind === \"flower\"\n          ? 36 + 4 * Math.cos(radians(theta * 9))\n          : 19 + 22 * Math.pow(Math.abs(Math.cos(radians(theta * 2))), 5)\n      const p = point(radius, theta + angle)\n      return `${index ? \"L\" : \"M\"}${p.x.toFixed(3)} ${p.y.toFixed(3)}`\n    }).join(\" \") + \" Z\"\n  )\n}\n\nfunction ellipsePath(\n  x: number,\n  y: number,\n  rx: number,\n  ry: number,\n  angle: number\n) {\n  const cosine = Math.cos(radians(angle))\n  const sine = Math.sin(radians(angle))\n  return (\n    Array.from({ length: 64 }, (_, index) => {\n      const theta = (index * Math.PI) / 32\n      const ex = rx * Math.cos(theta)\n      const ey = ry * Math.sin(theta)\n      return `${index ? \"L\" : \"M\"}${(x + ex * cosine - ey * sine).toFixed(3)} ${(y + ex * sine + ey * cosine).toFixed(3)}`\n    }).join(\" \") + \" Z\"\n  )\n}\n\nfunction PlayfulArtwork({\n  value,\n  size,\n  accent,\n  light,\n  material,\n}: GalleryKnobDesignProps & { material: Material }) {\n  const id = useId().replace(/:/g, \"\")\n  const fill = (name: string) => `url(#${id}-${name})`\n  const angle = knobAngle(value)\n  const lx = Math.cos(radians(light.azimuth))\n  const ly = Math.sin(radians(light.azimuth))\n  const elevation = Math.max(0, Math.min(90, light.elevation))\n  const offset = 30 * Math.cos(radians(elevation))\n  const intensity = Math.max(0, Math.min(1.5, light.intensity))\n  const highlight = Math.min(1, intensity * 0.8)\n  const source = { x: 50 + lx * offset, y: 50 + ly * offset }\n  const indicator = point(material === \"spark\" ? 31 : 25, angle)\n  const innerIndicator = point(material === \"spark\" ? 24 : 16, angle)\n  const dent = point(22, angle)\n  const contour =\n    material === \"flower\" || material === \"spark\"\n      ? radialShape(material, angle)\n      : undefined\n  const shadowDistance = 2 + Math.cos(radians(elevation)) * 4\n  const bodyColor =\n    material === \"pearl\" ? \"#d2c5ea\" : material === \"jelly\" ? \"#ed84a2\" : accent\n  const surface = contour ? (\n    <path\n      d={contour}\n      fill={fill(\"body\")}\n      stroke={fill(\"edge\")}\n      strokeWidth=\"1.2\"\n    />\n  ) : (\n    <circle\n      cx=\"50\"\n      cy=\"50\"\n      r={material === \"jelly\" ? 36 : 38}\n      fill={fill(\"body\")}\n      stroke={fill(\"edge\")}\n      strokeWidth=\"1.1\"\n    />\n  )\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      style={{ overflow: \"visible\", display: \"block\" }}\n    >\n      <defs>\n        <radialGradient\n          id={`${id}-body`}\n          gradientUnits=\"userSpaceOnUse\"\n          cx={source.x}\n          cy={source.y}\n          r=\"67\"\n        >\n          <stop\n            offset=\"0\"\n            stopColor={material === \"pearl\" ? \"#fff9ed\" : \"#ffffff\"}\n            stopOpacity={\n              material === \"dent\" ? 0.54 * intensity : 0.88 * intensity\n            }\n          />\n          <stop offset=\".32\" stopColor={bodyColor} />\n          <stop offset=\".73\" stopColor={bodyColor} />\n          <stop\n            offset=\"1\"\n            stopColor={material === \"pearl\" ? \"#737194\" : \"#25203d\"}\n          />\n        </radialGradient>\n        <linearGradient\n          id={`${id}-edge`}\n          gradientUnits=\"userSpaceOnUse\"\n          x1={50 + lx * 45}\n          y1={50 + ly * 45}\n          x2={50 - lx * 45}\n          y2={50 - ly * 45}\n        >\n          <stop stopColor=\"#fffef6\" stopOpacity={highlight} />\n          <stop offset=\".46\" stopColor={accent} stopOpacity=\".6\" />\n          <stop offset=\"1\" stopColor=\"#1e182f\" stopOpacity=\".85\" />\n        </linearGradient>\n        <radialGradient\n          id={`${id}-gloss`}\n          gradientUnits=\"userSpaceOnUse\"\n          cx={source.x}\n          cy={source.y}\n          r=\"29\"\n        >\n          <stop stopColor=\"#fff\" stopOpacity={highlight} />\n          <stop offset=\".32\" stopColor=\"#fff\" stopOpacity={highlight * 0.3} />\n          <stop offset=\"1\" stopColor=\"#fff\" stopOpacity=\"0\" />\n        </radialGradient>\n        <radialGradient\n          id={`${id}-glass`}\n          gradientUnits=\"userSpaceOnUse\"\n          cx={source.x}\n          cy={source.y}\n          r=\"62\"\n        >\n          <stop stopColor=\"#fff\" stopOpacity={highlight * 0.7} />\n          <stop offset=\".32\" stopColor={accent} stopOpacity=\".12\" />\n          <stop offset=\".7\" stopColor={accent} stopOpacity=\".36\" />\n          <stop offset=\".88\" stopColor=\"#fff\" stopOpacity={highlight * 0.65} />\n          <stop offset=\"1\" stopColor=\"#251d40\" stopOpacity=\".55\" />\n        </radialGradient>\n        <linearGradient\n          id={`${id}-rainbow`}\n          gradientUnits=\"userSpaceOnUse\"\n          x1={50 + lx * 44}\n          y1={50 + ly * 44}\n          x2={50 - lx * 44}\n          y2={50 - ly * 44}\n        >\n          <stop stopColor=\"#fcffe7\" />\n          <stop offset=\".2\" stopColor=\"#b5ffea\" />\n          <stop offset=\".42\" stopColor=\"#b6b4ff\" />\n          <stop offset=\".62\" stopColor=\"#fbb8dc\" />\n          <stop offset=\".81\" stopColor=\"#ffc789\" />\n          <stop offset=\"1\" stopColor=\"#9eece7\" />\n        </linearGradient>\n        <linearGradient\n          id={`${id}-dent`}\n          gradientUnits=\"userSpaceOnUse\"\n          x1={dent.x + lx * 10}\n          y1={dent.y + ly * 10}\n          x2={dent.x - lx * 10}\n          y2={dent.y - ly * 10}\n        >\n          <stop stopColor=\"#24213e\" stopOpacity={0.56 * intensity} />\n          <stop offset=\".45\" stopColor={accent} stopOpacity=\".6\" />\n          <stop offset=\"1\" stopColor=\"#ffffff\" stopOpacity={0.86 * intensity} />\n        </linearGradient>\n        <filter\n          id={`${id}-shadow`}\n          x=\"-50%\"\n          y=\"-50%\"\n          width=\"200%\"\n          height=\"200%\"\n          colorInterpolationFilters=\"sRGB\"\n        >\n          <feDropShadow\n            dx={-lx * shadowDistance}\n            dy={-ly * shadowDistance}\n            stdDeviation=\"2.2\"\n            floodColor=\"#130e20\"\n            floodOpacity=\".4\"\n          />\n        </filter>\n        <filter id={`${id}-soft`} x=\"-40%\" y=\"-40%\" width=\"180%\" height=\"180%\">\n          <feGaussianBlur stdDeviation=\"1.3\" />\n        </filter>\n        <clipPath id={`${id}-clip`}>\n          {contour ? (\n            <path d={contour} />\n          ) : (\n            <circle cx=\"50\" cy=\"50\" r={material === \"jelly\" ? 36 : 38} />\n          )}\n        </clipPath>\n      </defs>\n\n      {material === \"candy\" && (\n        <>\n          <circle cx=\"50\" cy=\"51\" r=\"40\" fill=\"#24192f\" opacity=\".65\" />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"39.5\"\n            stroke={fill(\"rainbow\")}\n            strokeWidth=\"1.5\"\n          />\n          <g filter={fill(\"shadow\")}>{surface}</g>\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"34\"\n            fill={fill(\"glass\")}\n            stroke=\"#fff\"\n            strokeOpacity=\".22\"\n            strokeWidth=\".7\"\n          />\n          <circle\n            cx={source.x}\n            cy={source.y}\n            r=\"7\"\n            fill=\"#fff\"\n            opacity={highlight * 0.43}\n            filter={fill(\"soft\")}\n          />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"29\"\n            fill=\"none\"\n            stroke={accent}\n            strokeOpacity=\".3\"\n            strokeWidth=\"1\"\n          />\n          <path\n            d={`M ${innerIndicator.x} ${innerIndicator.y} L ${indicator.x} ${indicator.y}`}\n            stroke=\"#fff9ec\"\n            strokeWidth=\"4.6\"\n            strokeLinecap=\"round\"\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"3.2\" fill=\"#fff\" opacity=\".5\" />\n        </>\n      )}\n\n      {material === \"pearl\" && (\n        <>\n          <g filter={fill(\"shadow\")}>{surface}</g>\n          <circle cx=\"50\" cy=\"50\" r=\"37\" fill={fill(\"rainbow\")} opacity=\".18\" />\n          <circle cx=\"50\" cy=\"50\" r=\"37\" fill={fill(\"gloss\")} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"34\"\n            stroke=\"#fff9e9\"\n            strokeOpacity=\".27\"\n            strokeWidth=\".6\"\n          />\n          <path\n            d={`M ${point(16, angle).x} ${point(16, angle).y} L ${point(28, angle).x} ${point(28, angle).y}`}\n            stroke=\"#766588\"\n            strokeOpacity=\".28\"\n            strokeWidth=\"5\"\n            strokeLinecap=\"round\"\n          />\n          <path\n            d={`M ${innerIndicator.x} ${innerIndicator.y} L ${indicator.x} ${indicator.y}`}\n            stroke=\"#43304f\"\n            strokeWidth=\"3.1\"\n            strokeLinecap=\"round\"\n          />\n          <circle\n            cx={source.x}\n            cy={source.y}\n            r=\"3.8\"\n            fill=\"#fffbed\"\n            opacity={highlight * 0.73}\n            filter={fill(\"soft\")}\n          />\n        </>\n      )}\n\n      {material === \"flower\" && (\n        <>\n          <g filter={fill(\"shadow\")}>{surface}</g>\n          <g clipPath={fill(\"clip\")}>\n            {Array.from({ length: 9 }, (_, index) => {\n              const p = point(34, angle + index * 40)\n              return (\n                <circle\n                  key={index}\n                  cx={p.x}\n                  cy={p.y}\n                  r=\"7.1\"\n                  fill={fill(\"gloss\")}\n                  stroke={fill(\"edge\")}\n                  strokeWidth=\".65\"\n                />\n              )\n            })}\n          </g>\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"27\"\n            fill={fill(\"body\")}\n            stroke={fill(\"edge\")}\n            strokeWidth=\"1.2\"\n          />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"23\"\n            stroke=\"#fff\"\n            strokeOpacity=\".18\"\n            strokeWidth=\".7\"\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"22\" fill={fill(\"gloss\")} opacity=\".45\" />\n          <circle\n            cx={point(17, angle).x}\n            cy={point(17, angle).y}\n            r=\"3.6\"\n            fill=\"#352943\"\n          />\n          <circle\n            cx={point(17, angle).x + lx * 0.7}\n            cy={point(17, angle).y + ly * 0.7}\n            r=\"1.6\"\n            fill=\"#fff\"\n            opacity=\".76\"\n          />\n        </>\n      )}\n\n      {material === \"jelly\" && (\n        <>\n          <circle\n            cx=\"50\"\n            cy=\"52\"\n            r=\"38\"\n            fill=\"#402039\"\n            opacity=\".32\"\n            filter={fill(\"soft\")}\n          />\n          <g filter={fill(\"shadow\")}>{surface}</g>\n          <circle cx=\"50\" cy=\"50\" r=\"35\" fill={fill(\"glass\")} />\n          <circle cx=\"50\" cy=\"50\" r=\"30\" fill={fill(\"gloss\")} />\n          <path\n            d={ellipsePath(source.x, source.y, 9, 4, light.azimuth + 90)}\n            fill=\"#fff4f0\"\n            opacity={highlight * 0.58}\n          />\n          <path\n            d={ellipsePath(\n              50 - lx * 24,\n              50 - ly * 24,\n              11,\n              2.6,\n              light.azimuth + 90\n            )}\n            fill=\"#ffbeca\"\n            opacity=\".35\"\n          />\n          {Array.from({ length: 7 }, (_, i) => {\n            const p = point(20 + (i % 3) * 4, i * 137.5 + angle)\n            return (\n              <circle\n                key={i}\n                cx={p.x}\n                cy={p.y}\n                r={i % 2 ? 0.8 : 1.2}\n                fill=\"#ffecda\"\n                opacity=\".28\"\n              />\n            )\n          })}\n          <circle cx={indicator.x} cy={indicator.y} r=\"4.3\" fill=\"#512840\" />\n          <circle cx={indicator.x} cy={indicator.y} r=\"2.8\" fill=\"#fff4d8\" />\n        </>\n      )}\n\n      {material === \"lens\" && (\n        <>\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"40\"\n            fill=\"#171521\"\n            stroke=\"#727180\"\n            strokeWidth=\".6\"\n            filter={fill(\"shadow\")}\n          />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"37\"\n            fill={fill(\"rainbow\")}\n            stroke=\"#fff\"\n            strokeOpacity=\".46\"\n            strokeWidth=\"1\"\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"34\" fill=\"#282037\" opacity=\".22\" />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"31.5\"\n            stroke={fill(\"rainbow\")}\n            strokeWidth=\"2.2\"\n            opacity=\".65\"\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"28\" fill={fill(\"glass\")} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"24\"\n            stroke=\"#fff\"\n            strokeOpacity=\".23\"\n            strokeWidth=\".6\"\n          />\n          <circle\n            cx={50 + lx * 22}\n            cy={50 + ly * 22}\n            r=\"8\"\n            fill=\"#fff\"\n            opacity={highlight * 0.47}\n            filter={fill(\"soft\")}\n          />\n          <path\n            d={`M ${innerIndicator.x} ${innerIndicator.y} L ${indicator.x} ${indicator.y}`}\n            stroke=\"#201c31\"\n            strokeWidth=\"4\"\n            strokeLinecap=\"round\"\n          />\n          <path\n            d={`M ${point(17, angle).x} ${point(17, angle).y} L ${point(24, angle).x} ${point(24, angle).y}`}\n            stroke=\"#fff\"\n            strokeOpacity=\".45\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n          />\n        </>\n      )}\n\n      {material === \"dent\" && (\n        <>\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"40\"\n            fill=\"#201c2a\"\n            filter={fill(\"shadow\")}\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"38.7\" fill={fill(\"rainbow\")} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"37\"\n            fill={fill(\"body\")}\n            stroke={fill(\"edge\")}\n            strokeWidth=\".8\"\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"35.5\" fill={fill(\"gloss\")} opacity=\".6\" />\n          <path\n            d={ellipsePath(dent.x, dent.y, 6.2, 9.6, angle)}\n            fill={fill(\"dent\")}\n            stroke={fill(\"edge\")}\n            strokeWidth=\".7\"\n          />\n          <circle\n            cx={dent.x - lx * 3}\n            cy={dent.y - ly * 3}\n            r=\"2.2\"\n            fill=\"#fff9e6\"\n            opacity={highlight * 0.66}\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"1.5\" fill=\"#fff\" opacity=\".5\" />\n        </>\n      )}\n\n      {material === \"spark\" && (\n        <>\n          <g filter={fill(\"shadow\")}>{surface}</g>\n          <path\n            d={radialShape(\"spark\", angle)}\n            fill={fill(\"rainbow\")}\n            opacity=\".26\"\n          />\n          <path d={radialShape(\"spark\", angle)} fill={fill(\"gloss\")} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"14.2\"\n            fill={fill(\"glass\")}\n            stroke={fill(\"edge\")}\n            strokeWidth=\".7\"\n          />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"9\"\n            fill={fill(\"body\")}\n            stroke=\"#fff\"\n            strokeOpacity=\".22\"\n          />\n          <path\n            d={`M ${innerIndicator.x} ${innerIndicator.y} L ${indicator.x} ${indicator.y}`}\n            stroke=\"#fff9e9\"\n            strokeWidth=\"3.5\"\n            strokeLinecap=\"round\"\n          />\n          <circle\n            cx={source.x * 0.45 + 27.5}\n            cy={source.y * 0.45 + 27.5}\n            r=\"3\"\n            fill=\"#fff\"\n            opacity={highlight * 0.63}\n          />\n        </>\n      )}\n\n      {material === \"acrylic\" && (\n        <>\n          <circle\n            cx=\"50\"\n            cy=\"54\"\n            r=\"39\"\n            fill=\"#251e39\"\n            opacity=\".5\"\n            filter={fill(\"shadow\")}\n          />\n          <circle\n            cx=\"50\"\n            cy=\"53\"\n            r=\"38\"\n            fill={accent}\n            fillOpacity=\".38\"\n            stroke={fill(\"edge\")}\n            strokeWidth=\"1.4\"\n          />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"38\"\n            fill={fill(\"glass\")}\n            stroke={fill(\"edge\")}\n            strokeWidth=\"1.2\"\n          />\n          <circle\n            cx=\"50\"\n            cy=\"48\"\n            r=\"31\"\n            fill={accent}\n            fillOpacity=\".22\"\n            stroke={fill(\"edge\")}\n            strokeWidth=\"1.2\"\n          />\n          <circle\n            cx=\"50\"\n            cy=\"46\"\n            r=\"26\"\n            fill={fill(\"glass\")}\n            stroke=\"#fff\"\n            strokeOpacity=\".36\"\n            strokeWidth=\".7\"\n          />\n          <circle cx=\"50\" cy=\"46\" r=\"18\" fill={fill(\"rainbow\")} opacity=\".14\" />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"6.6\"\n            fill=\"#534465\"\n            opacity=\".55\"\n            stroke={fill(\"edge\")}\n            strokeWidth=\".7\"\n          />\n          <circle cx=\"50\" cy=\"50\" r=\"3.5\" fill={accent} fillOpacity=\".6\" />\n          <path\n            d={`M ${point(17, angle).x} ${point(17, angle).y} L ${point(29, angle).x} ${point(29, angle).y}`}\n            stroke=\"#202033\"\n            strokeWidth=\"4.2\"\n            strokeLinecap=\"round\"\n          />\n          <path\n            d={`M ${point(17, angle).x} ${point(17, angle).y} L ${point(29, angle).x} ${point(29, angle).y}`}\n            stroke=\"#e9fff4\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          />\n        </>\n      )}\n    </svg>\n  )\n}\n\nconst Candy = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"candy\" />\n)\nconst Pearl = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"pearl\" />\n)\nconst Flower = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"flower\" />\n)\nconst Jelly = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"jelly\" />\n)\nconst Lens = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"lens\" />\n)\nconst Dent = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"dent\" />\n)\nconst Spark = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"spark\" />\n)\nconst Acrylic = (props: GalleryKnobDesignProps) => (\n  <PlayfulArtwork {...props} material=\"acrylic\" />\n)\n\nexport const PLAYFUL_CANDY_OPTION: KnobOption = {\n  id: \"playful-candy\",\n  name: \"Candy glass\",\n  family: \"Playful\",\n  technique: \"SVG translucent glaze\",\n  description:\n    \"A jewel-bright glass sweet with a milky pointer and fine spectral rim.\",\n  Design: Candy,\n}\n\nexport const PLAYFUL_PEARL_OPTION: KnobOption = {\n  id: \"playful-pearl\",\n  name: \"Inflated pearl\",\n  family: \"Playful\",\n  technique: \"SVG soft specular shading\",\n  description:\n    \"Warm porcelain highlights, a lavender shadow and a quiet etched pointer.\",\n  Design: Pearl,\n}\n\nexport const PLAYFUL_FLOWER_OPTION: KnobOption = {\n  id: \"playful-flower\",\n  name: \"Scalloped flower\",\n  family: \"Playful\",\n  technique: \"SVG rotating contour\",\n  description:\n    \"Nine tactile petals surround a glazed centre; each petal catches the same room light.\",\n  Design: Flower,\n}\n\nexport const PLAYFUL_JELLY_OPTION: KnobOption = {\n  id: \"playful-jelly\",\n  name: \"Jelly gumdrop\",\n  family: \"Playful\",\n  technique: \"SVG resin and bubbles\",\n  description:\n    \"Squishy rose jelly with a broad wet reflection, tiny inclusions and a cream dot.\",\n  Design: Jelly,\n}\n\nexport const PLAYFUL_LENS_OPTION: KnobOption = {\n  id: \"playful-lens\",\n  name: \"Iridescent lens\",\n  family: \"Playful\",\n  technique: \"SVG spectral coating\",\n  description:\n    \"An opalescent optical lens with concentric polished rings in a dark housing.\",\n  Design: Lens,\n}\n\nexport const PLAYFUL_DENT_OPTION: KnobOption = {\n  id: \"playful-dent\",\n  name: \"Enamel thumbprint\",\n  family: \"Playful\",\n  technique: \"SVG concave lighting\",\n  description:\n    \"A lacquered disc with a real moving finger recess; its dark lip faces the light.\",\n  Design: Dent,\n}\n\nexport const PLAYFUL_SPARK_OPTION: KnobOption = {\n  id: \"playful-spark\",\n  name: \"Four-point sparkle\",\n  family: \"Playful\",\n  technique: \"SVG sculpted silhouette\",\n  description:\n    \"A soft four-point star turns under fixed studio light, with a bright directional tip.\",\n  Design: Spark,\n}\n\nexport const PLAYFUL_ACRYLIC_OPTION: KnobOption = {\n  id: \"playful-acrylic\",\n  name: \"Stacked acrylic\",\n  family: \"Playful\",\n  technique: \"SVG layered transparency\",\n  description:\n    \"Three translucent discs expose a central spindle and a suspended mint pointer.\",\n  Design: Acrylic,\n}\n\nexport const PLAYFUL_OPTIONS: KnobOption[] = [\n  PLAYFUL_CANDY_OPTION,\n  PLAYFUL_PEARL_OPTION,\n  PLAYFUL_FLOWER_OPTION,\n  PLAYFUL_JELLY_OPTION,\n  PLAYFUL_LENS_OPTION,\n  PLAYFUL_DENT_OPTION,\n  PLAYFUL_SPARK_OPTION,\n  PLAYFUL_ACRYLIC_OPTION,\n]\n",
      "type": "registry:component",
      "target": "@ui/knob-gallery-playful.tsx"
    }
  ]
}