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.
42 lines
1.9 KiB
HTML
42 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#f6f6f6" />
|
|
<title>Ghosts — ten tails in the Page 3 monochrome system</title>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header class="masthead">
|
|
<span class="brand">
|
|
<svg viewBox="0 0 30 30" fill="none" aria-hidden="true">
|
|
<path
|
|
d="M14.5231 29.2759C12.6685 22.5706 7.42938 17.3315 0.724097 15.4769C0.240255 15.3431 0.240255 14.657 0.724097 14.5231C7.42938 12.6685 12.6685 7.42939 14.5231 0.724099C14.6569 0.240257 15.343 0.240257 15.4769 0.724099C17.3315 7.42939 22.5706 12.6685 29.2759 14.5231C29.7597 14.657 29.7597 15.343 29.2759 15.4769C22.5706 17.3315 17.3315 22.5706 15.4769 29.2759C15.343 29.7597 14.657 29.7597 14.5231 29.2759Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
Ghosts · ten tails
|
|
</span>
|
|
<h1>Pip grew a <em>tail</em> and floated off.</h1>
|
|
<p class="lede">
|
|
Same round head and the same monochrome values from Page 3 — but every one now
|
|
trails a tail. Tails are built in the engine itself, as a chain of tapering lobes swept
|
|
along a curve, so each one merges into a single continuous silhouette rather than being
|
|
drawn on afterwards. The variable across these ten cards is the tail: its length, its bow,
|
|
which way it sweeps, and how fast it thins. Two wear a straw hat, after the sketch. Hover
|
|
any ghost to see its own emote.
|
|
</p>
|
|
</header>
|
|
|
|
<main id="grid" aria-label="Ten ghost variations with tails"></main>
|
|
|
|
<footer class="colophon">
|
|
<span>Rendered with @bible-strong/avatar-web</span>
|
|
<span>Values: ditto - aug 23 · Page 3</span>
|
|
</footer>
|
|
</div>
|
|
<script type="module" src="/src/ghosts-main.ts"></script>
|
|
</body>
|
|
</html>
|