Loading…

Glass Bubble

beta

A draggable glass lens that refracts the content under it, with a specular highlight and chromatic fringing.

Effects & motion
1 file
1 npm package
Accessibility notes
Draws on a canvas

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add glass-bubble

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { GlassBubble } from "@/components/ui/glass-bubble";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Controlled
Disabled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<GlassBubble>

Prop	Type	Default
`bend` Lens curvature, 0-100: how strongly it magnifies and bends.	`number`	`70`
`defaultValue` Starting position (uncontrolled). Defaults to the centre.	`GlassBubbleValue`	`CENTRE`
`disabled` Stops dragging and keyboard nudging.	`boolean`	`false`
`fringe` Chromatic spread at the rim, 0-40.	`number`	`18`
`lens` Which lens to draw. "auto" uses the SVG refraction in Chromium and the blur fallback elsewhere; the others force one (the SVG lens renders as plain glass where it is unsupported).	`GlassBubbleLens`	`"auto"`
`onValueChange` Called with the new position as the bubble is dragged or nudged.	`(value: GlassBubbleValue) => void`	—
`size` Bubble diameter in px, 80-240.	`number`	`132`
`value` Position in percent of travel (controlled).	`GlassBubbleValue`	—
`children` The content under the lens (an image, a gradient, anything).	`ReactNode`	—

Plus every attribute of <div> except defaultValue, onChange.

Accessibility

The bubble is a 2D slider (role="slider", default name "Glass bubble") with aria-valuetext "<x> across, <y> down" in percent of travel. Arrow keys move it 2% (Shift: 6%), mirrored in right-to-left layouts; Home centres it; it has the shared focus ring. Highlight and rim layers are aria-hidden. The refracting lens is an SVG backdrop-filter that only Chromium supports; other engines get a blur-and-saturate bubble instead, and data-lens="svg" | "fallback" on the root reports which. Nothing moves on its own; the shadow transition while held runs on the duration tokens, so reduced motion stops it.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

bend

Lens curvature, 0-100: how strongly it magnifies and bends.

number

70

defaultValue

Starting position (uncontrolled). Defaults to the centre.

GlassBubbleValue

CENTRE

disabled

Stops dragging and keyboard nudging.

boolean

false

fringe

Chromatic spread at the rim, 0-40.

number

18

lens

Which lens to draw. "auto" uses the SVG refraction in Chromium and the blur fallback elsewhere; the others force one (the SVG lens renders as plain glass where it is unsupported).

GlassBubbleLens

"auto"

onValueChange

Called with the new position as the bubble is dragged or nudged.

(value: GlassBubbleValue) => void

—

size

Bubble diameter in px, 80-240.

number

132

value

Position in percent of travel (controlled).

GlassBubbleValue

—

children

The content under the lens (an image, a gradient, anything).

ReactNode

—