lively-mascot 0.2.0

package/src/characters/ghost.css

@@ -0,0 +1,77 @@
+/* ============================================================
+ * lively-mascot · Ghost Character
+ * Floating, semi-transparent spirit. No feet — the foot channel
+ * becomes a wavy hem. Simplest character in the set.
+ * ============================================================ */
+
+.lively-mascot--ghost {
+  /* a little extra room for the floating motion + hem */
+  overflow: visible;
+}
+
+/* --- Body (soft transparent blob) ---
+   Domed top with straight-ish sides so the body flows into the wavy hem
+   below — a classic ghost silhouette rather than a ball with hanging legs. */
+.lively-mascot--ghost .lively-body {
+  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
+  background: color-mix(in srgb, var(--lively-body) 72%, white);
+  border-color: var(--lively-outline);
+  border-bottom-width: 0;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
+  /* One shallow three-lobed silhouette in both outline states. */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100V94C88.9 100 77.8 100 66.7 94C55.6 100 44.4 100 33.3 94C22.2 100 11.1 100 0 94Z'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100V94C88.9 100 77.8 100 66.7 94C55.6 100 44.4 100 33.3 94C22.2 100 11.1 100 0 94Z'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  /* float instead of the default sway */
+  animation: lively-ghost-float 3.4s ease-in-out infinite;
+}
+.lively-mascot--ghost.is-happy .lively-body {
+  animation: lively-ghost-float 3.4s ease-in-out infinite, lively-squish 0.6s cubic-bezier(.3,1.6,.4,1);
+}
+
+@keyframes lively-ghost-float {
+  0%, 100% { transform: translateY(0) rotate(0); }
+  50% { transform: translateY(-7px) rotate(-2deg); }
+}
+
+/* no hard hop for a ghost */
+.lively-mascot--ghost.is-hopping .lively-mascot__rig { animation: none; }
+
+/* The SVG only supplies the optional bottom ink. The body itself owns the
+   filled wavy silhouette, so there is never a second colour layer to join. */
+.lively__ghost-hem {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 6cqw;
+  line-height: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+.lively__ghost-hem svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.lively-ghost__hem-stroke {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.lively-mascot--ghost.lively-mascot--outline-hidden .lively__ghost-hem {
+  display: none;
+}
+
+/* The shared rectangular inner rim cannot follow the custom lower contour. */
+.lively-mascot--ghost .lively-body::after {
+  display: none;
+}

package/src/characters/ghost.js

@@ -0,0 +1,68 @@
+/**
+ * lively-mascot · Ghost Character
+ *
+ * A floating, semi-transparent spirit. No feet — instead the foot
+ * channel is repurposed into a wavy tail/hem at the bottom.
+ * Structurally the simplest character.
+ *
+ * Requires: lively-mascot.js (loaded before this script)
+ */
+(function () {
+  "use strict";
+
+  var SVG_NS = "http://www.w3.org/2000/svg";
+
+  function svg(tag, attrs, children) {
+    var el = document.createElementNS(SVG_NS, tag);
+    if (attrs) for (var k in attrs) if (Object.prototype.hasOwnProperty.call(attrs, k)) el.setAttribute(k, String(attrs[k]));
+    if (children) for (var i = 0; i < children.length; i++) el.appendChild(children[i]);
+    return el;
+  }
+  function hEl(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) for (var k in attrs) {
+      if (Object.prototype.hasOwnProperty.call(attrs, k)) {
+        var v = attrs[k];
+        if (v === undefined || v === null || v === "") continue;
+        if (k === "class") node.className = String(v);
+        else if (k === "text") node.textContent = String(v);
+        else node.setAttribute(k, String(v));
+      }
+    }
+    if (children) for (var i = 0; i < children.length; i++) node.appendChild(children[i]);
+    return node;
+  }
+
+  function renderGhost(rig, gazeEl) {
+    // Body (floating blob, no hard shadow)
+    var body = hEl("div", { class: "lively-body lively-body--ghost" });
+    rig.registerBody(body);
+
+    // Shared face
+    var face = LivelyMascot.buildFaceSvg(rig);
+    body.appendChild(face.wrap);
+
+    // The body CSS owns the filled wavy silhouette. This SVG adds only the
+    // optional ink line for outline mode, so the lower edge stays seamless.
+    var hem = hEl("div", { class: "lively__ghost-hem" });
+    hem.appendChild(svg("svg", { viewBox: "0 0 100 6", preserveAspectRatio: "none" }, [
+      svg("path", {
+        class: "lively-ghost__hem-stroke",
+        d: "M0 0 C11.1 6 22.2 6 33.3 0 C44.4 6 55.6 6 66.7 0 C77.8 6 88.9 6 100 0"
+      })
+    ]));
+    body.appendChild(hem);
+
+    gazeEl.appendChild(body);
+  }
+
+  if (typeof LivelyMascot !== "undefined") {
+    LivelyMascot.registerCharacter("ghost", renderGhost, "Ghost", "0 0 100 100");
+  } else {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (typeof LivelyMascot !== "undefined") {
+        LivelyMascot.registerCharacter("ghost", renderGhost, "Ghost", "0 0 100 100");
+      }
+    });
+  }
+})();

package/src/characters/jelly.css

@@ -0,0 +1,54 @@
+/* ============================================================
+ * lively-mascot · Jelly Character
+ * Pure jelly blob: no leaf, no feet. Q-bouncy squash-stretch.
+ * ============================================================ */
+
+.lively-mascot--jelly {
+  overflow: visible;
+}
+
+/* --- Body (translucent jelly) --- */
+.lively-mascot--jelly .lively-body {
+  border-radius: 46% 46% 48% 48% / 52% 52% 50% 50%;
+  background:
+    radial-gradient(ellipse at 38% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%),
+    color-mix(in srgb, var(--lively-body) 68%, white);
+  border-color: var(--lively-outline);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.10), inset 0 -8px 14px rgba(0,0,0,0.06);
+  /* jiggly idle squash */
+  animation: lively-jelly-idle 2.8s ease-in-out infinite;
+}
+.lively-mascot--jelly.is-happy .lively-body {
+  animation: lively-jelly-idle 2.8s ease-in-out infinite, lively-squish 0.6s cubic-bezier(.3,1.6,.4,1);
+}
+
+@keyframes lively-jelly-idle {
+  0%, 100% { transform: scale(1, 1); border-radius: 46% 46% 48% 48% / 52% 52% 50% 50%; }
+  25% { transform: scale(1.06, 0.94); border-radius: 44% 44% 50% 50% / 50% 50% 52% 52%; }
+  50% { transform: scale(0.95, 1.06); border-radius: 50% 50% 44% 44% / 54% 54% 46% 46%; }
+  75% { transform: scale(1.03, 0.97); border-radius: 44% 44% 50% 50% / 50% 50% 52% 52%; }
+}
+
+/* jelly never hops (no feet) */
+.lively-mascot--jelly.is-hopping .lively-mascot__rig { animation: none; }
+
+/* a couple of emotion-driven jelly reactions on top of face changes */
+.lively-mascot--jelly.is-emotion-10 .lively-body,
+.lively-mascot--jelly.is-emotion-30 .lively-body,
+.lively-mascot--jelly.is-emotion-38 .lively-body {
+  animation: lively-jelly-bounce 0.7s cubic-bezier(.3,1.5,.5,1);
+}
+.lively-mascot--jelly.is-emotion-12 .lively-body,
+.lively-mascot--jelly.is-emotion-35 .lively-body {
+  animation: lively-jelly-sad 3s ease-in-out infinite;
+}
+@keyframes lively-jelly-bounce {
+  0% { transform: scale(1,1); }
+  30% { transform: translateY(-10px) scale(1.08, 0.9); }
+  60% { transform: translateY(0) scale(0.94, 1.08); }
+  100% { transform: scale(1,1); }
+}
+@keyframes lively-jelly-sad {
+  0%, 100% { transform: scale(1, 1) translateY(2px); }
+  50% { transform: scale(1.04, 0.96) translateY(4px); }
+}

package/src/characters/jelly.js

@@ -0,0 +1,55 @@
+/**
+ * lively-mascot · Jelly Character
+ *
+ * A pure jelly blob — no leaf, no feet. Only a translucent body
+ * with a jiggly squash-stretch idle animation.
+ *
+ * Requires: lively-mascot.js (loaded before this script)
+ */
+(function () {
+  "use strict";
+
+  var SVG_NS = "http://www.w3.org/2000/svg";
+
+  function svg(tag, attrs, children) {
+    var el = document.createElementNS(SVG_NS, tag);
+    if (attrs) for (var k in attrs) if (Object.prototype.hasOwnProperty.call(attrs, k)) el.setAttribute(k, String(attrs[k]));
+    if (children) for (var i = 0; i < children.length; i++) el.appendChild(children[i]);
+    return el;
+  }
+  function hEl(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) for (var k in attrs) {
+      if (Object.prototype.hasOwnProperty.call(attrs, k)) {
+        var v = attrs[k];
+        if (v === undefined || v === null || v === "") continue;
+        if (k === "class") node.className = String(v);
+        else if (k === "text") node.textContent = String(v);
+        else node.setAttribute(k, String(v));
+      }
+    }
+    if (children) for (var i = 0; i < children.length; i++) node.appendChild(children[i]);
+    return node;
+  }
+
+  function renderJelly(rig, rigEl) {
+    // Body (pure jelly blob)
+    var body = hEl("div", { class: "lively-body lively-body--jelly" });
+    rig.registerBody(body);
+
+    // Shared face
+    var face = LivelyMascot.buildFaceSvg(rig);
+    body.appendChild(face.wrap);
+    rigEl.appendChild(body);
+  }
+
+  if (typeof LivelyMascot !== "undefined") {
+    LivelyMascot.registerCharacter("jelly", renderJelly, "Jelly", "0 0 100 100");
+  } else {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (typeof LivelyMascot !== "undefined") {
+        LivelyMascot.registerCharacter("jelly", renderJelly, "Jelly", "0 0 100 100");
+      }
+    });
+  }
+})();

package/src/characters/robot.css

@@ -0,0 +1,83 @@
+/* ============================================================
+ * lively-mascot · Robot Character
+ * Square head + antenna (tech / mechanical vibe)
+ * ============================================================ */
+
+/* --- Body (square head) --- */
+.lively-mascot--robot .lively-body {
+  border-radius: 26%;
+  background:
+    linear-gradient(150deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%),
+    var(--lively-body);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--lively-outline) 70%, transparent), inset 0 0 0 3px rgba(255,255,255,0.10);
+}
+
+/* subtle screen seam so it reads as a robot face panel */
+.lively-mascot--robot .lively-face-wrap {
+  border-radius: 18%;
+  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.07), inset 0 4px 10px rgba(0,0,0,0.07);
+  background: rgba(0,0,0,0.04);
+}
+.lively-mascot--robot .lively-face-wrap svg {
+  filter: drop-shadow(0 0 1px rgba(0,0,0,0.05));
+}
+
+/* Keep robot cheeks warmer and quieter than the cyan antenna accent. */
+.lively-mascot--robot .lively-face__blush {
+  fill: #e7ad76;
+  fill-opacity: .58;
+  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
+}
+
+/* --- Antenna (leaf channel, CSS-driven) --- */
+.lively__antenna {
+  position: absolute;
+  top: -22cqw;
+  left: 50%;
+  width: 32cqw;
+  height: 29cqw;
+  margin-left: -16cqw;
+  z-index: 3;
+  transform-origin: 50% 100%;
+  animation: lively-robot-antenna 2.6s ease-in-out infinite;
+}
+.lively__antenna svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.lively-robot__antenna-stalk {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+.lively-robot__antenna-ball {
+  fill: var(--lively-accent);
+  stroke: var(--lively-outline);
+  stroke-width: 2;
+  animation: lively-robot-blink 1.8s ease-in-out infinite;
+}
+@keyframes lively-robot-antenna {
+  0%, 100% { transform: rotate(-4deg); }
+  50% { transform: rotate(4deg); }
+}
+@keyframes lively-robot-blink {
+  0%, 100% { fill: var(--lively-accent); }
+  50% { fill: #fff; }
+}
+
+/* --- Feet (mechanical blocks) --- */
+.lively__feet--robot .lively__foot svg { overflow: visible; }
+.lively-robot__foot {
+  fill: var(--lively-outline);
+  stroke: var(--lively-outline);
+  stroke-width: 1;
+}
+.lively-robot__foot-line { fill: rgba(255,255,255,0.5); }
+
+/* Antenna emotion reactions (top decoration reacts to state) */
+.lively-mascot.is-emotion-13 .lively__antenna { animation: lively-robot-antenna-fast 0.3s ease-in-out infinite; }
+.lively-mascot.is-emotion-13 .lively-robot__antenna-ball { fill: #ff6b6b; }
+.lively-mascot.is-emotion-31 .lively-robot__antenna-ball { fill: #ff6b6b; }
+.lively-mascot.is-emotion-38 .lively-robot__antenna-ball { fill: #ffd23f; }
+@keyframes lively-robot-antenna-fast {
+  0%, 100% { transform: rotate(-3deg); }
+  50% { transform: rotate(-14deg); }
+}

package/src/characters/robot.js

@@ -0,0 +1,82 @@
+/**
+ * lively-mascot · Robot Character
+ *
+ * A square-headed robot with an antenna and a glowing tip.
+ * Tech vibe: hard corners, segmented body, mechanical feet.
+ *
+ * Requires: lively-mascot.js (loaded before this script)
+ */
+(function () {
+  "use strict";
+
+  var SVG_NS = "http://www.w3.org/2000/svg";
+
+  function svg(tag, attrs, children) {
+    var el = document.createElementNS(SVG_NS, tag);
+    if (attrs) for (var k in attrs) if (Object.prototype.hasOwnProperty.call(attrs, k)) el.setAttribute(k, String(attrs[k]));
+    if (children) for (var i = 0; i < children.length; i++) el.appendChild(children[i]);
+    return el;
+  }
+  function hEl(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) for (var k in attrs) {
+      if (Object.prototype.hasOwnProperty.call(attrs, k)) {
+        var v = attrs[k];
+        if (v === undefined || v === null || v === "") continue;
+        if (k === "class") node.className = String(v);
+        else if (k === "text") node.textContent = String(v);
+        else node.setAttribute(k, String(v));
+      }
+    }
+    if (children) for (var i = 0; i < children.length; i++) node.appendChild(children[i]);
+    return node;
+  }
+
+  function renderRobot(rig, rigEl) {
+    // Antenna: reuse the "leaf" channel so it follows the body posture.
+    // CSS drives the bob + tip glow (useLeafAnim:false).
+    var antenna = hEl("span", { class: "lively__antenna", "aria-hidden": "true" });
+    rig.registerLeaf(antenna, { useLeafAnim: false });
+    antenna.appendChild(svg("svg", { viewBox: "0 0 40 36" }, [
+      svg("line", { class: "lively-robot__antenna-stalk", x1: 20, y1: 34, x2: 20, y2: 8 }),
+      svg("circle", { class: "lively-robot__antenna-ball", cx: 20, cy: 5, r: 5 })
+    ]));
+
+    // Body (square head)
+    var body = hEl("div", { class: "lively-body lively-body--robot" });
+    rig.registerBody(body);
+
+    // Shared face
+    var face = LivelyMascot.buildFaceSvg(rig);
+    body.appendChild(antenna);
+    body.appendChild(face.wrap);
+    rigEl.appendChild(body);
+
+    // Feet (mechanical blocks)
+    var feet = hEl("div", { class: "lively__feet lively__feet--robot" });
+    rig.registerFeet(feet);
+    var footL = hEl("span", { class: "lively__foot lively__foot--l" });
+    footL.appendChild(svg("svg", { viewBox: "0 0 22 16" }, [
+      svg("rect", { class: "lively-robot__foot", x: 1, y: 3, width: 20, height: 12, rx: 3 }),
+      svg("rect", { class: "lively-robot__foot-line", x: 4, y: 7, width: 14, height: 2, rx: 1 })
+    ]));
+    var footR = hEl("span", { class: "lively__foot lively__foot--r" });
+    footR.appendChild(svg("svg", { viewBox: "0 0 22 16" }, [
+      svg("rect", { class: "lively-robot__foot", x: 1, y: 3, width: 20, height: 12, rx: 3 }),
+      svg("rect", { class: "lively-robot__foot-line", x: 4, y: 7, width: 14, height: 2, rx: 1 })
+    ]));
+    feet.appendChild(footL);
+    feet.appendChild(footR);
+    rigEl.appendChild(feet);
+  }
+
+  if (typeof LivelyMascot !== "undefined") {
+    LivelyMascot.registerCharacter("robot", renderRobot, "Robot", "0 0 100 100");
+  } else {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (typeof LivelyMascot !== "undefined") {
+        LivelyMascot.registerCharacter("robot", renderRobot, "Robot", "0 0 100 100");
+      }
+    });
+  }
+})();

package/src/characters/sprout.css

@@ -0,0 +1,69 @@
+/* ============================================================
+ * lively-mascot · Sprout Character Styles
+ *
+ * The leafy sprout character: round body with a small plant
+ * growing from the top of its head.
+ * ============================================================ */
+
+/* --- Body shape override --- */
+.lively-mascot--sprout .lively-body {
+  border-radius: 50% 50% 46% 49%;
+}
+
+/* --- Leaf: sits on top of the head --- */
+.lively__leaf {
+  position: absolute;
+  top: -34cqw;
+  left: 50%;
+  width: 37cqw;
+  height: 40cqw;
+  margin-left: -18.5cqw;
+  transform-origin: 50% 100%;
+  animation: lively-leaf-sway 2.6s ease-in-out infinite;
+}
+
+.lively__leaf svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter: drop-shadow(1.2cqw 1.4cqw 0 color-mix(in srgb, var(--lively-outline) 55%, transparent));
+}
+
+.lively-sprout__stem {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.lively-sprout__leaf {
+  fill: var(--lively-body);
+  stroke: var(--lively-outline);
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+
+.lively-sprout__vein {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+}
+
+.lively-sprout__shine {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  opacity: 0.9;
+}
+
+/* Happy click: leaf spins */
+.lively-mascot.is-happy .lively__leaf {
+  animation: lively-leaf-spin 0.7s cubic-bezier(.3, 1.4, .4, 1);
+}
+
+/* --- Foot positioning for sprout --- */
+.lively-mascot--sprout .lively__foot--l { left: 18cqw; }
+.lively-mascot--sprout .lively__foot--r { left: 60cqw; animation-delay: 0.8s; }

package/src/characters/sprout.js

@@ -0,0 +1,87 @@
+/**
+ * lively-mascot · Sprout Character
+ *
+ * The classic leafy sprout: round body with a small plant
+ * growing from the top of its head.
+ *
+ * Requires: lively-mascot.js (loaded before this script)
+ */
+(function () {
+  "use strict";
+
+  var SVG_NS = "http://www.w3.org/2000/svg";
+
+  function svg(tag, attrs, children) {
+    var el = document.createElementNS(SVG_NS, tag);
+    if (attrs) for (var k in attrs) if (Object.prototype.hasOwnProperty.call(attrs, k)) el.setAttribute(k, String(attrs[k]));
+    if (children) for (var i = 0; i < children.length; i++) el.appendChild(children[i]);
+    return el;
+  }
+  function hEl(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) for (var k in attrs) {
+      if (Object.prototype.hasOwnProperty.call(attrs, k)) {
+        var v = attrs[k];
+        if (v === undefined || v === null || v === "") continue;
+        if (k === "class") node.className = String(v);
+        else if (k === "text") node.textContent = String(v);
+        else node.setAttribute(k, String(v));
+      }
+    }
+    if (children) for (var i = 0; i < children.length; i++) node.appendChild(children[i]);
+    return node;
+  }
+
+  function renderSprout(rig, rigEl) {
+    // Leaf (top decoration, data-driven by emotion leafAnim)
+    var leaf = hEl("span", { class: "lively__leaf", "aria-hidden": "true" });
+    rig.registerLeaf(leaf);
+    leaf.appendChild(svg("svg", { viewBox: "0 0 52 56" }, [
+      svg("path", { class: "lively-sprout__stem", d: "M26 52 C26 42, 26 34, 26 27" }),
+      svg("path", { class: "lively-sprout__leaf", d: "M26 28 C22 15, 14 9, 6 12 C5 20, 12 29, 26 28 Z" }),
+      svg("path", { class: "lively-sprout__vein", d: "M23 26 C18 21, 12 16, 8 14" }),
+      svg("path", { class: "lively-sprout__shine", d: "M22 26 C16 16, 11 12, 7 14" }),
+      svg("path", { class: "lively-sprout__leaf", d: "M26 28 C30 15, 38 9, 46 12 C47 20, 40 29, 26 28 Z" }),
+      svg("path", { class: "lively-sprout__vein", d: "M29 26 C34 21, 40 16, 44 14" }),
+      svg("path", { class: "lively-sprout__shine", d: "M30 26 C36 16, 41 12, 45 14" })
+    ]));
+
+    // Body
+    var body = hEl("div", { class: "lively-body" });
+    rig.registerBody(body);
+
+    // Shared face
+    var face = LivelyMascot.buildFaceSvg(rig);
+    body.appendChild(leaf);
+    body.appendChild(face.wrap);
+    rigEl.appendChild(body);
+
+    // Feet
+    var feet = hEl("div", { class: "lively__feet" });
+    rig.registerFeet(feet);
+    var footL = hEl("span", { class: "lively__foot lively__foot--l" });
+    footL.appendChild(svg("svg", { viewBox: "0 0 22 16" }, [
+      svg("ellipse", { class: "lively-foot__body", cx: 11, cy: 10, rx: 10, ry: 6 }),
+      svg("ellipse", { class: "lively-foot__shine", cx: 8, cy: 7, rx: 3, ry: 1.8 })
+    ]));
+    var footR = hEl("span", { class: "lively__foot lively__foot--r" });
+    footR.appendChild(svg("svg", { viewBox: "0 0 22 16" }, [
+      svg("ellipse", { class: "lively-foot__body", cx: 11, cy: 10, rx: 10, ry: 6 }),
+      svg("ellipse", { class: "lively-foot__shine", cx: 8, cy: 7, rx: 3, ry: 1.8 })
+    ]));
+    feet.appendChild(footL);
+    feet.appendChild(footR);
+    rigEl.appendChild(feet);
+  }
+
+  // Register sprout character when SDK is available
+  if (typeof LivelyMascot !== "undefined") {
+    LivelyMascot.registerCharacter("sprout", renderSprout, "Sprout", "0 0 100 100");
+  } else {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (typeof LivelyMascot !== "undefined") {
+        LivelyMascot.registerCharacter("sprout", renderSprout, "Sprout", "0 0 100 100");
+      }
+    });
+  }
+})();