Components / Motion / Shine Text

Shine Text stable

A light that keeps passing over a headline: a gradient sweep clipped to the letters.

Preview

Cast once. Ship everywhere the web is written.

<p class="k-shine" style="font-size:31px;max-width:430px">Cast once. Ship everywhere the web is written.</p>
/* KATA Shine Text — a sweep of light, clipped to the letters. */
.k-shine{font-family:var(--k-font);font-weight:650;letter-spacing:-.025em;line-height:1.16;background:linear-gradient(100deg, var(--k-ink) 25%, var(--k-zinc-400) 50%, var(--k-ink) 75%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:k-shine-move 3.4s linear infinite}
.k-shine.on-dark{background-image:linear-gradient(100deg, var(--k-zinc-400) 25%, var(--k-on-color) 50%, var(--k-zinc-400) 75%)}
@keyframes k-shine-move{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.k-shine{animation:none;background:none;color:var(--k-ink)}.k-shine.on-dark{color:var(--k-on-color)}}

Installation

CLI

node kata-ui.mjs add shine-text

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Examples

On dark

The night edition, same sweep.

<div style="background:var(--k-zinc-950);color:var(--k-on-color);border-radius:14px;padding:24px">
  <p class="k-shine on-dark" style="font-size:24px">The night edition, same sweep.</p>
</div>

Usage

One headline per page, large. The sweep is a background gradient moving behind clipped text — no script, and it survives copy-paste intact. On dark panels the same part runs light-on-dark (see the example).

Accessibility

The text is real text in a real heading; the gradient is paint. Under prefers-reduced-motion the sweep stops and the headline sits at full contrast — check yours does, because a mid-sweep frame must never be the resting state.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-shineclass
.on-darkclass

Related parts

Accordion Gallery beta

Five scenes in a row; the one you touch opens up and tells its caption.

galleryaccordionexpandpanelshover

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Blur In beta

Words arrive out of focus and sharpen one after another, like eyes adjusting.

blurrevealtextfocusentrance
Previous
Scramble