Crucible
A sealed glass vessel of molten-metal spheres that tumble in and settle under a heat glow. Instanced rigid bodies, bloom, pointer stirring, offscreen-paused, and reduced-motion-safe.
r3fpro
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/crucibleManual — install dependencies, then copy the source
npm install three @react-three/fiber @react-three/rapier @react-three/postprocessingProps
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 48 | How many molten spheres are sealed in the vessel. Rendered as a single instanced draw call, so higher counts stay cheap. |
| colors | [string, string] | a warm bronze / molten-amber forge palette | Two hex colors: [metalTint, emissiveCore]. The first is the metallic surface albedo, the second the glowing amber core. |
| intensity | number | 1 | Master brightness for the emissive cores, heat lights, and bloom. 1 = default, push toward 1.5 for a white-hot pour. |
| interactive | boolean | true | Enable pointer stirring (drag to nudge spheres) and click strikes. Automatically disabled on touch / coarse-pointer devices. |
| paused | boolean | false | Freeze the simulation with the spheres in a settled, aesthetic pile. Also forced on when the user prefers reduced motion. |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0 -z-10. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.