Future UI

Molten Glass

◆ Backgrounds

WebGL2 viscous glass blobs that merge and split with internal caustic light patterns.

backgroundwebglshaderglasslavametaballcausticinteractivemouse

No preview available

WebGL2 Shader ~ Move cursor to attract molten blobs

Controls

View Demo
Demo Hero Content
#f97316
#fbbf24
0.3
0.05
1

Backgrounds / React Component

About Molten Glass

WebGL2 viscous glass blobs that merge and split with internal caustic light patterns.

Category Backgrounds
Framework React + TypeScript
Tags background, webgl, shader, glass, lava, metaball, caustic, interactive, mouse

Install Molten Glass in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/molten-glass.json?key=YOUR_LICENSE_KEY"

Usage example

import { MoltenGlass } from './MoltenGlass';

export default function Example() {
  return (
    <div style={{ width: '100%', height: 400, position: 'relative' }}>
      <MoltenGlass accentColor="#f97316" secondaryColor="#fbbf24" />
    </div>
  );
}