luckiest-co 1.0.19 → 1.0.21

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-tiles.html

@@ -0,0 +1,232 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · stat · TILES
+  The number broken into individual glowing digit tiles - each tile is a dark glass
+  rectangle with a single character that springs/flips in one by one from a random
+  slot-machine face to its final digit. Rich depth: each tile has edge highlight,
+  backdrop blur (CSS only, no GSAP filter on gradient text), and a neon rim.
+  Slots: stat (numeric string e.g. "24,891"), label (~65 chars), source (~40 chars).
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-stat-tiles {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-display); overflow: hidden;
+      }
+
+      #t1-stat-tiles .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-stat-tiles .grid {
+        position: absolute; inset: 0; z-index: 1;
+        background-image: var(--dot); background-size: var(--dot-size);
+        opacity: 0.45;
+        -webkit-mask-image: radial-gradient(120% 100% at 50% 60%, #000 35%, transparent 80%);
+                mask-image: radial-gradient(120% 100% at 50% 60%, #000 35%, transparent 80%);
+      }
+
+      /* Centred layout */
+      #t1-stat-tiles .content {
+        position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+        display: flex; flex-direction: column; align-items: center;
+        justify-content: center; z-index: 4; gap: 60px; padding-bottom: 20px;
+      }
+
+      /* Tiles row */
+      #t1-stat-tiles .tiles-row {
+        display: flex; align-items: center; gap: 18px;
+      }
+
+      /* Individual tile */
+      #t1-stat-tiles .tile {
+        width: 180px; height: 220px;
+        background: var(--glass-bg-dark);
+        border: 1.5px solid var(--glass-border);
+        /* top highlight edge */
+        box-shadow:
+          inset 0 1px 0 var(--glass-hi),
+          0 0 40px rgba(var(--accent-rgb), 0.18),
+          var(--glass-shadow);
+        border-radius: var(--radius-sm);
+        display: flex; align-items: center; justify-content: center;
+        position: relative; overflow: hidden;
+        flex-shrink: 0;
+      }
+
+      /* Neon rim on active tiles */
+      #t1-stat-tiles .tile::after {
+        content: ""; position: absolute; inset: -1px;
+        border-radius: var(--radius-sm);
+        border: 1.5px solid rgba(var(--accent-rgb), 0.45);
+        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), inset 0 0 10px rgba(var(--accent-rgb), 0.10);
+        pointer-events: none;
+      }
+
+      /* The digit character inside the tile */
+      #t1-stat-tiles .tile-char {
+        font-family: var(--font-display); font-weight: var(--wt-black);
+        font-size: 140px; line-height: 1; letter-spacing: -0.02em;
+        background: linear-gradient(155deg, #ffffff 15%, rgba(var(--accent-rgb), 0.85) 80%);
+        -webkit-background-clip: text; background-clip: text;
+        -webkit-text-fill-color: transparent; text-fill-color: transparent;
+        filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.55));
+        display: block; text-align: center; width: 100%;
+      }
+
+      /* Separator tile (comma, dot) - narrower, no border box */
+      #t1-stat-tiles .tile-sep {
+        width: 60px; height: 220px;
+        display: flex; align-items: flex-end; justify-content: center;
+        padding-bottom: 18px;
+        flex-shrink: 0;
+      }
+      #t1-stat-tiles .tile-sep span {
+        font-family: var(--font-display); font-weight: var(--wt-black);
+        font-size: 120px; line-height: 1; color: rgba(var(--accent-rgb), 0.70);
+        text-shadow: var(--textglow-accent);
+      }
+
+      /* Label + source */
+      #t1-stat-tiles .label {
+        font-family: var(--font-body); font-size: var(--size-body);
+        font-weight: var(--wt-med); color: var(--text-dim);
+        text-align: center; max-width: 1000px; line-height: 1.45;
+      }
+      #t1-stat-tiles .label em {
+        font-style: normal; color: var(--text); text-shadow: var(--textglow);
+      }
+
+      #t1-stat-tiles .source {
+        position: absolute; left: var(--pad); bottom: 44px;
+        font-family: var(--font-mono); font-size: var(--size-tiny);
+        font-weight: var(--wt-reg); letter-spacing: 0.12em;
+        text-transform: uppercase; color: var(--text-faint); z-index: 5;
+      }
+
+      #t1-stat-tiles .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-stat-tiles .grain {
+        position: absolute; inset: -40px; background: var(--tex-grain);
+        background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
+        pointer-events: none; z-index: 7;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t1-stat-tiles" data-composition-id="t1-stat-tiles" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="content">
+        <!-- tiles-row built by JS from data-stat -->
+        <div class="tiles-row" id="tiles-row" data-slot="stat" data-stat="24,891"></div>
+
+        <div class="label" data-slot="label">
+          total certificates issued this year - <em>more than all previous years</em> combined since platform launch
+        </div>
+      </div>
+
+      <div class="source" data-slot="source">SOURCE · ACME CERTIFICATE REGISTRY 2026</div>
+      <div class="vignette"></div>
+      <div class="grain"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* ---- Build tiles from data-stat ---- */
+      const rowEl  = document.getElementById("tiles-row");
+      const rawStat = rowEl.getAttribute("data-stat") || "24,891";
+
+      /* Slot-machine cycle characters - fixed sequence (deterministic) */
+      const CYCLE = ["8","3","5","1","9","2","7","0","6","4"];
+
+      const tileEls = [];  /* {el, charEl, final} for digit tiles only */
+
+      for (let i = 0; i < rawStat.length; i++) {
+        const ch = rawStat[i];
+        if (ch === "," || ch === "." || ch === " ") {
+          const sep = document.createElement("div");
+          sep.className = "tile-sep";
+          sep.innerHTML = "<span>" + ch + "</span>";
+          rowEl.appendChild(sep);
+        } else {
+          const tile = document.createElement("div");
+          tile.className = "tile";
+          const charEl = document.createElement("span");
+          charEl.className = "tile-char";
+          charEl.textContent = "0"; /* start with 0 */
+          tile.appendChild(charEl);
+          rowEl.appendChild(tile);
+          tileEls.push({ el: tile, charEl: charEl, final: ch });
+        }
+      }
+
+      /* grain */
+      tl.fromTo("#t1-stat-tiles .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "113px 87px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* bloom + grid */
+      tl.from("#t1-stat-tiles .bloom",
+          { autoAlpha: 0, scale: 0.9, transformOrigin: "50% 120%", duration: 1.3, ease: "expo.out" }, 0)
+        .from("#t1-stat-tiles .grid",
+          { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2);
+
+      /* Tiles spring in one by one with a slot-machine flip effect */
+      tileEls.forEach(function(t, i) {
+        const startT = 0.55 + i * 0.18;
+
+        /* Spring in from below */
+        tl.from(t.el, {
+          autoAlpha: 0, y: 80, scale: 0.7, rotationX: -45,
+          transformOrigin: "50% 50%",
+          duration: 0.55, ease: "back.out(1.7)"
+        }, startT);
+
+        /* Slot-machine cycle: 5 quick flips through random digits, then land on final */
+        const cycleStart = startT + 0.10;
+        for (let f = 0; f < 5; f++) {
+          (function(frame, tile) {
+            tl.call(function() {
+              tile.charEl.textContent = CYCLE[(frame + i * 3) % CYCLE.length];
+            }, null, cycleStart + frame * 0.07);
+          })(f, t);
+        }
+        /* Land on final digit */
+        tl.call(function() { t.charEl.textContent = t.final; }, null, cycleStart + 5 * 0.07);
+      });
+
+      /* After all tiles landed, brief collective glow pulse */
+      tl
+        .to("#t1-stat-tiles .tile",
+          { boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22), 0 0 80px rgba(79,140,255,0.45), 0 24px 70px rgba(0,0,0,0.50)",
+            duration: 0.5, ease: "power2.out" }, 1.85)
+        .to("#t1-stat-tiles .tile",
+          { boxShadow: "inset 0 1px 0 var(--glass-hi), 0 0 40px rgba(79,140,255,0.18), var(--glass-shadow)",
+            duration: 1.0, ease: "power2.in" }, 2.35)
+
+        /* label */
+        .from("#t1-stat-tiles .label",
+          { autoAlpha: 0, y: 20, filter: "blur(8px)", duration: 0.85, ease: "power3.out" }, 2.00)
+
+        /* source */
+        .from("#t1-stat-tiles .source",
+          { autoAlpha: 0, duration: 0.6, ease: "power2.out" }, 2.35)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-stat-tiles"] = tl;
+    </script>
+  </body>
+</html>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-timer.html

@@ -0,0 +1,248 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · stat · TIMER
+  Clock-style duration counter: minutes and seconds tick up smoothly to a target
+  time value. Colon between digits glows and pulses. Large glow numerals on a
+  dark canvas with aurora bloom. The "how long it takes" beat.
+  Slots: kicker, stat (placeholder e.g. "14:32"), label, source.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-stat-timer {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-display); overflow: hidden;
+      }
+
+      #t1-stat-timer .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-stat-timer .grid {
+        position: absolute; inset: 0; z-index: 1;
+        background-image: var(--dot); background-size: var(--dot-size);
+        opacity: 0.5;
+        -webkit-mask-image: radial-gradient(120% 100% at 50% 60%, #000 35%, transparent 80%);
+                mask-image: radial-gradient(120% 100% at 50% 60%, #000 35%, transparent 80%);
+      }
+
+      /* centre column layout */
+      #t1-stat-timer .content {
+        position: absolute; inset: 0; z-index: 4;
+        display: flex; flex-direction: column;
+        align-items: center; justify-content: center;
+        gap: 44px; padding-bottom: 30px;
+      }
+
+      #t1-stat-timer .kicker {
+        font-family: var(--font-mono);
+        font-size: var(--size-label);
+        font-weight: var(--wt-bold);
+        letter-spacing: var(--track-wide);
+        text-transform: uppercase;
+        color: var(--accent);
+        text-shadow: var(--textglow-accent);
+      }
+
+      /* clock plate - subtle glass behind the digits */
+      #t1-stat-timer .clock-wrap {
+        position: relative;
+        display: flex; align-items: center; gap: 0;
+      }
+
+      #t1-stat-timer .clock-plate {
+        position: absolute;
+        inset: -32px -64px;
+        border-radius: var(--radius-lg);
+        background: var(--glass-bg);
+        backdrop-filter: var(--glass-blur);
+        border-top: var(--stroke) solid var(--glass-hi);
+        border-bottom: var(--stroke) solid rgba(255,255,255,0.04);
+        box-shadow: var(--glass-shadow),
+                    0 0 80px 8px rgba(var(--accent-rgb), 0.12),
+                    inset 0 1px 0 var(--glass-hi);
+      }
+
+      /* digit blocks */
+      #t1-stat-timer .digit-block {
+        display: flex; flex-direction: column; align-items: center;
+        position: relative; z-index: 2;
+      }
+
+      #t1-stat-timer .digit-val {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 220px;
+        line-height: 1;
+        letter-spacing: -0.04em;
+        /* gradient: white top → accent blue bottom */
+        background: linear-gradient(170deg, #ffffff 10%, rgba(var(--accent-rgb), 0.80) 90%);
+        -webkit-background-clip: text; background-clip: text;
+        -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 28px rgba(var(--accent-rgb), 0.55));
+        min-width: 280px; text-align: center;
+      }
+
+      #t1-stat-timer .digit-label {
+        font-family: var(--font-mono);
+        font-size: var(--size-tiny);
+        letter-spacing: var(--track-wide);
+        text-transform: uppercase;
+        color: var(--text-faint);
+        margin-top: 10px;
+      }
+
+      /* colon separator */
+      #t1-stat-timer .colon {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 200px;
+        line-height: 1;
+        color: var(--accent);
+        text-shadow: var(--textglow-accent),
+                     0 0 60px rgba(var(--accent-rgb), 0.55);
+        position: relative; z-index: 2;
+        margin: 0 8px;
+        padding-bottom: 52px; /* optical align with digits */
+      }
+
+      #t1-stat-timer .label {
+        font-family: var(--font-body);
+        font-size: var(--size-body);
+        font-weight: var(--wt-med);
+        color: var(--text-dim);
+        text-align: center;
+        max-width: 900px;
+        line-height: 1.45;
+      }
+      #t1-stat-timer .label em {
+        font-style: normal; color: var(--text); text-shadow: var(--textglow);
+      }
+
+      #t1-stat-timer .source {
+        position: absolute; left: var(--pad); bottom: 44px;
+        font-family: var(--font-mono); font-size: var(--size-tiny);
+        font-weight: var(--wt-reg); letter-spacing: 0.12em;
+        text-transform: uppercase; color: var(--text-faint); z-index: 5;
+      }
+
+      #t1-stat-timer .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-stat-timer .grain {
+        position: absolute; inset: -40px; background: var(--tex-grain);
+        background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
+        pointer-events: none; z-index: 7;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t1-stat-timer" data-composition-id="t1-stat-timer" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="content">
+        <div class="kicker" data-slot="kicker">AVERAGE TIME TO FIRST SALE</div>
+
+        <div class="clock-wrap">
+          <div class="clock-plate"></div>
+          <div class="digit-block">
+            <div class="digit-val" id="t1-stat-timer-min">00</div>
+            <div class="digit-label">minutes</div>
+          </div>
+          <div class="colon" id="t1-stat-timer-colon">:</div>
+          <div class="digit-block">
+            <div class="digit-val" id="t1-stat-timer-sec">00</div>
+            <div class="digit-label">seconds</div>
+          </div>
+        </div>
+
+        <!-- stat slot holds the target value read by JS -->
+        <div style="display:none" data-slot="stat" id="t1-stat-timer-target">14:32</div>
+
+        <div class="label" data-slot="label">students close their <em>first paying client</em> within this time of finishing Module 3</div>
+      </div>
+
+      <div class="source" data-slot="source">SOURCE · COHORT SURVEY Q1 2026</div>
+      <div class="vignette"></div>
+      <div class="grain"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* read target from slot - parse "MM:SS" */
+      const targetRaw = document.getElementById("t1-stat-timer-target").textContent.trim();
+      const parts     = targetRaw.split(":");
+      const targetMin = parseInt(parts[0], 10) || 14;
+      const targetSec = parseInt(parts[1], 10) || 32;
+      const totalSecs = targetMin * 60 + targetSec;
+
+      const minEl  = document.getElementById("t1-stat-timer-min");
+      const secEl  = document.getElementById("t1-stat-timer-sec");
+      const colonEl= document.getElementById("t1-stat-timer-colon");
+
+      function pad2(n) { return String(Math.floor(n)).padStart(2, "0"); }
+
+      /* grain flicker - deterministic */
+      tl.fromTo("#t1-stat-timer .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "110px 80px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* bloom + grid */
+      tl.from("#t1-stat-timer .bloom",
+          { autoAlpha: 0, scale: 0.90, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-stat-timer .grid",
+          { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+
+        /* kicker */
+        .from("#t1-stat-timer .kicker",
+          { autoAlpha: 0, y: 18, duration: 0.75, ease: "power3.out" }, 0.45)
+
+        /* glass plate springs in */
+        .from("#t1-stat-timer .clock-plate",
+          { autoAlpha: 0, scaleX: 0.6, scaleY: 0.8, transformOrigin: "50% 50%",
+            duration: 0.9, ease: "back.out(1.4)" }, 0.6)
+
+        /* digit blocks slide up */
+        .from("#t1-stat-timer .digit-block",
+          { autoAlpha: 0, y: 40, duration: 0.8, ease: "power4.out", stagger: 0.12 }, 0.72)
+        .from("#t1-stat-timer .colon",
+          { autoAlpha: 0, scale: 0.5, duration: 0.6, ease: "back.out(1.4)" }, 0.78)
+
+        /* count-up: seconds-total drives both display fields */
+        .to({ val: 0 }, {
+          val: totalSecs,
+          duration: 2.0, ease: "power2.out",
+          onUpdate: function() {
+            const v = this.targets()[0].val;
+            minEl.textContent = pad2(v / 60);
+            secEl.textContent = pad2(v % 60);
+          }
+        }, 0.90)
+
+        /* label */
+        .from("#t1-stat-timer .label",
+          { autoAlpha: 0, y: 20, duration: 0.85, ease: "power3.out" }, 2.20)
+
+        /* source */
+        .from("#t1-stat-timer .source",
+          { autoAlpha: 0, duration: 0.7, ease: "power2.out" }, 2.55)
+
+        /* colon breathing pulse */
+        .to("#t1-stat-timer .colon",
+          { opacity: 0.35, duration: 0.55, ease: "sine.inOut", repeat: 3, yoyo: true }, 3.0)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-stat-timer"] = tl;
+    </script>
+  </body>
+</html>