Glass Scene

Backdrop displacement needs one specific compositor, but a plain SVG filter on ordinary content works everywhere. A scene owns a backdrop and any number of lenses, bakes one displacement map — neutral except under each lens — and bends its own content in every modern browser. It activates in the frost engine and stays inert in the refract engine, where the surfaces already bend.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/glass-scene.json

The scene activates in the frost engine, where backdrop displacement is unavailable; the refract engine already bends through the surfaces themselves.

Examples

Default

content you own

bends in any engine

"use client";

import { Glass } from "@/components/ui/glass";
import {
  GlassScene,
  GlassSceneBackdrop,
  GlassSceneLens,
} from "@/components/ui/glass-scene";

export function GlassSceneDemo() {
  return (
    <GlassScene className="w-full max-w-md">
      <GlassSceneBackdrop className="flex flex-col gap-1 rounded-pane border border-border p-10 text-center">
        <p className="font-display text-4xl font-bold tracking-tight">
          content you own
        </p>
        <p className="font-display text-4xl font-bold tracking-tight text-muted-foreground">
          bends in any engine
        </p>
      </GlassSceneBackdrop>
      <GlassSceneLens
        depth={30}
        bevel={32}
        radius={28}
        className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 motion-safe:animate-[vt-float_8s_ease-in-out_infinite_alternate]"
      >
        <Glass
          material="slab"
          className="h-32 w-64 rounded-[1.75rem] shadow-glass-lg [--glass-blur:8px]"
        />
      </GlassSceneLens>
    </GlassScene>
  );
}

API

<GlassSceneLens />

Prop	Type	Default	Description
depth	number	26	Maximum bend at the rim, px.
bevel	number	30	How far the bend reaches inward, px.
curvature	number	1.6	Bevel profile exponent — low is a soft shoulder, high a hard rim.
radius	number	from chrome	Corner radius override for the bend zone.
specular	number	0.35	In-filter glint strength, 0–1.