About
Impact-fracture hero built from real shattered glass. Sixteen independent fragments per breakpoint react to the cursor with 3D tilt, parallax and specular light. The title is masked into each shard — physically broken across the pane. Fully responsive, zero animation deps.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Broken by Design — Shattered Glass Hero to your project and fits it to your theme.
Code
How Broken by Design — Shattered Glass Hero is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import BrokenByDesign from '@/components/ui/broken-by-design'
export default function BrokenByDesignDemo() {
return <BrokenByDesign />
}














