Hi all. I made 000h, an open-source (MIT) library of 172 React components with organic shapes and living motion. A handful of them are three.js scenes, and I’d love feedback from people who know three.js far better than I do.
Live: 000h by Cojeev
Source: GitHub - luv-jeri/cojeev-ui: Warm, expressive React components with considered motion. MIT licensed shadcn registry and Fumadocs documentation. · GitHub
The three.js parts (three 0.185.1, imported only when a canvas mounts)
- Shape Scene (Shape scene · 000h by Cojeev): the library’s 2D shapes (stars, blobs, hearts, crescents) come in through SVGLoader, are extruded with ExtrudeGeometry and given creased normals, then lit with PCF shadows and ACES filmic tone mapping. A button changes the shapes.
- Glass Sculpture (Glass sculpture · 000h by Cojeev): a glass material with refraction, frost, thickness and dispersion.
- Flow Sculpture (Flow sculpture · 000h by Cojeev): a velocity field that the pointer stirs drives the distortion.
- Particle Sculpture (Particle sculpture · 000h by Cojeev): particles sampled from the sculpture’s surface, held on springs. The pointer scatters them and they settle back.
No remote textures or scene assets. Everything is built in code.
Living on a page full of other components
- low-power WebGLRenderer, and no rendering while offscreen or in a hidden tab
- reduced motion gives a still frame
- a fallback when WebGL is missing; every geometry, material, texture and render target is disposed, and the context is released on unmount
Install one: npx shadcn@latest add https://cojeev.com/ui/r/shape-scene.json
Sanjay Kumar · https://hellosanjay.com · luv-jeri (Sanjay Kumar Gautam) · GitHub