bible-strong-avatar-lab/examples/portfolio-gallery/index.html
David Lafond 289908323a Add portfolio-gallery example: procedural avatar showcases
New workspace example rendering Bible Strong avatars via
@bible-strong/avatar-web for Rachel Chen's portfolio aesthetic.

- src/builder.ts: shared AvatarDefinition builder — 12 expressions,
  8 named emotes (idle/hello/curious/look-around/excited/surprise/
  sleepy/shy), lobe/pod/ears/antenna node presets, signature emotes.
- src/gallery.ts: shared grid renderer (hover -> signature emote).
- index.html / src/characters.ts: 20 characters across all engine
  surface types (sphere, mickey, cursor, cube, capsule, cylinder,
  cone, diamond).
- blobs.html / src/blobs.ts: 10 organic characters built from
  overlapping same-color lobes, no angular primitives.
- showcase.html / src/showcase.ts / src/showcase-main.ts: emote
  playground for 12 curated characters (4 new personalities driven
  by extreme eye traits) with per-character emote chips, following
  surface-motion (blur crossfade, staggered entrance, press feedback,
  reduced-motion) and surface-interaction (focal hover staging,
  50-use frequency test, interruptible playback) skill guidance.

pnpm-lock.yaml updated for the new workspace package.
2026-08-23 14:07:15 -04:00

39 lines
1.7 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="#fafcfd" />
<title>Avatar Ensemble — for Rachel Chen</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>
Avatar Ensemble
</span>
<h1>Twenty little characters, built to live on <em>Rachel&rsquo;s</em> pages.</h1>
<p class="lede">
A procedural cast rendered live with the Bible Strong avatar engine, tuned to the
portfolio&rsquo;s palette: warm coral against a cool near-white, slate ink, and soft
tints. Each one idles on its own and waves when you hover.
</p>
</header>
<main id="grid" aria-label="Twenty procedural avatar characters"></main>
<footer class="colophon">
<span>Rendered with @bible-strong/avatar-web</span>
<span>20 designs · hover to greet</span>
</footer>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>