Chrome Text

Pro

Liquid chrome text effect: inflated metal letters with sliding glints and sparkles.

textchromemetallicliquid metalheadlinetypographywebgl

Overview

Chrome Text is a React and Tailwind CSS chrome text effect that casts any headline in liquid chrome, in Next.js or any React app, with no dependencies. A distance field turns each glyph into a round metal tube, and a WebGL shader reflects a moving studio off it, so glints slide along polished strokes. The real text stays selectable underneath. Bevel, shine, contrast, light angle, tint and sparkles are props, and the light can follow the pointer. It rebuilds only when the text, font or size changes, sleeps off screen and holds still under reduced motion.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add chrome-text

Usage

Import ChromeText from @/components/wensity/chrome-text and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

1import { ChromeText } from "@/components/wensity/chrome-text";
2
3export default function Example() {
4  return (
5    <ChromeText as="h1" className="text-7xl font-bold tracking-tight">
6      Liquid chrome
7    </ChromeText>
8  );
9}

Props

Prop	Type	Default	Description
`as`	"span" \| "p" \| "div" \| "strong" \| "h1" \| "h2" \| "h3" \| "h4"	"span"	Element rendered around the text. Use h1 or h2 for headlines.
`metal`	"silver" \| "gold" \| "graphite"	"silver"	Polished silver, warm gold, or dark graphite chrome.
`tint`	string	-	Any hex color to tint the chrome with. Overrides metal.
`bevel`	number	0.7	How round the strokes are, from 0.5 for a flat bevel to 2 for fully inflated.
`shine`	number	2	Strength of the moving specular glint, from 0 for none to 2.
`contrast`	number	0.7	Depth of the reflections, from 0 for soft satin to 1 for mirror chrome.
`lightAngle`	number	135	Where the key light sits around the text, in degrees. 135 lights from the top left.
`theme`	"auto" \| "light" \| "dark"	"auto"	Adds a soft contact shadow on light pages. Auto follows the dark class on the html element.
`speed`	number	0	How fast the light drifts across the metal, from 0 for still to 3.
`sparkles`	number	3	Number of star glints twinkling on the edges, from 0 to 6.
`interactive`	boolean	false	The light follows the pointer, so glints slide under the cursor.

Featured in React hero section components and React 3D components.