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.
39 lines
1.7 KiB
HTML
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 — 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>
|