Comics — Character Bio / Cast Page

A comic-book character bio and cast page with a featured profile panel — CSS-drawn portrait, name, alias, hero or villain role, affiliation, first-appearance issue and animated power stat bars — paired with a scrollable roster of selectable avatars. Clicking a cast member swaps the featured dossier with a comic SFX swap animation, recolors the halftone portrait panel, and re-animates every stat bar and counter. Pure HTML, CSS and vanilla JS with thick ink borders and Ben-Day dot texture.

فتح في المختبر

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;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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;
  display: flex;
  justify-content: center;
  padding: 28px 18px 60px;
}

.stage {
  width: 100%;
  max-width: 880px;
}

/* ---------- Masthead ---------- */
.masthead {
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--accent-2);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 26px;
  transform: rotate(-0.4deg);
}

.masthead__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.masthead__title {
  margin: 2px 0 0;
  font-family: "Bangers", "Inter", cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--accent), 5px 5px 0 var(--accent-blue);
}

.masthead__sub {
  margin: 6px 0 0;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Bio / profile ---------- */
.bio {
  margin-bottom: 30px;
}

.profile {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}

/* Portrait panel */
.portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--ink);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--portrait-bg, #2e6bff), #11111a);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.portrait__halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(253, 252, 247, 0.32) 1px, transparent 1.7px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* CSS-drawn face */
.portrait__face {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 62%;
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  transition: transform 0.4s ease;
}

.portrait__jaw {
  position: absolute;
  inset: 24% 0 0;
  background: var(--skin, #ffd9b5);
  border: 3px solid var(--ink);
  border-radius: 46% 46% 44% 44% / 38% 38% 62% 62%;
}

.portrait__hair {
  position: absolute;
  top: 6%;
  left: -6%;
  right: -6%;
  height: 46%;
  background: var(--hair, #16161d);
  border: 3px solid var(--ink);
  border-radius: 50% 50% 14% 14% / 70% 70% 24% 24%;
  z-index: 2;
}

.portrait__visor {
  position: absolute;
  top: 44%;
  left: 8%;
  right: 8%;
  height: 16%;
  background: var(--accent, #ff2e4d);
  border: 3px solid var(--ink);
  border-radius: var(--r-sm);
  z-index: 3;
  box-shadow: inset 0 -4px 0 rgba(14, 14, 18, 0.35);
}

.portrait__mark {
  position: absolute;
  top: 64%;
  left: 50%;
  width: 18%;
  height: 4%;
  transform: translateX(-50%);
  background: var(--ink);
  border-radius: 4px;
  z-index: 3;
}

.portrait__sfx {
  position: absolute;
  top: 12px;
  right: -6px;
  font-family: "Bangers", cursive;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  background: var(--ink);
  padding: 2px 12px;
  border-radius: var(--r-sm);
  transform: rotate(6deg);
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.portrait.is-swapping .portrait__face {
  transform: translateX(-50%) scale(0.9) rotate(-3deg);
}

.portrait.is-swapping .portrait__sfx {
  opacity: 1;
  transform: rotate(6deg) scale(1.1);
}

/* Dossier */
.dossier {
  border: 3px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.dossier__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
}

.badge[data-role="villain"] {
  background: var(--ink);
  color: var(--accent-2);
}

.badge[data-role="anti-hero"] {
  background: var(--accent-blue);
  color: var(--paper);
}

.badge--ghost {
  background: transparent;
  color: var(--ink);
}

.dossier__name {
  margin: 0;
  font-family: "Bangers", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.dossier__alias {
  margin: 2px 0 14px;
  font-weight: 600;
  color: var(--muted);
}

.meta {
  margin: 0 0 14px;
  display: grid;
  gap: 8px;
}

.meta__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 7px;
  border-bottom: 2px dashed var(--line-2);
}

.meta__row dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta__row dd {
  margin: 0;
  font-weight: 600;
}

.dossier__quote {
  margin: 0 0 16px;
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  border-left: 5px solid var(--accent);
  padding-left: 12px;
}

/* Stat bars */
.stats {
  display: grid;
  gap: 11px;
}

.stat__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stat__num {
  font-family: "Bangers", cursive;
  font-size: 1rem;
  color: var(--accent);
}

.stat__track {
  height: 14px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  background-image: var(--halftone);
  background-size: 5px 5px;
  overflow: hidden;
}

.stat__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent));
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Cast strip ---------- */
.cast__title {
  font-family: "Bangers", cursive;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.cast__strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}

.cast__strip::-webkit-scrollbar {
  height: 8px;
}

.cast__strip::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 999px;
}

.castcard {
  flex: 0 0 auto;
  width: 92px;
  border: 3px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  padding: 8px 8px 10px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  font: inherit;
  text-align: center;
}

.castcard:hover {
  transform: translateY(-4px) rotate(-1.5deg);
  box-shadow: 5px 7px 0 var(--ink);
}

.castcard:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
}

.castcard[aria-selected="true"] {
  background: var(--accent-2);
  transform: translateY(-4px);
  box-shadow: 5px 7px 0 var(--accent);
}

.castcard__avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--c-bg, #2e6bff), #11111a);
  overflow: hidden;
  margin-bottom: 7px;
}

.castcard__avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 60%;
  height: 78%;
  transform: translateX(-50%);
  background: var(--c-skin, #ffd9b5);
  border: 2.5px solid var(--ink);
  border-radius: 46% 46% 40% 40% / 38% 38% 62% 62%;
}

.castcard__avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 26%;
  width: 56%;
  height: 30%;
  transform: translateX(-50%);
  background: var(--c-hair, #16161d);
  border: 2.5px solid var(--ink);
  border-radius: 50% 50% 18% 18% / 64% 64% 30% 30%;
  z-index: 2;
}

.castcard__name {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 140%);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 2.5px solid var(--accent-2);
  box-shadow: var(--shadow-sm);
  z-index: 50;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.toast.is-show {
  transform: translate(-50%, 0);
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  body {
    padding: 18px 12px 50px;
  }

  .profile {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portrait {
    max-width: 240px;
    margin: 0 auto;
    width: 100%;
  }

  .masthead {
    padding: 14px 16px;
  }

  .meta__row {
    grid-template-columns: 86px 1fr;
  }
}

(function () {
  "use strict";

  /** Fictional roster. All data is illustrative. */
  var ROSTER = [
    {
      id: "neon-ronin",
      name: "Neon Ronin",
      alias: "a.k.a. Kaede Mori",
      role: "hero",
      affiliation: "The Lantern Order",
      base: "Static City, Sector 9",
      issue: "#001",
      quote: "The city only sleeps when I let it.",
      sfx: "FWOOSH!",
      colors: { bg: "#2e6bff", skin: "#ffd9b5", hair: "#16161d", accent: "#ff2e4d" },
      stats: { power: 78, speed: 92, tech: 70, resolve: 88 }
    },
    {
      id: "iron-vanguard",
      name: "Iron Vanguard",
      alias: "a.k.a. Dov Reyes",
      role: "hero",
      affiliation: "The Lantern Order",
      base: "Forge Bay 12",
      issue: "#003",
      quote: "Hold the line. Always hold the line.",
      sfx: "KLANG!",
      colors: { bg: "#c9402e", skin: "#c98a5b", hair: "#3a2417", accent: "#ffd23f" },
      stats: { power: 96, speed: 48, tech: 84, resolve: 95 }
    },
    {
      id: "lady-static",
      name: "Lady Static",
      alias: "a.k.a. Mira Voss",
      role: "anti-hero",
      affiliation: "Unaffiliated",
      base: "The Undergrid",
      issue: "#007",
      quote: "Rules are just sparks waiting to jump the gap.",
      sfx: "BZZT!",
      colors: { bg: "#7a2eff", skin: "#f0c9a8", hair: "#e8e8ef", accent: "#2effc7" },
      stats: { power: 81, speed: 74, tech: 90, resolve: 66 }
    },
    {
      id: "the-grin",
      name: "The Grin",
      alias: "a.k.a. unknown",
      role: "villain",
      affiliation: "The Hollow Syndicate",
      base: "Last known: Pier 0",
      issue: "#002",
      quote: "Smile. The punchline is always you.",
      sfx: "HAHA!",
      colors: { bg: "#1d8f3b", skin: "#d6e0c2", hair: "#1a1a22", accent: "#ff2e4d" },
      stats: { power: 70, speed: 66, tech: 88, resolve: 99 }
    },
    {
      id: "ember-fox",
      name: "Ember Fox",
      alias: "a.k.a. Suki Tran",
      role: "hero",
      affiliation: "Lantern Order (cadet)",
      base: "Static City, Sector 4",
      issue: "#011",
      quote: "Light a match, watch the night flinch.",
      sfx: "WHUMP!",
      colors: { bg: "#ff6a1a", skin: "#e8b08a", hair: "#2a1410", accent: "#ffd23f" },
      stats: { power: 64, speed: 88, tech: 58, resolve: 80 }
    },
    {
      id: "warden-null",
      name: "Warden Null",
      alias: "a.k.a. Unit-0",
      role: "villain",
      affiliation: "The Hollow Syndicate",
      base: "Cold Vault",
      issue: "#009",
      quote: "Compliance is the only freedom I permit.",
      sfx: "THOOM!",
      colors: { bg: "#3a3a48", skin: "#9aa0b0", hair: "#0a0a10", accent: "#2e6bff" },
      stats: { power: 90, speed: 40, tech: 95, resolve: 92 }
    }
  ];

  var ROLE_LABEL = { hero: "Hero", villain: "Villain", "anti-hero": "Anti-Hero" };

  // ---- Element refs ----
  var profile = document.getElementById("profile");
  var portrait = document.getElementById("portrait");
  var portraitFace = document.getElementById("portraitFace");
  var portraitSfx = document.getElementById("portraitSfx");
  var roleBadge = document.getElementById("roleBadge");
  var issueBadge = document.getElementById("issueBadge");
  var charName = document.getElementById("charName");
  var charAlias = document.getElementById("charAlias");
  var charAffiliation = document.getElementById("charAffiliation");
  var charBase = document.getElementById("charBase");
  var charQuote = document.getElementById("charQuote");
  var statFills = document.querySelectorAll(".stat__fill");
  var statNums = document.querySelectorAll(".stat__num");
  var castStrip = document.getElementById("castStrip");
  var toastEl = document.getElementById("toast");

  var toastTimer = null;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("is-show");
    window.clearTimeout(toastTimer);
    toastTimer = window.setTimeout(function () {
      toastEl.classList.remove("is-show");
    }, 1900);
  }

  // ---- Build cast strip ----
  ROSTER.forEach(function (c, i) {
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "castcard";
    btn.setAttribute("role", "tab");
    btn.setAttribute("aria-selected", "false");
    btn.dataset.id = c.id;
    btn.style.setProperty("--c-bg", c.colors.bg);
    btn.style.setProperty("--c-skin", c.colors.skin);
    btn.style.setProperty("--c-hair", c.colors.hair);

    var av = document.createElement("span");
    av.className = "castcard__avatar";
    var nm = document.createElement("span");
    nm.className = "castcard__name";
    nm.textContent = c.name;
    btn.appendChild(av);
    btn.appendChild(nm);

    btn.addEventListener("click", function () {
      select(c.id);
    });
    btn.addEventListener("keydown", function (e) {
      if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
      e.preventDefault();
      var dir = e.key === "ArrowRight" ? 1 : -1;
      var next = (i + dir + ROSTER.length) % ROSTER.length;
      var nextBtn = castStrip.children[next];
      nextBtn.focus();
      select(ROSTER[next].id);
    });

    castStrip.appendChild(btn);
  });

  var current = null;

  function animateStats(stats) {
    statNums.forEach(function (el) {
      el.textContent = "0";
    });
    statFills.forEach(function (fill) {
      fill.style.width = "0%";
    });
    // force reflow so the transition replays
    void profile.offsetWidth;
    statFills.forEach(function (fill) {
      var key = fill.getAttribute("data-stat");
      fill.style.width = stats[key] + "%";
    });
    statNums.forEach(function (el) {
      var key = el.getAttribute("data-num");
      countUp(el, stats[key]);
    });
  }

  function countUp(el, target) {
    var start = performance.now();
    var dur = 850;
    function tick(now) {
      var p = Math.min(1, (now - start) / dur);
      var eased = 1 - Math.pow(1 - p, 3);
      el.textContent = Math.round(eased * target);
      if (p < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }

  function render(c) {
    roleBadge.textContent = ROLE_LABEL[c.role] || c.role;
    roleBadge.setAttribute("data-role", c.role);
    issueBadge.textContent = "First seen · " + c.issue;
    charName.textContent = c.name;
    charAlias.textContent = c.alias;
    charAffiliation.textContent = c.affiliation;
    charBase.textContent = c.base;
    charQuote.textContent = "“" + c.quote + "”";
    portraitSfx.textContent = c.sfx;

    portrait.style.setProperty("--portrait-bg", c.colors.bg);
    portraitFace.style.setProperty("--skin", c.colors.skin);
    portraitFace.style.setProperty("--hair", c.colors.hair);
    document.querySelector(".portrait__visor").style.setProperty("--accent", c.colors.accent);

    animateStats(c.stats);
  }

  function select(id) {
    if (id === current) return;
    var c = ROSTER.find(function (x) {
      return x.id === id;
    });
    if (!c) return;
    current = id;

    // update tab selection
    Array.prototype.forEach.call(castStrip.children, function (btn) {
      btn.setAttribute("aria-selected", btn.dataset.id === id ? "true" : "false");
    });

    // swap animation
    portrait.classList.add("is-swapping");
    window.setTimeout(function () {
      render(c);
      portrait.classList.remove("is-swapping");
    }, 200);

    toast("Loaded dossier: " + c.name);
  }

  // initial selection (no toast on first paint)
  (function init() {
    var first = ROSTER[0];
    current = first.id;
    castStrip.children[0].setAttribute("aria-selected", "true");
    render(first);
  })();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Neon Ronin — Character Bio</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">
    <header class="masthead">
      <p class="masthead__kicker">Issue&nbsp;#114 &middot; The Static City Saga</p>
      <h1 class="masthead__title">Cast Files</h1>
      <p class="masthead__sub">Tap a face to load their dossier.</p>
    </header>

    <section class="bio" aria-live="polite">
      <article class="profile" id="profile">
        <!-- Portrait panel -->
        <div class="portrait" id="portrait" aria-hidden="true">
          <div class="portrait__halftone"></div>
          <div class="portrait__face" id="portraitFace">
            <span class="portrait__hair"></span>
            <span class="portrait__visor"></span>
            <span class="portrait__jaw"></span>
            <span class="portrait__mark"></span>
          </div>
          <span class="portrait__sfx" id="portraitSfx">FWOOSH!</span>
        </div>

        <!-- Dossier -->
        <div class="dossier">
          <div class="dossier__head">
            <span class="badge" id="roleBadge" data-role="hero">Hero</span>
            <span class="badge badge--ghost" id="issueBadge">First seen &middot; #001</span>
          </div>
          <h2 class="dossier__name" id="charName">Neon Ronin</h2>
          <p class="dossier__alias" id="charAlias">a.k.a. Kaede Mori</p>

          <dl class="meta">
            <div class="meta__row">
              <dt>Affiliation</dt>
              <dd id="charAffiliation">The Lantern Order</dd>
            </div>
            <div class="meta__row">
              <dt>Base</dt>
              <dd id="charBase">Static City, Sector 9</dd>
            </div>
          </dl>

          <p class="dossier__quote" id="charQuote">&ldquo;The city only sleeps when I let it.&rdquo;</p>

          <div class="stats" id="stats">
            <div class="stat">
              <div class="stat__label"><span>Power</span><span class="stat__num" data-num="power">0</span></div>
              <div class="stat__track"><span class="stat__fill" data-stat="power"></span></div>
            </div>
            <div class="stat">
              <div class="stat__label"><span>Speed</span><span class="stat__num" data-num="speed">0</span></div>
              <div class="stat__track"><span class="stat__fill" data-stat="speed"></span></div>
            </div>
            <div class="stat">
              <div class="stat__label"><span>Tech</span><span class="stat__num" data-num="tech">0</span></div>
              <div class="stat__track"><span class="stat__fill" data-stat="tech"></span></div>
            </div>
            <div class="stat">
              <div class="stat__label"><span>Resolve</span><span class="stat__num" data-num="resolve">0</span></div>
              <div class="stat__track"><span class="stat__fill" data-stat="resolve"></span></div>
            </div>
          </div>
        </div>
      </article>
    </section>

    <section class="cast" aria-label="Select a character">
      <h3 class="cast__title">The Roster</h3>
      <div class="cast__strip" id="castStrip" role="tablist"></div>
    </section>
  </main>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

Character Bio / Cast Page

A self-contained comic-book cast page. The featured profile sits in a halftone-textured portrait panel with a fully CSS-drawn character (hair, visor, jaw, accent mark) framed by thick ink borders, beside a dossier card showing name, alias, role badge (hero / villain / anti-hero), affiliation, home base, first-appearance issue and a pull-quote. Four power stat bars — Power, Speed, Tech and Resolve — fill on a spring easing while their numeric counters tick up.

Below the profile, a horizontally scrollable roster of selectable avatar cards lets you swap the featured character. Selecting a cast member runs a quick comic-style swap: the portrait scales and pops a bold SFX word (FWOOSH!, KLANG!, BZZT!…), the panel and portrait recolor to that character’s palette, and every stat bar and counter re-animates to the new values. A small toast confirms the loaded dossier.

The roster is keyboard-navigable (arrow keys move and select, focus rings are visible), the live profile region is announced via aria-live, and the layout collapses to a single column down to ~360px. Everything is driven by a single ROSTER array, so adding or editing characters is just a data change — no framework, no build step.

Illustrative UI only — fictional series, characters, and data.