Flow sculpture

A rendered form responds to pointer strokes through a fluid distortion field.

React · copy into your project · light and dark themes

Try it

Variant

A little current. A living surface.

Sweep across the sculpture to stir a flowing lens. The current stretches color, then quietly settles.

Static shape preview

Zoom100%

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

Form

Color

Distortion

Color split

0.5

Stir radius

0.14

Settle speed

Swirl

0.35

Respond to 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/flow-sculpture.json

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

Include the complete example

This example also composes glass-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 flow sculpture

Adjust distortion, chromatic separation, spread, settle and swirl. Increase pulse to create a finite keyboard-triggered stir while motion is enabled.
Pointer motion changes an original screen-space velocity field over the sculpture. A quiet or paused setting prevents new impulses.
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.

FlowSculptureProps

Prop	Type	Required
`ref`	`React.Ref<HTMLDivElement>`	No
`onRendererChange`	`(state:SculptureRendererState)=>void`	No
`distortion`	`number`	No
`chromatic`	`number`	No
`spread`	`number`	No
`settle`	`number`	No
`swirl`	`number`	No
`pulse`	`number`	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

movingstirredsettlingpausedcustom-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.