UI 元件 簡單
Comics — Issue Cover Page
A bold comic-book issue cover for the fictional Neon Ronin #42, built entirely in HTML and CSS. A 3D outlined Bangers logo, publisher line, and accent tagline sit over a halftone sky with conic speed lines and a CSS-drawn caped hero scene, while a rotated issue badge, cover-artist credit, price block, and a striped barcode finish the trade dress. A variant switcher flips between Standard, Midnight Foil, and Gold incentive editions, swapping accent color, tagline, and treatment, plus a save-to-collection toggle with toast feedback.
在 Lab 開啟
MCP
html css vanilla-js
目標: JS HTML
程式碼
:root {
--ink: #0e0e12;
--ink-2: #23232b;
--paper: #fdfcf7;
--panel: #ffffff;
--accent: #ff2e4d;
--accent-2: #ffd23f;
--accent-blue: #2e6bff;
--muted: #6b6b78;
--line: rgba(14, 14, 18, 0.14);
--line-2: rgba(14, 14, 18, 0.28);
--halftone: radial-gradient(circle, rgba(14, 14, 18, 0.18) 1px, transparent 1.6px);
--r-sm: 6px;
--r-md: 12px;
--r-lg: 18px;
/* per-edition tokens (overridden on .cover[data-variant]) */
--sky-1: #2e6bff;
--sky-2: #7fb0ff;
--edge: var(--ink);
--foil: transparent;
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Inter", system-ui, sans-serif;
line-height: 1.5;
color: var(--ink);
background-color: var(--paper);
background-image: var(--halftone);
background-size: 6px 6px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
padding: 28px 18px 48px;
}
.stage {
width: 100%;
max-width: 440px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* ---------- toolbar ---------- */
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
}
.toolbar__group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.variant {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
font: 600 12.5px/1 "Inter", sans-serif;
letter-spacing: 0.01em;
background: var(--panel);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: var(--r-sm);
box-shadow: 2px 2px 0 var(--ink);
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
.variant:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--ink);
}
.variant:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 var(--ink);
}
.variant:focus-visible {
outline: 3px solid var(--accent-blue);
outline-offset: 2px;
}
.variant.is-active {
background: var(--accent-2);
box-shadow: 3px 3px 0 var(--ink);
}
.variant__swatch {
width: 13px;
height: 13px;
border-radius: 50%;
border: 2px solid var(--ink);
background: var(--accent);
}
.variant[data-variant="midnight"] .variant__swatch {
background: #9b6bff;
}
.variant[data-variant="goldfoil"] .variant__swatch {
background: linear-gradient(135deg, #ffd23f, #f59e0b);
}
.collect {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
font: 700 12.5px/1 "Inter", sans-serif;
background: var(--ink);
color: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--r-sm);
box-shadow: 2px 2px 0 var(--accent);
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease, color 0.12s ease;
}
.collect:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--accent);
}
.collect:focus-visible {
outline: 3px solid var(--accent-blue);
outline-offset: 2px;
}
.collect__icon {
font-size: 15px;
line-height: 1;
}
.collect[aria-pressed="true"] {
background: var(--accent-2);
color: var(--ink);
box-shadow: 3px 3px 0 var(--ink);
}
.collect[aria-pressed="true"] .collect__icon {
color: var(--accent);
text-shadow: 0 0 0 var(--accent);
}
/* ---------- cover ---------- */
.cover {
position: relative;
aspect-ratio: 2 / 3;
border: 3px solid var(--ink);
border-radius: var(--r-md);
overflow: hidden;
background: var(--panel);
box-shadow: 7px 7px 0 var(--ink);
isolation: isolate;
}
.cover.is-flipping {
animation: flipIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes flipIn {
0% {
transform: perspective(1100px) rotateY(-82deg) scale(0.94);
opacity: 0;
}
60% {
opacity: 1;
}
100% {
transform: perspective(1100px) rotateY(0deg) scale(1);
opacity: 1;
}
}
/* sky / background */
.cover__sky {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 62%, var(--paper) 100%);
}
.halftone {
position: absolute;
inset: 0;
background-image: var(--halftone);
background-size: 6px 6px;
opacity: 0.5;
mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.sun {
position: absolute;
top: 16%;
left: 50%;
width: 130px;
height: 130px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, var(--accent-2) 0%, var(--accent-2) 55%, transparent 60%);
opacity: 0.92;
}
.speedlines {
position: absolute;
inset: -20%;
background: repeating-conic-gradient(
from 0deg at 50% 30%,
rgba(255, 255, 255, 0.42) 0deg 1.4deg,
transparent 1.4deg 7deg
);
mask-image: radial-gradient(circle at 50% 30%, transparent 22%, #000 60%);
-webkit-mask-image: radial-gradient(circle at 50% 30%, transparent 22%, #000 60%);
opacity: 0.55;
}
/* ---------- CSS hero scene ---------- */
.scene {
position: absolute;
inset: 0;
z-index: 1;
}
.scene__skyline {
position: absolute;
left: 0;
right: 0;
bottom: 23%;
height: 26%;
background:
linear-gradient(var(--ink-2), var(--ink-2)) 8% 100% / 12% 60% no-repeat,
linear-gradient(var(--ink-2), var(--ink-2)) 22% 100% / 9% 85% no-repeat,
linear-gradient(var(--ink-2), var(--ink-2)) 34% 100% / 14% 45% no-repeat,
linear-gradient(var(--ink-2), var(--ink-2)) 70% 100% / 11% 72% no-repeat,
linear-gradient(var(--ink-2), var(--ink-2)) 84% 100% / 13% 52% no-repeat;
opacity: 0.85;
}
.scene__ground {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 23%;
background: var(--ink);
border-top: 3px solid var(--ink);
}
.scene__hero {
position: absolute;
left: 50%;
bottom: 21%;
width: 130px;
height: 230px;
transform: translateX(-50%);
}
.hero__cape {
position: absolute;
left: 50%;
top: 38px;
width: 120px;
height: 150px;
transform: translateX(-52%) rotate(-3deg);
background: var(--accent);
border: 3px solid var(--ink);
clip-path: polygon(50% 0, 100% 18%, 86% 100%, 50% 78%, 14% 100%, 0 18%);
}
.hero__body {
position: absolute;
left: 50%;
top: 70px;
width: 64px;
height: 120px;
transform: translateX(-50%);
background: var(--ink);
border: 3px solid var(--ink);
border-radius: 14px 14px 4px 4px;
clip-path: polygon(22% 0, 78% 0, 100% 60%, 80% 100%, 20% 100%, 0 60%);
}
.hero__head {
position: absolute;
left: 50%;
top: 34px;
width: 46px;
height: 52px;
transform: translateX(-50%);
background: #d9b48f;
border: 3px solid var(--ink);
border-radius: 48% 48% 42% 42%;
}
.hero__visor {
position: absolute;
left: 50%;
top: 50px;
width: 46px;
height: 13px;
transform: translateX(-50%);
background: var(--accent-blue);
border: 3px solid var(--ink);
border-radius: 3px;
box-shadow: 0 0 10px var(--accent-blue);
}
.hero__blade {
position: absolute;
left: 96px;
top: 8px;
width: 9px;
height: 150px;
background: linear-gradient(180deg, #fff, var(--accent-2));
border: 2px solid var(--ink);
border-radius: 4px;
transform: rotate(20deg);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}
/* ---------- SFX ---------- */
.sfx {
position: absolute;
z-index: 2;
font-family: "Bangers", system-ui, sans-serif;
text-transform: uppercase;
color: var(--accent-2);
-webkit-text-stroke: 2px var(--ink);
text-shadow: 3px 3px 0 var(--ink);
pointer-events: none;
line-height: 0.9;
}
.sfx--a {
top: 30%;
left: 6%;
font-size: 38px;
transform: rotate(-9deg);
}
.sfx--b {
top: 46%;
right: 5%;
font-size: 28px;
color: var(--paper);
transform: rotate(7deg);
}
/* ---------- masthead ---------- */
.masthead {
position: absolute;
z-index: 3;
top: 16px;
left: 16px;
right: 16px;
text-align: center;
}
.publisher {
margin: 0;
font: 800 11px/1 "Inter", sans-serif;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--paper);
text-shadow: 1px 1px 0 var(--ink);
}
.logo {
margin: 2px 0 4px;
font-family: "Bangers", system-ui, sans-serif;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 0.82;
text-transform: uppercase;
}
.logo__line {
display: block;
color: var(--paper);
-webkit-text-stroke: 3px var(--ink);
text-shadow:
4px 4px 0 var(--ink),
6px 6px 0 var(--accent);
}
.logo__line--1 {
font-size: 56px;
}
.logo__line--2 {
font-size: 74px;
color: var(--accent);
text-shadow:
4px 4px 0 var(--ink),
6px 6px 0 var(--paper);
}
.tagline {
margin: 6px auto 0;
max-width: 80%;
font: 700 12px/1.25 "Inter", sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink);
background: var(--accent-2);
border: 2px solid var(--ink);
border-radius: var(--r-sm);
padding: 4px 8px;
box-shadow: 2px 2px 0 var(--ink);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* ---------- issue badge ---------- */
.issue {
position: absolute;
z-index: 3;
top: 14px;
right: 14px;
width: 78px;
height: 78px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--accent);
color: var(--paper);
border: 3px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
transform: rotate(-8deg);
font-family: "Bangers", system-ui, sans-serif;
}
.issue__hash {
position: absolute;
top: 13px;
left: 16px;
font-size: 20px;
}
.issue__num {
font-size: 40px;
line-height: 1;
-webkit-text-stroke: 1px var(--ink);
}
.issue__band {
position: absolute;
bottom: -8px;
font: 800 8px/1 "Inter", sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--ink);
color: var(--accent-2);
padding: 3px 6px;
border-radius: 999px;
white-space: nowrap;
}
/* ---------- bottom strip ---------- */
.strip {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"credit price"
"barcode barcode";
gap: 8px 12px;
align-items: end;
padding: 12px 14px 14px;
background: var(--paper);
border-top: 3px solid var(--ink);
}
.credit {
grid-area: credit;
display: flex;
flex-direction: column;
}
.credit__role {
font: 700 9px/1 "Inter", sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.credit__name {
font: 800 14px/1.1 "Inter", sans-serif;
color: var(--ink);
}
.price {
grid-area: price;
display: flex;
align-items: baseline;
gap: 3px;
font-family: "Bangers", system-ui, sans-serif;
color: var(--ink);
}
.price__cur {
font-size: 16px;
}
.price__val {
font-size: 24px;
line-height: 1;
}
.price__rating {
align-self: flex-end;
margin-left: 6px;
font: 800 8px/1 "Inter", sans-serif;
letter-spacing: 0.06em;
color: var(--paper);
background: var(--ink);
border-radius: var(--r-sm);
padding: 3px 5px;
}
.barcode {
grid-area: barcode;
display: flex;
align-items: flex-end;
gap: 2px;
height: 34px;
padding: 4px 8px 0;
border: 2px solid var(--ink);
border-radius: var(--r-sm);
background: var(--panel);
}
.barcode span {
display: block;
width: 3px;
height: 24px;
background: var(--ink);
}
.barcode span:nth-child(2n) {
width: 2px;
height: 20px;
}
.barcode span:nth-child(3n) {
width: 4px;
height: 26px;
}
.barcode span:nth-child(5n) {
width: 2px;
height: 16px;
}
.barcode small {
margin-left: auto;
align-self: flex-end;
font: 600 9px/1 "Inter", sans-serif;
letter-spacing: 0.06em;
color: var(--ink);
}
.hint {
margin: 0;
text-align: center;
font-size: 12.5px;
color: var(--muted);
}
/* ---------- foil overlay (variants) ---------- */
.cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: var(--foil);
mix-blend-mode: screen;
opacity: 0.6;
}
/* ---------- EDITION TOKENS ---------- */
.cover[data-variant="standard"] {
--sky-1: #2e6bff;
--sky-2: #9cc0ff;
--foil: transparent;
}
.cover[data-variant="midnight"] {
--sky-1: #1b1640;
--sky-2: #4b2f8c;
--accent: #9b6bff;
--accent-2: #5ce1ff;
--foil: linear-gradient(120deg, transparent 30%, rgba(92, 225, 255, 0.35) 50%, transparent 70%);
}
.cover[data-variant="goldfoil"] {
--sky-1: #b8860b;
--sky-2: #ffd23f;
--accent: #d4302a;
--accent-2: #fff3b0;
--foil: linear-gradient(120deg, transparent 25%, rgba(255, 220, 120, 0.55) 50%, transparent 75%);
}
/* ---------- responsive ---------- */
@media (max-width: 520px) {
body {
padding: 18px 12px 36px;
}
.toolbar {
justify-content: center;
}
.collect {
flex: 1 1 100%;
justify-content: center;
}
.logo__line--1 {
font-size: 46px;
}
.logo__line--2 {
font-size: 60px;
}
.sfx--a {
font-size: 30px;
}
.issue {
width: 64px;
height: 64px;
}
.issue__num {
font-size: 32px;
}
}
/* ---------- toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%) translateY(140%);
z-index: 50;
max-width: 90vw;
padding: 10px 16px;
font: 700 13px/1.3 "Inter", sans-serif;
color: var(--paper);
background: var(--ink);
border: 2px solid var(--ink);
border-radius: var(--r-sm);
box-shadow: 4px 4px 0 var(--accent);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.32s ease;
}
.toast.is-show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.cover.is-flipping {
animation: none;
}
.toast {
transition: opacity 0.2s ease;
}
}(function () {
"use strict";
var cover = document.getElementById("cover");
var tagline = document.getElementById("tagline");
var artist = document.getElementById("artist");
var collectBtn = document.getElementById("collect");
var variantBtns = Array.prototype.slice.call(document.querySelectorAll(".variant"));
var toastEl = document.getElementById("toast");
// ---- edition data ----
var EDITIONS = {
standard: {
label: "Standard Edition",
tagline: "No master. No mercy. One last blade.",
artist: "R. Tanaka & L. Vega",
},
midnight: {
label: "Midnight Foil Variant",
tagline: "When the neon dies, the ronin rises.",
artist: "Kira Sol · Midnight Foil",
},
goldfoil: {
label: "1:25 Gold Incentive",
tagline: "The legend, struck in 24-karat ink.",
artist: "Dario Quell · 1:25 Incentive",
},
};
// ---- toast helper ----
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2200);
}
// ---- variant switching ----
var reduceMotion =
window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function setVariant(key) {
var data = EDITIONS[key];
if (!data || cover.getAttribute("data-variant") === key) return;
cover.setAttribute("data-variant", key);
// swap tagline + credit with a quick fade
tagline.style.opacity = "0";
tagline.style.transform = "translateY(-4px)";
setTimeout(function () {
tagline.textContent = data.tagline;
artist.textContent = data.artist;
tagline.style.opacity = "";
tagline.style.transform = "";
}, 180);
// flip-in animation
if (!reduceMotion) {
cover.classList.remove("is-flipping");
// force reflow so the animation can replay
void cover.offsetWidth;
cover.classList.add("is-flipping");
}
// sync radio buttons
variantBtns.forEach(function (b) {
var active = b.getAttribute("data-variant") === key;
b.classList.toggle("is-active", active);
b.setAttribute("aria-checked", active ? "true" : "false");
});
toast("Now showing: " + data.label);
}
cover.addEventListener("animationend", function () {
cover.classList.remove("is-flipping");
});
variantBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
setVariant(btn.getAttribute("data-variant"));
});
});
// keyboard: left/right arrows move between editions in the radiogroup
var group = document.querySelector(".toolbar__group");
if (group) {
group.addEventListener("keydown", function (e) {
var keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"];
if (keys.indexOf(e.key) === -1) return;
e.preventDefault();
var idx = variantBtns.indexOf(document.activeElement);
if (idx === -1) idx = 0;
var dir = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1;
var next = (idx + dir + variantBtns.length) % variantBtns.length;
variantBtns[next].focus();
setVariant(variantBtns[next].getAttribute("data-variant"));
});
}
// ---- save to collection toggle ----
var saved = false;
collectBtn.addEventListener("click", function () {
saved = !saved;
collectBtn.setAttribute("aria-pressed", saved ? "true" : "false");
collectBtn.querySelector(".collect__text").textContent = saved
? "In your collection"
: "Save to collection";
var edition = EDITIONS[cover.getAttribute("data-variant")];
toast(
saved
? "Added Neon Ronin #42 (" + edition.label + ") to your pull list ★"
: "Removed from your pull list"
);
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Neon Ronin #42 — Issue Cover Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="stage">
<!-- Variant + actions toolbar -->
<section class="toolbar" aria-label="Cover editions">
<div class="toolbar__group" role="radiogroup" aria-label="Variant cover">
<button class="variant is-active" type="button" data-variant="standard" role="radio" aria-checked="true">
<span class="variant__swatch" aria-hidden="true"></span>
<span class="variant__label">Standard</span>
</button>
<button class="variant" type="button" data-variant="midnight" role="radio" aria-checked="false">
<span class="variant__swatch" aria-hidden="true"></span>
<span class="variant__label">Midnight Foil</span>
</button>
<button class="variant" type="button" data-variant="goldfoil" role="radio" aria-checked="false">
<span class="variant__swatch" aria-hidden="true"></span>
<span class="variant__label">1:25 Gold</span>
</button>
</div>
<button class="collect" type="button" id="collect" aria-pressed="false">
<span class="collect__icon" aria-hidden="true">★</span>
<span class="collect__text">Save to collection</span>
</button>
</section>
<!-- The cover -->
<article class="cover" id="cover" data-variant="standard" aria-label="Comic issue cover, Neon Ronin issue 42">
<div class="cover__sky" aria-hidden="true">
<span class="speedlines"></span>
<span class="halftone"></span>
<span class="sun"></span>
</div>
<!-- CSS-drawn hero scene -->
<div class="scene" aria-hidden="true">
<span class="scene__skyline"></span>
<span class="scene__hero">
<span class="hero__cape"></span>
<span class="hero__body"></span>
<span class="hero__head"></span>
<span class="hero__visor"></span>
<span class="hero__blade"></span>
</span>
<span class="scene__ground"></span>
</div>
<!-- SFX lettering -->
<span class="sfx sfx--a" aria-hidden="true">KRAKOOM</span>
<span class="sfx sfx--b" aria-hidden="true">VWOOSH</span>
<!-- Top masthead -->
<header class="masthead">
<p class="publisher">Vanguard Comics</p>
<h1 class="logo">
<span class="logo__line logo__line--1">Neon</span>
<span class="logo__line logo__line--2">Ronin</span>
</h1>
<p class="tagline" id="tagline">No master. No mercy. One last blade.</p>
</header>
<!-- Issue badge -->
<div class="issue" aria-label="Issue number 42">
<span class="issue__hash">#</span><span class="issue__num">42</span>
<span class="issue__band">SEASON FINALE</span>
</div>
<!-- Bottom strip: credit + price + barcode -->
<footer class="strip">
<div class="credit">
<span class="credit__role">Cover by</span>
<span class="credit__name" id="artist">R. Tanaka & L. Vega</span>
</div>
<div class="price">
<span class="price__cur">$</span><span class="price__val">4.99</span>
<span class="price__rating">T+ TEEN</span>
</div>
<div class="barcode" aria-label="Barcode">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<small>0 71486 04299 4</small>
</div>
</footer>
</article>
<p class="hint">Pick an edition above to swap the cover treatment, or save it to your pull list.</p>
</main>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Issue Cover Page
A full single-issue comic cover for the fictional Neon Ronin #42, art-directed in classic newsstand trade dress. The masthead stacks a spaced-out publisher line above an oversized Bangers logo with a layered ink-and-accent 3D outline, finished with an uppercase tagline set on a yellow Ben-Day plate. Behind it, a gradient sky carries a conic-gradient burst of speed lines, a halftone dot wash, and a CSS-drawn hero — caped, visored, blade raised — standing on an inked skyline, with hand-lettered KRAKOOM and VWOOSH SFX punching across the art.
The lower trade dress is all detail: a rotated #42 issue badge with a “Season Finale” band, a cover-artist credit, a Bangers price block with a rating chip, and a striped barcode with a fictional UPC. Everything sits inside a thick ink border with a hard offset drop-shadow, so the whole thing reads like a book you could pull off a spinner rack.
The toolbar drives three variant covers — Standard, Midnight Foil, and a 1:25 Gold incentive — and selecting one re-themes the accent palette, swaps the tagline and artist credit, lays a foil sheen over the art, and plays a perspective flip-in. The control is a keyboard-navigable radio group (arrow keys move and switch editions), and a Save to collection button toggles your pull-list state with a star and toast confirmation. Motion respects prefers-reduced-motion.
Illustrative UI only — fictional series, characters, and data.