Surface Refract Glass

ProNew

A glass panel that bends whatever sits behind it with an SVG displacement filter whose noise drifts slowly.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/surface-refract-glass

Prop	Type	Default	Description
`panel`	`ReactNode`	`-`	Content on the glass panel.
`children`	`ReactNode`	`-`	Background the glass bends.
`strength`	`number`	`36`	Bend strength in px.
`duration`	`number`	`16`	Seconds for the noise to drift one cycle.
`placement`	`"center" \| "start" \| "end"`	`"center"`	Where the panel sits.

The drift animates the noise inside the SVG filter on a small panel and pauses offscreen. Treat it as a hero accent, not a list item.
With prefers-reduced-motion: reduce the noise does not drift; the glass keeps its still bend.
The filter and its SVG are hidden from assistive technology; the panel content is normal text.
Browsers without SVG backdrop filters fall back to plain frosted glass.