Metallic Text

Install

Props

What It Demonstrates

Mask

Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.

Compositing

Letting the GPU move or fade an element on its own layer without redoing layout or paint.

Follow-through

Parts of an element keep moving and settle slightly after the main motion stops, adding weight.

Idle animation

Subtle motion that plays while an element is just sitting there, waiting to be interacted with.

Loop

An animation that repeats, a set number of times or infinitely.

Related Components

• InlayPro

  A live shader material poured into real letterforms — molten rock, aurora, chrome, embers, tide. The text stays a real text node at transparent, so it is still selectable, searchable and read aloud exactly once while something genuinely animated fills it.

• Specter

  Spectral RGB-split echoes drift off the letters and dissolve into the dark.

• Molten

  Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch, because the glyphs are a coverage field cut by a threshold rather than shapes being moved: two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time, so it stays selectable, searchable, and read correctly aloud while it runs.

• Long Shadow

  Text that casts a long shadow sweeping like a sundial through the hours.

• Redact

  Copy that arrives fully classified under solid bars, then declassifies word by word. Each bar clears its own word and leaves an amethyst edge behind as the only evidence it was ever there.

• Split Flap

  A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed. It is arrived at, with a real hinged half falling away as the next one seats behind it.

Appears In

• React Text Animation Components
• React Clip-Path & Mask Effects