Components

LiquidGlassRefract

Physically-based glass without WebGL: a circular-arc bevel profile drives an feDisplacementMap, so the rim genuinely inverts edges the way thick glass does (not a magnifying-ramp approximation). Cross-browser SVG filters.

"use client";

import { ChatBubble, IMessageScreen, LiquidGlassRefract } from "imessage-ui";

/**
 * Physically-based SVG refraction: a circular-arc bevel drives a
 * feDisplacementMap, so the rim really inverts edges like thick glass.
 * No WebGL — works in Chrome, Safari and Firefox.
 */
export default function RefractDemo() {
  return (
    <IMessageScreen className="w-full max-w-sm rounded-2xl p-4">
      <LiquidGlassRefract width={300} height={120} radius={28} scale={18} bevel={14}>
        <div className="flex flex-col gap-1 p-3">
          <ChatBubble variant="received" text="the rim bends these bubbles" senderName="Riley" avatar={{ initial: "R", gradient: ["#FF9FB2", "#E0506E"] }} />
          <ChatBubble variant="sent" text="pure SVG filters, cross-browser" />
        </div>
      </LiquidGlassRefract>
    </IMessageScreen>
  );
}

Usage

import { LiquidGlassRefract } from "imessage-ui";

<LiquidGlassRefract width={300} height={120} radius={28}>
  <Content />
</LiquidGlassRefract>

API reference

Prop	Type	Default	Description
width / height*	number	—	Panel size in px.
children*	ReactNode	—	The refracted content.
radius	number	min(w, h) / 2	Corner radius (defaults to a pill).
scale	number	16	Refraction strength in px.
bevel	number	13	Width of the refracting rim band.
ior	number	1.5	Index of refraction (1.5 ≈ glass).
sensitivity	number	3	Higher = gentler displacement.
maxSlope	number	4	Caps the rim slope so edges don't blow out.
chromaticAberration	number	0	Per-channel offset in px; 0 disables.
className / style	string / CSSProperties	—	Passthrough to the panel.