{
  "name": "dock",
  "title": "Dock",
  "description": "A frosted glass shelf of paper tiles that grow gently toward the pointer while an ember point blooms on the shelf under the closest tile, fading with the same falloff. Everything settles back in one calm ease when the pointer leaves.",
  "category": "cards",
  "install": {
    "command": "npx shadcn@latest add @clow/dock",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "magnification": {
      "type": "number",
      "default": 1.35,
      "min": 1,
      "max": 2.2,
      "step": 0.05,
      "description": "Peak scale of the tile directly under the pointer. 1 turns magnification off."
    },
    "radius": {
      "type": "number",
      "default": 96,
      "min": 40,
      "max": 240,
      "step": 8,
      "description": "Distance in px over which the growth falls off to nothing · wider pulls more neighbors along."
    }
  },
  "agent": {
    "prompt": "Use Dock as a floating launcher shelf: Dock is the glass shelf, each DockIcon a paper tile seating exactly one iconsax icon with color=\"currentColor\" and no size prop (the tile sizes it). The shelf is inline · center it yourself and leave headroom above (tiles rise and scale ~1.35x when magnified), and fix-position it only in your own layout. The ember point under the warmest tile is part of the component; do not add your own active indicators. Give every DockIcon an aria-label; wrap the tile in a real button or link when it must be clickable. Magnification tracks the pointer with a falloff (tune magnification and radius, sane as they are); touch and prefers-reduced-motion skip it entirely and tiles fall back to a plain hover wash. Five to seven tiles reads best.",
    "examples": [
      "<Dock>\n  <DockIcon aria-label=\"Uplink\"><Radio color=\"currentColor\" /></DockIcon>\n  <DockIcon aria-label=\"Traffic\"><Chart2 color=\"currentColor\" /></DockIcon>\n  <DockIcon aria-label=\"Station settings\"><Setting2 color=\"currentColor\" /></DockIcon>\n</Dock>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/dock",
    "markdown": "https://clow.cards/llms/dock.md",
    "registryItem": "https://clow.cards/r/dock.json"
  }
}
prop	type	default
magnification	number	1.35
radius	number	96
Draw

Playground

Examples

Props
