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.
61 lines
2.5 KiB
HTML
61 lines
2.5 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>Tails - one smooth volume, two modes</title>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header>
|
|
<h1>Tails <em>— one smooth volume, two modes</em></h1>
|
|
<p class="lede">
|
|
Ten tail iterations. Each tail is a single cone node whose wide, rounded base is buried
|
|
inside the head, so body and tail share one fill and read as one continuous silhouette
|
|
— no chain of spheres, no seam. Every ghost is generated twice from identical
|
|
geometry: light is the tonal inverse of dark, so the contrast relationships mirror
|
|
exactly.
|
|
</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 · 7 roles · 10 tails · 20 avatars</span>
|
|
</footer>
|
|
</div>
|
|
<script type="module" src="/src/tails-main.ts"></script>
|
|
</body>
|
|
</html>
|