Refraction Glass Container

Pro

Real refraction, where feDisplacementMap warps the actual pixels sitting behind the card instead of blurring them.

css 3d3dglassrefractioncontainerdepthblur

$Refraction Glass Container component preview$

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add refraction-glass-container

Usage

Import RefractionGlassContainer from @/components/wensity/refraction-glass-container and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { RefractionGlassContainer } from "@/components/wensity/refraction-glass-container";
 2
 3export default function Example() {
 4  return (
 5    <RefractionGlassContainer width={420} minHeight={260} distortion={14} blur={14}>
 6      <div className="font-display text-xl font-bold">Bent light, not blur.</div>
 7      <p className="mt-2 text-sm opacity-80">
 8        SVG feDisplacementMap warps every pixel behind this card.
 9      </p>
10    </RefractionGlassContainer>
11  );
12}

Props

Prop	Type	Default	Description
`children`	React.ReactNode	-	Content rendered inside the glass card.
`width`	number \| string	380	Card width.
`minHeight`	number	220	Card minimum height.
`distortion`	number	14	Strength of the refraction warp in pixels.
`blur`	number	14	Backdrop blur strength in pixels.
`padding`	number \| string	24	Inner padding.
`showBlobs`	boolean	true	Render the animated blobs behind the glass.
`blobColors`	[string, string, string]	-	Override blob colours.
`background`	string	-	Background tint behind blobs.