Cullet
Liquid-glass surface primitive: backdrop blur plus an SVG feDisplacementMap generated from the element's own size — edge-weighted refraction with a per-channel prismatic split, a cyan/magenta chromatic rim, a pointer-leaning specular highlight and a surface-tension wobble. Render it as a pill, rounded tile, circle, button or link; CulletLens is a pointer-following magnifier with idle drift and keyboard walking. Refraction renders in Chromium; Safari and Firefox fall back to frosted blur + rim.
csspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/culletProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content floated on the glass — a label, an icon, a whole card. | |
| as | "div" | "button" | "a" | "span" | "section" | "article" | "figure" | "li" | "div" | Element to render. Keyboard behaviour and roles come from it: "button" is a native button, "a" a link (pass href). |
| shape | CulletShape | "pill" | Silhouette: fully rounded pill, a soft rounded rect, or a circle (forced 1:1). |
| strength | number | 1 | Refraction strength multiplier — how far the rim bends what is behind it. 0 disables bending. |
| blur | number | 2 | Backdrop blur, in px. Liquid glass stays mostly clear; raise for frost. |
| tint | string | "rgba(255,255,255,0.06)" | Fill colour laid over the refracted backdrop (any CSS colour; keep alpha low). |
| chromatic | number | 1 | Chromatic rim + channel-split intensity, 0–2. |
| bezel | number | 0.6 | Width of the refracting bezel as a fraction of the shorter half-side, 0.1–1. |
| wobble | boolean | true | Surface-tension wobble on hover, press, pointer motion and resize. Ignored under reduced motion. |
| refraction | CulletRefraction | "auto" | SVG displacement mode. "auto" enables it only where it renders (Blink); Safari and Firefox fall back to blur + rim. |
| href | string | Link target when as="a". | |
| target | string | Link target window when as="a". | |
| rel | string | Link rel when as="a". | |
| type | "button" | "submit" | "reset" | "button" | Button type when as="button". |
| disabled | boolean | Disables the button when as="button". | |
| ref | React.Ref<CulletHandle> | Imperative handle — see CulletHandle. | |
Also accepts all props of Omit<React.HTMLAttributes<HTMLElement>, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.