Gold Leaf

Gilds text with real-looking gold leaf: square leaves with visible seams, slight tone differences, fine cracks and missed flecks, and burnished metal with a highlight that follows the pointer. A slow pass of light runs on touch screens, and an optional lay animation settles the leaves on in a staggered sweep. The text stays real, selectable text.

Open in Registry JSON

Installation

$ npx shadcn@latest add @creative-ui/gold-leaf

On an older shadcn CLI, use the URL: npx shadcn@latest add https://ui.krutikraut.com/r/gold-leaf.json

Preview

Water gilding on glass

Aurum

Ex Libris

tooled on the spine, laid by hand

Tone

Leaf size32px

Cracks0.30

Sheen0.85

Usage

Example.tsx

import { GoldLeaf } from "@/components/gold-leaf"

export function Title() {
  return (
    <GoldLeaf as="h1" lay className="font-serif text-8xl">
      Aurum
    </GoldLeaf>
  )
}

// Palladium on a book spine, smaller leaves, well worn.
<GoldLeaf tone="white" leafSize={20} cracks={0.7} seed={3} className="font-serif text-4xl italic">
  Ex Libris
</GoldLeaf>

Props

Prop	Type	Default	Description
as	React.ElementType	"span"	Element to render, such as `h1`.
tone	"yellow" \| "rose" \| "white" \| "copper"	"yellow"	The metal. `yellow` is 23k gold, `white` is palladium.
leafSize	number	32	Edge of one leaf in px. Seams fall every `leafSize`, so on a title 24 to 48 reads well.
cracks	number	0.3	Cracks and missing flecks, 0 to 1. `0` is a fresh, perfect lay. Flecks are see-through, so the ground behind the text shows.
sheen	number	0.85	Strength of the moving highlight, 0 to 1.
interactive	boolean	true	The highlight follows a mouse or pen anywhere on the page, gliding on a spring. On touch screens a slow pass of light runs every few seconds instead. `false` leaves a still highlight.
lay	boolean	false	The first time it scrolls into view, the text starts as bare amber size and the leaves settle on in a staggered sweep. Plays once, and not at all for reduced motion.
layDuration	number	1800	Length of the lay in ms.
seed	number	7	Seed for the leaf layout, cracks and flecks.

Also accepts every span prop, which is spread onto the root element.

Also exported

goldLeafTones: The four metal ramps (dark, mid, light, bright hex stops), for matching borders or rules to the gilt.

Notes

Made for text. The face is background-clip: text, so icons or SVG children are not gilded; set them as text or give them a fill from goldLeafTones.
The text stays real text: it is selectable, copyable and read once by screen readers. The highlight is an aria-hidden, inert copy of the children, so avoid children with ids or state.
The relief is an SVG filter that runs once. The moving highlight is a separate layer, so the pointer only repaints a gradient and never re-runs the filter.
One window pointermove listener per instance. The animation loop stops when the light settles, when the element is off screen and when the tab is hidden.
With reduced motion the gilt is still and fully laid, with the highlight resting at the top left.
To replay the lay, remount the component with a new key.

Dependencies

shadcn/utils