Text effects

<section id="text-glow" class="iv-stack iv-u-gap-8">
  <p class="iv-u-m-0 iv-u-max-w-measure">Sample copy for the fixture. <code>.iv-text-glow</code> is two layers of <code>text-shadow</code> around the glyphs: a tight one that thickens the strokes and a wide one that spills onto the surface behind. The colour is the halo token of the theme, so it changes with light and dark.</p>

  <h2 class="iv-text-glow iv-u-m-0" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight)">Voltage in the type</h2>

  <h2 class="iv-text-glow iv-text-glow--pulse iv-u-m-0" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight)">And the same line, breathing</h2>

  <p class="iv-u-m-0 iv-u-max-w-measure">The pulse runs for 2.4&nbsp;seconds and repeats; under <code>prefers-reduced-motion: reduce</code> it stops at the glow itself. In forced colours the shadow is dropped and the heading is plain system text.</p>

  <div class="iv-card iv-texture-mesh">
    <div class="iv-card__body iv-stack iv-u-gap-4 iv-u-py-10">
      <h3 class="iv-text-glow iv-u-m-0" style="font-size: var(--iv-text-3xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight); --iv-text-glow-color: var(--iv-glow-secondary); --iv-text-glow-size: 0.7em">Over a gradient surface</h3>
      <p class="iv-u-m-0 iv-u-max-w-measure">Both <code>--iv-text-glow-color</code> and <code>--iv-text-glow-size</code> are public locals; here the halo is the secondary one and a little wider.</p>
    </div>
  </div>

  <p class="iv-u-m-0 iv-u-max-w-measure iv-u-text-sm iv-u-text-muted">A halo is a finish, not a contrast device: the glyph itself keeps the contrast of the theme, and the glow only adds presence around it.</p>
</section>

.iv-root {
  --iv-text-glow-color: var(--iv-glow-secondary);
  --iv-text-glow-size: 0.7em;
}

<section id="text-outline" class="iv-stack iv-u-gap-8">
  <p class="iv-u-m-0 iv-u-max-w-measure">Sample copy for the fixture. <code>.iv-text-outline</code> draws the letters hollow with the stroke the engine paints around each glyph. Where the property is missing the heading keeps its normal fill: less dramatic, never lost. In forced colours it goes back to plain text as well.</p>

  <h2 class="iv-text-outline iv-u-m-0" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight)">Hollow headline</h2>

  <h2 class="iv-text-outline iv-u-m-0" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight); --iv-text-outline-width: 2px; --iv-text-outline-color: var(--iv-color-primary)">Thicker, in the primary</h2>

  <h3 class="iv-u-m-0">Filled by the link around it</h3>
  <p class="iv-u-m-0 iv-u-max-w-measure">Hover the line below, or reach it with the keyboard: the fill returns while the link that contains it is hovered or focused. The link points back at this fixture and does nothing else.</p>

  <p class="iv-u-m-0"><a href="#text-outline" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight); text-decoration-thickness: 2px; text-underline-offset: 0.12em"><span class="iv-text-outline iv-text-outline--fill">Point at me</span></a></p>

  <p class="iv-u-m-0 iv-u-max-w-measure iv-u-text-sm iv-u-text-muted">An outlined heading is thinner than solid text: keep it large, keep the stroke colour at contrast — the accent of the light theme is a bright green and does not reach it — and never use it for body copy. Below a display size the hairline picks up the colour fringing of subpixel antialiasing.</p>
</section>

.iv-root {
  --iv-text-outline-width: 2px;
  --iv-text-outline-color: var(--iv-color-primary);
}

<section id="text-shimmer" data-iv-component="reveal" class="iv-stack iv-u-gap-8">
  <p class="iv-u-m-0 iv-u-max-w-measure">Sample copy for the fixture. <code>.iv-text-shimmer</code> clips a gradient to the glyphs and moves only its position, so a band of light crosses the line and nothing repaints outside it. Do not combine it with <code>.iv-gradient-text</code>: both own the same background, so pick one. The band is the primary of the theme, not the accent: it replaces the colour of the glyph while it passes, and it has to stay readable the whole way across.</p>

  <h2 class="iv-text-shimmer iv-u-m-0" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight)">A band of light crosses the line</h2>

  <h3 class="iv-u-m-0">Once, when it arrives</h3>
  <p class="iv-u-m-0 iv-u-max-w-measure">The heading below carries <code>--once</code> and <code>data-iv-reveal</code>: it waits, still, until <code>Reveal</code> marks it as in view, runs the band across a single time and stays put. A loop next to running text would compete with the reading.</p>

  <div class="iv-u-py-12" style="min-block-size: 90vh">
    <p class="iv-u-m-0 iv-u-max-w-measure">Filler, so the heading below starts out of view.</p>
  </div>

  <h2 class="iv-text-shimmer iv-text-shimmer--once iv-u-m-0" style="font-size: var(--iv-text-4xl); line-height: var(--iv-leading-tight); letter-spacing: var(--iv-tracking-tight)" data-iv-reveal>One pass, then still</h2>

  <p class="iv-u-m-0 iv-u-max-w-measure iv-u-py-12">Under <code>prefers-reduced-motion: reduce</code> the band is parked off the glyphs, so the line keeps its own colour and its contrast. In forced colours the gradient is dropped entirely.</p>
</section>

// data-iv-component="reveal"
{
  reveal: true,
}