01 — Why
Liquid chrome heroes are everywhere and almost nobody ships one.
They're repos you fork.
Every one of them says now replace model.glb with your own. That step is where it dies, because most people do not have a .glb and getting one means Blender, a marketplace, or a licence they did not read. Liquidforge forges the object in your browser from a word, a logo, a PNG or a primitive.
The shader is buried.
Getting a displaced surface to actually read as liquid needs one specific thing — rebuilding the normals from the displaced surface — that almost no tutorial mentions. People copy the code, see a flat gradient blob, and give up. Here the material system is the product, not an implementation detail.
02 — Install
npm install liquidforge threeimport { LiquidHero } from "liquidforge"
<LiquidHero object={{ type: "text", value: "SHIP IT" }} preset="mercury-3" />Two peer dependencies: react and three. No react-three-fiber, no postprocessing stack, no HDRI downloads — the environment is computed in the shader.
03 — Objects
Anything can be the liquid.
Text, an SVG, a raster logo, a parametric shape, or a .glb you already have. All five arrive at the same place — one mesh, tessellated and welded, ready to be displaced. Don't have a model? Search 46,900 open ones and send it straight to the Studio.
text
any font the page can render
shape
six primitives, no assets
svg
your logo, extruded
image
traced to a silhouette
04 — Material
Twelve families. A hundred and eight colourways.
Chrome, oil slick, glass, molten, matte pearl, lacquer, velvet, holographic foil, translucent stone, plasma filaments, your object's own surface, and ferrofluid that spikes toward the cursor. Each family is a different technique rather than a different palette, and each is a palette plus about twenty numbers — data you can edit, not code you have to fork.