overlaify 0.0.0-stage → 0.1.2

package/assets/templates/catalog.json

@@ -0,0 +1,348 @@
+[
+  {
+    "slug": "neon-alert",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Neon Pulse Alerts",
+    "kind": "Alert box",
+    "tier": "free",
+    "desc": "Glowing pop-in alerts for follows, subs, gifts, bits and raids. Accent color via ?color=.",
+    "seoTitle": "Neon Pulse Alerts — Free Neon Twitch Alert Box for OBS",
+    "metaDesc": "Free neon Twitch alert box for OBS: glowing pop-in alerts for subs, resubs, gifted subs, bits and raids. Pick any accent color, paste one URL, go live.",
+    "about": [
+      "Neon Pulse is a free Twitch alert box that drops a glowing, sign-style card into the top of your scene whenever someone subscribes, gifts subs, cheers bits or raids your channel. The viewer's name shimmers across the card while a pulsing ring keeps it readable over busy gameplay.",
+      "Every alert type gets its own wording: resubs show the month streak and tier, gift bombs show the number of subs dropped, and cheers show the bits total plus the viewer's message. Alerts queue up so a raid followed by a wave of subs never overlaps."
+    ],
+    "features": [
+      "Sub, resub, gifted sub, gift bomb, bits and raid alerts",
+      "Shows resub messages and cheer messages",
+      "Accent color and on-screen duration set from the URL",
+      "Alerts queue instead of overlapping",
+      "Built-in sounds with volume and mute controls",
+      "Transparent 1920 × 1080 browser source"
+    ],
+    "listedAt": "2026-10-28T14:00:41.475Z",
+    "style": "Neon",
+    "accent": "#c6ff3d",
+    "crop": [
+      480,
+      0,
+      960
+    ],
+    "preview": "/assets/previews/neon-alert.png",
+    "clip": true
+  },
+  {
+    "slug": "chat-stack",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Glass Chat Stack",
+    "kind": "Chat",
+    "tier": "free",
+    "desc": "Frosted-glass chat with Twitch emotes, badges and auto-fade. Hides bots and !commands.",
+    "seoTitle": "Glass Chat Stack — Free Twitch Chat Overlay for OBS",
+    "metaDesc": "Free frosted-glass Twitch chat overlay for OBS with emotes, mod/sub/VIP badges and auto-fade. Hides bots and !commands. One browser source URL, no login.",
+    "about": [
+      "Glass Chat Stack puts your Twitch chat on stream as a column of frosted-glass bubbles in the bottom-left corner. Each message is tinted with the chatter's own Twitch name color, shows mod, sub, VIP and broadcaster badges, and renders Twitch emotes inline.",
+      "It is built to stay out of the way: old messages fade after 30 seconds, only the newest few are kept on screen, and messages from Nightbot, StreamElements, Streamlabs or anything starting with ! are hidden so command spam never reaches your viewers."
+    ],
+    "features": [
+      "Twitch emotes rendered inline",
+      "Mod, sub, VIP and broadcaster badges",
+      "Chatter name colors from Twitch",
+      "Auto-fade with adjustable timing",
+      "Hides bots and !commands",
+      "Highlights bits sent with a message"
+    ],
+    "listedAt": "2026-10-28T14:00:41.511Z",
+    "style": "Frosted glass",
+    "accent": "#9fd8ff",
+    "crop": [
+      0,
+      420,
+      1100
+    ],
+    "preview": "/assets/previews/chat-stack.png",
+    "clip": true
+  },
+  {
+    "slug": "goal-bar",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Liquid Goal Bar",
+    "kind": "Goal",
+    "tier": "free",
+    "desc": "Animated sub / bits goal bar that remembers progress. ?type=bits&goal=5000",
+    "seoTitle": "Liquid Goal Bar — Free Twitch Sub & Bits Goal Overlay for OBS",
+    "metaDesc": "Free animated Twitch goal bar for OBS. Track a sub goal or bits goal live, with a flowing liquid fill that remembers progress between streams. Fully set from the URL.",
+    "about": [
+      "Liquid Goal Bar is a free Twitch goal overlay that fills up live as your community subs or cheers. A striped, flowing gradient slides across the bar with every contribution, and the whole bar turns lime green with a fanfare when you hit the goal.",
+      "Progress is saved in the OBS browser source, so the bar picks up where it left off next stream. Choose a sub goal or a bits goal, set the target, starting value, label and color right in the URL, and add as many bars as you like for different goals."
+    ],
+    "features": [
+      "Sub goal or bits goal",
+      "Counts subs, gifted subs and gift bombs",
+      "Remembers progress between streams",
+      "Custom label, target, starting value and color",
+      "Celebration state and sound when the goal is reached",
+      "Transparent background, sits at the top of the scene"
+    ],
+    "listedAt": "2026-10-28T14:00:41.530Z",
+    "style": "Liquid fill",
+    "accent": "#ff4f8b",
+    "crop": [
+      400,
+      0,
+      1120
+    ],
+    "preview": "/assets/previews/goal-bar.png",
+    "clip": true
+  },
+  {
+    "slug": "starting-soon",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Starting Soon Countdown",
+    "kind": "Scene",
+    "tier": "free",
+    "desc": "Full-screen starting soon screen with a live countdown timer and chat while viewers wait. ?minutes=5",
+    "seoTitle": "Starting Soon Screen — Free Twitch Countdown Overlay for OBS",
+    "metaDesc": "Free animated starting soon screen for Twitch and OBS with a live countdown timer, your own headline and a chat feed so viewers can say hi before you go live.",
+    "about": [
+      "Starting Soon Countdown is a free, full-screen starting soon scene for Twitch. Drifting neon light, a big headline and a live countdown timer tell early viewers exactly when the stream starts, and when the timer hits zero it switches to a pulsing “going live any second” message.",
+      "Set the countdown in minutes or to a clock time like 19:30, and change the headline, the line underneath and the accent color right in the URL. A side panel shows the latest chat messages, new subs, cheers and raids, so the waiting room already feels alive before you switch scenes."
+    ],
+    "features": [
+      "Live countdown in minutes or to a clock time",
+      "Custom headline, message and accent color",
+      "Live chat feed while viewers wait",
+      "Highlights subs, gifted subs, bits and raids",
+      "Animated background, or transparent with bg=0",
+      "Full 1920 × 1080 scene, no image files needed"
+    ],
+    "listedAt": "2026-10-28T14:00:41.611Z",
+    "style": "Neon gradient",
+    "accent": "#b48bff",
+    "preview": "/assets/previews/starting-soon.png",
+    "clip": true
+  },
+  {
+    "slug": "be-right-back",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Cozy BRB Screen",
+    "kind": "Scene",
+    "tier": "free",
+    "desc": "Warm “be right back” scene with a steaming mug, away timer and scrolling chat ticker.",
+    "seoTitle": "Be Right Back Screen — Free Animated BRB Overlay for Twitch & OBS",
+    "metaDesc": "Free animated BRB screen for Twitch and OBS: a cozy be right back scene with an away timer or countdown, steaming mug animation and a live chat ticker.",
+    "about": [
+      "Cozy BRB Screen is a free be right back scene for Twitch streams. Warm lamplight, floating dust and a steaming mug keep the screen moving while you step away, and a big serif headline makes it obvious you will be back soon.",
+      "By default the timer counts how long you have been away; add a number of minutes and it becomes a “back in” countdown instead. A chat ticker along the bottom keeps the latest messages, subs, cheers and raids on screen, so your community can keep chatting during the break."
+    ],
+    "features": [
+      "Away timer or “back in” countdown",
+      "Live chat ticker along the bottom",
+      "Highlights subs, gifted subs, bits and raids",
+      "Custom headline, message and accent color",
+      "Animated background, or transparent with bg=0",
+      "Full 1920 × 1080 scene, no image files needed"
+    ],
+    "listedAt": "2026-10-28T14:00:41.628Z",
+    "style": "Coffee break",
+    "accent": "#ffb547",
+    "preview": "/assets/previews/be-right-back.png",
+    "clip": true
+  },
+  {
+    "slug": "webcam-frame",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Neon Webcam Frame",
+    "kind": "Webcam frame",
+    "tier": "free",
+    "desc": "Animated gradient facecam border with a name tag that flashes on subs, bits and raids.",
+    "seoTitle": "Neon Webcam Frame — Free Animated Facecam Border for OBS",
+    "metaDesc": "Free animated webcam frame for Twitch and OBS: a glowing gradient facecam border with a name tag that flashes on subs, bits and raids. Size and position from the URL.",
+    "about": [
+      "Neon Webcam Frame is a free webcam overlay that wraps your facecam in a slowly rotating neon gradient border with rounded corners and a live name tag. The inside is fully transparent, so you place it over your camera source and it just works.",
+      "Set the exact position and size in pixels so it lines up with your camera, pick two colors for the gradient, and change the corner radius and border thickness. When someone subscribes, gifts, cheers or raids, the border speeds up and glows while a small label pops up with their name."
+    ],
+    "features": [
+      "Rotating two-color gradient border",
+      "Name tag with a live dot",
+      "Flashes and shows a label on subs, bits and raids",
+      "Position, size, radius and border width from the URL",
+      "Transparent inside for your camera",
+      "Works with any webcam or capture card"
+    ],
+    "listedAt": "2026-10-28T14:00:41.645Z",
+    "style": "Neon",
+    "accent": "#c6ff3d",
+    "crop": [
+      1080,
+      560,
+      860
+    ],
+    "preview": "/assets/previews/webcam-frame.png",
+    "clip": true
+  },
+  {
+    "slug": "subathon-timer",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Subathon Timer",
+    "kind": "Timer",
+    "tier": "free",
+    "desc": "Countdown that grows with every sub and cheer. Remembers time between restarts. ?hours=4&sub=300",
+    "seoTitle": "Subathon Timer — Free Twitch Subathon Overlay for OBS",
+    "metaDesc": "Free Twitch subathon timer for OBS: subs, gifted subs and bits add time automatically, mods can add or pause from chat, and the timer survives OBS restarts.",
+    "about": [
+      "Subathon Timer is a free subathon overlay for Twitch. Set a starting length, and every new sub, resub, gifted sub and cheer adds time to the clock automatically, with a floating “+5:00” and the supporter’s name each time. Tier 2 subs count double and tier 3 subs count five times.",
+      "The end time is saved in the OBS browser source, so the timer keeps running correctly through crashes, scene switches and PC restarts. Mods and the broadcaster can add or remove minutes and pause or resume the timer from chat, and an optional cap keeps a subathon from running forever."
+    ],
+    "features": [
+      "Subs, gifted subs and bits add time automatically",
+      "Tier 2 and tier 3 subs add more time",
+      "Mod chat commands: add, remove, pause, resume",
+      "Survives OBS restarts and crashes",
+      "Optional maximum length cap",
+      "Floating “+time” with the supporter’s name"
+    ],
+    "listedAt": "2026-10-28T14:00:41.663Z",
+    "style": "Clean HUD",
+    "accent": "#5ce1ff",
+    "crop": [
+      1200,
+      0,
+      720
+    ],
+    "preview": "/assets/previews/subathon-timer.png",
+    "clip": true
+  },
+  {
+    "slug": "emote-wall",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Emote Wall",
+    "kind": "Chat effect",
+    "tier": "free",
+    "desc": "Every emote your chat sends floats, rains or bounces across the screen, with combo banners.",
+    "seoTitle": "Emote Wall — Free Twitch Emote Rain & Bounce Overlay for OBS",
+    "metaDesc": "Free Twitch emote wall for OBS: emotes and emoji from chat float up, rain down or bounce across your stream, with a combo banner when chat spams the same emote.",
+    "about": [
+      "Emote Wall is a free Twitch emote overlay that turns your chat into a light show. Every Twitch emote and emoji in a chat message pops onto the screen and floats up, rains down or bounces around DVD-logo style, so hype moments look as loud as they feel.",
+      "When chat sends the same emote several messages in a row, a combo banner appears with a running count and a burst of extra emotes. Choose the motion, emote size, how many can be on screen and how many each message can spawn, so it stays fun without covering your gameplay."
+    ],
+    "features": [
+      "Twitch emotes and emoji from chat",
+      "Three motions: rise, rain and bounce",
+      "Combo banner when chat spams one emote",
+      "Limits per message and on screen",
+      "Adjustable emote size and lifetime",
+      "Transparent full-screen browser source"
+    ],
+    "listedAt": "2026-10-28T14:00:41.680Z",
+    "style": "Emote chaos",
+    "accent": "#ff6b4a",
+    "preview": "/assets/previews/emote-wall.png",
+    "clip": true
+  },
+  {
+    "slug": "death-counter",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Death Counter",
+    "kind": "Counter",
+    "tier": "free",
+    "desc": "On-screen death counter your mods control from chat: !death, !death-, !death set 12.",
+    "seoTitle": "Death Counter — Free Twitch Death Counter Overlay for OBS",
+    "metaDesc": "Free Twitch death counter for OBS. Mods type !death to add one, !death- to undo or !death set 12. Saves the count between streams. Rename it to count anything.",
+    "about": [
+      "Death Counter is a free Twitch death counter overlay for souls-likes, roguelikes, horror games and any run where dying is part of the show. Each time a mod or the broadcaster types !death in chat, the count goes up with a shake and a low thud, right in the corner of your stream.",
+      "The count is saved in the OBS browser source, so it carries over between streams until you reset it. Rename the command and the label to track anything else — wipes, rage quits, jump scares or wins — and add several counters with different commands side by side."
+    ],
+    "features": [
+      "Chat commands: !death, !death-, !death set, !death reset",
+      "Only mods and the broadcaster by default",
+      "Saves the count between streams",
+      "Rename the command, label and icon to count anything",
+      "Shake animation and sound on every death",
+      "Run several counters at once"
+    ],
+    "listedAt": "2026-10-28T14:00:41.699Z",
+    "style": "Gamer HUD",
+    "accent": "#ff4f8b",
+    "crop": [
+      0,
+      0,
+      640
+    ],
+    "preview": "/assets/previews/death-counter.png",
+    "clip": true
+  },
+  {
+    "slug": "newsroom-ticker",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "Breaking News Ticker",
+    "kind": "Ticker",
+    "tier": "free",
+    "desc": "A slim BREAKING news rail along the bottom scrolls your latest subs, gifts, bits and raids.",
+    "seoTitle": "Breaking News Ticker — Free Twitch Event Ticker Overlay for OBS",
+    "metaDesc": "Free Twitch event ticker for OBS: a BREAKING news rail scrolls your latest subs, resubs, gifted subs, bits and raids along the bottom, with a flash banner for new events.",
+    "about": [
+      "Breaking News Ticker is a free Twitch event ticker that runs along the bottom of your stream like a 24-hour news channel. A red “BREAKING:” tag leads a scrolling rail of your latest subs, resubs, gifted subs, bits and raids, written as headlines.",
+      "Fresh events flash a red banner above the rail and jump to the front of the list. It keeps the last ten stories by default, so new viewers can see who supported the stream — a nice thank-you for your chat."
+    ],
+    "features": [
+      "Scrolling rail of recent subs, gifts, bits and raids",
+      "Newsroom-style headlines for each event",
+      "Flash banner when news breaks",
+      "Seamless loop with no gaps",
+      "Adjustable speed and story count"
+    ],
+    "listedAt": "2026-10-28T14:00:41.902Z",
+    "style": "Breaking news",
+    "accent": "#ff5c66",
+    "crop": [
+      0,
+      596,
+      860
+    ],
+    "preview": "/assets/previews/newsroom-ticker.png",
+    "clip": true
+  },
+  {
+    "slug": "hug-command",
+    "official": true,
+    "author": "Dev User (google)",
+    "title": "!hug Blob Hugs",
+    "kind": "Chat command",
+    "tier": "free",
+    "desc": "When a chatter types !hug @name, two cute blobs in their colors slide in and hug with both names above them.",
+    "seoTitle": "!hug Command — Free Twitch Hug Overlay for OBS",
+    "metaDesc": "Free Twitch !hug command overlay: when a viewer types !hug @name, two cute blobs in their name colors hug on stream with hearts floating up. No bot or login needed.",
+    "about": [
+      "!hug Blob Hugs is a free Twitch hug command overlay. When a viewer types !hug @name in chat, two round blobs in each person's Twitch name color slide in, squeeze each other and float hearts up, with both names shown above them.",
+      "A bare !hug hugs the whole chat. Add a per-chatter cooldown if your community gets too affectionate, or rename the command — !pat, !boop, !highfive — to make it your own."
+    ],
+    "features": [
+      "!hug @name shows two blobs hugging",
+      "Blobs in each viewer's name color",
+      "Plain !hug hugs the whole chat",
+      "Optional per-chatter cooldown",
+      "Rename the command"
+    ],
+    "listedAt": "2026-10-28T14:00:41.954Z",
+    "style": "Cute",
+    "accent": "#ff7eb6",
+    "crop": [
+      440,
+      480,
+      1040
+    ],
+    "preview": "/assets/previews/hug-command.png",
+    "clip": true
+  }
+]

package/assets/templates/chat-stack.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+<script src="https://www.overlaify.com/sdk/v1/overlaify.js"></script>
+<meta charset="utf-8">
+<title>Glass Chat Stack</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
+<script type="application/json" id="overlaify-manifest">
+{
+  "spec": 1,
+  "settings": [
+    {"key": "max", "label": "Messages on screen", "type": "range", "default": 7, "min": 1, "max": 20, "step": 1, "desc": "Maximum number of messages on screen."},
+    {"key": "fade", "label": "Fade after", "type": "range", "default": 30, "min": 0, "max": 300, "step": 5, "unit": "s", "desc": "Seconds before a message fades out. 0 keeps messages until they are pushed off."},
+    {"key": "hidebots", "label": "Hide users", "type": "text", "default": "nightbot,streamelements,streamlabs", "desc": "Comma-separated usernames (lowercase, no spaces) whose messages are hidden."}
+  ],
+  "actions": [
+    {"name": "clear", "label": "Clear chat", "style": "danger", "wide": true}
+  ]
+}
+</script>
+<style>
+  html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+  #chat { position: absolute; left: 40px; bottom: 60px; width: 520px; display: flex; flex-direction: column; gap: 12px; }
+  .msg {
+    font-family: 'Outfit', system-ui, sans-serif; font-size: 26px; line-height: 1.35; color: #f4f1ff;
+    background: rgba(16, 13, 26, .72); backdrop-filter: blur(8px);
+    border-left: 5px solid var(--uc, #9b5cff); border-radius: 6px 16px 16px 6px;
+    padding: 12px 18px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
+    text-shadow: 0 1px 2px rgba(0,0,0,.6);
+    transform-origin: left bottom; animation: slide .35s cubic-bezier(.2,1.2,.4,1);
+    transition: opacity .6s, transform .6s;
+  }
+  .msg.gone { opacity: 0; transform: translateX(-40px); }
+  .who { font-weight: 800; color: var(--uc, #9b5cff); margin-right: 8px; }
+  .badge { display: inline-block; font-size: 15px; font-weight: 600; padding: 1px 8px; border-radius: 99px; margin-right: 6px; vertical-align: 3px; color: #0b0a10; }
+  .b-mod { background: #4dffa6; } .b-sub { background: #ffb547; } .b-vip { background: #ff4f8b; } .b-broadcaster { background: #ff6b4a; }
+  .bits { font-weight: 800; color: #c6ff3d; margin-left: 6px; }
+  @keyframes slide { from { opacity: 0; transform: translateY(20px) scale(.96); } }
+</style>
+</head>
+<body>
+<div id="chat"></div>
+<script>
+  const MAX = Overlaify.param('max', 7);
+  const FADE = Overlaify.param('fade', 30);          // seconds, 0 = never
+  const HIDE_BOTS = Overlaify.param('hidebots', 'nightbot,streamelements,streamlabs').split(',');
+  const box = document.getElementById('chat');
+
+  function remove(el) { el.classList.add('gone'); setTimeout(() => el.remove(), 600); }
+
+  Overlaify.on('chat', e => {
+    if (HIDE_BOTS.includes(e.user) || e.message.startsWith('!')) return;
+    const el = document.createElement('div');
+    el.className = 'msg';
+    el.style.setProperty('--uc', e.color || '#9b5cff');
+    const badges = [e.isBroadcaster && 'broadcaster', e.isMod && 'mod', e.isVip && 'vip', e.isSub && 'sub'].filter(Boolean)
+      .map(b => `<span class="badge b-${b}">${b === 'broadcaster' ? 'LIVE' : b.toUpperCase()}</span>`).join('');
+    el.innerHTML = `${badges}<span class="who">${Overlaify.escape(e.name)}</span>${Overlaify.renderMessage(e.message, e.emotes)}${e.bits ? `<span class="bits">◆ ${e.bits}</span>` : ''}`;
+    box.appendChild(el);
+    while (box.children.length > MAX) box.firstElementChild.remove();
+    if (FADE > 0) setTimeout(() => el.isConnected && remove(el), FADE * 1000);
+  });
+
+  Overlaify.action('clear', () => { box.replaceChildren(); });
+</script>
+</body>
+</html>

package/assets/templates/death-counter.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+<script src="https://www.overlaify.com/sdk/v1/overlaify.js"></script>
+<meta charset="utf-8">
+<title>Death Counter</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Rubik:wght@600&display=swap" rel="stylesheet">
+<script type="application/json" id="overlaify-manifest">
+{
+  "spec": 1,
+  "settings": [
+    {"key": "label", "label": "Title", "type": "text", "default": "Deaths", "group": "Look"},
+    {"key": "icon", "label": "Icon", "type": "text", "default": "💀", "desc": "Emoji or text shown next to the count.", "group": "Look"},
+    {"key": "color", "label": "Accent color", "type": "color", "default": "#ff3b5c", "swatches": ["#ff3b5c", "#ffb547", "#c6ff3d", "#5ce1ff", "#a879ff"], "group": "Look"},
+    {"key": "start", "label": "Starting count", "type": "number", "default": 0, "desc": "Used when nothing is saved yet.", "group": "Counter"},
+    {"key": "cmd", "label": "Chat command", "type": "text", "default": "death", "desc": "So !death, !death- and !death set 3.", "group": "Chat"},
+    {"key": "who", "label": "Who can change it from chat", "type": "segmented", "default": "mods", "options": [{"value": "mods", "label": "Mods"}, {"value": "vips", "label": "+ VIPs"}, {"value": "all", "label": "Everyone"}], "group": "Chat"}
+  ],
+  "actions": [
+    {"name": "add", "label": "+1"},
+    {"name": "remove", "label": "−1", "style": "secondary"},
+    {"name": "set", "label": "Set count", "style": "secondary", "input": {"type": "number", "label": "Count", "default": 0, "step": 1, "min": 0}},
+    {"name": "reset", "label": "Reset to 0", "style": "danger", "confirm": true, "wide": true}
+  ]
+}
+</script>
+<style>
+  :root { --c: #ff3b5c; }
+  html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+  .box { position: absolute; left: 50px; top: 50px; display: flex; align-items: center; gap: 20px; padding: 14px 30px 14px 18px; border-radius: 20px;
+    background: rgba(12,8,12,.86); border: 3px solid var(--c); box-shadow: 0 0 26px rgba(255,59,92,.35), 0 12px 30px rgba(0,0,0,.45); color: #fff; }
+  .icon { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 10px var(--c)); }
+  .label { font: 600 22px 'Rubik', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--c); }
+  .num { font: 400 72px/1 'Rubik Mono One', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
+  .hit { animation: hit .6s cubic-bezier(.3,1.6,.5,1); }
+  .hit .icon { animation: shake .5s; }
+  .down .num { color: #c6ff3d; }
+  @keyframes hit { 30% { transform: scale(1.12); box-shadow: 0 0 60px var(--c); } }
+  @keyframes shake { 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } }
+</style>
+</head>
+<body>
+<div class="box" id="box">
+  <div class="icon" id="icon"></div>
+  <div><div class="label" id="label"></div><div class="num" id="num">0</div></div>
+</div>
+<script>
+  // Chat commands (broadcaster and mods; &who=vips adds VIPs, &who=all lets anyone):
+  //   !death  or !death+   add one        !death-   remove one
+  //   !death set 12        set the count  !death reset
+  // ?cmd=death renames the command  &label=Deaths  &icon=💀  &start=0  &color=%23ff3b5c
+  const CMD = Overlaify.param('cmd', 'death').toLowerCase().replace(/^!/, '');
+  const WHO = Overlaify.param('who', 'mods');
+  const KEY = `overlaify-counter-${Overlaify.channel || 'preview'}-${CMD}`;
+  document.documentElement.style.setProperty('--c', Overlaify.param('color', '#ff3b5c'));
+  document.getElementById('label').textContent = Overlaify.param('label', 'Deaths');
+  document.getElementById('icon').textContent = Overlaify.param('icon', '💀');
+
+  let n = Overlaify.param('start', 0);
+  if (!Overlaify.isTest) { try { const s = localStorage.getItem(KEY); if (s !== null) n = Number(s) || 0; } catch (e) {} }
+  const box = document.getElementById('box'), num = document.getElementById('num');
+  function set(v, anim) {
+    const up = v > n; n = Math.max(0, v);
+    num.textContent = n.toLocaleString();
+    if (!Overlaify.isTest) { try { localStorage.setItem(KEY, String(n)); } catch (e) {} }
+    if (anim) { box.classList.remove('hit', 'down'); void box.offsetWidth; box.classList.add(up ? 'hit' : 'down'); if (up) Overlaify.chime('low', 0.2); }
+  }
+  set(n, false);
+
+  const allowed = e => e.isBroadcaster || e.user === Overlaify.channel || e.isMod || (WHO === 'vips' && e.isVip) || WHO === 'all';
+  const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const RE = new RegExp(`^!${esc(CMD)}(\\+|-|\\s+set\\s+(\\d+)|\\s+reset)?\\s*$`, 'i');
+  // Actions, from the control panel or from chat.
+  Overlaify.action('add', () => set(n + 1, true));
+  Overlaify.action('remove', () => set(n - 1, true));
+  Overlaify.action('set', v => set(Number(v) || 0, true));
+  Overlaify.action('reset', () => set(0, true));
+
+  Overlaify.on('chat', e => {
+    const m = e.message.trim().match(RE);
+    if (!m || !allowed(e)) return;
+    const op = (m[1] || '+').trim().toLowerCase();
+    if (op === '+') Overlaify.dispatch('add');
+    else if (op === '-') Overlaify.dispatch('remove');
+    else if (op === 'reset') Overlaify.dispatch('reset');
+    else Overlaify.dispatch('set', m[2]);
+  });
+
+  // Previews: tick the counter up now and then so it looks alive.
+  if (Overlaify.isTest) setInterval(() => set(n + 1, true), 4500);
+</script>
+</body>
+</html>

package/assets/templates/emote-wall.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+<head>
+<script src="https://www.overlaify.com/sdk/v1/overlaify.js"></script>
+<meta charset="utf-8">
+<title>Emote Wall</title>
+<script type="application/json" id="overlaify-manifest">
+{
+  "spec": 1,
+  "settings": [
+    {"key": "mode", "label": "Motion", "type": "segmented", "default": "rise", "options": [{"value": "rise", "label": "Rise"}, {"value": "rain", "label": "Rain"}, {"value": "bounce", "label": "Bounce"}], "group": "Look"},
+    {"key": "size", "label": "Emote size", "type": "range", "default": 112, "min": 32, "max": 256, "step": 4, "unit": "px", "group": "Look"},
+    {"key": "life", "label": "Time on screen", "type": "range", "default": 6, "min": 2, "max": 20, "step": 1, "unit": "s", "group": "Look", "desc": "Seconds each emote stays. When not set, Bounce uses 8."},
+    {"key": "max", "label": "Max on screen", "type": "range", "default": 80, "min": 10, "max": 300, "step": 10, "group": "Limits", "desc": "Oldest emotes are removed past this."},
+    {"key": "per", "label": "Max per message", "type": "range", "default": 6, "min": 1, "max": 20, "step": 1, "group": "Limits"},
+    {"key": "combo", "label": "Combo after", "type": "range", "default": 5, "min": 0, "max": 20, "step": 1, "group": "Chat", "desc": "Messages in a row with the same emote before a combo banner. 0 turns it off."},
+    {"key": "emoji", "label": "Include emoji", "type": "toggle", "default": true, "group": "Chat", "desc": "Off shows only Twitch emotes."}
+  ],
+  "actions": [
+    {"name": "clear", "label": "Clear", "style": "danger", "wide": true}
+  ]
+}
+</script>
+<style>
+  html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+  .e { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); display: grid; place-items: center; will-change: transform, opacity;
+    font: var(--s)/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
+  .e img { width: 100%; height: 100%; object-fit: contain; }
+  .e span { font-size: .8em; }
+  .combo { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 14px 30px;
+    border-radius: 99px; background: rgba(12,10,20,.82); border: 3px solid #c6ff3d; box-shadow: 0 0 30px rgba(198,255,61,.5);
+    font: 800 46px system-ui, sans-serif; color: #fff; animation: combo .5s cubic-bezier(.2,1.6,.4,1); }
+  .combo img, .combo span { height: 72px; font-size: 64px; }
+  .combo b { color: #c6ff3d; }
+  @keyframes combo { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
+</style>
+</head>
+<body>
+<script>
+  // ?mode=rise|rain|bounce  &size=112  &max=80 emotes on screen  &per=6 emotes per message  &emoji=0 ignore emoji
+  // &combo=5 shows a combo banner when that many messages in a row use the same emote (0 = off)
+  const MODE = Overlaify.param('mode', 'rise');
+  const SIZE = Overlaify.param('size', 112);
+  const MAX = Overlaify.param('max', 80), PER = Overlaify.param('per', 6);
+  const EMOJI = Overlaify.param('emoji', true), COMBO = Overlaify.param('combo', 5);
+  const LIFE = Overlaify.param('life', MODE === 'bounce' ? 8 : 6) * 1000;
+  document.documentElement.style.setProperty('--s', SIZE + 'px');
+  const W = 1920, H = 1080;
+  const url = id => `https://static-cdn.jtvnw.net/emoticons/v2/${encodeURIComponent(id)}/default/dark/3.0`;
+  // Global Twitch emotes used when a simulated message has no emote data.
+  const SAMPLE = ['25', '425618', '86', '41', '30259', '81274', '64138'];
+  const EMOJI_RE = /\p{Extended_Pictographic}(️|‍\p{Extended_Pictographic})*/gu;
+
+  const live = [];
+  function spawn(key) {
+    if (live.length >= MAX) live.shift().el.remove();
+    const el = document.createElement('div');
+    el.className = 'e';
+    el.innerHTML = key.id ? `<img src="${url(key.id)}" alt="" onerror="this.parentNode.remove()">` : `<span>${Overlaify.escape(key.emoji)}</span>`;
+    document.body.appendChild(el);
+    const p = { el, born: performance.now(), rot: (Math.random() - .5) * 40, spin: (Math.random() - .5) * 120 };
+    if (MODE === 'rain') Object.assign(p, { x: Math.random() * (W - SIZE), y: -SIZE, vx: (Math.random() - .5) * 60, vy: 260 + Math.random() * 220 });
+    else if (MODE === 'bounce') Object.assign(p, { x: Math.random() * (W - SIZE), y: Math.random() * (H - SIZE), vx: (Math.random() < .5 ? -1 : 1) * (220 + Math.random() * 200), vy: (Math.random() < .5 ? -1 : 1) * (180 + Math.random() * 180), spin: 0 });
+    else Object.assign(p, { x: Math.random() * (W - SIZE), y: H, vx: 0, vy: -(220 + Math.random() * 180), wob: Math.random() * 6.28 });
+    live.push(p);
+  }
+
+  let last = performance.now();
+  (function frame(now) {
+    const dt = Math.min(.05, (now - last) / 1000); last = now;
+    for (let i = live.length - 1; i >= 0; i--) {
+      const p = live[i], age = now - p.born;
+      p.x += p.vx * dt; p.y += p.vy * dt; p.rot += p.spin * dt;
+      if (MODE === 'bounce') {
+        if (p.x < 0 || p.x > W - SIZE) { p.vx *= -1; p.x = Math.max(0, Math.min(W - SIZE, p.x)); }
+        if (p.y < 0 || p.y > H - SIZE) { p.vy *= -1; p.y = Math.max(0, Math.min(H - SIZE, p.y)); }
+      }
+      const x = MODE === 'rise' ? p.x + Math.sin(age / 400 + p.wob) * 30 : p.x;
+      const fadeIn = Math.min(1, age / 200), fadeOut = Math.min(1, (LIFE - age) / 600);
+      p.el.style.transform = `translate(${x}px, ${p.y}px) rotate(${p.rot}deg) scale(${.6 + .4 * fadeIn})`;
+      p.el.style.opacity = Math.max(0, Math.min(fadeIn, fadeOut));
+      if (age > LIFE || p.y < -SIZE * 2 || p.y > H + SIZE) { p.el.remove(); live.splice(i, 1); }
+    }
+    requestAnimationFrame(frame);
+  })(last);
+
+  function keysOf(e) {
+    const found = [];
+    if (e.emotes) Object.keys(e.emotes).forEach(id => e.emotes[id].forEach(r => found.push({ id, at: r[0] })));
+    if (EMOJI) for (const m of e.message.matchAll(EMOJI_RE)) found.push({ emoji: m[0], at: m.index });
+    if (!found.length && e.simulated) for (let i = 0, n = 1 + Math.floor(Math.random() * 4); i < n; i++) found.push({ id: SAMPLE[Math.floor(Math.random() * SAMPLE.length)], at: i });
+    return found.sort((a, b) => a.at - b.at);
+  }
+
+  let streak = { k: '', n: 0 }, banner = null;
+  function combo(k) {
+    if (!COMBO) return;
+    const name = k.id || k.emoji;
+    streak = streak.k === name ? { k: name, n: streak.n + 1 } : { k: name, n: 1 };
+    if (streak.n < COMBO) return;
+    if (banner) banner.remove();
+    banner = document.createElement('div');
+    banner.className = 'combo';
+    banner.innerHTML = `${k.id ? `<img src="${url(k.id)}" alt="">` : `<span>${Overlaify.escape(k.emoji)}</span>`} COMBO <b>×${streak.n}</b>`;
+    document.body.appendChild(banner);
+    const mine = banner; setTimeout(() => mine.isConnected && mine.remove(), 3000);
+    if (streak.n === COMBO) Overlaify.chime('coin');
+    for (let i = 0; i < 6; i++) spawn(k);
+  }
+
+  Overlaify.action('clear', () => {
+    live.splice(0).forEach(p => p.el.remove());
+    if (banner) banner.remove();
+    streak = { k: '', n: 0 };
+  });
+
+  Overlaify.on('chat', e => {
+    const keys = keysOf(e);
+    if (!keys.length) { streak.n = 0; return; }
+    keys.slice(0, PER).forEach((k, i) => setTimeout(() => spawn(k), i * 90));
+    combo(keys[0]);
+  });
+</script>
+</body>
+</html>