{
  "name": "filament-grid",
  "title": "Filament Grid",
  "description": "A paper grid of filaments that warps toward the pointer like cloth.",
  "category": "backgrounds",
  "install": {
    "command": "npx shadcn@latest add @clow/filament-grid",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "intensity": {
      "type": "select",
      "options": [
        "faint",
        "soft",
        "bold"
      ],
      "default": "soft",
      "description": "How much pigment reaches the paper."
    },
    "speed": {
      "type": "select",
      "options": [
        "slow",
        "base",
        "fast"
      ],
      "default": "base",
      "description": "Base animation rate."
    },
    "interactive": {
      "type": "boolean",
      "default": true,
      "description": "React to pointer over the stage (ripples, pull, bloom)."
    },
    "enabled": {
      "type": "boolean",
      "default": true,
      "description": "Arm or disarm the field without tearing down the stage."
    }
  },
  "agent": {
    "prompt": "Use Filament Grid as a stage background (absolute inset-0). Transparent so light/dark paper shows through. interactive reacts to the pointer over the parent stage without blocking clicks. enabled toggles the field in the playground. One weather per stage.",
    "examples": [
      "<section className=\"relative min-h-[28rem] overflow-hidden rounded-2xl border border-border bg-background\">\n  <FilamentGrid intensity=\"soft\" interactive />\n  <div className=\"relative z-[1] p-10\">…</div>\n</section>"
    ]
  },
  "registryDependencies": [
    "utils",
    "css-color",
    "use-shader-field"
  ],
  "links": {
    "docs": "https://clow.cards/docs/filament-grid",
    "markdown": "https://clow.cards/llms/filament-grid.md",
    "registryItem": "https://clow.cards/r/filament-grid.json"
  }
}
prop	type	default
intensity	faint \| soft \| bold	soft
speed	slow \| base \| fast	base
interactive	boolean	true
enabled	boolean	true
Draw

Playground

Examples

Filament Grid

Props

Filament Grid
