289908323a
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.
40 lines
1.8 KiB
HTML
40 lines
1.8 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>Emote Playground — 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>
|
|
Emote Playground
|
|
</span>
|
|
<h1>Every character now knows <em>eight</em> ways to feel.</h1>
|
|
<p class="lede">
|
|
Same live avatar engine, richer inner life. Each character carries a full repertoire of
|
|
emotes — idle, wave, curious, look-around, excited, surprise, sleepy, shy —
|
|
driven by the engine’s own expression timeline, not CSS. The dotted chip marks each
|
|
one’s signature. Hover to preview it, or tap any emote to pin it.
|
|
</p>
|
|
</header>
|
|
|
|
<main id="grid" aria-label="Avatar emote playground"></main>
|
|
|
|
<footer class="colophon">
|
|
<span>Rendered with @bible-strong/avatar-web</span>
|
|
<span>12 characters · 8 emotes each</span>
|
|
</footer>
|
|
</div>
|
|
<script type="module" src="/src/showcase-main.ts"></script>
|
|
</body>
|
|
</html>
|