Photo wordmark

A huge wordmark filled with a photo, cropped at the bottom and rising out of the crop as it scrolls in.

Behaviour

Fills its width with no measuring: a cqi font size from the character count and --advance.
Scrolling it into view raises the word a little out of the crop and drifts the photo inside the letters.
The glow copy is aria-hidden, so the word is read once.
Reduced motion: static, at its final crop with the photo still.

Props

Prop	Type	Description
text	`string`	The word. One line, sized to fill the width.
src	`string`	The photo inside the letters.
as	`"p" \| "h1" \| "h2" \| "span"`default `"p"`	The text element. A p so a footer does not add an h1.
crop	`number`default `0.3`	Fraction of the glyph height hidden under the bottom edge, 0 to 0.9.
glow	`boolean`default `true`	A blurred copy of the photo behind the word.
container	`RefObject<HTMLElement \| null>`default `the page`	Follow a scrolling box instead of the page.
className	`string`	Font family and tracking. Set [--advance:0.9] for a wider face (average glyph width in em, default 0.75).

Installation

npx shadcn@latest add https://purrfectui.com/r/photo-wordmark.json

How to use

import { PhotoWordmark } from "@/components/ui/photo-wordmark";

<footer className="overflow-hidden">
  <PhotoWordmark text="ARMOUR" src="/field.jpg" className="font-black tracking-tight" />
</footer>

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.