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>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’s</em> pages.</h1>
|
|
<p class="lede">
|
|
A procedural cast rendered live with the Bible Strong avatar engine, tuned to the
|
|
portfolio’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>
|