883b589a43
Rename the portfolio mascot from Bigeye to Davebot and give him the canonical inverse inks: light mode uses a #262626 body with #d4d4d4 eyes, dark mode mirrors that exactly. Eyes follow the pointer by translating the two existing eye paths with one persistent SVG transform each, batched into a single animation frame. Playback, blinking and body drift stay owned by avatar-web, so gaze layers on top without resetting the timeline or regenerating paths. Also fix Prettier violations in earlier portfolio-gallery files.
65 lines
2.7 KiB
HTML
65 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-mode="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#f6f6f6" />
|
|
<title>Crew - sixteen ghosts, no two proportioned alike</title>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header>
|
|
<h1>Crew <em>— sixteen ghosts, no two proportioned alike</em></h1>
|
|
<p class="lede">
|
|
Every ghost has arms and a tail, and no two share a set of proportions. The head's
|
|
width-to-height ratio, the eye scale and spacing, and the reach of the arms and tail all
|
|
change from one to the next. The tail sits well behind the body, so it recedes rather than
|
|
reading as a fifth limb. Each figure is generated twice from identical geometry: light is
|
|
the tonal inverse of dark.
|
|
</p>
|
|
<p class="lede">
|
|
The printed measurements are derived from the geometry that renders, not written by hand,
|
|
and every reach is quoted as a fraction of that ghost's own head width.
|
|
</p>
|
|
|
|
<div class="roles">
|
|
<div class="ramp" data-mode="light">
|
|
<h3>
|
|
Light — bg 97 · tile 79 · muted 40 · ink 15 · accent
|
|
0
|
|
</h3>
|
|
<div class="swatches">
|
|
<div class="swatch" style="background: var(--light-bg)"></div>
|
|
<div class="swatch" style="background: var(--light-tile)"></div>
|
|
<div class="swatch" style="background: var(--light-ink-muted)"></div>
|
|
<div class="swatch" style="background: var(--light-ink)"></div>
|
|
<div class="swatch" style="background: var(--light-accent)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="ramp" data-mode="dark">
|
|
<h3>
|
|
Dark — bg 3 · tile 21 · muted 60 · ink 85 · accent
|
|
100
|
|
</h3>
|
|
<div class="swatches">
|
|
<div class="swatch" style="background: var(--dark-bg)"></div>
|
|
<div class="swatch" style="background: var(--dark-tile)"></div>
|
|
<div class="swatch" style="background: var(--dark-ink-muted)"></div>
|
|
<div class="swatch" style="background: var(--dark-ink)"></div>
|
|
<div class="swatch" style="background: var(--dark-accent)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="grid"></main>
|
|
|
|
<footer>
|
|
<span>Rendered with @bible-strong/avatar-web</span>
|
|
<span>Design System 01 · 16 proportions · 32 avatars</span>
|
|
</footer>
|
|
</div>
|
|
<script type="module" src="/src/crew-main.ts"></script>
|
|
</body>
|
|
</html>
|