Liquid Gold Metaball Hero Background in JavaScript
Overview
A hero section for React and Next.js with heavy metaballs of liquid gold that pour in, pool at the bottom of the page and keep moving. The cursor is a blob that pulls the others, and a click drops a new one.
The liquid is a metaball field worked out in JavaScript on a typed array of about 320 by 200 pixels, then stretched to fill the screen with a layer of grain on top. Each pixel's normal comes from the gradient of the field, and looks up what a polished surface would reflect in a table baked at the start, so edges round over and catch the light like real metal. There is no shader and no GPU involved.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 071 / Product
Realistic Perfume Bottle Hero Animation with GSAP and Canvas
On Load · Mouse Move · On Click
No. 068 / Backgrounds
GSAP Interactive Canvas Background: Needle Field
Mouse Move · On Click · On Load
No. 038 / Backgrounds
GSAP Interactive Topographic Lines Canvas Background
Mouse Move · On Click · On Load
(02)FAQ
Liquid Gold Metaball Hero Background in JavaScript — FAQ
01Can I change the colours?
Set preset to gold or oxblood, or pass palette with a background, six colours for what the metal reflects, an aura for the glow around it, and a colour for the lamps.
02Does it work with hardware acceleration off?
Yes. It uses no WebGL and does all its drawing in JavaScript on a small canvas. If the frame rate drops, it lowers the size of that canvas by itself, and it stops completely when it leaves the screen.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The field and the physics use no other library. It fills the height of the screen and has its own background.
04What happens with reduced motion?
The liquid is settled into its pool before the first frame and no loop runs. All text is visible, and the button adds a blob and draws the result once.