Shatter (Solid)

component

Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. The HTML stays interactive. No dependencies.

pnpm dlx shadcn@latest add "https://canvasui.dev/r/shatter-solid.json"

Sign In

Shatter (Solid)

component

Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. The HTML stays interactive. No dependencies.

pnpm dlx shadcn@latest add "https://canvasui.dev/r/shatter-solid.json"

solid-js

components/canvasui/Shatter.tsx

solid-js

components/canvasui/Shatter.tsx