Chrome Liquid Logo React component
Your word or logotype cast in liquid chrome: the letters puff up like inflated metal, reflect a bright studio with a crisp horizon, ripple as liquid flows across them and around the pointer, in silver, gold, copper or any tint.
About the Chrome Liquid Logo component
Chrome Liquid Logo casts a word or short logotype in molten chrome. The letters puff up as if inflated, reflect a bright photo studio with a crisp horizon line running across the metal, and a slow liquid flow keeps the reflections moving; point at it and ripples spread through the surface.
Tint it silver, gold, copper or any colour, and make it more or less inflated. It's a single WebGL shader that pauses off screen, and screen readers get the text itself.
When to use it
Use it for a bold hero wordmark, album and event titles, fashion and streetwear drops, automotive and audio brands, or Y2K-flavoured campaigns.
Short, heavy words work best — one to eight letters per line in a black or extra-bold weight.
Installation
Add the Chrome Liquid Logo component to your project with the shadcn CLI. It lands in components/chrome-liquid-logo.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/chrome-liquid-logoOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ChromeLiquidLogo /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text The word or short logotype to cast in chrome. Use "\n" for a second line. | string | "LIQUID" |
| font CSS font weight and family for the letters. Heavier fonts take the chrome best. | string | "900 1px 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif" |
| background Background behind the letters. | string | "#0a0a0b" |
| tint Tint of the metal: silver by default; gold, copper or any colour works. | string | "#e9edf5" |
| inflate How puffed up the letters are. | number | 1 |
| speed Speed of the liquid flowing over the surface. | number | 1 |
| interactive Pointer ripples across the metal. | boolean | true |
- text
The word or short logotype to cast in chrome. Use "\n" for a second line.
stringDefault: "LIQUID" - font
CSS font weight and family for the letters. Heavier fonts take the chrome best.
stringDefault: "900 1px 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif" - background
Background behind the letters.
stringDefault: "#0a0a0b" - tint
Tint of the metal: silver by default; gold, copper or any colour works.
stringDefault: "#e9edf5" - inflate
How puffed up the letters are.
numberDefault: 1 - speed
Speed of the liquid flowing over the surface.
numberDefault: 1 - interactive
Pointer ripples across the metal.
booleanDefault: true
npm dependencies
Installed for you by the shadcn CLI.
Chrome Liquid Logo FAQ
- Can I use my own font?
- Yes. font takes a CSS font shorthand with 1px as the size placeholder, e.g. "900 1px 'Your Font', sans-serif"; the letters are re-drawn once your font has loaded.
- Can it be gold or another colour?
- tint multiplies the chrome: "#ffd27a" gives gold, "#f2a07b" copper, and pale blues an icy steel.
- Can I have two lines?
- Yes, put "\n" in the text. Both lines are fitted to the frame.
- What if WebGL isn't available?
- It falls back to the text itself, styled in the tint colour, so the word is never missing. With reduced motion the flow stops but the chrome stays.
