How GlassBlob works
GlassBlob is an open-source generator for animated WebGL glass blobs. Pick a shape, dial the transparency and motion, choose how it reacts to clicks, and copy a one-line embed that drops into any website — React, Vue, plain HTML, WordPress, Webflow.
The tech
- React Three Fiber + drei — physically-based glass refraction via
MeshTransmissionMaterial - Icosahedron geometry, detail level 18 — avoids pole pinching when deforming
- simplex-noise — two layers (low + high frequency) for organic motion, plus a trail-bias layer keyed off cursor velocity
- Signed distance functions — composite SDFs for laptop/camera/pen/book/Fuji morph targets, sampled by ray-from-origin march
- Two-stage cursor lerp + dead zone + rate-limited rotation — what makes the follow feel alive, not jittery
Why an embed snippet?
The constructor outputs a tiny <script> tag plus a JSON config in a data-glassblob attribute. No npm install, no framework lock-in. The same bundle works wherever you can paste HTML.
For React users, the JSON config plugs straight into the BlobCanvas component from the source repo.