Component K · Text Shimmer

GUIDE / TEXT SHIMMER

Overview

A slow, narrow gold highlight sweeps across muted text to draw the eye without shouting. Both gradient ends are the muted colour, so the text is always painted, never clipped to transparent; only the band passes.

When to use

Reverent subheads and kickers, one per section. Never long body copy. The sweep is a single accent, not a wash.

Spec

Stops: var(--muted) 0/42% · var(--gold-soft) 48% · #f7eed1 50% · var(--gold-soft) 52% · var(--muted) 58/100%
Size: background-size: 250% 100%
Motion: hf-shimmer 13s ease-in-out infinite
A11y: reduced-motion: animation none, fill = var(--ivory)

Anti-patterns

No long paragraphs (the sweep blurs legibility over many lines). No accent-coloured base text (gold is for the band only). One shimmer per viewport.

<style>
:root{
  --bg:#0b0a08;--surface:#14110b;--ivory:#efe8d6;--muted:#9c9078;--faint:#5a5446;
  --line:#2a2519;--line-faint:rgba(239,232,214,.08);--gold:#c9a24b;--gold-soft:#e7cd8c;
  --font-display:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
  --font-title:'Libre Caslon Condensed',ui-serif,Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--dur-fast:200ms;--dur-base:400ms;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ivory);font-family:var(--font-body);min-height:100vh;padding:64px 48px}
.stage{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
@media(max-width:768px){.stage{grid-template-columns:1fr;gap:48px}}
.shimmer-stack{display:flex;flex-direction:column;gap:36px}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.display{font-family:var(--font-title);font-size:3rem;line-height:1.05;letter-spacing:.01em;font-weight:400}
.subhead{font-family:var(--font-body);font-size:1.25rem;line-height:1.5;font-weight:300}
.contrast{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.contrast .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.contrast .static-line{font-family:var(--font-title);font-size:3rem;line-height:1.05;letter-spacing:.01em;color:var(--muted);font-weight:400}
@keyframes hf-shimmer {
  0% { background-position: 175% 0; }
  100% { background-position: -75% 0; }
}
.text-shimmer {
  background-image: linear-gradient(
    100deg,
    var(--muted) 0%,
    var(--muted) 42%,
    var(--gold-soft) 48%,
    #f7eed1 50%,
    var(--gold-soft) 52%,
    var(--muted) 58%,
    var(--muted) 100%
  );
  
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hf-shimmer 13s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .text-shimmer {
    animation: none !important;
    -webkit-text-fill-color: var(--ivory);
    color: var(--ivory);
  }
}
</style>

<div class="stage">
  <div class="shimmer-stack">
    <span class="kicker text-shimmer">Private Bank · Est. MMXIV</span>
    <h1 class="display text-shimmer">Capital, kept in confidence.</h1>
    <p class="subhead text-shimmer">A private banking practice for stewards of permanent capital.</p>
  </div>
  <div class="contrast">
    <span class="tag">Static · no sweep</span>
    <span class="static-line">Capital, kept in confidence.</span>
  </div>
</div>