mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
Compare commits
8
Commits
e3611c053c
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 miles
|
e2d90a662e | ||
|
miles
|
8dfbbd22a8 | ||
|
miles
|
70f77f4283 | ||
|
miles
|
6efbc83175 | ||
|
miles
|
eeb6be0de9 | ||
|
miles
|
755815e61a | ||
|
miles
|
eeeac7c4f7 | ||
|
miles
|
43ccb48009 |
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Avengers: Doomsday Watchlist</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #0d0f12;
|
||||
--card-bg: #15171c;
|
||||
--border-color: #24282e;
|
||||
--text-main: #c6cbd2;
|
||||
--text-muted: #7a828c;
|
||||
--accent: #b85a5a;
|
||||
--accent-hover: #9c4646;
|
||||
--success: #5aa877;
|
||||
--hover-bg: #1a1d23;
|
||||
--inner-bg: #191c22;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
padding: 2.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 580px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
padding: 2rem 2rem 1.75rem;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
color: #e8eaed;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
p.subtitle {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
background-color: #20242b;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
height: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: var(--accent);
|
||||
width: 0%;
|
||||
border-radius: 999px;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
|
||||
.counter {
|
||||
text-align: right;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--hover-bg);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.7rem 0.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border: 1.5px solid #4a515a;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-right: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: '✓';
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
user-select: none;
|
||||
flex-grow: 1;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label {
|
||||
text-decoration: line-through;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.why-btn {
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.7rem;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.03em;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.why-btn:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.why-btn[aria-expanded="true"] {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: rgba(184, 90, 90, 0.08);
|
||||
}
|
||||
|
||||
.why {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
margin: 0 0.5rem;
|
||||
padding: 0 0.6rem;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
border-left: 2px solid var(--border-color);
|
||||
transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease, padding 0.25s ease;
|
||||
}
|
||||
|
||||
.why.open {
|
||||
max-height: 240px;
|
||||
opacity: 1;
|
||||
margin: 0 0.5rem 0.6rem;
|
||||
padding: 0.35rem 0.6rem 0.35rem 0.9rem;
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 1.75rem;
|
||||
padding: 0.6rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-reset:hover {
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>Avengers: Doomsday</h1>
|
||||
<p class="subtitle">a quieter fall checklist to the big one</p>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
<div class="counter" id="counterText">0 / 8 Completed</div>
|
||||
|
||||
<ul id="checklist">
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-0">
|
||||
<label for="item-0">Loki (Seasons 1 & 2)</label>
|
||||
<button class="why-btn" data-target="why-0" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-0">The multiverse, the TVA, and the war of the timelines all come from here — Doomsday wouldn't exist without it.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-1">
|
||||
<label for="item-1">Fantastic Four: First Steps</label>
|
||||
<button class="why-btn" data-target="why-1" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-1">The FF's first proper MCU outing, and the family Doomsday quietly revolves around.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-2">
|
||||
<label for="item-2">Doctor Strange in the Multiverse of Madness</label>
|
||||
<button class="why-btn" data-target="why-2" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-2">First real look at incursions and the cracks between timelines — exactly what breaks before Doomsday.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-3">
|
||||
<label for="item-3">Deadpool & Wolverine</label>
|
||||
<button class="why-btn" data-target="why-3" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-3">Shows who decides what survives, and quietly drops the OGs back into the MCU.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-4">
|
||||
<label for="item-4">X-Men, X2, & X-Men: Days of Future Past</label>
|
||||
<button class="why-btn" data-target="why-4" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-4">Your only crash course in the mutants Doomsday is counting on showing up.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-5">
|
||||
<label for="item-5">Captain America: Civil War</label>
|
||||
<button class="why-btn" data-target="why-5" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-5">Explains why the Avengers are already fractured — Doomsday happens on the back of that split.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-6">
|
||||
<label for="item-6">Captain America: Brave New World</label>
|
||||
<button class="why-btn" data-target="why-6" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-6">Introduces adamantium and a new Cap — the science and the stakes behind the Doomsday story.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-row">
|
||||
<input type="checkbox" id="item-7">
|
||||
<label for="item-7">Thunderbolts*</label>
|
||||
<button class="why-btn" data-target="why-7" aria-expanded="false">why</button>
|
||||
</div>
|
||||
<div class="why" id="why-7">The misfits' crew Doomsday pulls in — this is where you meet them before the chaos.</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn-reset" onclick="resetChecklist()">Reset Progress</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const COOKIE_NAME = "doomsday_checklist_state";
|
||||
const checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const counterText = document.getElementById('counterText');
|
||||
|
||||
function setCookie(name, value, days = 365) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
const expires = "expires=" + date.toUTCString();
|
||||
document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/;SameSite=Strict";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
const nameEQ = name + "=";
|
||||
const ca = document.cookie.split(';');
|
||||
for(let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function updateState() {
|
||||
let completedCount = 0;
|
||||
const stateArray = [];
|
||||
|
||||
checkboxes.forEach((cb) => {
|
||||
stateArray.push(cb.checked ? 1 : 0);
|
||||
if (cb.checked) completedCount++;
|
||||
});
|
||||
|
||||
const percentage = (completedCount / checkboxes.length) * 100;
|
||||
progressBar.style.width = percentage + '%';
|
||||
counterText.innerText = `${completedCount} / ${checkboxes.length} Completed`;
|
||||
|
||||
setCookie(COOKIE_NAME, stateArray.join(','));
|
||||
}
|
||||
|
||||
function loadState() {
|
||||
const savedData = getCookie(COOKIE_NAME);
|
||||
if (savedData) {
|
||||
const stateArray = savedData.split(',');
|
||||
checkboxes.forEach((cb, index) => {
|
||||
if (stateArray[index] !== undefined) {
|
||||
cb.checked = stateArray[index] === '1';
|
||||
}
|
||||
});
|
||||
}
|
||||
updateState();
|
||||
}
|
||||
|
||||
function resetChecklist() {
|
||||
checkboxes.forEach(cb => cb.checked = false);
|
||||
updateState();
|
||||
}
|
||||
|
||||
checkboxes.forEach(cb => {
|
||||
cb.addEventListener('change', updateState);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.why-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const target = document.getElementById(btn.dataset.target);
|
||||
if (!target) return;
|
||||
const open = target.classList.toggle('open');
|
||||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', loadState);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+203
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CommandMove: Cut & Paste on Mac | Miles Wolf Allen</title>
|
||||
<meta name="description" content="How I added true cut-and-paste to macOS Finder with CommandMove — global event taps, AppleScript, and Accessibility permissions.">
|
||||
<link rel="canonical" href="https://milesallen.site/blog/command-move-devlog.html">
|
||||
<meta property="og:title" content="CommandMove: Cut & Paste on Mac | Miles Wolf Allen">
|
||||
<meta property="og:description" content="How I added true cut-and-paste to macOS Finder with CommandMove — global event taps, AppleScript, and Accessibility permissions.">
|
||||
<meta property="og:image" content="https://milesallen.site/og.png">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="article:published_time" content="2026-02-15">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": "CommandMove: Cut & Paste on Mac | Miles Wolf Allen",
|
||||
"description": "How I added true cut-and-paste to macOS Finder with CommandMove — global event taps, AppleScript, and Accessibility permissions.",
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": "Miles Wolf Allen",
|
||||
"url": "https://milesallen.site/"
|
||||
},
|
||||
"datePublished": "2026-02-15",
|
||||
"url": "https://milesallen.site/blog/command-move-devlog.html",
|
||||
"mainEntityOfPage": "https://milesallen.site/blog/command-move-devlog.html"
|
||||
}
|
||||
</script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/png" href="../favicon.png">
|
||||
<link rel="stylesheet" href="../projects/style.css">
|
||||
<style>
|
||||
.article-header{padding:100px 0 40px;}
|
||||
.article-eyebrow{font-family:var(--font-pixel);font-size:10px;color:var(--tape);margin-bottom:12px;text-transform:uppercase;letter-spacing:.1em;}
|
||||
.article-date{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:8px;}
|
||||
.article-header h1{font-family:var(--font-pixel);font-size:clamp(24px,5vw,44px);line-height:1.2;margin-bottom:16px;transform:rotate(-1deg);transform-origin:left center;text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--tape);animation:glitch 5s ease-in-out infinite;}
|
||||
@keyframes glitch{0%,90%,100%{text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--tape);}92%{text-shadow:3px 3px 0 var(--red),-2px -2px 0 var(--accent);transform:rotate(-1deg) translateX(2px);}94%{text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--red);transform:rotate(-1deg) translateX(-2px);}}
|
||||
.article-tagline{font-size:16px;color:var(--muted);max-width:600px;line-height:1.7;font-family:var(--font-mono);margin-bottom:24px;}
|
||||
.article-tags{display:flex;gap:8px;flex-wrap:wrap;}
|
||||
.article-tag{font-family:var(--font-pixel);font-size:8px;padding:6px 12px;background:var(--accent);color:#000;text-transform:uppercase;}
|
||||
.article-body{max-width:720px;}
|
||||
.article-body h2{font-family:var(--font-pixel);font-size:16px;color:var(--accent);margin:40px 0 16px;text-transform:uppercase;}
|
||||
.article-body h3{font-family:var(--font-mono);font-weight:700;font-size:16px;margin:32px 0 12px;color:var(--text);}
|
||||
.article-body p{font-size:14px;color:#ccc;line-height:1.9;font-family:var(--font-mono);margin-bottom:16px;}
|
||||
.article-body code{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:2px 6px;font-size:12px;font-family:var(--font-mono);}
|
||||
.article-body blockquote{border-left:3px solid var(--accent);padding:12px 20px;margin:24px 0;background:rgba(255,255,255,0.02);font-style:italic;color:var(--muted);font-family:var(--font-mono);font-size:13px;}
|
||||
.article-body ul{margin:12px 0 16px 20px;font-family:var(--font-mono);font-size:13px;color:#ccc;line-height:1.8;}
|
||||
.article-body ul li{margin-bottom:6px;}
|
||||
.article-body ul li::marker{color:var(--accent);}
|
||||
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:40px;text-decoration:none;transition:color .2s;}
|
||||
.back-link:hover{color:var(--accent);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cursor-dot" id="cursorDot"></div>
|
||||
<div class="cursor-ring" id="cursorRing"></div>
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
|
||||
<div class="shortcut-modal" id="shortcutModal">
|
||||
<div class="shortcut-card">
|
||||
<h3>Keyboard Shortcuts</h3>
|
||||
<div class="shortcut-row"><span>Go Home</span><kbd>H</kbd></div>
|
||||
<div class="shortcut-row"><span>Go to GitHub</span><kbd>G</kbd></div>
|
||||
<div class="shortcut-row"><span>Toggle theme</span><kbd>T</kbd></div>
|
||||
<div class="shortcut-row"><span>Show shortcuts</span><kbd>?</kbd></div>
|
||||
<div class="close-hint">Press Esc or ? to close</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flash" id="flash"></div>
|
||||
<div class="toast-stack" id="toastStack"></div>
|
||||
<nav class="mobile-nav">
|
||||
<a href="../index.html">Home</a>
|
||||
<a href="fedl.html">FEDL</a>
|
||||
<a href="omniemu.html">OmniEmu</a>
|
||||
<a href="command-move.html">CommandMove</a>
|
||||
<a href="https://github.com/mileswolfallen2" target="_blank">GitHub</a>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<nav>
|
||||
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
|
||||
<div class="nav-links">
|
||||
<a href="../index.html#about">About</a>
|
||||
<a href="../index.html#skills">Skills</a>
|
||||
<a href="../index.html#projects">Projects</a>
|
||||
<a href="../index.html#contact">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="article-header">
|
||||
<div class="breadcrumb">
|
||||
<a href="../index.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<a href="../index.html#blog">Devlog</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>CommandMove</span>
|
||||
</div>
|
||||
<div class="article-eyebrow">// DEVLOG 003</div>
|
||||
<div class="article-date">2026</div>
|
||||
<h1>CommandMove: Cut & Paste on Mac</h1>
|
||||
<p class="article-tagline">macOS doesn't have Cmd+X for files. I fixed that. Global event taps, AppleScript, and a lot of Accessibility permissions.</p>
|
||||
<div class="article-tags">
|
||||
<span class="article-tag">Swift</span>
|
||||
<span class="article-tag">macOS</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal">
|
||||
<div class="article-body">
|
||||
<h2>The Frustration</h2>
|
||||
<p>If you've ever used a Mac and tried to move files in Finder, you know the pain. You select files, press Cmd+C, navigate to a new folder, press Cmd+V... and the files are <strong>copied</strong>, not moved. The originals stay where they were.</p>
|
||||
<p>On Windows, Cmd+X (or Ctrl+X) cuts files, and Cmd+V moves them. It's been that way since the 90s. macOS only supports copy-paste for files. There is no cut. I don't know why Apple decided this was a good idea, but here we are.</p>
|
||||
<p>Every time I had to move files on my Mac, I'd copy them, navigate to the destination, paste, go back to the original, select the originals, and delete them. Four steps instead of two. Multiply that by hundreds of file operations and you start to lose your mind.</p>
|
||||
|
||||
<h2>The Solution</h2>
|
||||
<p>CommandMove is a menu bar app that intercepts Cmd+X and Cmd+V in Finder and makes them do what they should have always done: cut and move files.</p>
|
||||
<p>Press Cmd+X on selected files in Finder, navigate to any folder, press Cmd+V, and the files move. Just like Windows. Just like it should be.</p>
|
||||
|
||||
<h2>How It Works</h2>
|
||||
<p>Under the hood, CommandMove uses three macOS technologies:</p>
|
||||
<ul>
|
||||
<li><strong>Global Event Tap:</strong> Intercepts Cmd+X and Cmd+V keystrokes while Finder is the frontmost app</li>
|
||||
<li><strong>AppleScript:</strong> Queries Finder for the selected items and current folder</li>
|
||||
<li><strong>FileManager:</strong> Performs the actual move operation using <code>FileManager.moveItem</code></li>
|
||||
</ul>
|
||||
<p>The event tap is the trickiest part. macOS is very protective about who can intercept keyboard events. You need Accessibility permissions, which means the user has to go into System Settings > Privacy & Security > Accessibility and manually enable CommandMove. macOS will prompt for this on first launch, but it's still a friction point.</p>
|
||||
|
||||
<h2>The Accessibility Hurdle</h2>
|
||||
<p>Building for macOS means respecting the security model. Global event taps are powerful but regulated for good reason — they can theoretically capture any keystroke. Apple's solution is the Accessibility permission system, which requires explicit user consent.</p>
|
||||
<p>The first time you launch CommandMove, it pops up a dialog explaining why it needs Accessibility access. Some users are wary of this, and I don't blame them. The app is open source, so anyone can verify what it does. But "please give me permission to read your keyboard" is always going to be a hard sell.</p>
|
||||
|
||||
<h2>Extra Features</h2>
|
||||
<p>Once I had the core cut-and-paste working, I kept adding things:</p>
|
||||
<ul>
|
||||
<li>Right-click "Cut Files" action in Finder via a bundled Quick Action</li>
|
||||
<li>Menu bar controls for cutting, pasting, clearing the clipboard, and toggling login launch</li>
|
||||
<li>Auto-launch at login so it's always running</li>
|
||||
<li>Conflict handling — if a file with the same name exists at the destination, it creates a numbered copy automatically</li>
|
||||
</ul>
|
||||
|
||||
<h2>Lessons Learned</h2>
|
||||
<ul>
|
||||
<li>Swift is a beautiful language once you get past the learning curve</li>
|
||||
<li>AppleScript is from 1993 and it shows, but it still works</li>
|
||||
<li>macOS Accessibility APIs are powerful but poorly documented</li>
|
||||
<li>The best utility apps solve one problem extremely well</li>
|
||||
<li>Open source builds trust, especially when you're asking for Accessibility permissions</li>
|
||||
</ul>
|
||||
|
||||
<blockquote>The simplest solutions are often the ones that should have existed from the start.</blockquote>
|
||||
|
||||
<a href="../index.html#blog" class="back-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
Back to Devlog
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="footer-links" style="margin-bottom: 12px;">
|
||||
<a href="../uses.html" style="color:var(--muted);text-decoration:none;">Uses</a>
|
||||
<span style="color:var(--muted);margin:0 8px;">·</span>
|
||||
<a href="../now.html" style="color:var(--muted);text-decoration:none;">Now</a>
|
||||
<span style="color:var(--muted);margin:0 8px;">·</span>
|
||||
<a href="../colophon.html" style="color:var(--muted);text-decoration:none;">Colophon</a>
|
||||
<span style="color:var(--muted);margin:0 8px;">·</span>
|
||||
<a href="../experiments.html" style="color:var(--accent);text-decoration:none;">Internet History</a>
|
||||
</div>
|
||||
Built by Miles · 2026 · Powered by too much coffee and the Konami code
|
||||
</footer>
|
||||
</div>
|
||||
<script>
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
<script src="../projects/script.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/[email protected]/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/[email protected]/ScrollTrigger.min.js"></script>
|
||||
<script>
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const heroTl = gsap.timeline({ defaults: { ease: 'power3.out' } });
|
||||
heroTl
|
||||
.from('.breadcrumb', { x: -30, opacity: 0, duration: 0.6 })
|
||||
.from('.article-header h1', { y: 50, opacity: 0, duration: 0.8 }, '-=0.3')
|
||||
.from('.article-tagline', { y: 30, opacity: 0, duration: 0.7 }, '-=0.4')
|
||||
.from('.article-tag', { y: 20, opacity: 0, scale: 0.8, duration: 0.4, stagger: 0.06 }, '-=0.3');
|
||||
gsap.from('nav', { y: -20, opacity: 0, duration: 0.6, ease: 'power2.out' });
|
||||
document.querySelectorAll('.article-body h2').forEach(title => {
|
||||
gsap.from(title, { scrollTrigger: { trigger: title, start: 'top 85%' }, y: 30, opacity: 0, duration: 0.7, ease: 'power3.out' });
|
||||
});
|
||||
document.querySelectorAll('.article-body p, .article-body ul, .article-body blockquote').forEach(el => {
|
||||
gsap.from(el, { scrollTrigger: { trigger: el, start: 'top 88%' }, y: 20, opacity: 0, duration: 0.6, ease: 'power3.out' });
|
||||
});
|
||||
gsap.from('footer', { scrollTrigger: { trigger: 'footer', start: 'top 95%' }, opacity: 0, duration: 0.8 });
|
||||
window.addEventListener('load', () => ScrollTrigger.refresh());
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+673
@@ -0,0 +1,673 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dr. Stone · miles wolf allen</title>
|
||||
<meta name="description" content="A comprehensive episode & event breakdown of Dr. Stone — every season, scientific discovery, invention, character development, and conflict, plus the show's stats.">
|
||||
<meta name="author" content="Miles Wolf Allen">
|
||||
<link rel="canonical" href="https://milesallen.site/dr-stone.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Dr. Stone · miles wolf allen">
|
||||
<meta property="og:description" content="Season-by-season episode & event breakdown of Dr. Stone — the technology ladder, major characters, factions, mysteries, and stats.">
|
||||
<meta property="og:url" content="https://milesallen.site/dr-stone.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="Dr. Stone · miles wolf allen">
|
||||
<meta name="twitter:description" content="A comprehensive episode & event breakdown of Dr. Stone, plus every stat worth knowing.">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--page:#eef1f5;
|
||||
--card:#ffffff;
|
||||
--border:#e3e8ee;
|
||||
--text:#14161a;
|
||||
--muted:#647182;
|
||||
--accent:#1d9bf0;
|
||||
--stone:#7ac74f;
|
||||
--stone2:#58a63a;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html{scroll-behavior:smooth;}
|
||||
body{
|
||||
background:var(--page);color:var(--text);
|
||||
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
line-height:1.6;
|
||||
display:flex;flex-direction:column;align-items:center;
|
||||
min-height:100vh;padding:40px 20px 64px;
|
||||
overflow-x:hidden;position:relative;
|
||||
}
|
||||
body::after{
|
||||
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||||
background-image:
|
||||
linear-gradient(rgba(20,22,26,.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(20,22,26,.045) 1px, transparent 1px);
|
||||
background-size:44px 44px;
|
||||
-webkit-mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
|
||||
mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
|
||||
}
|
||||
#bgCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
|
||||
.page-head{width:100%;max-width:760px;text-align:center;margin-bottom:24px;}
|
||||
.crumbs{font-size:12px;color:var(--muted);}
|
||||
.crumbs a{color:var(--accent);font-weight:600;}
|
||||
.crumbs a:hover{text-decoration:underline;}
|
||||
.page-title{font-size:30px;font-weight:900;letter-spacing:-.02em;margin-top:8px;}
|
||||
.page-sub{font-size:14px;color:var(--muted);margin-top:6px;max-width:640px;margin-left:auto;margin-right:auto;}
|
||||
.kid{display:inline-block;margin-left:6px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--stone),var(--stone2));border-radius:999px;padding:2px 9px;vertical-align:middle;letter-spacing:.02em;}
|
||||
|
||||
.wrap{width:100%;max-width:760px;display:flex;flex-direction:column;gap:22px;}
|
||||
|
||||
.hero-card{
|
||||
background:linear-gradient(150deg,#1b2a1c,#2c4a2e 55%,#171f17);
|
||||
border-radius:20px;overflow:hidden;position:relative;color:#eaf5ea;
|
||||
box-shadow:0 1px 2px rgba(16,24,40,.05),0 20px 44px rgba(16,24,40,.22);
|
||||
display:flex;gap:24px;padding:24px;
|
||||
}
|
||||
.hero-card::before{
|
||||
content:'';position:absolute;inset:0;pointer-events:none;
|
||||
background:
|
||||
radial-gradient(420px 260px at 15% 10%, rgba(122,199,79,.22), transparent 60%),
|
||||
radial-gradient(380px 280px at 90% 90%, rgba(122,199,79,.14), transparent 60%);
|
||||
}
|
||||
.hero-poster{position:relative;flex-shrink:0;width:190px;}
|
||||
.hero-poster img{width:190px;height:auto;border-radius:14px;display:block;border:2px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.45);}
|
||||
.hero-body{position:relative;min-width:0;flex:1;}
|
||||
.hero-eyebrow{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);}
|
||||
.hero-title{font-size:30px;font-weight:900;letter-spacing:-.02em;margin-top:4px;line-height:1.1;}
|
||||
.hero-sub{font-size:16px;font-weight:600;color:#bcd7bd;margin-top:6px;}
|
||||
.hero-desc{font-size:13.5px;color:#cfe0cf;margin-top:10px;line-height:1.7;}
|
||||
.hero-desc b,.hero-desc strong{color:#fff;}
|
||||
.hero-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
|
||||
.hero-chip{font-size:11px;font-weight:700;color:#dff0df;border:1px solid rgba(122,199,79,.4);background:rgba(122,199,79,.12);border-radius:999px;padding:4px 11px;}
|
||||
.hero-chip.stone{background:linear-gradient(135deg,var(--stone),var(--stone2));color:#16220f;border-color:transparent;}
|
||||
|
||||
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
|
||||
.stat{
|
||||
background:var(--card);border:1px solid var(--border);border-radius:16px;
|
||||
padding:18px 18px 16px;box-shadow:0 1px 2px rgba(16,24,40,.05);
|
||||
transition:transform .18s ease,border-color .18s ease;
|
||||
}
|
||||
.stat:hover{transform:translateY(-3px);border-color:var(--accent);}
|
||||
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
|
||||
.stat .v{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-top:5px;line-height:1.1;}
|
||||
.stat .s{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5;}
|
||||
.stat.wide{grid-column:span 3;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
|
||||
.stat.wide .v{font-size:20px;}
|
||||
.stat.wide .s{flex:1;min-width:180px;}
|
||||
|
||||
.band{
|
||||
background:var(--card);border:1px solid var(--border);border-radius:20px;
|
||||
padding:26px 28px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 30px rgba(16,24,40,.08);
|
||||
}
|
||||
.band h2{
|
||||
font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px;
|
||||
display:flex;align-items:center;gap:10px;
|
||||
}
|
||||
.band h2::before{content:'';width:5px;height:20px;border-radius:99px;background:var(--accent);flex-shrink:0;}
|
||||
.band h3{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:22px 0 4px;display:flex;align-items:center;gap:8px;}
|
||||
.band h3::before{content:'';width:4px;height:15px;border-radius:99px;background:var(--stone);flex-shrink:0;}
|
||||
.band .lead{font-size:13.5px;color:var(--muted);margin-bottom:8px;}
|
||||
.band h2:first-of-type{margin-top:0;}
|
||||
.band h3:first-of-type{margin-top:6px;}
|
||||
|
||||
p.para{font-size:13.5px;color:#2a2f37;margin:8px 0;line-height:1.7;}
|
||||
p.para b,p.para strong{color:var(--text);font-weight:700;}
|
||||
ul.clean{margin:8px 0 8px 4px;padding:0;list-style:none;}
|
||||
ul.clean li{font-size:13.5px;color:#2a2f37;margin:7px 0;padding-left:20px;position:relative;line-height:1.65;}
|
||||
ul.clean li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--stone);opacity:.45;}
|
||||
ul.clean li b,ul.clean li strong{color:var(--text);font-weight:700;}
|
||||
|
||||
.arc{
|
||||
border:1px solid var(--border);border-radius:16px;margin-top:16px;overflow:hidden;
|
||||
background:#fbfcfe;
|
||||
}
|
||||
.arc-head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;background:linear-gradient(180deg,#f6fafe,var(--card));border-bottom:1px solid var(--border);}
|
||||
.arc-head:hover{background:#f0f6fb;}
|
||||
.arc-tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--stone),var(--stone2));border-radius:8px;padding:4px 10px;flex-shrink:0;}
|
||||
.arc-name{font-size:14.5px;font-weight:800;flex:1;letter-spacing:-.01em;}
|
||||
.arc-meta{font-size:11.5px;color:var(--muted);font-weight:600;flex-shrink:0;}
|
||||
.arc-arrow{font-size:13px;color:var(--muted);transition:transform .2s;flex-shrink:0;}
|
||||
.arc[aria-expanded="true"] .arc-arrow{transform:rotate(180deg);}
|
||||
.arc-body{display:none;padding:18px 20px 20px;}
|
||||
|
||||
.tbl-wrap{overflow-x:auto;margin:10px 0;}
|
||||
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
|
||||
table.tbl th,table.tbl td{border-bottom:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top;line-height:1.5;}
|
||||
table.tbl tr:last-child td{border-bottom:none;}
|
||||
table.tbl th{background:#eaf1f8;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#4a5568;white-space:nowrap;}
|
||||
table.tbl td{color:#2a2f37;}
|
||||
table.tbl td b,table.tbl td strong{color:var(--text);font-weight:700;}
|
||||
|
||||
.toc{display:flex;flex-wrap:wrap;gap:8px;}
|
||||
.toc a{font-size:12px;font-weight:700;color:var(--text);border:1px solid var(--border);background:var(--card);padding:7px 14px;border-radius:999px;transition:all .15s;}
|
||||
.toc a:hover{border-color:var(--accent);background:#f4f8fc;transform:translateY(-1px);}
|
||||
|
||||
.back{width:100%;max-width:760px;text-align:center;margin-top:8px;}
|
||||
.back a{display:inline-block;font-size:14px;font-weight:700;color:var(--accent);border:1px solid var(--border);background:var(--card);padding:10px 20px;border-radius:999px;transition:all .15s;}
|
||||
.back a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,155,240,.15);}
|
||||
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
|
||||
.back .secure{margin-left:10px;color:var(--muted);border-color:var(--border);}
|
||||
.back .secure:hover{border-color:var(--muted);}
|
||||
|
||||
.no-grav{margin-top:34px;font-size:13px;color:var(--muted);text-align:center;}
|
||||
.no-grav a{color:var(--accent);font-weight:600;}
|
||||
.no-grav a:hover{text-decoration:underline;}
|
||||
.src-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.6;}
|
||||
|
||||
.anim [data-anim]{opacity:0;}
|
||||
|
||||
@media(max-width:640px){
|
||||
body{padding:32px 16px 48px;}
|
||||
.page-title{font-size:24px;}
|
||||
.hero-card{flex-direction:column;align-items:flex-start;}
|
||||
.hero-poster{width:140px;}
|
||||
.hero-poster img{width:140px;}
|
||||
.hero-title{font-size:24px;}
|
||||
.stat-grid{grid-template-columns:repeat(2,1fr);}
|
||||
.stat.wide{grid-column:span 2;}
|
||||
.band{padding:20px 18px;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="bgCanvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="page-head">
|
||||
<div class="crumbs"><a href="share.html">↩ miles wolf allen</a> · <a href="top-shows.html">my top shows</a></div>
|
||||
<div class="page-title" data-anim="txt">Dr. Stone<span class="kid">#2</span></div>
|
||||
<div class="page-sub" data-anim="txt">a comprehensive episode & event breakdown — every season, discovery, invention, and conflict, plus the stats.</div>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<div class="hero-card" data-anim="fade">
|
||||
<div class="hero-poster">
|
||||
<img src="https://image.tmdb.org/t/p/w400/xbZQ3fDl0y5mt0ARwfeyrgQ4JTw.jpg" alt="Dr. Stone poster" loading="lazy">
|
||||
</div>
|
||||
<div class="hero-body">
|
||||
<div class="hero-eyebrow">anime · adventure · sci-fi</div>
|
||||
<div class="hero-title">Dr. Stone</div>
|
||||
<div class="hero-sub">"The world of stone belongs to science."</div>
|
||||
<p class="hero-desc">One fateful day, a blinding green light petrifies <strong>all of humanity</strong> — billions of people frozen as statues for <strong>3,700 years</strong>. When teenage genius <strong>Senku Ishigami</strong> finally breaks free of his stone shell, he vows to rebuild civilization from absolute zero, one scientific breakthrough at a time. From stone tools to gunpowder, electricity, a cellphone, and a ship that crosses the Pacific, the Kingdom of Science climbs a two-million-year technological ladder to answer the greatest question of all: <strong>who petrified humanity — and why?</strong></p>
|
||||
<div class="hero-chips">
|
||||
<span class="hero-chip stone">my #2 show</span>
|
||||
<span class="hero-chip">TMS / 8PAN</span>
|
||||
<span class="hero-chip">2019–2026</span>
|
||||
<span class="hero-chip">science</span>
|
||||
<span class="hero-chip">4 seasons + special</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid" data-anim="fade">
|
||||
<div class="stat">
|
||||
<div class="k">total runtime</div>
|
||||
<div class="v">~38 hrs</div>
|
||||
<div class="s">95 episodes × 24 min (94 TV + Ryusui special).</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">MAL score</div>
|
||||
<div class="v">8.26</div>
|
||||
<div class="s">scored by ~1.19M users — popularity rank #49.</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">MAL members</div>
|
||||
<div class="v">~1.98M</div>
|
||||
<div class="s">with 31.7K favorites on Season 1.</div>
|
||||
</div>
|
||||
<div class="stat wide">
|
||||
<div class="k">netflix hours streamed</div>
|
||||
<div class="v">300M+</div>
|
||||
<div class="s">cumulative global hours viewed across the seasons tracked by Netflix (S1 alone passed ~119M hours / ~12.5M views).</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="band" data-anim="fade">
|
||||
<h2>Jump to an Arc</h2>
|
||||
<div class="toc">
|
||||
<a href="#s1">Season 1</a>
|
||||
<a href="#s2">Season 2 · Stone Wars</a>
|
||||
<a href="#ryusui">Ryusui Special</a>
|
||||
<a href="#s3">Season 3 · New World</a>
|
||||
<a href="#tech">Tech Ladder</a>
|
||||
<a href="#characters">Characters</a>
|
||||
<a href="#factions">Factions</a>
|
||||
<a href="#mysteries">Mysteries</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="band" data-anim="fade">
|
||||
<h2>The Petrification Event</h2>
|
||||
<p class="para"><strong>September 2019 — Humanity Turns to Stone.</strong> The story begins with humanity suddenly being struck by a mysterious green light. Every human on Earth is petrified, and approximately <strong>7 billion people</strong> are turned to stone. <strong>Senku Ishigami</strong> survives consciously inside his stone shell by continuously counting, and <strong>Taiju Ooki</strong> also remains conscious alongside him.</p>
|
||||
<p class="para">Civilization collapses completely and nature gradually reclaims human cities and infrastructure. Senku eventually estimates that approximately <strong>3,700 years</strong> have passed. The cause of the petrification remains one of the central mysteries of the series.</p>
|
||||
</div>
|
||||
|
||||
<!-- ============ SEASON 1 ============ -->
|
||||
<div class="band" id="s1" data-anim="fade">
|
||||
<h2>Season 1 — Dr. Stone</h2>
|
||||
<p class="lead">Rebuilding civilization from scratch, from the first revival fluid to the brink of the Stone Wars.</p>
|
||||
|
||||
<h3>Arc 1 · Stone World / Stone Formula (Episodes 1–2)</h3>
|
||||
<p class="para"><b>Episode 1 — Stone World.</b> Senku awakens in the Stone World and immediately begins reconstructing civilization from scratch. Escaping his stone shell, he establishes that ~3,700 years have passed, creates a primitive shelter, and begins experimenting with chemistry. He discovers that <strong>nitric acid</strong> can break down the stone casing, eventually developing the <strong>revival fluid</strong> using nitric acid and alcohol — and decides that restoring humanity must begin with science. <em>Major concept: chemical revival via a nitric-acid-based process.</em></p>
|
||||
<p class="para"><b>Episode 2 — Two Nations of the Stone World.</b> Senku revives Taiju — physically powerful but lacking Senku's knowledge, making them complementary partners. They hunt for food, encounter wild animals, discover that the modern world has become wilderness, and find <strong>Yuzuriha's</strong> petrified body. They ultimately revive <strong>Tsukasa Shishio</strong>, one of the strongest fighters of their generation — though Tsukasa's worldview immediately creates tension with Senku.</p>
|
||||
|
||||
<h3>Arc 2 · Tsukasa Empire Conflict (Episodes 3–5)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 2</span>
|
||||
<span class="arc-name">Tsukasa Empire Conflict</span>
|
||||
<span class="arc-meta">eps 3–5</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para"><b>Episode 3 — Weapons of Science.</b> Tsukasa demonstrates his enormous physical strength and begins destroying the stone statues of adults, believing the old world's adults represent corruption. His goal is a new civilization consisting only of young people. Senku recognizes Tsukasa as his greatest threat, and the two sides come to represent fundamentally different philosophies: <strong>Senku: restore everyone</strong> vs. <strong>Tsukasa: build a new world without the old generation</strong>. Senku begins developing weapons using chemistry.</p>
|
||||
<p class="para"><b>Episode 4 — Fire and Gunpowder.</b> Senku produces <strong>gunpowder</strong>, one of the first major technological jumps of the Stone World, using it to threaten Tsukasa. He also creates a large signal fire to communicate with potential survivors — and unexpectedly, another signal appears in the distance, proving other humans are alive.</p>
|
||||
<p class="para"><b>Episode 5 — Stone World vs. Tsukasa.</b> Tsukasa discovers Senku's plans and threatens Yuzuriha to force out the revival-fluid formula. Senku refuses, and the confrontation ends with Tsukasa apparently killing him. Before dying, Senku secretly tells Taiju and Yuzuriha to continue the mission.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Arc 3 · Ishigami Village (Episodes 6–13)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 3</span>
|
||||
<span class="arc-name">Ishigami Village</span>
|
||||
<span class="arc-meta">eps 6–13</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para"><b>Episodes 6–7 — Senku's New Beginning.</b> Senku survives because a portion of the petrification casing remains around his neck, and discovers the signal fire came from <strong>Ishigami Village</strong> — a society preserved for generations by the descendants of astronauts who survived the original event. Meanwhile, Taiju and Yuzuriha infiltrate Tsukasa's group and secretly continue Senku's mission. Senku meets <strong>Kohaku</strong> and begins investigating the village's history.</p>
|
||||
<p class="para"><b>Episode 8 — Stone Roadmap.</b> Senku introduces modern technology to the village, establishing an industrial base: glassmaking, metalworking, agriculture, chemical production, medicine, and electricity. He also meets <strong>Chrome</strong>, a self-taught village scientist who becomes one of the Kingdom's most important members.</p>
|
||||
<p class="para"><b>Episodes 9–10 — Building the Kingdom of Science.</b> Senku discovers the villagers have never tasted many modern foods (most famously <strong>ramen</strong>) and uses this to gain support. He assembles his specialists: Chrome (experimentation), Kohaku (combat/scouting), Suika (reconnaissance), Kinro & Ginro (guards), Kaseki (master craftsman), and Ruri (village priestess). The Kingdom of Science begins to take shape.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Arc 4 · Sulfa Drug / Village Chief (Episodes 11–18)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 4</span>
|
||||
<span class="arc-name">Sulfa Drug / Village Chief</span>
|
||||
<span class="arc-meta">eps 11–18</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para"><b>Episodes 11–12 — The Grand Bout (part 1).</b> Ruri is seriously ill, and Senku determines she needs a powerful medicine — the <strong>sulfa drug</strong>, an early antibiotic. Producing it requires an enormous industrial chain: glass, sulfuric acid, nitric acid, alcohol, chemical reagents, and laboratory equipment. This becomes one of the first demonstrations of the series' central idea: <strong>modern technology depends on thousands of smaller technologies.</strong></p>
|
||||
<p class="para"><b>Episodes 13–14 — Electricity.</b> Senku and Kaseki construct a generator, giving the village electricity, light, electrical equipment, and communication tech. The creation of the <strong>light bulb</strong> represents an enormous technological milestone.</p>
|
||||
<p class="para"><b>Episodes 15–16 — The Grand Bout.</b> The village's martial tournament is held to determine its next chief; Senku enters for strategic rather than personal reasons, and ultimately becomes chief — but his primary objective remains obtaining the resources to manufacture Ruri's medicine.</p>
|
||||
<p class="para"><b>Episodes 17–18 — The Hundred Tales.</b> Ruri reveals the village's history: it was founded by <strong>Byakuya Ishigami</strong>, Senku's adoptive father and one of the astronauts aboard the ISS when humanity was petrified. The astronauts survived (they were in space during the event), returned to Earth, and established a new settlement. Byakuya created the <strong>Hundred Tales</strong>, stories designed to preserve knowledge and history — establishing a direct link between Senku and the village's founders.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Arc 5 · Cellphone / Tsukasa Conflict (Episodes 19–24)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 5</span>
|
||||
<span class="arc-name">Cellphone / Tsukasa Conflict</span>
|
||||
<span class="arc-meta">eps 19–24</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para"><b>Episodes 19–20 — The Cellphone Project.</b> Senku realizes the Kingdom needs long-distance communication and builds a primitive <strong>cellphone</strong>, requiring copper wire, batteries, glass, vacuum tubes, electrical components, magnets, speakers, and microphones. It becomes one of the Kingdom's most important strategic weapons.</p>
|
||||
<p class="para"><b>Episodes 21–22 — Preparing for War.</b> The Kingdom prepares for a direct confrontation with Tsukasa, developing communication equipment, weapons (katanas), mechanical equipment, and reconnaissance systems. Meanwhile, Tsukasa's forces become increasingly organized, and <strong>Hyoga</strong> emerges as one of Tsukasa's strongest warriors.</p>
|
||||
<p class="para"><b>Episodes 23–24 — The Stone Wars Begin.</b> The Kingdom establishes its strategy for defeating Tsukasa without destroying humanity — winning through <strong>science + communication + strategy + manpower</strong> rather than brute force. The season ends with both factions preparing for the coming Stone Wars.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SEASON 2 ============ -->
|
||||
<div class="band" id="s2" data-anim="fade">
|
||||
<h2>Season 2 — Dr. Stone: Stone Wars</h2>
|
||||
<p class="lead">The Kingdom of Science takes the offensive — and wins the war through information as much as firepower.</p>
|
||||
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">eps 1–3</span>
|
||||
<span class="arc-name">The Communications War</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">The Kingdom begins its offensive. Senku's <strong>cellphone network</strong> lets him communicate with Taiju and Yuzuriha, embedded inside Tsukasa's Empire, and <strong>Gen Asagiri</strong> becomes an important psychological weapon. Imitating voices, Gen impersonates American singer <strong>Lillian Weinberg</strong>, convincing Tsukasa's soldiers that the United States is still technologically advanced and may rescue them — making some soldiers question Tsukasa's ideology. <em>Strategic importance: information can be as powerful as physical weapons.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">eps 4–6</span>
|
||||
<span class="arc-name">Steam Gorilla & Chrome's Escape</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">The Kingdom develops a primitive motorized vehicle, the <strong>Steam Gorilla</strong>, combining steam power, mechanical engineering, metalworking, wheels, and weaponry — the Kingdom's primary mobile weapon. Meanwhile, Chrome is captured by Tsukasa's forces; rather than waiting for rescue, he uses scientific reasoning to escape, creating an improvised electrical system and exploiting the materials available to him. It proves Chrome has evolved from a village experimenter into a genuine scientist.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">eps 7–9</span>
|
||||
<span class="arc-name">The Battle for the Miracle Cave</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">The Kingdom seeks control of the <strong>Cave of Miracles</strong>, the critical source of nitric acid — the key to producing revival fluid. The battle grows dangerous as <strong>Hyoga</strong> confronts the Kingdom. Senku realizes continuing the war could destroy the remaining human population, and proposes a different solution: <strong>revive Tsukasa's sister, Mirai.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">eps 10–11</span>
|
||||
<span class="arc-name">Tsukasa and Senku</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">Senku successfully revives <strong>Mirai Shishio</strong>, and Tsukasa finally sees that Senku isn't trying to destroy everything he believes in. However, <strong>Hyoga betrays Tsukasa</strong>, and the two sides temporarily unite against him. Senku and Tsukasa defeat Hyoga, but Tsukasa is critically injured. Because the technology to properly revive him doesn't yet exist, Senku places Tsukasa into <strong>cryogenic preservation</strong>. The Stone Wars end with the Kingdom of Science effectively victorious.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ RYUSUI ============ -->
|
||||
<div class="band" id="ryusui" data-anim="fade">
|
||||
<h2>Dr. Stone: Ryusui Special</h2>
|
||||
<p class="lead">The Age of Exploration begins.</p>
|
||||
<p class="para">The Kingdom of Science gains a new objective: <strong>explore the world.</strong> Senku determines they need a ship, a captain, navigation and maps, oceanic transportation, large-scale food production, and fuel. He revives <strong>Ryusui Nanami</strong>, an extremely wealthy and experienced sailor, who immediately becomes one of the Kingdom's most important members.</p>
|
||||
<p class="para">The Kingdom creates a <strong>hot-air balloon</strong>, allowing them to survey large areas, map terrain, and search for resources — specifically <strong>oil</strong> — and to understand the geography of the Stone World. The balloon expedition becomes the beginning of humanity's return to global exploration.</p>
|
||||
</div>
|
||||
|
||||
<!-- ============ SEASON 3 ============ -->
|
||||
<div class="band" id="s3" data-anim="fade">
|
||||
<h2>Season 3 — Dr. Stone: New World</h2>
|
||||
<p class="lead">Humanity takes to the sea and across the Pacific.</p>
|
||||
|
||||
<h3>Arc 1 · Age of Exploration (Episodes 1–6)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 1</span>
|
||||
<span class="arc-name">Age of Exploration</span>
|
||||
<span class="arc-meta">eps 1–6</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para"><b>Agricultural Revolution.</b> Realizing exploration requires enormous quantities of food, the Kingdom industrializes agriculture, notably developing <strong>bread production</strong> and experimenting with wheat cultivation and food preservation. This marks a major transition: science is no longer only about survival — it now supports large-scale civilization.</p>
|
||||
<p class="para"><b>Oil Discovery.</b> The Kingdom searches for oil — essential as fuel, transportation, chemical feedstock, industrial energy, and future machinery. They locate a deposit, but finding it is only the beginning; they still need a way to extract, refine, transport, and use it.</p>
|
||||
<p class="para"><b>The Perseus.</b> Kaseki and the Kingdom construct a massive sailing ship, <strong>the Perseus</strong>, their primary exploration vessel. It contains engines, navigation systems, communication equipment, scientific laboratories, storage, weapons, and even <strong>sonar</strong> — allowing humanity to cross the Pacific Ocean.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Arc 2 · Treasure Island (Episodes 7–14)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 2</span>
|
||||
<span class="arc-name">Treasure Island</span>
|
||||
<span class="arc-meta">eps 7–14</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">The Kingdom reaches <strong>Treasure Island</strong>, an important place connected to the astronauts who survived the original petrification. The island contains the resources for virtually unlimited revival fluid, most importantly <strong>platinum</strong> — an essential component in Senku's plan for the mass production of nitric acid.</p>
|
||||
<p class="para"><b>The Petrification Weapon.</b> The expedition quickly turns into a disaster. A mysterious enemy uses a strange device capable of petrifying humans — the <strong>Medusa</strong>. The Kingdom discovers the enemy can issue commands involving distance and time, and the petrification weapon becomes one of the greatest mysteries in the series.</p>
|
||||
<p class="para"><b>Episodes 11–14 — Treasure Island Society.</b> Senku, Kohaku, Gen, and Soyuz investigate the island, discovering it has developed its own society controlled by <strong>Minister Ibara</strong>, who maintains power through the threat of the Medusa. The team discovers Soyuz has a connection to the island's ruling family, and finds evidence connecting Treasure Island to the original astronauts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Arc 3 · The Mobile Lab (Episodes 15–18)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 3</span>
|
||||
<span class="arc-name">The Mobile Lab</span>
|
||||
<span class="arc-meta">eps 15–18</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">The Kingdom constructs a <strong>mobile laboratory</strong>, letting Senku run experiments even while moving around the island, and develops increasingly advanced equipment — most importantly a primitive <strong>drone</strong> used for reconnaissance and eventually for stealing the Medusa.</p>
|
||||
<p class="para">Two of Treasure Island's strongest warriors become major opponents: <strong>Moz</strong> (exceptional physical ability) and <strong>Kirisame</strong> (an elite warrior trusted to operate the Medusa). The Kingdom must defeat or outmaneuver both to gain control of the island.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Arc 4 · The Petrification of Treasure Island (Episodes 19–22)</h3>
|
||||
<div class="arc" aria-expanded="false">
|
||||
<div class="arc-head">
|
||||
<span class="arc-tag">arc 4</span>
|
||||
<span class="arc-name">Final Battle for the Island</span>
|
||||
<span class="arc-meta">eps 19–22</span>
|
||||
<span class="arc-arrow">▾</span>
|
||||
</div>
|
||||
<div class="arc-body">
|
||||
<p class="para">Ibara attempts to use the Medusa to eliminate his enemies. The Kingdom realizes the weapon's capabilities can potentially be turned against its user, and Senku creates a highly precise strategy involving <strong>timing, distance, revival fluid, communication, positioning, and the Medusa.</strong></p>
|
||||
<p class="para"><b>The Final Battle.</b> Ibara attempts to petrify the entire island. Senku executes a carefully timed revival-fluid attack, and the strategy succeeds — Ibara is defeated and the Kingdom obtains the Medusa.</p>
|
||||
<p class="para"><b>End of Season 3.</b> The Kingdom now possesses one of the most powerful technologies in the Stone World, along with platinum, the Medusa, Treasure Island, new allies, a functioning global expedition force, and knowledge about the origins of the petrification technology. The next stage of the journey is no longer simply about rebuilding civilization — it is about discovering <strong>who petrified humanity, and why.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ TECH LADDER ============ -->
|
||||
<div class="band" id="tech" data-anim="fade">
|
||||
<h2>Major Scientific Progression</h2>
|
||||
<p class="para">The technological development of Dr. Stone can be viewed as a <strong>technological ladder</strong> — each step built on the ones before it.</p>
|
||||
<div class="tbl-wrap">
|
||||
<table class="tbl">
|
||||
<thead><tr><th>Technology</th><th>Approx. Episode</th><th>Purpose</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Revival Fluid</td><td>S1E1</td><td>Revive humans</td></tr>
|
||||
<tr><td>Basic Fire</td><td>S1E1</td><td>Cooking and survival</td></tr>
|
||||
<tr><td>Glass</td><td>S1</td><td>Laboratory equipment</td></tr>
|
||||
<tr><td>Gunpowder</td><td>S1E4</td><td>Weaponry</td></tr>
|
||||
<tr><td>Ramen</td><td>S1</td><td>Food / morale</td></tr>
|
||||
<tr><td>Sulfuric Acid</td><td>S1</td><td>Chemical industry</td></tr>
|
||||
<tr><td>Electricity</td><td>S1</td><td>Industrial power</td></tr>
|
||||
<tr><td>Light Bulb</td><td>S1</td><td>Artificial lighting</td></tr>
|
||||
<tr><td>Sulfa Drug</td><td>S1</td><td>Medical treatment</td></tr>
|
||||
<tr><td>Magnetism</td><td>S1</td><td>Electrical technology</td></tr>
|
||||
<tr><td>Cellphone</td><td>S1</td><td>Long-distance communication</td></tr>
|
||||
<tr><td>Katanas</td><td>S1</td><td>Advanced weapons</td></tr>
|
||||
<tr><td>Steam Gorilla</td><td>S2</td><td>Transportation / warfare</td></tr>
|
||||
<tr><td>Steam Engine</td><td>S2</td><td>Mechanization</td></tr>
|
||||
<tr><td>Hot-Air Balloon</td><td>Ryusui</td><td>Exploration</td></tr>
|
||||
<tr><td>Bread Production</td><td>S3</td><td>Industrial food production</td></tr>
|
||||
<tr><td>Oil Discovery</td><td>S3</td><td>Future fuel supply</td></tr>
|
||||
<tr><td>Perseus</td><td>S3</td><td>Ocean exploration</td></tr>
|
||||
<tr><td>Sonar</td><td>S3</td><td>Underwater navigation</td></tr>
|
||||
<tr><td>Mobile Lab</td><td>S3</td><td>Field science</td></tr>
|
||||
<tr><td>Drone</td><td>S3</td><td>Reconnaissance</td></tr>
|
||||
<tr><td>Mass-Production Revival System</td><td>S3</td><td>Large-scale revival</td></tr>
|
||||
<tr><td>Medusa</td><td>S3</td><td>Petrification technology</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ CHARACTERS ============ -->
|
||||
<div class="band" id="characters" data-anim="fade">
|
||||
<h2>Major Characters & Their Roles</h2>
|
||||
<div class="tbl-wrap">
|
||||
<table class="tbl">
|
||||
<thead><tr><th>Character</th><th>Role in the Kingdom of Science</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>Senku Ishigami</b></td><td>Leader, scientist, engineer</td></tr>
|
||||
<tr><td><b>Taiju Ooki</b></td><td>Strength, construction, physical labor</td></tr>
|
||||
<tr><td><b>Yuzuriha Ogawa</b></td><td>Craftsmanship, sewing, infiltration</td></tr>
|
||||
<tr><td><b>Tsukasa Shishio</b></td><td>Former enemy, combat specialist</td></tr>
|
||||
<tr><td><b>Chrome</b></td><td>Inventor and developing scientist</td></tr>
|
||||
<tr><td><b>Kohaku</b></td><td>Warrior, scout, reconnaissance</td></tr>
|
||||
<tr><td><b>Suika</b></td><td>Reconnaissance and intelligence</td></tr>
|
||||
<tr><td><b>Kaseki</b></td><td>Master craftsman</td></tr>
|
||||
<tr><td><b>Gen Asagiri</b></td><td>Psychology, deception, communications</td></tr>
|
||||
<tr><td><b>Kinro</b></td><td>Guard and warrior</td></tr>
|
||||
<tr><td><b>Ginro</b></td><td>Guard and warrior</td></tr>
|
||||
<tr><td><b>Ruri</b></td><td>Village leader and historian</td></tr>
|
||||
<tr><td><b>Byakuya Ishigami</b></td><td>Founder of Ishigami Village</td></tr>
|
||||
<tr><td><b>Ryusui Nanami</b></td><td>Captain, navigator, explorer</td></tr>
|
||||
<tr><td><b>Francois</b></td><td>Chef and logistics specialist</td></tr>
|
||||
<tr><td><b>Soyuz</b></td><td>Treasure Island connection</td></tr>
|
||||
<tr><td><b>Mirai Shishio</b></td><td>Tsukasa's sister</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ FACTIONS ============ -->
|
||||
<div class="band" id="factions" data-anim="fade">
|
||||
<h2>The Major Factions</h2>
|
||||
|
||||
<h3>Kingdom of Science</h3>
|
||||
<p class="para"><b>Leader:</b> Senku Ishigami. <b>Goal:</b> Rebuild civilization through science and revive humanity. <b>Major strengths:</b> Science, engineering, medicine, manufacturing, communication, strategic planning.</p>
|
||||
|
||||
<h3>Tsukasa Empire</h3>
|
||||
<p class="para"><b>Leader:</b> Tsukasa Shishio. <b>Original goal:</b> Create a new civilization without the adults of the old world. <b>Major strengths:</b> Physical combat, hunting, survival, military organization. Eventually, Tsukasa's interests align with Senku's larger goal.</p>
|
||||
|
||||
<h3>Ishigami Village</h3>
|
||||
<p class="para">A descendant community created by the astronauts who survived the original petrification. Its important legacy is the <b>Hundred Tales</b>, preserving knowledge of the past and providing the Kingdom of Science with its first major population base.</p>
|
||||
|
||||
<h3>Treasure Island</h3>
|
||||
<p class="para">An isolated society descended from the original survivors, whose political structure revolves around the Medusa. The island becomes critical because of its <b>platinum</b>, <b>petrification technology</b>, connection to the astronauts, and historical information.</p>
|
||||
</div>
|
||||
|
||||
<!-- ============ MYSTERIES ============ -->
|
||||
<div class="band" id="mysteries" data-anim="fade">
|
||||
<h2>Major Mysteries</h2>
|
||||
<p class="para">Several questions drive the story throughout the anime:</p>
|
||||
<ul class="clean">
|
||||
<li><b>Who caused the Petrification Event?</b> The identity of the person or entity responsible remains one of the central mysteries.</li>
|
||||
<li><b>What exactly is Medusa?</b> The petrification devices are vastly more advanced than anything humanity has reconstructed.</li>
|
||||
<li><b>Why was humanity petrified?</b> The motivation behind the event is initially unknown.</li>
|
||||
<li><b>Why did Senku and Taiju remain conscious?</b> Their ability to maintain consciousness inside the stone becomes important to understanding the petrification process.</li>
|
||||
<li><b>What happened to the rest of the world?</b> The Stone World contains clues suggesting humanity's survival was far more complicated than initially believed.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- ============ PROGRESSION ============ -->
|
||||
<div class="band" data-anim="fade">
|
||||
<h2>The Overall Story Progression</h2>
|
||||
<p class="para">The anime's technological progression can essentially be summarized as:</p>
|
||||
<p class="para" style="font-weight:700;color:var(--text);"><strong>Survival → Chemistry → Medicine → Electricity → Communication → Industry → Mechanization → Transportation → Ocean Exploration → Global Exploration → Petrification Technology</strong></p>
|
||||
<p class="para">The scale of the story continually expands. At the beginning, Senku is trying to make fire. By Season 3, the Kingdom of Science has <strong>ships, engines, electricity, medicine, industrial chemistry, communications, aircraft, drones, advanced weapons, a global exploration program, and a device capable of petrifying humanity.</strong> That progression is one of the defining features of Dr. Stone.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="back" data-anim="fade">
|
||||
<div class="btns">
|
||||
<a href="top-shows.html">← back to my top shows</a>
|
||||
<a class="secure" href="share.html">my profile</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-grav" data-anim="fade">made by <a href="index.html">miles</a>. not ai</div>
|
||||
<div class="src-note" data-anim="fade">stats: MyAnimeList (8.26 score, ~1.19M voters, ~1.98M members) & Netflix engagement reports via FlixPatrol (cumulative hours & views for seasons tracked on Netflix). runtime: 95 episodes × 24 min ≈ 38 hrs.</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
|
||||
(function bg(){
|
||||
var canvas = document.getElementById('bgCanvas');
|
||||
if(!canvas) return;
|
||||
var ctx = canvas.getContext('2d');
|
||||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var orbs = [], parts = [];
|
||||
var COLORS = [[122,199,79],[29,155,240],[34,211,153],[168,85,247]];
|
||||
function resize(){
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
seed();
|
||||
}
|
||||
function seed(){
|
||||
orbs = []; parts = [];
|
||||
var w = canvas.width, h = canvas.height;
|
||||
var oCount = Math.min(7, Math.round(w / 200) + 3);
|
||||
for(var i=0;i<oCount;i++){
|
||||
orbs.push({
|
||||
x: Math.random()*w, y: Math.random()*h,
|
||||
r: 110 + Math.random()*220,
|
||||
c: COLORS[i % COLORS.length],
|
||||
sp: 0.10 + Math.random()*0.22,
|
||||
a: 0.14 + Math.random()*0.12,
|
||||
ox: Math.random()*1000, oy: Math.random()*1000
|
||||
});
|
||||
}
|
||||
var pCount = Math.min(80, Math.round(w*h/18000));
|
||||
for(var j=0;j<pCount;j++){
|
||||
parts.push({
|
||||
x: Math.random()*w, y: Math.random()*h,
|
||||
r: 0.6 + Math.random()*1.6,
|
||||
sp: 0.05 + Math.random()*0.25,
|
||||
ph: Math.random()*Math.PI*2, oy: Math.random()*100
|
||||
});
|
||||
}
|
||||
}
|
||||
var t = 0;
|
||||
function frame(){
|
||||
requestAnimationFrame(frame);
|
||||
if(reduced) return;
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
t += 0.008;
|
||||
ctx.globalCompositeOperation = 'screen';
|
||||
for(var i=0;i<orbs.length;i++){
|
||||
var o = orbs[i];
|
||||
var nx = o.x + Math.sin(t*o.sp + o.ox) * (o.r*0.9);
|
||||
var ny = o.y + Math.cos(t*o.sp*0.8 + o.oy) * (o.r*0.7) * 0.8;
|
||||
var g = ctx.createRadialGradient(nx,ny,0,nx,ny,o.r);
|
||||
g.addColorStop(0, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+','+o.a+')');
|
||||
g.addColorStop(1, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+',0)');
|
||||
ctx.fillStyle = g;
|
||||
ctx.beginPath(); ctx.arc(nx,ny,o.r,0,Math.PI*2); ctx.fill();
|
||||
}
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.fillStyle = 'rgba(40,50,70,0.35)';
|
||||
for(var p=0;p<parts.length;p++){
|
||||
var pt = parts[p];
|
||||
var px = pt.x + Math.sin(t*pt.sp + pt.ph) * 40;
|
||||
var py = pt.y + Math.cos(t*pt.sp*0.7 + pt.ph*1.7 + pt.oy) * 26;
|
||||
var tw = 0.4 + 0.6*Math.abs(Math.sin(t*0.6 + pt.ph));
|
||||
ctx.globalAlpha = tw*0.6;
|
||||
ctx.beginPath(); ctx.arc(px%canvas.width, py%canvas.height, pt.r, 0, Math.PI*2); ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize(); frame();
|
||||
})();
|
||||
|
||||
(function load(){
|
||||
var body = document.body;
|
||||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
body.classList.add('anim');
|
||||
var done = function(){ body.classList.remove('anim'); };
|
||||
if (!window.anime || reduced) { done(); return; }
|
||||
var tl = anime.timeline({ complete: done });
|
||||
tl
|
||||
.add({ targets:'[data-anim="txt"]', translateY:[26,0], opacity:[0,1],
|
||||
duration:560, delay:anime.stagger(90), easing:'easeOutExpo' })
|
||||
.add({ targets:'[data-anim="fade"]', translateY:[24,0], opacity:[0,1],
|
||||
duration:520, delay:anime.stagger(70), easing:'easeOutQuint' });
|
||||
})();
|
||||
|
||||
document.querySelectorAll('.arc-head').forEach(function(head){
|
||||
head.addEventListener('click', function(){
|
||||
var arc = head.parentElement;
|
||||
var body = arc.querySelector('.arc-body');
|
||||
var isOpen = arc.getAttribute('aria-expanded') === 'true';
|
||||
arc.setAttribute('aria-expanded', String(!isOpen));
|
||||
if(!window.anime){
|
||||
body.style.display = isOpen ? 'none' : 'block';
|
||||
return;
|
||||
}
|
||||
if(isOpen){
|
||||
anime({ targets: body, opacity:[1,0], height:[body.scrollHeight,0],
|
||||
duration:220, easing:'easeInOutQuad',
|
||||
complete: function(){ body.style.display='none'; body.style.opacity=''; body.style.height=''; } });
|
||||
} else {
|
||||
body.style.display='block';
|
||||
body.style.opacity=0;
|
||||
body.style.height=0;
|
||||
anime({ targets: body, opacity:[0,1], height:[0, body.scrollHeight],
|
||||
duration:260, easing:'easeOutQuad',
|
||||
complete: function(){ body.style.height=''; } });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+6
-1
@@ -51,7 +51,7 @@
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html{scroll-behavior:smooth;overflow-x:hidden;}
|
||||
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:hidden;}
|
||||
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:clip;}
|
||||
::selection{background:var(--accent);color:#000;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
|
||||
@@ -1493,6 +1493,11 @@
|
||||
<div class="proj-title">Moon Gaming</div>
|
||||
<div class="proj-desc">Game hub with 1,500+ commits. Browse, play, and explore a growing library of browser games I made at 2am.</div>
|
||||
</a>
|
||||
<a class="proj-card reveal" href="avengers%20chaklist.html">
|
||||
<div class="proj-top"><span class="proj-tag lang">HTML</span><span class="proj-meta">* checklist * cookie saved</span></div>
|
||||
<div class="proj-title">Avengers: Doomsday Watchlist</div>
|
||||
<div class="proj-desc">Road to Doomsday checklist. Track what to watch before the big one, with a little why for each pick.</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
+12446
File diff suppressed because one or more lines are too long
+1
-1
@@ -16,7 +16,7 @@
|
||||
html{scroll-behavior:smooth;overflow-x:hidden;}
|
||||
body{
|
||||
background:var(--bg);color:var(--text);font-family:var(--font-body);
|
||||
line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
|
||||
line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
|
||||
body::before{
|
||||
|
||||
+136
-28
@@ -32,7 +32,8 @@
|
||||
"https://bsky.app/profile/wolfreaper90.bsky.social",
|
||||
"https://github.com/mileswolfallen2",
|
||||
"https://open.spotify.com/user/31bodx3k4uok7wcmm64hovz57udu",
|
||||
"https://www.youtube.com/channel/UCeUJbFoCDwUUg6uZi-G-zhQ"
|
||||
"https://www.youtube.com/channel/UCeUJbFoCDwUUg6uZi-G-zhQ",
|
||||
"https://www.twitch.tv/mileswa1q2"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
@@ -40,6 +41,8 @@
|
||||
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--page:#eef1f5;
|
||||
@@ -157,6 +160,9 @@
|
||||
.no-grav{margin-top:26px;font-size:13px;color:var(--muted);text-align:center;}
|
||||
.no-grav a{color:var(--accent);font-weight:600;}
|
||||
.no-grav a:hover{text-decoration:underline;}
|
||||
.sublink{margin-top:22px;text-align:center;}
|
||||
.sublink a{display:inline-block;font-size:13px;font-weight:700;color:var(--accent);border:1px solid var(--border);background:var(--card);padding:9px 18px;border-radius:999px;transition:all .15s;}
|
||||
.sublink a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,155,240,.15);}
|
||||
|
||||
@media(max-width:520px){
|
||||
body{padding:0 0 40px;}
|
||||
@@ -167,41 +173,49 @@
|
||||
.socials{grid-template-columns:repeat(4,1fr);}
|
||||
.contact-grid{grid-template-columns:1fr;}
|
||||
}
|
||||
|
||||
/* ---- Load entrance (only active while .anim is applied) ---- */
|
||||
.anim [data-anim]{opacity:0;}
|
||||
.anim .avatar{will-change:transform,opacity;}
|
||||
.anim .card{will-change:transform,opacity;}
|
||||
.soc{transition:transform .18s ease,color .15s,border-color .15s,background .15s;}
|
||||
.soc:hover{transform:translateY(-3px) scale(1.04);}
|
||||
.btn-solid{transform-origin:center;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="bgCanvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="card">
|
||||
<div class="banner">
|
||||
<div class="banner" data-anim="banner">
|
||||
<img src="back.jpg" alt="" aria-hidden="true">
|
||||
</div>
|
||||
|
||||
<div class="profile">
|
||||
<img class="avatar" src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="miles wolf allen" width="120" height="120">
|
||||
<div class="name">miles wolf allen</div>
|
||||
<div class="handle">@wolf_reaper90 · software engineer</div>
|
||||
<div class="meta">he/him · <b>MN, USA</b> · <span id="tzWatch">local time --:--:--</span></div>
|
||||
<img class="avatar" data-anim="avatar" src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="miles wolf allen" width="120" height="120">
|
||||
<div class="name" data-anim="txt">miles wolf allen</div>
|
||||
<div class="handle" data-anim="txt">@wolf_reaper90 · software engineer</div>
|
||||
<div class="meta" data-anim="txt">he/him · <b>MN, USA</b> · <span id="tzWatch">local time --:--:--</span></div>
|
||||
|
||||
<p class="bio">Developer and 3D artist interested in coding, games, and web technology. Currently learning Rust. <a href="https://milesallen.site">↗ milesallen.site</a></p>
|
||||
<p class="bio" data-anim="bio">Developer and 3D artist interested in coding, games, and web technology. Currently learning Rust. <a href="https://milesallen.site">↗ milesallen.site</a></p>
|
||||
|
||||
<div class="socials">
|
||||
<a class="soc" href="https://bsky.app/profile/wolfreaper90.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky">
|
||||
<a class="soc" data-anim="soc" href="https://bsky.app/profile/wolfreaper90.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky">
|
||||
<svg viewBox="0 0 24 24"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg>
|
||||
</a>
|
||||
<a class="soc" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" aria-label="GitHub">
|
||||
<a class="soc" data-anim="soc" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" aria-label="GitHub">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
||||
</a>
|
||||
<a class="soc" href="https://discord.com/users/1058108777112543402" target="_blank" rel="noopener" aria-label="Discord">
|
||||
<svg viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>
|
||||
<a class="soc" data-anim="soc" href="https://www.twitch.tv/mileswa1q2" target="_blank" rel="noopener" aria-label="Twitch">
|
||||
<svg viewBox="0 0 24 24"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
|
||||
</a>
|
||||
<a class="soc" href="https://www.youtube.com/channel/UCeUJbFoCDwUUg6uZi-G-zhQ" target="_blank" rel="noopener" aria-label="YouTube">
|
||||
<svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
||||
<a class="soc" data-anim="soc" href="https://discord.com/users/1058108777112543402" target="_blank" rel="noopener" aria-label="Discord">
|
||||
<svg viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section" data-anim="section">
|
||||
<div class="sec-title">Profiles</div>
|
||||
<a class="row" href="https://bsky.app/profile/wolfreaper90.bsky.social" target="_blank" rel="noopener">
|
||||
<span class="ico"><svg viewBox="0 0 24 24"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></span>
|
||||
@@ -238,6 +252,11 @@
|
||||
<span class="r-body"><span class="r-title">YouTube</span></span>
|
||||
<span class="r-right">↗</span>
|
||||
</a>
|
||||
<a class="row" href="https://www.twitch.tv/mileswa1q2" target="_blank" rel="noopener">
|
||||
<span class="ico"><svg viewBox="0 0 24 24"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg></span>
|
||||
<span class="r-body"><span class="r-title">Twitch</span></span>
|
||||
<span class="r-right">↗</span>
|
||||
</a>
|
||||
<a class="row" href="https://discord.com/users/1058108777112543402" target="_blank" rel="noopener">
|
||||
<span class="ico"><svg viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg></span>
|
||||
<span class="r-body"><span class="r-title">Discord</span></span>
|
||||
@@ -245,7 +264,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section" data-anim="section">
|
||||
<div class="sec-title">Contact</div>
|
||||
<div class="contact-grid">
|
||||
<a class="cell" href="mailto:[email protected]">
|
||||
@@ -265,12 +284,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-grav">made by <a href="index.html">miles</a>. not ai </div>
|
||||
<div class="sublink" data-anim="fade"><a href="top-shows.html">⬉ my top shows</a> · <a href="dr-stone.html">Dr. Stone breakdown</a> · <a href="bsg.html">Battlestar Galactica breakdown</a></div>
|
||||
|
||||
<div class="no-grav" data-anim="fade">made by <a href="index.html">miles</a>. not ai </div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
|
||||
// ---- Ambient drifting orbs background ----
|
||||
// ---- Ambient aurora + particle background ----
|
||||
(function bg(){
|
||||
var canvas = document.getElementById('bgCanvas');
|
||||
if(!canvas) return;
|
||||
@@ -278,6 +300,7 @@
|
||||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
var orbs = [];
|
||||
var parts = [];
|
||||
var COLORS = [
|
||||
[29,155,240], // blue
|
||||
[255,61,154], // pink
|
||||
@@ -292,16 +315,30 @@
|
||||
}
|
||||
function seed(){
|
||||
orbs = [];
|
||||
var count = Math.min(6, Math.round(canvas.width / 220) + 3);
|
||||
for(var i=0;i<count;i++){
|
||||
parts = [];
|
||||
var w = canvas.width, h = canvas.height;
|
||||
var oCount = Math.min(7, Math.round(w / 200) + 3);
|
||||
for(var i=0;i<oCount;i++){
|
||||
orbs.push({
|
||||
x: Math.random()*canvas.width,
|
||||
y: Math.random()*canvas.height,
|
||||
r: 80 + Math.random()*160,
|
||||
x: Math.random()*w,
|
||||
y: Math.random()*h,
|
||||
r: 110 + Math.random()*220,
|
||||
c: COLORS[i % COLORS.length],
|
||||
sp: 0.15 + Math.random()*0.25,
|
||||
a: 0.12 + Math.random()*0.10,
|
||||
seed: Math.random()*1000
|
||||
sp: 0.10 + Math.random()*0.22,
|
||||
a: 0.14 + Math.random()*0.12,
|
||||
ox: Math.random()*1000,
|
||||
oy: Math.random()*1000
|
||||
});
|
||||
}
|
||||
var pCount = Math.min(80, Math.round(w*h/18000));
|
||||
for(var j=0;j<pCount;j++){
|
||||
parts.push({
|
||||
x: Math.random()*w,
|
||||
y: Math.random()*h,
|
||||
r: 0.6 + Math.random()*1.6,
|
||||
sp: 0.05 + Math.random()*0.25,
|
||||
ph: Math.random()*Math.PI*2,
|
||||
oy: Math.random()*100
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -311,11 +348,14 @@
|
||||
requestAnimationFrame(frame);
|
||||
if(reduced) return;
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
t += 0.005;
|
||||
t += 0.008;
|
||||
|
||||
// aurora orbs with slow, fluid drift (composited soft light)
|
||||
ctx.globalCompositeOperation = 'screen';
|
||||
for(var i=0;i<orbs.length;i++){
|
||||
var o = orbs[i];
|
||||
var nx = o.x + Math.sin(t*o.sp + o.seed) * 90;
|
||||
var ny = o.y + Math.cos(t*o.sp*0.8 + o.seed*1.3) * 70;
|
||||
var nx = o.x + Math.sin(t*o.sp + o.ox) * (o.r*0.9);
|
||||
var ny = o.y + Math.cos(t*o.sp*0.8 + o.oy) * (o.r*0.7) * 0.8;
|
||||
var g = ctx.createRadialGradient(nx,ny,0,nx,ny,o.r);
|
||||
g.addColorStop(0, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+','+o.a+')');
|
||||
g.addColorStop(1, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+',0)');
|
||||
@@ -324,6 +364,21 @@
|
||||
ctx.arc(nx,ny,o.r,0,Math.PI*2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
|
||||
// drifting particle specks
|
||||
ctx.fillStyle = 'rgba(40,50,70,0.35)';
|
||||
for(var p=0;p<parts.length;p++){
|
||||
var pt = parts[p];
|
||||
var px = pt.x + Math.sin(t*pt.sp + pt.ph) * 40;
|
||||
var py = pt.y + Math.cos(t*pt.sp*0.7 + pt.ph*1.7 + pt.oy) * 26;
|
||||
var tw = 0.4 + 0.6*Math.abs(Math.sin(t*0.6 + pt.ph));
|
||||
ctx.globalAlpha = tw*0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(px%canvas.width, py%canvas.height, pt.r, 0, Math.PI*2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
@@ -384,6 +439,59 @@
|
||||
btn.textContent = txt; btn.disabled = true;
|
||||
setTimeout(function(){ btn.textContent = old; btn.disabled = false; }, 1400);
|
||||
}
|
||||
|
||||
// ---- Choreographed load entrance (Anime.js) ----
|
||||
(function load(){
|
||||
var body = document.body;
|
||||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
body.classList.add('anim');
|
||||
var done = function(){ body.classList.remove('anim'); };
|
||||
if (!window.anime || reduced) { done(); return; }
|
||||
|
||||
// gentle continuous pulse on the copy button via Animate.css
|
||||
var copyBtn2 = document.getElementById('copyBtn');
|
||||
if (copyBtn2) copyBtn2.classList.add('animate__animated','animate__pulse','animate__infinite','animate__slower');
|
||||
|
||||
var tl = anime.timeline({ complete: done });
|
||||
|
||||
tl
|
||||
.add({
|
||||
targets: '[data-anim="banner"]',
|
||||
translateY:[-46,0], scaleY:[0,1], opacity:[0,1],
|
||||
transformOrigin:'50% 0%',
|
||||
duration:760, easing:'easeOutQuart'
|
||||
})
|
||||
.add({
|
||||
targets: '[data-anim="avatar"]',
|
||||
scale:[0.3,1.06,1], opacity:[0,1], rotate:[-12,3,0],
|
||||
duration:850, easing:'easeOutElastic(1,0.6)',
|
||||
offset:'-=520'
|
||||
})
|
||||
.add({
|
||||
targets: '[data-anim="txt"]',
|
||||
translateY:[28,0], opacity:[0,1],
|
||||
duration:520, delay:anime.stagger(70), easing:'easeOutExpo'
|
||||
}, '-=430')
|
||||
.add({
|
||||
targets: '[data-anim="bio"]',
|
||||
translateY:[18,0], opacity:[0,1],
|
||||
duration:470, easing:'easeOutExpo'
|
||||
}, '-=340')
|
||||
.add({
|
||||
targets: '[data-anim="soc"]',
|
||||
scale:[0.4,1.12,1], rotate:[-8,4,0], opacity:[0,1],
|
||||
duration:520, delay:anime.stagger(55), easing:'easeOutElastic(1,0.7)'
|
||||
}, '-=280')
|
||||
.add({
|
||||
targets: '[data-anim="section"]',
|
||||
translateX:[64,0], opacity:[0,1],
|
||||
duration:560, delay:anime.stagger(140), easing:'easeOutQuint'
|
||||
}, '-=160')
|
||||
.add({
|
||||
targets: '[data-anim="fade"]',
|
||||
opacity:[0,1], translateY:[10,0], duration:420, easing:'easeOutQuart'
|
||||
}, '-=220');
|
||||
})();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
+18
@@ -156,4 +156,22 @@
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.1</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://milesallen.site/top-shows.html</loc>
|
||||
<lastmod>2026-08-30</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://milesallen.site/dr-stone.html</loc>
|
||||
<lastmod>2026-09-06</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://milesallen.site/bsg.html</loc>
|
||||
<lastmod>2026-09-06</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
|
||||
+584
@@ -0,0 +1,584 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>top shows · miles wolf allen</title>
|
||||
<meta name="description" content="Miles Wolf Allen's top shows: Jujutsu Kaisen, Dr. Stone, Battlestar Galactica, and Invincible — ranked with details.">
|
||||
<meta name="author" content="Miles Wolf Allen">
|
||||
<link rel="canonical" href="https://milesallen.site/top-shows.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="top shows · miles wolf allen">
|
||||
<meta property="og:description" content="My top 4 shows, ranked: their stats, what they're about, and why they made the list.">
|
||||
<meta property="og:url" content="https://milesallen.site/top-shows.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="top shows · miles wolf allen">
|
||||
<meta name="twitter:description" content="My top 4 shows, ranked: their stats, what they're about, and why they made the list.">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--page:#eef1f5;
|
||||
--card:#ffffff;
|
||||
--border:#e3e8ee;
|
||||
--text:#14161a;
|
||||
--muted:#647182;
|
||||
--accent:#1d9bf0;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html{scroll-behavior:smooth;}
|
||||
body{
|
||||
background:var(--page);color:var(--text);
|
||||
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
line-height:1.6;
|
||||
display:flex;flex-direction:column;align-items:center;
|
||||
min-height:100vh;padding:40px 20px 64px;
|
||||
overflow-x:hidden;position:relative;
|
||||
}
|
||||
body::after{
|
||||
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||||
background-image:
|
||||
linear-gradient(rgba(20,22,26,.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(20,22,26,.045) 1px, transparent 1px);
|
||||
background-size:44px 44px;
|
||||
-webkit-mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
|
||||
mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
|
||||
}
|
||||
#bgCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
|
||||
.page-head{width:100%;max-width:680px;text-align:center;margin-bottom:26px;}
|
||||
.crumbs{font-size:12px;color:var(--muted);}
|
||||
.crumbs a{color:var(--accent);font-weight:600;}
|
||||
.crumbs a:hover{text-decoration:underline;}
|
||||
.page-title{font-size:30px;font-weight:900;letter-spacing:-.02em;margin-top:8px;}
|
||||
.page-sub{font-size:14px;color:var(--muted);margin-top:6px;}
|
||||
|
||||
.card{
|
||||
width:100%;max-width:680px;display:flex;flex-direction:column;gap:18px;
|
||||
}
|
||||
|
||||
.show{
|
||||
background:var(--card);border:1px solid var(--border);border-radius:18px;
|
||||
overflow:hidden;display:flex;gap:20px;padding:22px;
|
||||
box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.10);
|
||||
}
|
||||
.poster{position:relative;flex-shrink:0;width:130px;align-self:flex-start;}
|
||||
.poster img{width:130px;height:auto;border-radius:12px;display:block;border:1px solid var(--border);
|
||||
box-shadow:0 6px 18px rgba(16,24,40,.18);}
|
||||
.score{
|
||||
position:absolute;right:-14px;bottom:-12px;width:56px;height:56px;border-radius:50%;
|
||||
display:flex;align-items:center;justify-content:center;flex-direction:column;
|
||||
color:#fff;font-weight:900;font-size:17px;line-height:1;
|
||||
border:3px solid var(--card);
|
||||
}
|
||||
.score .of{font-size:9px;font-weight:700;letter-spacing:.04em;margin-top:2px;opacity:.95;}
|
||||
.score.s1{background:linear-gradient(135deg,#f6c343,#e8930a);box-shadow:0 4px 14px rgba(232,147,10,.5);}
|
||||
.score.s2{background:linear-gradient(135deg,#cfd6df,#8b96a5);box-shadow:0 4px 14px rgba(139,150,165,.45);}
|
||||
.score.s3{background:linear-gradient(135deg,#e2a06e,#b06a3c);box-shadow:0 4px 14px rgba(176,106,60,.45);}
|
||||
.score.s4{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 4px 14px rgba(109,40,217,.45);}
|
||||
.rank{
|
||||
width:56px;height:56px;border-radius:50%;flex-shrink:0;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-weight:900;font-size:24px;color:#fff;
|
||||
margin-top:4px;
|
||||
}
|
||||
.rank.r1{background:linear-gradient(135deg,#f6c343,#e8930a);box-shadow:0 4px 14px rgba(232,147,10,.4);}
|
||||
.rank.r2{background:linear-gradient(135deg,#cfd6df,#949fad);box-shadow:0 4px 14px rgba(148,159,173,.35);}
|
||||
.rank.r3{background:linear-gradient(135deg,#e2a06e,#b06a3c);box-shadow:0 4px 14px rgba(176,106,60,.35);}
|
||||
.rank.r4{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 4px 14px rgba(109,40,217,.35);}
|
||||
.show-body{flex:1;min-width:0;}
|
||||
.show-title{font-size:21px;font-weight:800;letter-spacing:-.01em;}
|
||||
.show-type{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
|
||||
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
|
||||
.chip{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:#f7f9fb;}
|
||||
.synopsis{font-size:14px;color:#2a2f37;margin-top:13px;}
|
||||
.why{margin-top:13px;font-size:13.5px;background:#f4f8fc;border-left:3px solid var(--accent);border-radius:8px;padding:11px 14px;}
|
||||
.why b{color:var(--text);}
|
||||
|
||||
.show-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;}
|
||||
.action-btn{
|
||||
font-family:inherit;font-size:12px;font-weight:700;
|
||||
color:var(--accent);border:1px solid var(--border);background:var(--card);
|
||||
padding:7px 15px;border-radius:999px;cursor:pointer;
|
||||
transition:all .15s;text-decoration:none;
|
||||
}
|
||||
.action-btn:hover{border-color:var(--accent);background:#f4f8fc;transform:translateY(-1px);}
|
||||
.action-btn[aria-expanded="true"]{background:var(--accent);color:#fff;border-color:var(--accent);}
|
||||
|
||||
.more{display:none;}
|
||||
|
||||
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;}
|
||||
.modal.open{display:flex;}
|
||||
.modal-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 30% 18%,rgba(29,155,240,.16),transparent 55%),rgba(17,20,26,.62);backdrop-filter:blur(4px);}
|
||||
.modal-card{
|
||||
position:relative;width:100%;max-width:680px;max-height:84vh;
|
||||
display:flex;flex-direction:column;
|
||||
background:var(--card);border:1px solid rgba(29,155,240,.22);border-radius:20px;
|
||||
box-shadow:0 32px 90px rgba(16,24,40,.5),0 8px 24px rgba(16,24,40,.3);
|
||||
overflow:hidden;animation:modalIn .28s cubic-bezier(.22,1,.36,1);
|
||||
}
|
||||
@keyframes modalIn{from{transform:translateY(24px) scale(.96);opacity:0;}to{transform:none;opacity:1;}}
|
||||
.modal-head{display:flex;flex-direction:column;gap:3px;padding:20px 56px 18px 26px;background:linear-gradient(180deg,#f6fafe,var(--card));border-bottom:1px solid var(--border);}
|
||||
.modal-eyebrow{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);}
|
||||
.modal-title{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--text);}
|
||||
.modal-head::after{content:'';display:block;width:44px;height:3px;border-radius:99px;background:var(--accent);margin-top:10px;}
|
||||
.modal-close{
|
||||
position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
|
||||
border:1px solid var(--border);background:var(--card);color:var(--muted);
|
||||
font-size:18px;line-height:1;cursor:pointer;z-index:2;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
transition:transform .2s ease,color .15s,border-color .15s,background .15s;
|
||||
}
|
||||
.modal-close:hover{color:var(--accent);border-color:var(--accent);background:#f6fafe;transform:rotate(90deg);}
|
||||
.modal-body{overflow-y:auto;padding:22px 28px 30px;min-height:0;}
|
||||
.modal-body::-webkit-scrollbar{width:10px;}
|
||||
.modal-body::-webkit-scrollbar-track{background:transparent;}
|
||||
.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:3px solid var(--card);}
|
||||
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--muted);}
|
||||
.more-inner{font-size:13.5px;color:#2a2f37;line-height:1.7;}
|
||||
.more-inner h4{font-size:15px;margin:20px 0 8px;color:var(--text);font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;}
|
||||
.more-inner h4:first-child{margin-top:2px;font-size:16px;}
|
||||
.more-inner h4::before{content:'';width:4px;height:16px;border-radius:99px;background:var(--accent);flex-shrink:0;}
|
||||
.more-inner p{margin:10px 0;color:#3a4150;}
|
||||
.more-inner ul{margin:10px 0 10px 4px;padding:0;list-style:none;}
|
||||
.more-inner li{margin:8px 0;padding-left:20px;position:relative;color:#3a4150;}
|
||||
.more-inner li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--accent);opacity:.35;}
|
||||
.more-inner strong{color:var(--text);font-weight:700;}
|
||||
.more-table{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0;font-size:12.5px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
|
||||
.more-table th,.more-table td{border-bottom:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top;}
|
||||
.more-table tr:last-child td{border-bottom:none;}
|
||||
.more-table th{background:#eaf1f8;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#4a5568;}
|
||||
.more-table td{border-right:1px solid var(--border);}
|
||||
.more-table td:last-child{border-right:none;}
|
||||
.more-inner p{margin:8px 0;}
|
||||
.more-inner ul{margin:8px 0 8px 18px;padding:0;}
|
||||
.more-inner li{margin:5px 0;}
|
||||
.more-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12px;}
|
||||
.more-table th,.more-table td{border:1px solid var(--border);padding:6px 9px;text-align:left;vertical-align:top;}
|
||||
.more-table th{background:#eaf1f8;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#4a5568;}
|
||||
|
||||
.back{width:100%;max-width:680px;text-align:center;margin-top:30px;}
|
||||
.back a{display:inline-block;font-size:14px;font-weight:700;color:var(--accent);border:1px solid var(--border);background:var(--card);padding:10px 20px;border-radius:999px;transition:all .15s;}
|
||||
.back a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,155,240,.15);}
|
||||
|
||||
.no-grav{margin-top:34px;font-size:13px;color:var(--muted);text-align:center;}
|
||||
.no-grav a{color:var(--accent);font-weight:600;}
|
||||
.no-grav a:hover{text-decoration:underline;}
|
||||
|
||||
/* ---- Load entrance (only active while .anim is applied) ---- */
|
||||
.anim [data-anim]{opacity:0;}
|
||||
.anim .rank{will-change:transform,opacity;}
|
||||
.anim .show{will-change:transform,opacity;}
|
||||
|
||||
@media(max-width:560px){
|
||||
body{padding:32px 16px 48px;}
|
||||
.page-title{font-size:24px;}
|
||||
.show{padding:18px;gap:16px;flex-direction:row;align-items:flex-start;}
|
||||
.poster{width:96px;}
|
||||
.poster img{width:96px;}
|
||||
.score{right:-10px;bottom:-10px;width:48px;height:48px;font-size:14px;}
|
||||
.show-title{font-size:18px;}
|
||||
.rank{width:40px;height:40px;font-size:17px;}
|
||||
}
|
||||
@media(max-width:420px){
|
||||
.show{flex-direction:column;align-items:flex-start;}
|
||||
.poster{width:120px;}
|
||||
.poster img{width:120px;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="bgCanvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="page-head">
|
||||
<div class="crumbs"><a href="share.html">↩ miles wolf allen</a></div>
|
||||
<div class="page-title" data-anim="txt">top shows</div>
|
||||
<div class="page-sub" data-anim="txt">my current top 4 shows, ranked & scored</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="show" data-anim="show">
|
||||
<div class="poster" data-anim="poster">
|
||||
<img src="https://image.tmdb.org/t/p/w400/fHpKWq9ayzSk8nSwqRuaAUemRKh.jpg" alt="Jujutsu Kaisen poster" loading="lazy">
|
||||
<span class="score s1"><span>10</span><span class="of">/10</span></span>
|
||||
</div>
|
||||
<div class="rank r1" data-anim="rank">1</div>
|
||||
<div class="show-body">
|
||||
<div class="show-title">Jujutsu Kaisen</div>
|
||||
<div class="show-type">anime · action · dark fantasy</div>
|
||||
<div class="chips">
|
||||
<span class="chip">Studio MAPPA</span>
|
||||
<span class="chip">2020–present</span>
|
||||
<span class="chip">action</span>
|
||||
<span class="chip">supernatural</span>
|
||||
</div>
|
||||
<p class="synopsis">After swallowing the rotting finger of the ancient curse Sukuna, ordinary high schooler Yuji Itadori becomes the vessel for one of the most dangerous spirits in existence. Thrown into the hidden world of jujutsu sorcerers, he joins Tokyo Jujutsu High to exorcise curses — and train until he can destroy Sukuna from within.</p>
|
||||
<p class="why"><b>Why it's #1:</b> unmatched fight choreography, gorgeous animation, a genuinely intense atmosphere.do i need to say more?</p>
|
||||
<div class="show-actions">
|
||||
<button class="action-btn" data-target="more-jjk" data-title="Jujutsu Kaisen" aria-expanded="false">show more info</button>
|
||||
</div>
|
||||
<div class="more" id="more-jjk">
|
||||
<div class="more-inner">
|
||||
<h4>Why Jujutsu Kaisen Earns the #1 Spot: A Deep Dive</h4>
|
||||
<p>Jujutsu Kaisen (JJK) has taken the global anime landscape by storm, establishing itself as the definitive modern peak of modern <em>shonen</em> and dark fantasy action. While the shonen genre is densely populated with tropes and familiar structures, JJK sets itself apart through a total dedication to technical combat mastery, cinematic visual direction, and a uniquely unforgiving atmosphere. Below is an in-depth breakdown of why it secures the undisputed #1 spot.</p>
|
||||
<h4>1. Unmatched Fight Choreography</h4>
|
||||
<p>Action in Jujutsu Kaisen is never just a vehicle to show off flashy power-ups; it is built on intricate, tactical, and grounded combat design. Every encounter functions almost like a high-speed chess match executed with brutal martial arts precision.</p>
|
||||
<ul>
|
||||
<li><strong>Tactical Depth & Hand-to-Hand Precision:</strong> The series frequently highlights close-quarters martial arts—such as Taekwondo, boxing, and classical martial arts—blended seamlessly with supernatural mechanics like Black Flash timing, Cursed Technique Reversal, and domain clashes. Combatants must continually assess distance, momentum, and body mechanics.</li>
|
||||
<li><strong>Hard Magic System Mechanics:</strong> The power system relies heavily on strict rules, such as Binding Vows (sacrificing one advantage to gain another) and revealing one's technique to boost its efficiency. This prevents victory from feeling unearned or powered purely by emotional outbursts.</li>
|
||||
<li><strong>Masterful Tag-Team Synergy:</strong> Fights involving multiple characters—most notably Yuji Itadori pairing with Aoi Todo or Kento Nanami—are widely regarded as gold standards in action direction. The fluid swaps, spatial manipulation, and rhythmic timing turn multi-person brawls into hypnotic displays of strategic teamwork.</li>
|
||||
</ul>
|
||||
<h4>2. Gorgeous Animation and Visual Direction</h4>
|
||||
<p>Brought to life by Studio MAPPA, Jujutsu Kaisen consistently pushes the boundaries of contemporary anime production, delivering feature-film quality visuals throughout its broadcast runs.</p>
|
||||
<table class="more-table">
|
||||
<thead><tr><th>Visual Aspect</th><th>Technical Execution</th><th>Impact on Viewer Experience</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Kinetic Camera Movement</td><td>Dynamic virtual camera tracking shot through 3D environments.</td><td>Creates an immersive sense of speed, weight, and visceral scale during combat.</td></tr>
|
||||
<tr><td>Expressive Sakuga</td><td>Shifting between sharp detail and loose, fluid keyframe animation.</td><td>Conveys raw impact, velocity, and emotional distortion during climax moments.</td></tr>
|
||||
<tr><td>VFX & Domain Expansions</td><td>Distinct visual palettes for Cursed Energy (e.g., Gojo's Limitless or Sukuna's Malevolent Shrine).</td><td>Provides breathtaking visual spectacle that transforms the arena into a living work of art.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4>3. A Genuinely Intense, High-Stakes Atmosphere</h4>
|
||||
<p>Perhaps the most defining element of Jujutsu Kaisen is its willingness to abandon traditional shonen safety nets, creating a perpetual sense of danger where no character is truly safe.</p>
|
||||
<ul>
|
||||
<li><strong>Refusal of Plot Armor:</strong> Major protagonists experience severe physical trauma, permanent maiming, or sudden, tragic deaths. Victories are often costly and bittersweet, keeping audience anxiety high during every encounter.</li>
|
||||
<li><strong>Horror Aesthetics & Dark Fantasy:</strong> Drawing inspiration from classic horror and occult folklore, Cursed Spirits represent visceral human fears. The grotesque character designs, unsettling domain environments, and body-horror transformations contrast heavily with standard action anime tropes.</li>
|
||||
<li><strong>Unpredictable Narrative Pacing:</strong> Key story arcs, most notably the Shibuya Incident, completely dismantle the status quo without warning. The story moves at a blistering pace, refusing to rely on excessive filler or prolonged exposition.</li>
|
||||
</ul>
|
||||
<p><strong>Conclusion: Do I Need to Say More?</strong> When an anime combines revolutionary fight choreography, jaw-dropping visual artistry, and a truly unpredictable, high-stakes narrative atmosphere, it transcends standard entertainment. Jujutsu Kaisen doesn't just top the charts—it redefines what modern action anime can achieve. Do you really need to say more?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="show" data-anim="show">
|
||||
<div class="poster" data-anim="poster">
|
||||
<img src="https://image.tmdb.org/t/p/w400/xbZQ3fDl0y5mt0ARwfeyrgQ4JTw.jpg" alt="Dr. Stone poster" loading="lazy">
|
||||
<span class="score s2"><span>8.5</span><span class="of">/10</span></span>
|
||||
</div>
|
||||
<div class="rank r2" data-anim="rank">2</div>
|
||||
<div class="show-body">
|
||||
<div class="show-title">Dr. Stone</div>
|
||||
<div class="show-type">anime · adventure · sci-fi</div>
|
||||
<div class="chips">
|
||||
<span class="chip">Studio TMS / 8-PAN</span>
|
||||
<span class="chip">2019–present</span>
|
||||
<span class="chip">science</span>
|
||||
<span class="chip">comedy</span>
|
||||
</div>
|
||||
<p class="synopsis">In the blink of an eye, all of humanity is turned to stone — and stays that way for 3,700 years. When genius high schooler Senku Ishigami finally awakens, he finds civilization in ruins and sets out to rebuild it from scratch, one scientific breakthrough at a time: stone tools, gunpowder, electricity, and beyond.</p>
|
||||
<p class="why"><b>Why it's #2:</b> it makes real science feel like a superpower, with clever problem-solving and a fun cast that keeps the "step by step" progression endlessly satisfying. but if you do not like science, it might not be as engaging and boring to watch.</p>
|
||||
<div class="show-actions">
|
||||
<button class="action-btn" data-target="more-dst" data-title="Dr. Stone" aria-expanded="false">show more info</button>
|
||||
<a class="action-btn" href="dr-stone.html">full episode breakdown →</a>
|
||||
</div>
|
||||
<div class="more" id="more-dst">
|
||||
<div class="more-inner">
|
||||
<h4>The Dr. Stone Divide: Why a Science Fiction Phenomenon Polarizes Audiences</h4>
|
||||
<p>Dr. Stone stands out as one of the most unique Shonen properties of the modern era. By replacing magical combat and power-scaling with the scientific method and civil engineering, it gamified the history of human progress. However, while it has garnered a fiercely dedicated fanbase, it also leaves a specific segment of anime and manga consumers entirely cold. This report analyzes the core elements that drive the show's intense resonance with some, and the friction points that alienate others.</p>
|
||||
<h4>1. Why It Resonates: The Core Appeal</h4>
|
||||
<p><strong>The "Civ-Building" Hook.</strong> At its core, Dr. Stone taps into the exact psychological loop that makes sandbox and strategy games like Minecraft or Civilization so addictive. Viewers are treated to a rapid, highly satisfying progression from primitive stone tools to electricity, antibiotics, and telecommunications. The joy lies in seeing systemic progression—watching characters use baseline resources to climb the tech tree.</p>
|
||||
<p><strong>A Unique Shonen Protagonist.</strong> Senku Ishigami is a breath of fresh air in a genre dominated by hot-headed, physically powerful protagonists. Senku's "power" is his encyclopedic knowledge and unshakeable rationality. However, he subverts the "cold, calculating genius" trope by being deeply compassionate; his ultimate goal is to save every single human being without exception.</p>
|
||||
<p><strong>Infotainment and Edutainment.</strong> Dr. Stone effectively weaponizes education. Real-world chemistry, physics, and engineering are used to solve life-or-death problems. The "Roadmap" sequences—where Senku maps out the steps to build complex items like a smartphone or a tank—make learning incredibly engaging. It is a love letter to human ingenuity.</p>
|
||||
<p><strong>Unbridled Optimism.</strong> Post-apocalyptic settings are usually grim, desperate, and cynical. Dr. Stone is overwhelmingly optimistic. It argues that humanity is inherently good, that cooperation triumphs over division, and that science is a unifying force.</p>
|
||||
<h4>2. Why It Alienates: The Points of Friction</h4>
|
||||
<p><strong>The "Science" vs. "Realism" Problem.</strong> While the theories behind the science in the show are accurate, the execution heavily relies on narrative convenience. The speed at which resources are found, refined, and assembled by a handful of teenagers with primitive tools shatters the suspension of disbelief for many viewers (e.g., Senku accurately counting the seconds for 3,700 years while petrified).</p>
|
||||
<p><strong>Lack of True Stakes and Tension.</strong> The petrification beam, a central plot device, effectively acts as a magical healing potion. Because the "revival fluid" can cure mortal wounds and even resurrect the recently deceased (as long as they are petrified first), the threat of death is virtually eliminated. For viewers who need high stakes and dramatic tension to stay invested, the story quickly loses its edge.</p>
|
||||
<p><strong>Pacing and Character Bloat.</strong> As the kingdom expands, so does the cast. Early fan-favorite characters are increasingly sidelined as the story introduces highly specialized (and often one-note) characters to solve specific tech-tree problems. Furthermore, in the latter half of the story, the pacing accelerates wildly, skipping the meticulous building phases that made the early arcs so rewarding.</p>
|
||||
<p><strong>Polarizing Art Direction.</strong> Artist Boichi is a master at drawing landscapes, machinery, and expressive male characters. However, his designs for female characters are intensely polarizing. Their highly exaggerated proportions and unusually wide-set eyes often draw criticism and can be off-putting to new viewers, creating a barrier to entry.</p>
|
||||
<p><strong>Tonal Whiplash.</strong> The series frequently swings between life-or-death drama and exaggerated, goofy comedy featuring "chibi" character reactions. For those looking for a grounded survival story, this meme-heavy, slapstick humor can feel grating and childish.</p>
|
||||
<h4>Conclusion</h4>
|
||||
<p>Dr. Stone is a polarizing masterpiece. If a viewer approaches it as an optimistic, gamified celebration of human history where science is treated like magic, it is an incredibly rewarding experience. However, if a viewer approaches it expecting a gritty, realistic survival drama with intense character stakes, the series will inevitably feel absurd and emotionally hollow. Its greatest strengths—its rapid pacing and unshakeable optimism—are the exact same traits that drive its detractors away.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="show" data-anim="show">
|
||||
<div class="poster" data-anim="poster">
|
||||
<img src="https://image.tmdb.org/t/p/w400/99PJSbcO2LeM10uOGWeFihNp77j.jpg" alt="Battlestar Galactica poster" loading="lazy">
|
||||
<span class="score s3"><span>8</span><span class="of">/10</span></span>
|
||||
</div>
|
||||
<div class="rank r3" data-anim="rank">3</div>
|
||||
<div class="show-body">
|
||||
<div class="show-title">Battlestar Galactica</div>
|
||||
<div class="show-type">tv series · sci-fi · drama</div>
|
||||
<div class="chips">
|
||||
<span class="chip">Syfy</span>
|
||||
<span class="chip">2004–2009</span>
|
||||
<span class="chip">sci-fi</span>
|
||||
<span class="chip">drama</span>
|
||||
</div>
|
||||
<p class="synopsis">When the Cylons return and obliterate the twelve colonies, the aging warship Galactica leads the last remnants of humanity on a desperate journey toward the fabled thirteenth colony, Earth — hunted the whole way by machines that look indistinguishable from people.</p>
|
||||
<p class="why"><b>Why it's #3:</b> it's really good until about season three and four, where it starts to become kind of a slog. but it is still great.</p>
|
||||
<div class="show-actions">
|
||||
<button class="action-btn" data-target="more-bsg" data-title="Battlestar Galactica" aria-expanded="false">show more info</button>
|
||||
<a class="action-btn" href="bsg.html">full episode breakdown →</a>
|
||||
</div>
|
||||
<div class="more" id="more-bsg">
|
||||
<div class="more-inner">
|
||||
<h4>Why People Like Battlestar Galactica (#3): An Expanded Analysis</h4>
|
||||
<p>The 2004 reimagining of Battlestar Galactica (BSG), developed by Ronald D. Moore, stands as a landmark achievement in modern television. By blending military realism, intense political drama, and psychological survival, it fundamentally reshaped how science fiction could be told on television. While it secures an elite #3 spot among legendary sci-fi series, its legacy is defined by both breathtaking early brilliance and a noticeably slower late-series transition.</p>
|
||||
<h4>1. Peak Sci-Fi Television (Seasons 1 & 2)</h4>
|
||||
<p>The opening two seasons of Battlestar Galactica represent some of the tightest, most harrowing television ever produced, establishing a gold standard for serialized storytelling.</p>
|
||||
<ul>
|
||||
<li><strong>Paranoia and Suspense:</strong> The introduction of humanoid Cylons created an atmosphere of absolute paranoia. The horrifying reality that anyone—from a low-ranking deckhand to a high-ranking officer—could be a sleeping enemy agent maintained unbearable tension.</li>
|
||||
<li><strong>Gritty Documentary Realism:</strong> Utilizing hand-held camera work, muted color palettes, and Newtonian space physics, BSG discarded the bright, clean aesthetic of classic sci-fi. Resources like water, ammunition, and fuel were finite and tracked constantly.</li>
|
||||
<li><strong>Compelling Moral & Political Allegories:</strong> Airing during the mid-2000s, the series fearlessly tackled heavy real-world themes, including military vs. civilian governance, religious fanaticism, terrorism, civil liberty erosion, and military coups.</li>
|
||||
</ul>
|
||||
<h4>2. The Late-Series Shift: Becoming a Slog (Seasons 3 & 4)</h4>
|
||||
<p>Despite its explosive start, the series undergoes a profound thematic and structural shift during its second half that noticeably alters the viewing experience.</p>
|
||||
<table class="more-table">
|
||||
<thead><tr><th>Narrative Phase</th><th>Core Focus</th><th>Pacing & Audience Perception</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Seasons 1–2</td><td>Tactical military survival, political intrigue, and immediate crisis management.</td><td>Fast-paced, hyper-focused, and relentlessly intense.</td></tr>
|
||||
<tr><td>Seasons 3–4</td><td>Prophecy, ancient religious lore, existential mystery, and spiritual destiny.</td><td>Slower, more philosophical, and occasionally feels like a narrative slog.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul>
|
||||
<li><strong>Pacing De-acceleration:</strong> As the immediate threat of annihilation shifts toward finding Earth, the tight episode-to-episode momentum slows down considerably into long, contemplative character arcs.</li>
|
||||
<li><strong>Heavy Focus on Mysticism over Tactical Realism:</strong> The tactical and political grounding that drew in early viewers was increasingly replaced by prophecies, angelic visions, and religious destiny, which alienated fans who preferred hard military sci-fi.</li>
|
||||
<li><strong>Emotional Trauma & Fatigue:</strong> The characters endure unending grief, betrayal, and mental decay. By Seasons 3 and 4, this persistent despair makes binge-watching feel heavy and emotionally draining.</li>
|
||||
</ul>
|
||||
<h4>3. Why It Remains Great Despite the Slowdown</h4>
|
||||
<p>Even with its late-season pacing hurdles and polarized finale, Battlestar Galactica firmly retains its #3 standing due to its foundational strengths and lasting influence.</p>
|
||||
<ul>
|
||||
<li><strong>Flawed, Iconic Characters:</strong> Figures like Commander William Adama, President Laura Roslin, Gaius Baltar, and Kara "Starbuck" Thrace remain among the most deeply human, morally grey, and beautifully acted characters in screen history.</li>
|
||||
<li><strong>Bear McCreary's Legendary Score:</strong> The musical score—utilizing heavy percussion, orchestral movements, and global instrumental influences—elevates every emotional and action beat, providing a rich cultural backdrop to the human fleet.</li>
|
||||
<li><strong>Structural Legacy:</strong> BSG paved the way for prestige, serialized genre television (such as The Expanse, Game of Thrones, and Andor), proving that sci-fi could tackle prestige adult drama without holding back.</li>
|
||||
</ul>
|
||||
<h4>Conclusion</h4>
|
||||
<p>While Seasons 3 and 4 do become kind of a slog compared to the blistering speed of its beginning, Battlestar Galactica easily holds down its #3 spot. Its peak moments are virtually unmatched, cementing it as an undeniable classic of television history.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="show" data-anim="show">
|
||||
<div class="poster" data-anim="poster">
|
||||
<img src="https://image.tmdb.org/t/p/w400/4tblBrslcKSifMVZ3TmtT2ukMor.jpg" alt="Invincible poster" loading="lazy">
|
||||
<span class="score s4"><span>7.5</span><span class="of">/10</span></span>
|
||||
</div>
|
||||
<div class="rank r4" data-anim="rank">4</div>
|
||||
<div class="show-body">
|
||||
<div class="show-title">Invincible</div>
|
||||
<div class="show-type">animated series · superhero · drama</div>
|
||||
<div class="chips">
|
||||
<span class="chip">Amazon Prime Video</span>
|
||||
<span class="chip">2021–present</span>
|
||||
<span class="chip">superhero</span>
|
||||
<span class="chip">action-drama</span>
|
||||
</div>
|
||||
<p class="synopsis">Mark Grayson is just a regular teenager — until he inherits superpowers from his father, Omni-Man, Earth's greatest hero. As the rookie hero Invincible, he learns that being the son of a legend is nowhere near as simple as it looks when a dark family secret threatens everything he thought he knew.</p>
|
||||
<p class="why"><b>Why it's #4:</b> it's number four because of the way it toys around with superhero ideas in flipping them around, truly having complex characters that can actually change, it does the cliché of the evil superhero very well and really shows itself off even on the first episode alone.</p>
|
||||
<div class="show-actions">
|
||||
<button class="action-btn" data-target="more-inv" data-title="Invincible" aria-expanded="false">show more info</button>
|
||||
</div>
|
||||
<div class="more" id="more-inv">
|
||||
<div class="more-inner">
|
||||
<h4>Why Invincible Earns the #4 Spot</h4>
|
||||
<p>Among modern animated adaptations and superhero sagas, Invincible stands out as a triumph of storytelling. By combining classic comic book nostalgia with visceral realism, moral complexity, and subverted expectations, the series redefines what a superhero story can accomplish. Below is a detailed breakdown of why it comfortably claims the #4 spot.</p>
|
||||
<h4>1. Subverting and Flipping Superhero Tropes</h4>
|
||||
<p>On the surface, Invincible presents a familiar superhero world populated by archetypes reminiscent of iconic comic book leagues. However, it constantly subverts these foundational ideas:</p>
|
||||
<ul>
|
||||
<li><strong>Deconstructing Silver Age Nostalgia:</strong> It takes well-known comic book tropes—teen heroes juggling high school, secret identities, and cosmic threats—and grounds them in brutal reality.</li>
|
||||
<li><strong>Consequences to Collateral Damage:</strong> In traditional superhero stories, city-wide battles often reset by the next issue. In Invincible, destruction leaves permanent scars on the world, its infrastructure, and the civilian population.</li>
|
||||
<li><strong>Flipping Expectation:</strong> What starts as an optimistic coming-of-age story quickly dismantles the safety of the genre, forcing heroes to confront impossible systemic choices.</li>
|
||||
</ul>
|
||||
<h4>2. Complex Characters Who Actually Change</h4>
|
||||
<p>One of the strongest elements of Invincible is its refusal to keep characters trapped in a status-quo loop. Character growth is permanent, painful, and earned.</p>
|
||||
<table class="more-table">
|
||||
<thead><tr><th>Character</th><th>Core Conflict</th><th>Nature of Character Evolution</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Mark Grayson (Invincible)</td><td>Balancing human empathy with overwhelming alien lineage.</td><td>Evolves from an idealistic rookie into a battle-hardened hero who must make devastating compromises.</td></tr>
|
||||
<tr><td>Nolan Grayson (Omni-Man)</td><td>Duty to the Viltrum Empire vs. genuine love for his human family.</td><td>Shifts from an unyielding conqueror to a deeply conflicted figure tormented by his own humanity.</td></tr>
|
||||
<tr><td>Samantha Eve Wilkins (Atom Eve)</td><td>Choosing self-determination over heroic expectations and toxic family dynamics.</td><td>Transitions from a standard team hero to an independent force using her powers for humanitarian aid.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4>3. Mastering the "Evil Superhero" Cliché</h4>
|
||||
<p>The "evil Superman" archetype has become a common narrative trope in modern media, but Invincible executes it far better than most by providing emotional weight and genuine complexity:</p>
|
||||
<ul>
|
||||
<li><strong>Grounded Ideological Conflict:</strong> Omni-Man isn't evil simply for the sake of destruction or vanity. His motivations stem from centuries of imperial indoctrination, making his actions cold, calculated, and ideologically driven.</li>
|
||||
<li><strong>Tragic Emotional Stakes:</strong> The tragedy of Nolan's betrayal hits deeply because his love for Mark and Debbie was real, creating a visceral friction between his mission and his emotions.</li>
|
||||
<li><strong>Long-Term Narrative Ripple Effects:</strong> The fallout of the "evil superhero" isn't resolved in a single fight; it reshapes geopolitical alliances, alien perceptions, and Mark's entire personal philosophy.</li>
|
||||
</ul>
|
||||
<h4>4. A Masterclass Opening Episode</h4>
|
||||
<p>Few shows establish their tone and promise as effectively as Invincible does in its very first episode:</p>
|
||||
<ul>
|
||||
<li><strong>The Ultimate Hook:</strong> After spending nearly an hour building up a bright, classic superhero landscape, the final minutes deliver a shockingly violent, narrative-defining twist that changes everything.</li>
|
||||
<li><strong>Immediate Escalation:</strong> By shattering the status quo in Episode 1, the show signals to the audience that no one is safe, actions have brutal consequences, and the stakes will only continue to rise.</li>
|
||||
<li><strong>Showing Off Its Full Potential:</strong> It proves immediately that it isn't just another cartoon superhero show, but a high-stakes, mature drama capable of pulling no punches.</li>
|
||||
</ul>
|
||||
<h4>Conclusion</h4>
|
||||
<p>By fearlessly playing with superhero conventions, delivering genuine character evolution, elevating the evil superhero trope, and hooking viewers from episode one, Invincible earns its place at #4 as an absolute modern classic.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="back" data-anim="fade">
|
||||
<a href="share.html">← back to my profile</a>
|
||||
</div>
|
||||
|
||||
<div class="no-grav" data-anim="fade">made by <a href="index.html">miles</a>. not ai</div>
|
||||
|
||||
<div class="modal" id="moreModal" aria-hidden="true">
|
||||
<div class="modal-backdrop" data-close></div>
|
||||
<div class="modal-card" role="dialog" aria-modal="true" aria-label="More info">
|
||||
<div class="modal-head">
|
||||
<div class="modal-eyebrow">why i like it</div>
|
||||
<div class="modal-title" id="moreModalTitle">More info</div>
|
||||
</div>
|
||||
<button class="modal-close" data-close aria-label="Close">×</button>
|
||||
<div class="modal-body" id="moreModalBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
|
||||
// ---- Ambient aurora + particle background ----
|
||||
(function bg(){
|
||||
var canvas = document.getElementById('bgCanvas');
|
||||
if(!canvas) return;
|
||||
var ctx = canvas.getContext('2d');
|
||||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var orbs = [];
|
||||
var parts = [];
|
||||
var COLORS = [
|
||||
[29,155,240], // blue
|
||||
[255,61,154], // pink
|
||||
[34,211,153], // mint
|
||||
[168,85,247] // purple
|
||||
];
|
||||
function resize(){
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
seed();
|
||||
}
|
||||
function seed(){
|
||||
orbs = []; parts = [];
|
||||
var w = canvas.width, h = canvas.height;
|
||||
var oCount = Math.min(7, Math.round(w / 200) + 3);
|
||||
for(var i=0;i<oCount;i++){
|
||||
orbs.push({
|
||||
x: Math.random()*w, y: Math.random()*h,
|
||||
r: 110 + Math.random()*220,
|
||||
c: COLORS[i % COLORS.length],
|
||||
sp: 0.10 + Math.random()*0.22,
|
||||
a: 0.14 + Math.random()*0.12,
|
||||
ox: Math.random()*1000, oy: Math.random()*1000
|
||||
});
|
||||
}
|
||||
var pCount = Math.min(80, Math.round(w*h/18000));
|
||||
for(var j=0;j<pCount;j++){
|
||||
parts.push({
|
||||
x: Math.random()*w, y: Math.random()*h,
|
||||
r: 0.6 + Math.random()*1.6,
|
||||
sp: 0.05 + Math.random()*0.25,
|
||||
ph: Math.random()*Math.PI*2, oy: Math.random()*100
|
||||
});
|
||||
}
|
||||
}
|
||||
var t = 0;
|
||||
function frame(){
|
||||
requestAnimationFrame(frame);
|
||||
if(reduced) return;
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
t += 0.008;
|
||||
ctx.globalCompositeOperation = 'screen';
|
||||
for(var i=0;i<orbs.length;i++){
|
||||
var o = orbs[i];
|
||||
var nx = o.x + Math.sin(t*o.sp + o.ox) * (o.r*0.9);
|
||||
var ny = o.y + Math.cos(t*o.sp*0.8 + o.oy) * (o.r*0.7) * 0.8;
|
||||
var g = ctx.createRadialGradient(nx,ny,0,nx,ny,o.r);
|
||||
g.addColorStop(0, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+','+o.a+')');
|
||||
g.addColorStop(1, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+',0)');
|
||||
ctx.fillStyle = g;
|
||||
ctx.beginPath(); ctx.arc(nx,ny,o.r,0,Math.PI*2); ctx.fill();
|
||||
}
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.fillStyle = 'rgba(40,50,70,0.35)';
|
||||
for(var p=0;p<parts.length;p++){
|
||||
var pt = parts[p];
|
||||
var px = pt.x + Math.sin(t*pt.sp + pt.ph) * 40;
|
||||
var py = pt.y + Math.cos(t*pt.sp*0.7 + pt.ph*1.7 + pt.oy) * 26;
|
||||
var tw = 0.4 + 0.6*Math.abs(Math.sin(t*0.6 + pt.ph));
|
||||
ctx.globalAlpha = tw*0.6;
|
||||
ctx.beginPath(); ctx.arc(px%canvas.width, py%canvas.height, pt.r, 0, Math.PI*2); ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize(); frame();
|
||||
})();
|
||||
|
||||
// ---- Choreographed load entrance (Anime.js) ----
|
||||
(function load(){
|
||||
var body = document.body;
|
||||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
body.classList.add('anim');
|
||||
var done = function(){ body.classList.remove('anim'); };
|
||||
if (!window.anime || reduced) { done(); return; }
|
||||
var tl = anime.timeline({ complete: done });
|
||||
tl
|
||||
.add({ targets:'[data-anim="txt"]', translateY:[26,0], opacity:[0,1],
|
||||
duration:560, delay:anime.stagger(90), easing:'easeOutExpo' })
|
||||
.add({ targets:'[data-anim="rank"]', scale:[0.3,1.08,1], rotate:[-12,3,0], opacity:[0,1],
|
||||
duration:780, delay:anime.stagger(70), easing:'easeOutElastic(1,0.65)', offset:'-=260' })
|
||||
.add({ targets:'[data-anim="show"]', translateY:[40,0], opacity:[0,1],
|
||||
duration:600, delay:anime.stagger(120), easing:'easeOutQuint', offset:0 })
|
||||
.add({ targets:'[data-anim="poster"]', scale:[0.7,1], rotate:[-3,0], opacity:[0,1],
|
||||
duration:520, delay:anime.stagger(120), easing:'easeOutBack(1.6)', offset:'-=500' })
|
||||
.add({ targets:'[data-anim="fade"]', translateY:[10,0], opacity:[0,1],
|
||||
duration:420, easing:'easeOutQuart', offset:'-=120' });
|
||||
})();
|
||||
|
||||
document.querySelectorAll('.action-btn[data-target]').forEach(function(btn){
|
||||
btn.addEventListener('click', function(){
|
||||
var target = document.getElementById(btn.getAttribute('data-target'));
|
||||
if(!target) return;
|
||||
openModal(target, btn.getAttribute('data-title') || '');
|
||||
});
|
||||
});
|
||||
|
||||
var modal = document.getElementById('moreModal');
|
||||
var modalBody = document.getElementById('moreModalBody');
|
||||
var modalTitle = document.getElementById('moreModalTitle');
|
||||
function openModal(source, title){
|
||||
if(!modal || !modalBody) return;
|
||||
if(modalTitle) modalTitle.textContent = title || 'More info';
|
||||
modalBody.innerHTML = source.innerHTML;
|
||||
modal.classList.add('open');
|
||||
modal.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
modalBody.scrollTop = 0;
|
||||
}
|
||||
function closeModal(){
|
||||
if(!modal) return;
|
||||
modal.classList.remove('open');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
modalBody.innerHTML = '';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
modal.querySelectorAll('[data-close]').forEach(function(el){
|
||||
el.addEventListener('click', closeModal);
|
||||
});
|
||||
document.addEventListener('keydown', function(e){
|
||||
if(e.key === 'Escape' && modal.classList.contains('open')) closeModal();
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user