Extended Module

Text & Kinetic Type

Two CSS modules for typographic motion — gleam-text.css for shimmer fills, entrances, and hover interactions; gleam-kinetic-type.css for cinematic display effects like typewriter, stamp, cascade, and per-character wave.

gleam-text.css gleam-kinetic-type.css 34+ effects loops · entrances · hover · per-char 
<!-- gleam-text.css — shimmer loop -->
<h1 class="text-shimmer">Shimmer</h1>

<!-- gleam-text.css — entrance -->
<h2 class="gleam text-focus">Blurs in from fog</h2>

<!-- gleam-kinetic-type.css — cinematic stamp -->
<h1 class="gleam kinetic-type-stamp">BIG TITLE</h1>

<!-- gleam-kinetic-type.css — per-character wave -->
<span class="kinetic-type-wave" style="--delay:0s">W</span>
<span class="kinetic-type-wave" style="--delay:0.1s">A</span>
<span class="kinetic-type-wave" style="--delay:0.2s">V</span>
<span class="kinetic-type-wave" style="--delay:0.3s">E</span>

gleam-text.css — Looping Effects

text-shimmer

Shimmer across text

text-rainbow

Full spectrum color cycle

text-flicker

Neon flicker effect

text-wave

Gentle vertical wave

text-float

Floating drift

gleam-text.css — Entrance Effects — click to replay

text-focus

Blurs in from fog

text-letter-spacing

Expands from compressed

text-zoom-in

Scales in from zero

text-zoom-out

Settles from 1.5× scale

text-reveal-left

Wipes in from the left

text-bounce-in

Bounces down from above

gleam-text.css — Special Effects

text-typewriter

Steps-based reveal with an animated border-right caret.

Hello, this is GLEAM.

<p class="gleam text-typewriter"
   style="--duration:3s">
  Your text here
</p>

text-line-reveal

Each child <span> slides up from a clipped floor. Requires direct child wrappers.

The world moves fast. GLEAM keeps up. 

<p class="gleam text-line-reveal">
  <span style="--delay:0s">Line one</span>
  <span style="--delay:0.15s">Line two</span>
</p>

gleam-text.css — Hover Effects

text-pop-up Hover to pop up
text-glitch Hover for glitch
text-shake Hover to shake
text-contrast Hover to invert

gleam-kinetic-type.css — Cinematic Entrances — click to replay

kinetic-type-write + kinetic-type-cursor

Animation that writes itself.

kinetic-type-stamp

STAMP

kinetic-type-cascade

Cascades in from below

kinetic-type-bounce-in (per character)

B O U N C E

gleam-kinetic-type.css — Looping

kinetic-type-wave (per character, looping)

W A V E 

<!-- Apply kinetic-type-wave per character with staggered --delay -->
<h1 style="display:flex;gap:0.04em">
  <span class="kinetic-type-wave" style="display:inline-block;--delay:0.0s">W</span>
  <span class="kinetic-type-wave" style="display:inline-block;--delay:0.1s">A</span>
  <span class="kinetic-type-wave" style="display:inline-block;--delay:0.2s">V</span>
  <span class="kinetic-type-wave" style="display:inline-block;--delay:0.3s">E</span>
</h1>