Particle sculpture

A cloud sampled from a real surface yields to the pointer and springs back into form.

React · copy into your project · light and dark themes

Try it

Variant

Every point remembers home.

Move through the points and let them wander. Their tiny springs gently rebuild the original surface.

Static shape preview

Zoom100%

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

Form

Color

Point count

3600

Point size

2.3

Push strength

Push radius

0.4

Spring

Damping

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/particle-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, flow-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 particle sculpture

Adjust count (300–8000), size, strength, radius, spring, damping and swirl. Increase pulse to make the points briefly expand while motion is enabled.
Samples follow the actual triangle surface. Density and renderer resolution are bounded to keep the scene manageable.
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.

ParticleSculptureProps

Prop	Type	Required
`ref`	`React.Ref<HTMLDivElement>`	No
`onRendererChange`	`(state:SculptureRendererState)=>void`	No
`count`	`number`	No
`size`	`number`	No
`strength`	`number`	No
`radius`	`number`	No
`spring`	`number`	No
`damping`	`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

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