272 lines
13 KiB
HTML
272 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Nintendo, 1889 — sprite animation</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+JP:wght@500;700&family=Press+Start+2P&display=swap" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--paper: #f5efe2;
|
|
--paper-2: #ede4d0;
|
|
--ink: #181612;
|
|
--accent: #d92b1c;
|
|
--muted: #6f6a60;
|
|
--serif: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
|
|
--jp: 'Noto Serif JP', serif;
|
|
--mono: 'IBM Plex Mono', ui-monospace, monospace;
|
|
--pixel: 'Press Start 2P', monospace;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; }
|
|
body {
|
|
min-height: 100vh;
|
|
background: #1a1816;
|
|
color: var(--ink);
|
|
font: 14px/1.5 -apple-system, system-ui, sans-serif;
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.stage {
|
|
width: min(1280px, 100%);
|
|
aspect-ratio: 16 / 9;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--paper);
|
|
background-image:
|
|
radial-gradient(rgba(120,90,40,0.06) 1px, transparent 1px),
|
|
radial-gradient(rgba(120,90,40,0.04) 1px, transparent 1px);
|
|
background-size: 4px 4px, 7px 7px;
|
|
background-position: 0 0, 2px 3px;
|
|
box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.05);
|
|
border-radius: 4px;
|
|
}
|
|
.stage::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.05) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* top bar */
|
|
.topbar { position: absolute; top: 0; left: 0; right: 0; padding: 22px 32px; display: flex; justify-content: space-between; align-items: center; font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
|
|
.topbar .slug { display: inline-flex; align-items: center; gap: 10px; }
|
|
.topbar .slug .jp { font-family: var(--jp); font-weight: 700; color: var(--ink); letter-spacing: 0.05em; text-transform: none; font-size: 13px; }
|
|
.topbar .slug .en { color: var(--muted); }
|
|
.topbar .progress { display: inline-flex; align-items: center; gap: 12px; }
|
|
.topbar .progress .dots { display: inline-flex; gap: 4px; }
|
|
.topbar .progress .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: inline-block; opacity: 0.18; }
|
|
.topbar .progress .dots i.on { opacity: 1; }
|
|
.topbar .rec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--ink); color: var(--ink); }
|
|
.topbar .rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s steps(2) infinite; }
|
|
@keyframes blink { 50% { opacity: 0.2; } }
|
|
|
|
/* big year */
|
|
.year { position: absolute; left: 6%; bottom: 14%; font: 700 200px/0.85 var(--serif); color: var(--ink); letter-spacing: -0.03em; }
|
|
.year .num { display: inline-block; position: relative; }
|
|
.year .num .glitch {
|
|
position: absolute; left: 0; top: 0; color: var(--accent);
|
|
clip-path: inset(0 0 70% 0);
|
|
animation: glitch 4s steps(8) infinite;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
@keyframes glitch {
|
|
0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; }
|
|
89% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -1px); opacity: 0.7; }
|
|
91% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 1px); opacity: 0.7; }
|
|
94% { clip-path: inset(40% 0 40% 0); transform: translate(1px, 0); opacity: 0.6; }
|
|
97% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; }
|
|
}
|
|
.year .jp-suffix { font-family: var(--jp); font-weight: 700; font-size: 0.6em; vertical-align: 0.16em; margin-left: 0.04em; }
|
|
|
|
.year-label { position: absolute; left: 6%; bottom: calc(14% + 200px + 12px); font: 11px/1.2 var(--mono); letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; }
|
|
.year-label::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--ink); vertical-align: middle; margin-right: 10px; opacity: 0.5; }
|
|
|
|
/* sprite card */
|
|
.sprite-stack {
|
|
position: absolute; right: 12%; top: 22%;
|
|
display: flex; flex-direction: column; align-items: center; gap: 22px;
|
|
animation: bob 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes bob {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
.sprite-card {
|
|
width: 168px; height: 252px;
|
|
background: var(--paper-2);
|
|
border: 4px solid var(--ink);
|
|
border-radius: 10px;
|
|
box-shadow: 8px 8px 0 var(--ink);
|
|
position: relative;
|
|
padding: 12px;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
image-rendering: pixelated;
|
|
}
|
|
.sprite-card::before, .sprite-card::after {
|
|
content: ''; position: absolute; left: 8px; right: 8px; height: 4px; background: var(--ink);
|
|
}
|
|
.sprite-card::before { top: 14px; }
|
|
.sprite-card::after { bottom: 14px; }
|
|
|
|
.sprite-card svg { display: block; image-rendering: pixelated; shape-rendering: crispEdges; margin-top: 18px; }
|
|
|
|
.sprite-tag { font-family: var(--jp); font-weight: 700; font-size: 28px; color: var(--accent); margin-top: auto; line-height: 1; letter-spacing: 0.06em; }
|
|
.sprite-tag small { display: block; font-family: var(--mono); font-weight: 500; font-size: 10px; color: var(--muted); letter-spacing: 0.18em; margin-top: 4px; text-transform: uppercase; }
|
|
|
|
/* kinetic kana */
|
|
.kana { position: absolute; right: 6%; top: 12%; font-family: var(--jp); font-weight: 700; font-size: 96px; color: var(--ink); line-height: 1; letter-spacing: 0; }
|
|
.kana span { display: inline-block; opacity: 0; animation: kana-in 4s ease-in-out infinite; }
|
|
.kana span:nth-child(1) { animation-delay: 0s; }
|
|
.kana span:nth-child(2) { animation-delay: 0.4s; }
|
|
@keyframes kana-in {
|
|
0% { opacity: 0; transform: translateY(-12px); }
|
|
18%, 78% { opacity: 1; transform: translateY(0); }
|
|
100% { opacity: 0; transform: translateY(8px); }
|
|
}
|
|
|
|
/* caption block */
|
|
.caption {
|
|
position: absolute; left: 6%; right: 50%; bottom: 6%;
|
|
font: 12px/1.5 var(--mono); color: var(--ink);
|
|
letter-spacing: 0.04em;
|
|
max-width: 32ch;
|
|
}
|
|
.caption strong { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 18px; letter-spacing: -0.005em; margin-bottom: 6px; color: var(--ink); }
|
|
|
|
/* tick ribbon */
|
|
.ribbon {
|
|
position: absolute; left: 0; right: 0; bottom: 0;
|
|
height: 36px;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
overflow: hidden;
|
|
display: flex; align-items: center;
|
|
}
|
|
.ribbon-track {
|
|
display: inline-flex; gap: 64px;
|
|
padding: 0 32px;
|
|
animation: scroll-left 22s linear infinite;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.ribbon-track .tick { display: inline-flex; align-items: center; gap: 8px; font: 11px/1 var(--mono); letter-spacing: 0.22em; }
|
|
.ribbon-track .tick .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
|
|
.ribbon-track .tick .label { color: var(--paper); }
|
|
.ribbon-track .tick .note { color: rgba(245,239,226,0.55); text-transform: uppercase; }
|
|
@keyframes scroll-left {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
/* corner registration marks */
|
|
.reg { position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink); opacity: 0.35; }
|
|
.reg.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
|
|
.reg.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
|
|
.reg.bl { bottom: 50px; left: 14px; border-right: none; border-top: none; }
|
|
.reg.br { bottom: 50px; right: 14px; border-left: none; border-top: none; }
|
|
|
|
@media (max-width: 900px) {
|
|
.year { font-size: 120px; bottom: 18%; }
|
|
.year-label { bottom: calc(18% + 120px + 8px); }
|
|
.kana { font-size: 64px; }
|
|
.sprite-stack { right: 8%; top: 26%; }
|
|
.sprite-card { width: 124px; height: 184px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stage" data-od-id="stage">
|
|
|
|
<span class="reg tl"></span>
|
|
<span class="reg tr"></span>
|
|
<span class="reg bl"></span>
|
|
<span class="reg br"></span>
|
|
|
|
<div class="topbar" data-od-id="topbar">
|
|
<div class="slug">
|
|
<span class="jp">名次の番組</span>
|
|
<span class="en">EP. 01 · NINTENDO TRIVIA</span>
|
|
</div>
|
|
<div class="progress">
|
|
<span class="dots"><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
|
|
<span>01 / 12</span>
|
|
<span class="rec">REC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kana" data-od-id="kana"><span>花</span><span>札</span></div>
|
|
|
|
<div class="year-label" data-od-id="year-label">CHAPTER 01 · KYOTO · A PLAYING-CARD COMPANY</div>
|
|
<div class="year" data-od-id="year">
|
|
<span class="num">
|
|
1889
|
|
<span class="glitch" aria-hidden="true">1889</span>
|
|
</span><span class="jp-suffix">年</span>
|
|
</div>
|
|
|
|
<div class="sprite-stack" data-od-id="sprite">
|
|
<div class="sprite-card">
|
|
<!-- Hanafuda card sprite — pixel-art flower -->
|
|
<svg width="120" height="160" viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg" aria-label="Hanafuda card">
|
|
<!-- background -->
|
|
<rect x="0" y="0" width="24" height="32" fill="#f5efe2"/>
|
|
<!-- moon glow -->
|
|
<rect x="3" y="2" width="18" height="10" fill="#1a1614"/>
|
|
<!-- moon -->
|
|
<rect x="14" y="4" width="5" height="5" fill="#f7c95b"/>
|
|
<rect x="13" y="5" width="1" height="3" fill="#f7c95b"/>
|
|
<rect x="19" y="5" width="1" height="3" fill="#f7c95b"/>
|
|
<!-- petals (red) -->
|
|
<rect x="9" y="14" width="6" height="2" fill="#d92b1c"/>
|
|
<rect x="7" y="16" width="10" height="2" fill="#d92b1c"/>
|
|
<rect x="6" y="18" width="12" height="2" fill="#d92b1c"/>
|
|
<rect x="7" y="20" width="10" height="2" fill="#d92b1c"/>
|
|
<rect x="9" y="22" width="6" height="2" fill="#d92b1c"/>
|
|
<!-- petal highlights -->
|
|
<rect x="10" y="15" width="2" height="1" fill="#ff6b5e"/>
|
|
<rect x="8" y="17" width="2" height="1" fill="#ff6b5e"/>
|
|
<rect x="14" y="19" width="2" height="1" fill="#ff6b5e"/>
|
|
<!-- center -->
|
|
<rect x="11" y="18" width="2" height="2" fill="#f7c95b"/>
|
|
<!-- stem / leaves -->
|
|
<rect x="11" y="24" width="2" height="6" fill="#3b6b3b"/>
|
|
<rect x="8" y="26" width="3" height="2" fill="#3b6b3b"/>
|
|
<rect x="13" y="27" width="3" height="2" fill="#3b6b3b"/>
|
|
</svg>
|
|
<div class="sprite-tag">花<small>HANA · FLOWER</small></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="caption" data-od-id="caption">
|
|
<strong>Nintendo started as a hanafuda maker.</strong>
|
|
Founded in Kyoto by Fusajiro Yamauchi to print hand-painted playing
|
|
cards. Mario wouldn’t show up for another <em>ninety-six</em> years.
|
|
</div>
|
|
|
|
<div class="ribbon" data-od-id="ribbon">
|
|
<div class="ribbon-track">
|
|
<div class="tick"><span class="dot"></span><span class="label">1889</span><span class="note">HANAFUDA · KYOTO</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1907</span><span class="note">WESTERN CARDS</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1949</span><span class="note">YAMAUCHI III</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1977</span><span class="note">COLOR TV-GAME</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1985</span><span class="note">SUPER MARIO BROS.</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">2006</span><span class="note">WII</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">2017</span><span class="note">SWITCH</span></div>
|
|
|
|
<div class="tick"><span class="dot"></span><span class="label">1889</span><span class="note">HANAFUDA · KYOTO</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1907</span><span class="note">WESTERN CARDS</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1949</span><span class="note">YAMAUCHI III</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1977</span><span class="note">COLOR TV-GAME</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">1985</span><span class="note">SUPER MARIO BROS.</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">2006</span><span class="note">WII</span></div>
|
|
<div class="tick"><span class="dot"></span><span class="label">2017</span><span class="note">SWITCH</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|