Living Typography

1"use client";
2 
3/* ============================================================
4   LIVING TYPOGRAPHY — modern CSS only. No JavaScript at all.
5   - @property: registers --angle / --hue as REAL typed values,
6     so the browser can animate a gradient's geometry natively.
7   - oklch(): perceptually uniform color ramps.
8   - sibling-index(): per-letter stagger with zero JS (Chrome,
9     progressive — falls back to uniform timing elsewhere).
10   - corner-shape: squircle cards where supported.
11   ============================================================ */
12 
13const WORD = "GENIUS";
14 
15export default function Houdini() {
16  return (
17    <div className="ht-wrap">
18      <style>{`
19        /* typed custom properties — the browser can tween these */
20        @property --ht-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
21        @property --ht-hue   { syntax: "<number>"; inherits: false; initial-value: 0; }
22 
23        .ht-wrap {
24          display: grid; place-items: center; gap: 3rem;
25          min-height: 55svh; padding: 4rem 1.6rem;
26          border-radius: 24px; border: 1px solid rgba(255,255,255,.15);
27          background: #0a0a12; overflow: clip;
28        }
29 
30        /* 1 — conic gradient whose ANGLE animates (impossible pre-@property) */
31        .ht-word { display: flex; gap: .4rem; }
32        .ht-letter {
33          font-size: clamp(4rem, 11vw, 10rem); font-weight: 900; line-height: 1;
34          --ht-angle: 0deg;
35          background: conic-gradient(from var(--ht-angle),
36            oklch(58% .25 295), oklch(78% .14 215),
37            oklch(80% .16 80),  oklch(68% .21 20),
38            oklch(58% .25 295));
39          -webkit-background-clip: text; background-clip: text; color: transparent;
40          animation: ht-rotate 4s linear infinite;
41        }
42        /* per-letter stagger via sibling-index() — no JS, no nth-child forest */
43        @supports (animation-delay: calc(sibling-index() * 1s)) {
44          .ht-letter { animation-delay: calc(sibling-index() * -0.45s); }
45        }
46        @keyframes ht-rotate { to { --ht-angle: 360deg; } }
47 
48        /* 2 — a hue that breathes through oklch's full perceptual wheel */
49        .ht-orb {
50          width: 130px; height: 130px;
51          --ht-hue: 0;
52          background: radial-gradient(circle at 32% 30%,
53            oklch(90% .1 calc(var(--ht-hue) + 60)),
54            oklch(60% .26 var(--ht-hue)) 55%,
55            oklch(30% .15 calc(var(--ht-hue) + 30)));
56          border-radius: 50%;
57          box-shadow: 0 0 80px oklch(60% .26 var(--ht-hue) / .55);
58          animation: ht-breathe 7s linear infinite;
59        }
60        @keyframes ht-breathe { to { --ht-hue: 360; } }
61 
62        /* 3 — squircle cards (corner-shape) with graceful rounded fallback */
63        .ht-cards { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }
64        .ht-card {
65          padding: 1.8rem 2.6rem; font-size: 1.5rem; font-weight: 700; color: #fff;
66          background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
67          border-radius: 18px;
68        }
69        @supports (corner-shape: squircle) {
70          .ht-card { corner-shape: squircle; border-radius: 28px; }
71        }
72 
73        .ht-note { font-size: 1.3rem; color: rgba(255,255,255,.5); text-align: center; max-width: 52ch; }
74      `}</style>
75 
76      <div className="ht-word" aria-label={WORD}>
77        {WORD.split("").map((ch, i) => (
78          <span className="ht-letter" key={i} aria-hidden="true">
79            {ch}
80          </span>
81        ))}
82      </div>
83 
84      <div className="ht-orb" aria-hidden="true" />
85 
86      <div className="ht-cards">
87        <div className="ht-card">@property</div>
88        <div className="ht-card">oklch()</div>
89        <div className="ht-card">sibling-index()</div>
90        <div className="ht-card">corner-shape</div>
91      </div>
92 
93      <p className="ht-note">
94        Open devtools and delete the &lt;style&gt; tag&apos;s animations — every
95        moving thing here is native CSS. The gradient angles and hues are
96        typed custom properties the browser itself interpolates.
97      </p>
98    </div>
99  );
100}
101