Glass Blob Generator
A morphing glass blob you can drop into any web page as a single HTML tag, plus a playground for tuning it.
Open the playground
The blob is a <glass-blob> custom element built on Three.js. The sphere is deformed in a vertex shader with simplex noise, and its normals are recomputed so reflections and refraction follow the shape.
Playground
The playground (index.html) lets you:
- Shape the blob with sliders, presets and a random seed
- Change the glass: frost, thickness, dispersion and tint
- Put it over an image, or on a transparent background
- Copy the embed code, copy a link that reproduces your settings, or download a PNG
Using the element
Load the script once, then use the tag wherever you want a blob. Give it a height (it is 400px tall and full width by default).
<script type="module" src="https://jbryn.github.io/glass-blob-generator/glass-blob.js"></script>
<glass-blob
image="https://example.com/photo.jpg"
strength="0.5"
color="#ffb38a"
style="height: 480px"
></glass-blob>
| Attribute | Default | What it does |
|---|
image | none | Backdrop image the glass refracts. Omit for a transparent background |
strength | 0.35 | How far the surface is pushed in and out |
frequency | 0.55 | Amount of detail: low is a few big lobes, high is lumpy |
speed | 0.15 | Animation speed, 0 to freeze |
seed | 0 | Picks a different shape |
size | 1 | Scale of the blob inside the element |
roughness | 0 | Frosted glass |
thickness | 0.7 | How strongly the backdrop is refracted |
dispersion | 0 | Chromatic aberration at the edges |
color | #ffffff | Tint |
Things to know:
- A web page can't be refracted, only the
image. Without one the blob shows reflections and tint over whatever is behind the element, and thickness and dispersion have no effect.
- The
image must be served with CORS headers if it lives on another domain.
- The blob leans towards the pointer, pauses while it is off screen, and stops morphing for visitors who prefer reduced motion.
element.toBlob() returns a promise for a PNG of the current frame.
Development
# Install dependencies
npm install
# Run the playground locally
npm run dev
# Build for production (output in dist/)
npm run build
# Preview the production build
npm run preview
The build produces the playground and a standalone dist/glass-blob.js. The embed code shown in the playground points at glass-blob.js next to the page, so it is only valid for a built and deployed copy, not for npm run dev.
Pushing to master deploys the build to GitHub Pages through .github/workflows/deploy.yml.
Built with Three.js and Vite.
