Masked Text

An image or a slow band of light drifts behind the type and is only seen through it. For hero words, campaign titles and posters.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add masked-text

Example

import { MaskedText } from "@/components/galactrex/masked-text";

<MaskedText text="ORBIT" src="/nebula.jpg" className="text-9xl" />

Installs to components/galactrex/masked-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`text`	`string`	—	The text.
`as`	`ElementType`	`"h2"`	Element.
`src`	`string`	—	Image seen through the letters.
`duration`	`number`	`18`	Seconds for one drift.
`className`	`string`	—	Extra classes for the outer element.