How do I install Masked Heading?

Masked Heading is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/masked-heading. It copies masked-heading.tsx into components/ui and installs motion, clsx, tailwind-merge.

Is Masked Heading free for commercial use?

Masked Heading needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.

Does Masked Heading work with Next.js?

Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.

Can an AI coding agent install Masked Heading?

Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Masked Heading's props and get_install_command returns the exact command.

Masked Heading

Letters are a window onto an image or gradient that pans slowly behind them, and the heading wipes in from the left. Without an image it falls back to a drifting ember and foreground gradient.

Category: Text
Licence: Charcoal UI Pro
Built with: React 19, Tailwind CSS 4, Motion
Dependencies: motion, clsx, tailwind-merge

Examples

Masked Heading

Try a different image or pan direction. Press Replay to see the wipe.

API reference

Prop	Type	Default	Description
`text`	`string`	—
`src`	`string`	—	Image URL seen through the letters. Omit for the gradient.
`speed`	`number`	`14`	Seconds for one full pan.
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`
`wipe`	`boolean`	`true`	Wipe in from the left on mount.
`delay`	`number`	`0`	Seconds before the wipe.
`className`	`string`	—

About Masked Heading

Masked Heading turns each letter into a window onto an image or gradient that pans slowly behind it, and the heading wipes in from the left. Without an image it uses a drifting accent gradient.

Masked Heading is a text animation for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.

When to use Masked Heading

Travel and photography heroes.
Fashion and editorial titles.
Album and film titles.
Brand statements.

How it works

The image is a background clipped to the text, with its position animated in CSS. The heading is real text, so it stays selectable and indexable.

The real text stays in the page for screen readers and search engines; the animated letters are decorative copies marked aria-hidden. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.

Customizing Masked Heading

Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.

The Customize panel next to the preview lets you change text, src, speed, direction live, and the Code tab updates to match, so the snippet you copy already carries your values.

text (string).
src (string): Image URL seen through the letters. Omit for the gradient.
speed (number, default 14): Seconds for one full pan.
direction ("left" | "right" | "up" | "down", default "left").
wipe (boolean, default true): Wipe in from the left on mount.
delay (number, default 0): Seconds before the wipe.

The example on this page

Masked Heading: Try a different image or pan direction. Press Replay to see the wipe.

Goes well with Masked Heading

These text pieces share its tokens and motion language, so they sit together on one page without clashing.

Scramble Text: React scramble text: characters cycle through glyphs before locking in
Rotating Text: React rotating text that rolls between words letter by letter and resizes smoothly
Highlight Text: React highlight text: a marker sweep, hand-drawn underline or scribbled circle on scroll
Text Morph: React text morph: shared letters glide to new spots while the rest blur in and out
Split Flap: A React split-flap display: every cell flips through the drum to its letter

Install Masked Heading

npx shadcn@latest add @charcoal/masked-heading

Masked Heading is part of Charcoal UI Pro. One seat unlocks all 300 Pro components, 107 landing-page sections and 100 full templates, for every personal and client project, with updates included. Add the @charcoal registry once with your access token, then the command above copies masked-heading.tsx into components/ui and installs clsx, tailwind-merge.

You own the file you install: no runtime package, no lock-in, nothing to keep in sync. Change it however your product needs.

See Charcoal UI Pro pricing · Pro setup

Frequently asked questions

How do I install Masked Heading?: Masked Heading is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/masked-heading. It copies masked-heading.tsx into components/ui and installs motion, clsx, tailwind-merge.
Is Masked Heading free for commercial use?: Masked Heading needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.
Does Masked Heading work with Next.js?: Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
Can an AI coding agent install Masked Heading?: Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Masked Heading's props and get_install_command returns the exact command.

Masked Heading as Markdown · llms.txt