Glass sculpture

Translucent geometry bends an original patterned studio through a softly lit glass surface.

React · copy into your project · light and dark themes

Try it

Variant

Light, held in a shape.

A translucent sculpture bends an original studio pattern. Turn it, soften it, change the light.

Static shape preview

Zoom100%

Drag to turn. Arrow keys rotate, + / − zoom, Home resets. Touch: swipe sideways to turn.

Form

Color

Studio backdrop

Refraction

1.45

Frost

0.08

Thickness

1.2

Dispersion

0.55

Follow pointer

Try your own shapeLocal files only: a self-contained GLB, filled SVG, PNG or JPEG. Up to 8 MiB and four million image pixels. The material uses the shape; original textures are replaced.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/glass-sculpture.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes flow-sculpture, particle-sculpture, sculpture-orbit, glyph-sculpture, button, card, icon, input, label, native-select, slider, switch, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/glass-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/flow-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/particle-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/sculpture-orbit.json https://luv-jeri.github.io/cojeev-ui/r/glyph-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/card.json https://luv-jeri.github.io/cojeev-ui/r/icon.json https://luv-jeri.github.io/cojeev-ui/r/input.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/native-select.json https://luv-jeri.github.io/cojeev-ui/r/slider.json https://luv-jeri.github.io/cojeev-ui/r/switch.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using glass sculpture

Adjust refraction, frost, thickness and dispersion. Choose ribbons, petals or tiles for the original procedural studio.
The material refracts its own studio backdrop, not arbitrary page content. pointerTracking is opt-in for this material.
Use the built-in bloom, seed or pebble, or pass validated SculptureGeometry. The shared local-file example accepts bounded GLB, SVG, PNG and JPEG geometry.
Compose with SculptureOrbit for mouse, touch and keyboard view controls. turn, pitch and zoom also accept explicit values.
Use paused to hold movement; speed is bounded to 0–3. onRendererChange reports pending, webgl, fallback or error. A static shape remains if the GPU is unavailable.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

GlassSculptureProps

Prop	Type	Required
`ref`	`React.Ref<HTMLDivElement>`	No
`onRendererChange`	`(state:SculptureRendererState)=>void`	No
`refraction`	`number`	No
`frost`	`number`	No
`thickness`	`number`	No
`dispersion`	`number`	No
`studio`	`SculptureStudio`	No

Accessibility

The canvas is decorative and ignores pointer focus. Keep essential information and actions outside the artwork.
Reduced motion, Motion Off and Flow Off stop automatic and pointer motion. Offscreen or hidden scenes suspend rendering; explicit view controls remain available.

States and appearance

movingpausedorbitcustom-geometryfallbackcontext-lostreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.