Zakaria/FancyWordle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding intro to the app with a skip button

Browse Source
This commit is contained in:
Zakaria
2026-05-21 09:38:27 -04:00
parent 69ed1c78ad
commit 166eacdbfd
6 changed files with 1053 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
CSS/styles.css
+345
View File
@@ -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
+19 -3
View File
@@ -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
+19 -3
View File
@@ -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
+138
View File
@@ -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
+532
View File
@@ -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>