{
  "name": "dvd-bounce",
  "title": "DVD Bounce",
  "description": "The corner-bouncing screensaver on a dark TV screen. A flat logo ricochets off the four walls, flips to a bright new hue on every hit, and celebrates an exact corner landing. Holds text, initials or an image.",
  "category": "effects",
  "install": {
    "command": "npx shadcn@latest add @clow/dvd-bounce",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "children": {
      "type": "text",
      "default": "CLOW",
      "description": "What bounces: a word, initials, or an image."
    },
    "speed": {
      "type": "number",
      "default": 90,
      "min": 20,
      "max": 320,
      "step": 10,
      "description": "Drift speed in px per second."
    },
    "tint": {
      "type": "boolean",
      "default": true,
      "description": "Shift tint on every wall hit."
    },
    "celebrate": {
      "type": "boolean",
      "default": true,
      "description": "Flash the screen on an exact corner landing."
    },
    "paused": {
      "type": "boolean",
      "default": false,
      "description": "Freeze the chip in place."
    }
  },
  "agent": {
    "prompt": "Use DvdBounce as a playful bounded screensaver. Children can be text, initials, or an <img> logo. speed is px/second, tint cycles the Clow palette on each wall hit, celebrate flashes on an exact corner. Give it a sized container; it fills width at a 16:10 ratio. Reduced-motion parks it centered.",
    "examples": [
      "<DvdBounce>CLOW</DvdBounce>",
      "<DvdBounce speed={140}><img src=\"/logo.svg\" alt=\"\" className=\"h-6\" /></DvdBounce>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/dvd-bounce",
    "markdown": "https://clow.cards/llms/dvd-bounce.md",
    "registryItem": "https://clow.cards/r/dvd-bounce.json"
  }
}
prop	type	default
children	text	CLOW
speed	number	90
tint	boolean	true
celebrate	boolean	true
paused	boolean	false
Draw

Playground

Examples

Props
