StellarUI

<stellar-text-mask>

Applies an image fill to slotted text using background clip.

Properties

Component

Example

Preview

Text style is authored on the host. Keep masked content as direct text or light-DOM markup.

LOVE WHAT YOU CREATE

Markup

Copy

<stellar-text-mask
  image="https://picsum.photos/512"
  style="font-family:var(--font-family-display), 'Fira Sans', sans-serif;font-size:clamp(2rem,8vw,4.25rem);font-weight:900;line-height:1.05;text-transform:uppercase;letter-spacing:0.03em;--brightness:90%;--contrast:70%;"
>
  LOVE WHAT YOU CREATE
</stellar-text-mask>

API

Complete props, events, slots, and implementation notes for the shipped text mask.

Props

Prop	Type	Default	Notes
`image`	`string`	`''`
`fixed`	`boolean`	`false`

Events

Event	Source	Notes

Slots

Slot	Notes
default	Text and inline content to render with clipped image fill.

Notes

The public tag is `stellar-text-mask`, matching the shipped text-mask behavior on the reset naming surface.
It masks all slotted text using the host background image and `background-clip: text`, so typography is authored directly on the component.
`image` and `fixed` are the only element props. Visual tuning is done with CSS custom properties: `--brightness`, `--contrast`, `--grayscale`, and `--hue-rotate`.
Firefox keeps `background-attachment: scroll` even when `fixed` is set, matching the shipped long-standing bug workaround.
For now, keep masked content as direct text or light-DOM inline markup.