bible-strong-avatar-lab/examples/portfolio-gallery/blobs.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>Blob 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>
Blob Ensemble
</span>
<h1>Ten <em>soft, boneless</em> things with no straight edges anywhere.</h1>
<p class="lede">
A second, blobbier cast &mdash; every silhouette is built by melting overlapping rounded
lobes into one lumpy, amoeba-like mass. No cones, cubes or points. Same live avatar
engine, same portfolio palette. Each one idles on its own and waves when you hover.
</p>
</header>
<main id="grid" aria-label="Ten organic blob avatar characters"></main>
<footer class="colophon">
<span>Rendered with @bible-strong/avatar-web</span>
<span>10 blobs · hover to greet</span>
</footer>
</div>
<script type="module" src="/src/blobs-main.ts"></script>
</body>
</html>