Adding intro to the app with a skip button

CSS/styles.css

@@ -48,6 +48,218 @@ body.dark-theme {
   --shadow: 0 24px 80px oklch(8% 0.01 50 / 0.38);
 }
 
+body.intro-active {
+  overflow: hidden;
+}
+
+body.intro-active .app-shell {
+  pointer-events: none;
+  user-select: none;
+}
+
+.intro-overlay {
+  --intro-bg: #111111;
+  --intro-fg: #fafafa;
+  --intro-border: #e5e5e5;
+  --intro-accent: #2f6feb;
+  --intro-tile-empty: #3a3a3c;
+  --intro-tile-wrong: #787c7e;
+  --intro-tile-misplaced: #c9b458;
+  --intro-tile-correct: #6aaa64;
+  --intro-font-mono: ui-monospace, "JetBrains Mono", monospace;
+
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  min-block-size: 100svh;
+  place-items: center;
+  overflow: hidden;
+  background: linear-gradient(180deg, #181818 0%, var(--intro-bg) 58%, #080808 100%);
+  color: var(--intro-fg);
+  font-family: var(--font-body);
+  opacity: 1;
+  perspective: 1200px;
+  transition: opacity 520ms ease, visibility 520ms ease;
+  visibility: visible;
+}
+
+.intro-overlay::before,
+.intro-overlay::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  block-size: 20vh;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.intro-overlay::before {
+  inset-block-start: 0;
+  background: linear-gradient(180deg, rgba(17, 17, 17, 0.85), transparent);
+}
+
+.intro-overlay::after {
+  inset-block-end: 0;
+  background: linear-gradient(0deg, rgba(17, 17, 17, 0.88), transparent);
+}
+
+.intro-overlay.is-dismissing {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.intro-overlay[hidden] {
+  display: none;
+}
+
+.intro-stage {
+  position: relative;
+  display: grid;
+  inline-size: min(1120px, calc(100vw - 32px));
+  block-size: min(640px, calc(100svh - 32px));
+  min-block-size: 420px;
+  place-items: center;
+  transform-style: preserve-3d;
+}
+
+.intro-scanline {
+  position: absolute;
+  inset-inline: 10%;
+  inset-block-start: 50%;
+  z-index: 1;
+  block-size: 1px;
+  background: linear-gradient(90deg, transparent, rgba(250, 250, 250, 0.36), transparent);
+  opacity: 0;
+  transform: translateY(-50%);
+  animation: intro-scan 4.8s ease forwards;
+}
+
+.intro-tiles {
+  --intro-tile-size: clamp(46px, 10vw, 128px);
+  --intro-tile-gap: clamp(6px, 1.4vw, 16px);
+
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: repeat(6, var(--intro-tile-size));
+  gap: var(--intro-tile-gap);
+  transform-origin: 50% 50%;
+  transform-style: preserve-3d;
+  transition: gap 420ms cubic-bezier(0.2, 0.7, 0.15, 1), transform 520ms cubic-bezier(0.2, 0.7, 0.15, 1);
+}
+
+.intro-tile {
+  position: relative;
+  inline-size: var(--intro-tile-size);
+  block-size: var(--intro-tile-size);
+  opacity: 0;
+  transform: translate3d(0, 34px, -180px);
+  transform-style: preserve-3d;
+  animation: intro-tile-enter 520ms cubic-bezier(0.2, 0.7, 0.15, 1) forwards;
+  animation-delay: calc(var(--intro-index) * 56ms);
+}
+
+.intro-letter {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(229, 229, 229, 0.18);
+  background: var(--intro-tile-empty);
+  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
+  color: var(--intro-fg);
+  font-family: var(--font-body);
+  font-size: clamp(28px, 6vw, 78px);
+  font-weight: 900;
+  line-height: 1;
+  text-transform: uppercase;
+  transform-origin: 50% 50%;
+}
+
+.intro-tile.is-flipping .intro-letter {
+  animation: intro-split-flap 260ms cubic-bezier(0.3, 0.7, 0.2, 1);
+}
+
+.intro-tile[data-status="wrong"] .intro-letter {
+  background: var(--intro-tile-wrong);
+}
+
+.intro-tile[data-status="misplaced"] .intro-letter {
+  background: var(--intro-tile-misplaced);
+}
+
+.intro-tile[data-status="correct"] .intro-letter {
+  background: var(--intro-tile-correct);
+}
+
+.intro-tile:nth-child(1) { --intro-index: 0; }
+.intro-tile:nth-child(2) { --intro-index: 1; }
+.intro-tile:nth-child(3) { --intro-index: 2; }
+.intro-tile:nth-child(4) { --intro-index: 3; }
+.intro-tile:nth-child(5) { --intro-index: 4; }
+.intro-tile:nth-child(6) { --intro-index: 5; }
+
+.intro-tiles.is-solved .intro-tile {
+  opacity: 1;
+  animation: intro-logo-cascade 680ms cubic-bezier(0.18, 0.85, 0.22, 1) calc(var(--intro-index) * 76ms) both;
+}
+
+.intro-tiles.is-logo {
+  gap: clamp(3px, 0.7vw, 8px);
+  transform: scale(0.88);
+}
+
+.intro-tiles.is-logo .intro-letter {
+  border-color: rgba(250, 250, 250, 0.28);
+  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.1), 0 0 28px rgba(106, 170, 100, 0.16);
+}
+
+.intro-caption {
+  position: absolute;
+  inset-block-end: clamp(24px, 6vh, 64px);
+  inset-inline: 24px;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  color: rgba(250, 250, 250, 0.62);
+  font-family: var(--intro-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0;
+  animation: intro-caption-cue 4.8s ease forwards;
+}
+
+.intro-skip {
+  position: fixed;
+  inset-block-start: 16px;
+  inset-inline-end: 16px;
+  z-index: 10;
+  min-height: 40px;
+  border: 1px solid rgba(229, 229, 229, 0.22);
+  border-radius: 999px;
+  padding: 0 16px;
+  background: rgba(17, 17, 17, 0.74);
+  color: var(--intro-fg);
+  cursor: pointer;
+  font: 800 0.85rem/1 var(--font-body);
+}
+
+.intro-skip:hover {
+  border-color: rgba(250, 250, 250, 0.5);
+}
+
+.intro-skip:focus-visible {
+  outline: 2px solid var(--intro-accent);
+  outline-offset: 3px;
+}
+
+.intro-overlay.restarting * {
+  animation: none !important;
+}
+
 button,
 a {
   font: inherit;
@@ -800,6 +1012,106 @@ h2 {
   text-align: start;
 }
 
+@keyframes intro-tile-enter {
+  0% {
+    transform: translate3d(0, 34px, -180px);
+    filter: blur(2px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+@keyframes intro-split-flap {
+  0% {
+    transform: rotateX(0deg);
+    filter: brightness(1);
+  }
+
+  49% {
+    transform: rotateX(-88deg);
+    filter: brightness(0.72);
+  }
+
+  50% {
+    transform: rotateX(88deg);
+    filter: brightness(1.12);
+  }
+
+  100% {
+    transform: rotateX(0deg);
+    filter: brightness(1);
+  }
+}
+
+@keyframes intro-logo-cascade {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+    filter: brightness(1);
+  }
+
+  34% {
+    transform: translate3d(0, -22%, 130px) scale(1.18);
+    filter: brightness(1.16);
+  }
+
+  62% {
+    transform: translate3d(0, 4%, 0) scale(0.98);
+    filter: brightness(1.04);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+    filter: brightness(1);
+  }
+}
+
+@keyframes intro-scan {
+  0%,
+  12% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0.2);
+  }
+
+  24% {
+    opacity: 0.75;
+  }
+
+  54% {
+    opacity: 0.22;
+    transform: translateY(-50%) scaleX(1);
+  }
+
+  72%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes intro-caption-cue {
+  0%,
+  18% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  28%,
+  64% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  82%,
+  100% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
 @keyframes shake {
   10%, 90% { transform: translateX(-4%); }
   30%, 70% { transform: translateX(5%); }
@@ -814,6 +1126,39 @@ h2 {
   100% { transform: translateY(0); }
 }
 
+@media (max-width: 720px) {
+  .intro-stage {
+    min-block-size: 420px;
+  }
+
+  .intro-tiles {
+    --intro-tile-size: min(13.5vw, 56px);
+    --intro-tile-gap: 5px;
+  }
+
+  .intro-caption {
+    font-size: 10px;
+  }
+
+  .intro-skip {
+    min-height: 38px;
+    padding-inline: 14px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .intro-overlay,
+  .intro-tiles,
+  .intro-tile,
+  .intro-letter,
+  .intro-scanline,
+  .intro-caption {
+    animation-duration: 1ms !important;
+    animation-delay: 0ms !important;
+    transition-duration: 1ms !important;
+  }
+}
+
 @media (max-width: 780px) {
   .app-shell {
     width: min(100% - 20px, 600px);

fancy-wordle-modern.html

@@ -5,14 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#f7efe6">
   <title>Fancy Wordle</title>
-  <link rel="stylesheet" href="CSS/styles.css">
+  <link rel="stylesheet" href="CSS/styles.css?v=8">
   <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
   <script src="word-data.js?v=5" defer></script>
   <script src="supabase-config.js?v=1" defer></script>
-  <script src="script.js?v=7" defer></script>
+  <script src="script.js?v=8" defer></script>
 </head>
-<body>
+<body class="intro-active">
+  <section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
+    <button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
+    <div class="intro-stage" aria-hidden="true">
+      <div class="intro-scanline"></div>
+      <div class="intro-tiles" id="intro-tiles">
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">Q</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">I</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">N</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">Z</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">A</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">T</span></div>
+      </div>
+    </div>
+    <div class="intro-caption">six letters flip into one answer</div>
+  </section>
+
   <div class="app-shell">
     <header class="topbar" aria-label="Game controls">
       <a class="brand" href="#" aria-label="Restart Fancy Wordle">

index.html

@@ -5,14 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#f7efe6">
   <title>Fancy Wordle</title>
-  <link rel="stylesheet" href="CSS/styles.css">
+  <link rel="stylesheet" href="CSS/styles.css?v=8">
   <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
   <script src="word-data.js?v=5" defer></script>
   <script src="supabase-config.js?v=1" defer></script>
-  <script src="script.js?v=7" defer></script>
+  <script src="script.js?v=8" defer></script>
 </head>
-<body>
+<body class="intro-active">
+  <section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
+    <button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
+    <div class="intro-stage" aria-hidden="true">
+      <div class="intro-scanline"></div>
+      <div class="intro-tiles" id="intro-tiles">
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">Q</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">I</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">N</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">Z</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">A</span></div>
+        <div class="intro-tile" data-status="wrong"><span class="intro-letter">T</span></div>
+      </div>
+    </div>
+    <div class="intro-caption">six letters flip into one answer</div>
+  </section>
+
   <div class="app-shell">
     <header class="topbar" aria-label="Game controls">
       <a class="brand" href="#" aria-label="Restart Fancy Wordle">

script.js

@@ -17,6 +17,9 @@ let authProfile = null
 let leaderboardScope = "hour"
 let latestLeaderboardRows = []
 let lastDefinition = null
+let introDismissed = false
+let pendingInteractionStart = false
+let introTimers = []
 
 const WORD_LENGTH = 5
 const MAX_GUESSES = 6
@@ -26,6 +29,25 @@ const STATS_KEY = "fancy-wordle-stats-v2"
 const LOCAL_ROUND_KEY = "fancy-wordle-hourly-round-v1"
 const PLAY_INTERVAL_MS = 60 * 60 * 1000
 const GUESS_TIMEOUT_MS = 10000
+const INTRO_DURATION_MS = 5200
+const INTRO_LETTER_SETS = [
+  ["D", "E", "S", "I", "G", "N"],
+  ["C", "A", "M", "E", "R", "A"],
+  ["A", "S", "P", "E", "C", "T"],
+  ["W", "O", "R", "D", "L", "E"]
+]
+const INTRO_STATUS_SETS = [
+  ["wrong", "wrong", "wrong", "wrong", "wrong", "wrong"],
+  ["wrong", "misplaced", "wrong", "misplaced", "wrong", "wrong"],
+  ["misplaced", "wrong", "misplaced", "wrong", "wrong", "misplaced"],
+  ["correct", "correct", "correct", "correct", "correct", "correct"]
+]
+const INTRO_SOUND_EVENTS = [
+  [280, "flip-start"],
+  [1280, "misplaced-pass"],
+  [2460, "answer-lock"],
+  [3720, "logo-lock"]
+]
 const KEY_ROWS = ["QWERTYUIOP", "ASDFGHJKL", "ZXCVBNM"]
 const FALLBACK_TARGET_WORDS = [
   "about",
@@ -102,6 +124,10 @@ const guessBars = document.getElementById("guess-bars")
 const statsDefinition = document.getElementById("stats-definition")
 const resetStatsButton = document.getElementById("reset-stats")
 const shareResultsButton = document.getElementById("share-results")
+const introOverlay = document.getElementById("intro-overlay")
+const introSkipButton = document.getElementById("intro-skip")
+const introTileRow = document.getElementById("intro-tiles")
+const introTiles = Array.from(document.querySelectorAll(".intro-tile"))
 
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", initializeGame, { once: true })
@@ -113,6 +139,7 @@ async function initializeGame() {
   if (hasInitialized) return
   hasInitialized = true
 
+  initializeIntro()
   createBoard()
   createKeyboard()
   restoreTheme()
@@ -132,6 +159,111 @@ async function initializeGame() {
   await startHourlyRound()
 }
 
+function initializeIntro() {
+  if (!introOverlay || introTiles.length === 0) {
+    introDismissed = true
+    document.body.classList.remove("intro-active")
+    return
+  }
+
+  if (introOverlay.dataset.initialized) return
+  introOverlay.dataset.initialized = "true"
+  introDismissed = false
+  document.body.classList.add("intro-active")
+  introSkipButton?.addEventListener("click", dismissIntro)
+
+  if (prefersReducedMotion()) {
+    setIntroFrame(INTRO_LETTER_SETS.length - 1, false)
+    introTileRow?.classList.add("is-solved", "is-logo")
+    introTimers.push(setTimeout(dismissIntro, 700))
+    return
+  }
+
+  scheduleIntroSequence()
+  introTimers.push(setTimeout(dismissIntro, INTRO_DURATION_MS))
+}
+
+function prefersReducedMotion() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+}
+
+function setIntroTile(tile, letter, status) {
+  const letterElement = tile.querySelector(".intro-letter")
+  tile.dataset.status = status
+  if (letterElement) letterElement.textContent = letter
+}
+
+function flipIntroTile(tile, letter, status, delay) {
+  introTimers.push(setTimeout(() => {
+    tile.classList.add("is-flipping")
+    introTimers.push(setTimeout(() => setIntroTile(tile, letter, status), 130))
+    introTimers.push(setTimeout(() => tile.classList.remove("is-flipping"), 285))
+  }, delay))
+}
+
+function setIntroFrame(frameIndex, animate = true) {
+  introTiles.forEach((tile, index) => {
+    const letter = INTRO_LETTER_SETS[frameIndex][index]
+    const status = INTRO_STATUS_SETS[frameIndex][index]
+    if (animate) {
+      flipIntroTile(tile, letter, status, index * 58)
+      return
+    }
+
+    tile.classList.remove("is-flipping")
+    setIntroTile(tile, letter, status)
+  })
+
+  if (frameIndex === INTRO_LETTER_SETS.length - 1) {
+    introTimers.push(setTimeout(() => introTileRow?.classList.add("is-solved"), 420))
+    introTimers.push(setTimeout(() => introTileRow?.classList.add("is-logo"), 1180))
+  }
+}
+
+function dispatchIntroSoundCue(name) {
+  window.dispatchEvent(new CustomEvent("wordleIntro:soundCue", { detail: { name } }))
+}
+
+function scheduleIntroSequence() {
+  clearIntroTimers()
+  introTileRow?.classList.remove("is-solved", "is-logo")
+  setIntroFrame(0, false)
+
+  const frameTimes = [880, 1720, 2580]
+  frameTimes.forEach((time, index) => {
+    introTimers.push(setTimeout(() => setIntroFrame(index + 1, true), time))
+  })
+
+  INTRO_SOUND_EVENTS.forEach(([time, name]) => {
+    introTimers.push(setTimeout(() => dispatchIntroSoundCue(name), time))
+  })
+}
+
+function clearIntroTimers() {
+  introTimers.forEach(clearTimeout)
+  introTimers = []
+}
+
+function dismissIntro() {
+  if (introDismissed) return
+
+  introDismissed = true
+  clearIntroTimers()
+  setIntroFrame(INTRO_LETTER_SETS.length - 1, false)
+  introTileRow?.classList.add("is-solved", "is-logo")
+  introOverlay?.classList.add("is-dismissing")
+  document.body.classList.remove("intro-active")
+
+  setTimeout(() => {
+    if (introOverlay) introOverlay.hidden = true
+  }, 540)
+
+  if (pendingInteractionStart && !gameFinished) {
+    pendingInteractionStart = false
+    startInteraction()
+  }
+}
+
 async function loadWordLists() {
   targetWords = await loadWordList("targetWords")
 
@@ -755,6 +887,12 @@ async function signOut() {
 }
 
 function startInteraction() {
+  if (!introDismissed) {
+    pendingInteractionStart = true
+    return
+  }
+
+  pendingInteractionStart = false
   stopInteraction()
   document.addEventListener("click", handleMouseClick)
   document.addEventListener("keydown", handleKeyPress)

wordle-intro-5.html

@@ -0,0 +1,532 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>WORDLE Intro</title>
+        <style>
+            :root {
+                --bg: #111111;
+                --surface: #ffffff;
+                --fg: #fafafa;
+                --muted: #6b6b6b;
+                --border: #e5e5e5;
+                --accent: #2f6feb;
+                --tile-empty: #3a3a3c;
+                --tile-wrong: #787c7e;
+                --tile-misplaced: #c9b458;
+                --tile-correct: #6aaa64;
+                --font-display: "Inter", -apple-system, system-ui, sans-serif;
+                --font-body: "Inter", -apple-system, system-ui, sans-serif;
+                --font-mono: ui-monospace, "JetBrains Mono", monospace;
+            }
+
+            * {
+                box-sizing: border-box;
+            }
+
+            html,
+            body {
+                margin: 0;
+                min-height: 100%;
+                background: var(--bg);
+                color: var(--fg);
+                font-family: var(--font-body);
+                overflow: hidden;
+            }
+
+            body {
+                min-height: 100vh;
+                display: grid;
+                place-items: center;
+            }
+
+            .stage {
+                position: relative;
+                inline-size: 100vw;
+                block-size: 100vh;
+                min-block-size: 520px;
+                display: grid;
+                place-items: center;
+                background: linear-gradient(
+                    180deg,
+                    #181818 0%,
+                    #111111 58%,
+                    #080808 100%
+                );
+                perspective: 1200px;
+                isolation: isolate;
+            }
+
+            .stage::before,
+            .stage::after {
+                content: "";
+                position: absolute;
+                inset-inline: 0;
+                block-size: 20vh;
+                z-index: 4;
+                pointer-events: none;
+            }
+
+            .stage::before {
+                inset-block-start: 0;
+                background: linear-gradient(
+                    180deg,
+                    rgba(17, 17, 17, 0.85),
+                    transparent
+                );
+            }
+
+            .stage::after {
+                inset-block-end: 0;
+                background: linear-gradient(
+                    0deg,
+                    rgba(17, 17, 17, 0.88),
+                    transparent
+                );
+            }
+
+            .intro {
+                position: relative;
+                inline-size: min(1120px, calc(100vw - 32px));
+                block-size: min(640px, calc(100vh - 32px));
+                display: grid;
+                place-items: center;
+                transform-style: preserve-3d;
+            }
+
+            .scanline {
+                position: absolute;
+                inset-inline: 10%;
+                inset-block-start: 50%;
+                block-size: 1px;
+                background: linear-gradient(
+                    90deg,
+                    transparent,
+                    rgba(250, 250, 250, 0.36),
+                    transparent
+                );
+                transform: translateY(-50%);
+                opacity: 0;
+                animation: scan 4.8s ease forwards;
+                z-index: 1;
+            }
+
+            .tiles {
+                --tile-size: clamp(46px, 10vw, 128px);
+                --tile-gap: clamp(6px, 1.4vw, 16px);
+                position: relative;
+                display: grid;
+                grid-template-columns: repeat(6, var(--tile-size));
+                gap: var(--tile-gap);
+                transform-style: preserve-3d;
+                transform-origin: 50% 50%;
+                transition:
+                    gap 420ms cubic-bezier(0.2, 0.7, 0.15, 1),
+                    transform 520ms cubic-bezier(0.2, 0.7, 0.15, 1);
+                z-index: 2;
+            }
+
+            .tile {
+                position: relative;
+                inline-size: var(--tile-size);
+                block-size: var(--tile-size);
+                transform-style: preserve-3d;
+                opacity: 0;
+                transform: translate3d(0, 34px, -180px);
+                animation: tileEnter 520ms cubic-bezier(0.2, 0.7, 0.15, 1)
+                    forwards;
+                animation-delay: calc(var(--i) * 56ms);
+            }
+
+            .letter {
+                position: absolute;
+                inset: 0;
+                display: grid;
+                place-items: center;
+                border: 1px solid rgba(229, 229, 229, 0.18);
+                background: var(--tile-empty);
+                color: var(--fg);
+                font-family: var(--font-display);
+                font-size: clamp(28px, 6vw, 78px);
+                font-weight: 700;
+                letter-spacing: 0;
+                line-height: 1;
+                text-transform: uppercase;
+                transform-origin: 50% 50%;
+                box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
+            }
+
+            .tile.is-flipping .letter {
+                animation: splitFlap 260ms cubic-bezier(0.3, 0.7, 0.2, 1);
+            }
+
+            .tile[data-status="wrong"] .letter {
+                background: var(--tile-wrong);
+            }
+            .tile[data-status="misplaced"] .letter {
+                background: var(--tile-misplaced);
+            }
+            .tile[data-status="correct"] .letter {
+                background: var(--tile-correct);
+            }
+
+            .tile:nth-child(1) {
+                --i: 0;
+            }
+            .tile:nth-child(2) {
+                --i: 1;
+            }
+            .tile:nth-child(3) {
+                --i: 2;
+            }
+            .tile:nth-child(4) {
+                --i: 3;
+            }
+            .tile:nth-child(5) {
+                --i: 4;
+            }
+            .tile:nth-child(6) {
+                --i: 5;
+            }
+
+            .tiles.is-solved .tile {
+                opacity: 1;
+                animation: logoCascade 680ms cubic-bezier(0.18, 0.85, 0.22, 1)
+                    calc(var(--i) * 76ms) both;
+            }
+
+            .tiles.is-logo {
+                gap: clamp(3px, 0.7vw, 8px);
+                transform: scale(0.88);
+            }
+
+            .tiles.is-logo .letter {
+                border-color: rgba(250, 250, 250, 0.28);
+                box-shadow:
+                    inset 0 0 0 1px rgba(250, 250, 250, 0.1),
+                    0 0 28px rgba(106, 170, 100, 0.16);
+            }
+
+            .caption {
+                position: absolute;
+                inset-block-end: clamp(24px, 6vh, 64px);
+                inset-inline: 24px;
+                display: flex;
+                justify-content: center;
+                color: rgba(250, 250, 250, 0.62);
+                font-family: var(--font-mono);
+                font-size: 12px;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                z-index: 5;
+                opacity: 0;
+                animation: captionCue 4.8s ease forwards;
+            }
+
+            .replay {
+                position: fixed;
+                inset-block-start: 16px;
+                inset-inline-end: 16px;
+                z-index: 10;
+                border: 1px solid rgba(229, 229, 229, 0.22);
+                border-radius: 8px;
+                padding: 10px 16px;
+                background: rgba(17, 17, 17, 0.74);
+                color: var(--fg);
+                font: 600 14px/1 var(--font-body);
+                cursor: pointer;
+            }
+
+            .replay:focus-visible {
+                outline: 2px solid var(--accent);
+                outline-offset: 3px;
+            }
+
+            .replay:hover {
+                border-color: rgba(250, 250, 250, 0.5);
+            }
+
+            .stage.restarting * {
+                animation: none !important;
+            }
+
+            @keyframes tileEnter {
+                0% {
+                    transform: translate3d(0, 34px, -180px);
+                    filter: blur(2px);
+                    opacity: 0;
+                }
+                100% {
+                    transform: translate3d(0, 0, 0);
+                    filter: blur(0);
+                    opacity: 1;
+                }
+            }
+
+            @keyframes splitFlap {
+                0% {
+                    transform: rotateX(0deg);
+                    filter: brightness(1);
+                }
+                49% {
+                    transform: rotateX(-88deg);
+                    filter: brightness(0.72);
+                }
+                50% {
+                    transform: rotateX(88deg);
+                    filter: brightness(1.12);
+                }
+                100% {
+                    transform: rotateX(0deg);
+                    filter: brightness(1);
+                }
+            }
+
+            @keyframes logoCascade {
+                0% {
+                    transform: translate3d(0, 0, 0) scale(1);
+                    filter: brightness(1);
+                }
+                34% {
+                    transform: translate3d(0, -22%, 130px) scale(1.18);
+                    filter: brightness(1.16);
+                }
+                62% {
+                    transform: translate3d(0, 4%, 0) scale(0.98);
+                    filter: brightness(1.04);
+                }
+                100% {
+                    transform: translate3d(0, 0, 0) scale(1);
+                    filter: brightness(1);
+                }
+            }
+
+            @keyframes scan {
+                0%,
+                12% {
+                    opacity: 0;
+                    transform: translateY(-50%) scaleX(0.2);
+                }
+                24% {
+                    opacity: 0.75;
+                }
+                54% {
+                    opacity: 0.22;
+                    transform: translateY(-50%) scaleX(1);
+                }
+                72%,
+                100% {
+                    opacity: 0;
+                }
+            }
+
+            @keyframes captionCue {
+                0%,
+                18% {
+                    opacity: 0;
+                    transform: translateY(8px);
+                }
+                28%,
+                64% {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+                82%,
+                100% {
+                    opacity: 0;
+                    transform: translateY(-8px);
+                }
+            }
+
+            @media (max-width: 720px) {
+                .stage {
+                    min-block-size: 420px;
+                }
+
+                .tiles {
+                    --tile-size: min(13.5vw, 56px);
+                    --tile-gap: 5px;
+                }
+
+                .caption {
+                    font-size: 10px;
+                }
+                .replay {
+                    padding: 9px 12px;
+                }
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .tiles,
+                .tile,
+                .tile .letter,
+                .scanline,
+                .caption {
+                    animation-duration: 1ms;
+                    animation-delay: 0ms;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <main class="stage" aria-label="Animated Wordle intro">
+            <button class="replay" type="button" aria-label="Replay intro">
+                Replay
+            </button>
+            <div class="intro" aria-hidden="true">
+                <div class="scanline"></div>
+                <div class="tiles" id="tiles">
+                    <div class="tile" data-final="W" data-status="wrong">
+                        <span class="letter">Q</span>
+                    </div>
+                    <div class="tile" data-final="O" data-status="wrong">
+                        <span class="letter">I</span>
+                    </div>
+                    <div class="tile" data-final="R" data-status="wrong">
+                        <span class="letter">N</span>
+                    </div>
+                    <div class="tile" data-final="D" data-status="wrong">
+                        <span class="letter">Z</span>
+                    </div>
+                    <div class="tile" data-final="L" data-status="wrong">
+                        <span class="letter">A</span>
+                    </div>
+                    <div class="tile" data-final="E" data-status="wrong">
+                        <span class="letter">T</span>
+                    </div>
+                </div>
+            </div>
+            <div class="caption">six letters flip into one answer</div>
+        </main>
+
+        <script>
+            const LETTER_SETS = [
+                ["D", "E", "S", "I", "G", "N"],
+                ["C", "A", "M", "E", "R", "A"],
+                ["A", "S", "P", "E", "C", "T"],
+                ["W", "O", "R", "D", "L", "E"],
+            ];
+            const STATUS_SETS = [
+                ["wrong", "wrong", "wrong", "wrong", "wrong", "wrong"],
+                ["wrong", "misplaced", "wrong", "misplaced", "wrong", "wrong"],
+                [
+                    "misplaced",
+                    "wrong",
+                    "misplaced",
+                    "wrong",
+                    "wrong",
+                    "misplaced",
+                ],
+                [
+                    "correct",
+                    "correct",
+                    "correct",
+                    "correct",
+                    "correct",
+                    "correct",
+                ],
+            ];
+            const SOUND_EVENTS = [
+                [280, "flip-start"],
+                [1280, "misplaced-pass"],
+                [2460, "answer-lock"],
+                [3720, "logo-lock"],
+            ];
+
+            const stage = document.querySelector(".stage");
+            const tileRow = document.querySelector(".tiles");
+            const tiles = Array.from(document.querySelectorAll(".tile"));
+            const replay = document.querySelector(".replay");
+            let timers = [];
+
+            function setTile(tile, letter, status) {
+                tile.dataset.status = status;
+                tile.querySelector(".letter").textContent = letter;
+            }
+
+            function flipTile(tile, letter, status, delay) {
+                timers.push(
+                    setTimeout(() => {
+                        tile.classList.add("is-flipping");
+                        timers.push(
+                            setTimeout(
+                                () => setTile(tile, letter, status),
+                                130,
+                            ),
+                        );
+                        timers.push(
+                            setTimeout(
+                                () => tile.classList.remove("is-flipping"),
+                                285,
+                            ),
+                        );
+                    }, delay),
+                );
+            }
+
+            function setFrame(frameIndex, animate = true) {
+                tiles.forEach((tile, index) => {
+                    const letter = LETTER_SETS[frameIndex][index];
+                    const status = STATUS_SETS[frameIndex][index];
+                    if (animate) {
+                        flipTile(tile, letter, status, index * 58);
+                    } else {
+                        tile.classList.remove("is-flipping");
+                        setTile(tile, letter, status);
+                    }
+                });
+                if (frameIndex === LETTER_SETS.length - 1) {
+                    timers.push(
+                        setTimeout(
+                            () => tileRow.classList.add("is-solved"),
+                            420,
+                        ),
+                    );
+                    timers.push(
+                        setTimeout(
+                            () => tileRow.classList.add("is-logo"),
+                            1180,
+                        ),
+                    );
+                }
+            }
+
+            function dispatchSoundCue(name) {
+                window.dispatchEvent(
+                    new CustomEvent("wordleIntro:soundCue", {
+                        detail: { name },
+                    }),
+                );
+            }
+
+            function scheduleSequence() {
+                timers.forEach(clearTimeout);
+                timers = [];
+                tileRow.classList.remove("is-solved", "is-logo");
+                setFrame(0, false);
+                [880, 1720, 2580].forEach((time, index) => {
+                    timers.push(
+                        setTimeout(() => setFrame(index + 1, true), time),
+                    );
+                });
+                SOUND_EVENTS.forEach(([time, name]) => {
+                    timers.push(setTimeout(() => dispatchSoundCue(name), time));
+                });
+            }
+
+            function replayIntro() {
+                stage.classList.add("restarting");
+                scheduleSequence();
+                window.requestAnimationFrame(() => {
+                    window.requestAnimationFrame(() => {
+                        stage.classList.remove("restarting");
+                    });
+                });
+            }
+
+            replay.addEventListener("click", replayIntro);
+            scheduleSequence();
+        </script>
+    </body>
+</html>