luckiest-co 1.0.19 → 1.0.21

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

@@ -0,0 +1,253 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · stat · MONEY
+  A big currency figure ("$1.2M", "$840K", "$3.5B") that counts up with a
+  gradient glow. Handles a $ prefix and K/M/B suffix: count-up interpolates
+  the numeric portion 0→target; prefix and suffix are static. Aurora bloom,
+  glass surface, breathing glow.
+  Knob: data-value (numeric, no commas) + data-prefix + data-suffix on
+        #t1-st-money-knob (defaults: 1200000 → prefix "$", suffix "M", display "1.2M").
+  Slots: kicker, stat (display value string e.g. "$1.2M"), label (<em>), source.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-st-money {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-display); overflow: hidden;
+      }
+
+      #t1-st-money .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-st-money .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%);
+      }
+
+      #t1-st-money .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: 50px; padding-bottom: 30px;
+      }
+
+      #t1-st-money .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);
+      }
+
+      /* Glass surface behind the big number */
+      #t1-st-money .stat-plate {
+        position: relative;
+        padding: 42px 100px 46px;
+        background: var(--glass-bg);
+        border: var(--stroke) solid var(--glass-border);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--glass-shadow),
+                    0 0 80px rgba(var(--accent-rgb), 0.18),
+                    inset 0 1px 0 var(--glass-hi);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        display: flex; align-items: baseline; gap: 0;
+      }
+
+      /* Glow halo behind the plate */
+      #t1-st-money .stat-glow {
+        position: absolute; inset: -50px;
+        border-radius: calc(var(--radius-lg) + 50px);
+        background: radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), 0.18) 0%, transparent 60%);
+        pointer-events: none; z-index: 0;
+      }
+
+      /* Currency symbol - smaller, floated top-right like typography convention */
+      #t1-st-money .prefix {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 100px;
+        line-height: 1;
+        letter-spacing: var(--track-tight);
+        align-self: flex-start;
+        margin-top: 28px;
+        color: rgba(255,255,255,0.70);
+        text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45);
+        position: relative; z-index: 1;
+      }
+
+      /* Main number */
+      #t1-st-money .stat {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: var(--size-mega);   /* 300px */
+        line-height: 0.92;
+        letter-spacing: var(--track-tight);
+        background: linear-gradient(155deg, #ffffff 5%, 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 36px rgba(var(--accent-rgb), 0.55));
+        position: relative; z-index: 1;
+      }
+
+      /* Suffix (M / K / B) */
+      #t1-st-money .suffix {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 140px;
+        line-height: 1;
+        letter-spacing: var(--track-tight);
+        align-self: flex-end;
+        margin-bottom: 16px;
+        color: rgba(255,255,255,0.55);
+        text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.38);
+        position: relative; z-index: 1;
+      }
+
+      #t1-st-money .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: 880px;
+        line-height: 1.45;
+      }
+      #t1-st-money .label em {
+        font-style: normal; color: var(--text); text-shadow: var(--textglow);
+      }
+
+      #t1-st-money .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-st-money .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-st-money .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-st-money" data-composition-id="t1-st-money" 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">TOTAL CREATOR EARNINGS · 2026</div>
+
+        <div style="position:relative;">
+          <div class="stat-glow" id="t1-st-money-glow"></div>
+          <div class="stat-plate">
+            <!-- Knob: data-value = raw number (1200000), data-prefix = "$",
+                 data-suffix = "M", data-decimals = "1"  -->
+            <span id="t1-st-money-knob" data-slot="stat"
+                  data-value="1200000" data-prefix="$" data-suffix="M" data-decimals="1"
+                  style="display:none;">$1.2M</span>
+            <span class="prefix" id="t1-st-money-prefix">$</span>
+            <span class="stat"   id="t1-st-money-num">0</span>
+            <span class="suffix" id="t1-st-money-suffix">M</span>
+          </div>
+        </div>
+
+        <div class="label" data-slot="label">paid out to certified creators through the <em>ACME partner network</em> this year</div>
+      </div>
+
+      <div class="source" data-slot="source">SOURCE · ACME PARTNER NETWORK 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 knobs ------------------------------------------------------- */
+      const knobEl   = document.getElementById("t1-st-money-knob");
+      const rawVal   = parseFloat(knobEl.getAttribute("data-value")) || 1200000;
+      const prefix   = knobEl.getAttribute("data-prefix") || "$";
+      const suffix   = knobEl.getAttribute("data-suffix") || "M";
+      const decimals = parseInt(knobEl.getAttribute("data-decimals"), 10);
+      const dec      = isNaN(decimals) ? 1 : decimals;
+
+      /* Compute the scaled target for the display (e.g. 1200000 → 1.2 for "M") */
+      const divisors = { K: 1e3, M: 1e6, B: 1e9 };
+      const div      = divisors[suffix.toUpperCase()] || 1;
+      const target   = rawVal / div;
+
+      document.getElementById("t1-st-money-prefix").textContent = prefix;
+      document.getElementById("t1-st-money-suffix").textContent = suffix;
+
+      const numEl = document.getElementById("t1-st-money-num");
+
+      /* Init display */
+      numEl.textContent = (0).toFixed(dec);
+
+      /* Grain flicker */
+      tl.fromTo("#t1-st-money .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "110px 80px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* Scene entrance */
+      tl.from("#t1-st-money .bloom",
+          { autoAlpha: 0, scale: 0.88, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-st-money .grid",
+          { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+        .from("#t1-st-money .kicker",
+          { autoAlpha: 0, y: 18, filter: "blur(8px)", duration: 0.75, ease: "power3.out" }, 0.50)
+        .from("#t1-st-money-glow",
+          { autoAlpha: 0, scale: 0.5, duration: 1.2, ease: "expo.out" }, 0.65)
+        .from("#t1-st-money .stat-plate",
+          { autoAlpha: 0, scale: 0.80, transformOrigin: "50% 50%",
+            duration: 1.0, ease: "back.out(1.4)" }, 0.72)
+        /* Prefix and suffix blur in */
+        .from("#t1-st-money .prefix",
+          { autoAlpha: 0, filter: "blur(14px)", x: -20, duration: 0.70, ease: "power3.out" }, 1.05)
+        .from("#t1-st-money .suffix",
+          { autoAlpha: 0, filter: "blur(14px)", x: 20, duration: 0.70, ease: "power3.out" }, 1.10)
+
+        /* Number counts up */
+        .to({ val: 0 }, {
+          val: target,
+          duration: 1.90, ease: "power2.out",
+          onUpdate: function() {
+            const v = this.targets()[0].val;
+            numEl.textContent = v.toFixed(dec);
+          }
+        }, 1.05)
+
+        .from("#t1-st-money .label",
+          { autoAlpha: 0, y: 20, filter: "blur(8px)", duration: 0.85, ease: "power3.out" }, 2.20)
+        .from("#t1-st-money .source",
+          { autoAlpha: 0, duration: 0.7, ease: "power2.out" }, 2.50)
+
+        /* Breathing glow on the plate */
+        .to("#t1-st-money-glow",
+          { opacity: 0.55, scale: 1.10, transformOrigin: "50% 50%",
+            duration: 1.7, ease: "sine.inOut", repeat: 2, yoyo: true }, 3.10)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-st-money"] = tl;
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,209 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · stat · MULTIPLIER
+  A glowing "2.9x" multiplier (big gradient number) with an "x" suffix that pops in
+  separately, kicker above, label below. The number counts up. Halo bloom behind it.
+  Slots: kicker (~28 chars uppercase), stat (e.g. "2.9x"), label (~70 chars, <em>),
+         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-mult {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-display); overflow: hidden;
+      }
+
+      #t1-stat-mult .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-stat-mult .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%);
+      }
+
+      /* Halo disc behind number */
+      #t1-stat-mult .halo {
+        position: absolute; left: 50%; top: 50%;
+        transform: translate(-50%, -56%);
+        width: 900px; height: 900px; border-radius: 50%;
+        background: radial-gradient(circle at 50% 50%,
+          rgba(var(--accent-rgb), 0.14) 0%,
+          rgba(var(--accent-rgb), 0.05) 42%,
+          transparent 70%);
+        box-shadow: 0 0 130px 30px rgba(var(--accent-rgb), 0.18);
+        z-index: 2;
+      }
+
+      /* Content */
+      #t1-stat-mult .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: 44px; padding-bottom: 40px;
+      }
+
+      #t1-stat-mult .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);
+      }
+
+      /* Multiplier number + "x" in a flex row */
+      #t1-stat-mult .stat-row {
+        display: flex; align-items: flex-end; gap: 8px; line-height: 1;
+      }
+      #t1-stat-mult .stat-num {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 280px;
+        line-height: 1;
+        letter-spacing: var(--track-tight);
+        background: linear-gradient(160deg, #ffffff 12%, 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 32px rgba(var(--accent-rgb), 0.55))
+                drop-shadow(0 0 80px rgba(var(--accent-rgb), 0.28));
+      }
+      /* The "x" suffix - accent color, slightly smaller, floats to bottom */
+      #t1-stat-mult .stat-x {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 160px;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        color: var(--accent);
+        text-shadow: var(--textglow-accent);
+        padding-bottom: 18px;           /* optical align with number bottom */
+      }
+
+      #t1-stat-mult .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-mult .label em {
+        font-style: normal; color: var(--text); text-shadow: var(--textglow);
+      }
+
+      #t1-stat-mult .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-mult .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-stat-mult .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-mult" data-composition-id="t1-stat-mult" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+      <div class="halo"></div>
+
+      <div class="content">
+        <div class="kicker" data-slot="kicker">PRODUCTIVITY LIFT · AI TEAMS</div>
+
+        <div class="stat-row">
+          <div class="stat-num" id="t1-stat-mult-num" data-slot="stat">2.9</div>
+          <div class="stat-x" id="t1-stat-mult-x">×</div>
+        </div>
+
+        <div class="label" data-slot="label">teams using AI-assisted workflows achieve <em>2.9× higher output</em> per engineer per sprint</div>
+      </div>
+
+      <div class="source" data-slot="source">SOURCE · GITHUB COPILOT STUDY 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 });
+
+      /* Parse the number portion of the stat slot (strip "x" / "×" suffix) */
+      const numEl  = document.getElementById("t1-stat-mult-num");
+      const xEl    = document.getElementById("t1-stat-mult-x");
+      const raw    = numEl.textContent.trim();
+      const target = parseFloat(raw) || 2.9;
+      const decimals = (raw.includes(".")) ? (raw.split(".")[1] || "").length : 0;
+
+      /* ambient grain flicker */
+      tl.fromTo("#t1-stat-mult .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "110px 80px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* bloom + grid */
+      tl.from("#t1-stat-mult .bloom",
+        { autoAlpha: 0, scale: 0.88, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-stat-mult .grid",
+          { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+        .from("#t1-stat-mult .halo",
+          { autoAlpha: 0, scale: 0.6, duration: 1.6, ease: "expo.out" }, 0.3)
+
+        /* kicker */
+        .from("#t1-stat-mult .kicker",
+          { autoAlpha: 0, y: 18, filter: "blur(8px)", duration: 0.75, ease: "power3.out" }, 0.55)
+
+        /* number focus pull + count-up */
+        .from("#t1-stat-mult .stat-num",
+          { autoAlpha: 0, scale: 0.78, filter: "blur(28px)", transformOrigin: "50% 50%",
+            duration: 1.1, ease: "power4.out" }, 0.80)
+        .to({ val: 0 }, { val: target,
+          duration: 1.8, ease: "power2.out",
+          onUpdate: function() {
+            const v = this.targets()[0].val;
+            numEl.textContent = decimals > 0 ? v.toFixed(decimals) : Math.round(v).toString();
+          }
+        }, 0.82)
+
+        /* "x" pops in with spring after the number lands */
+        .from("#t1-stat-mult .stat-x",
+          { autoAlpha: 0, x: -20, scale: 0.6, filter: "blur(14px)",
+            duration: 0.65, ease: "back.out(1.4)" }, 2.00)
+
+        /* label */
+        .from("#t1-stat-mult .label",
+          { autoAlpha: 0, y: 20, filter: "blur(8px)", duration: 0.85, ease: "power3.out" }, 2.20)
+
+        /* source */
+        .from("#t1-stat-mult .source",
+          { autoAlpha: 0, duration: 0.7, ease: "power2.out" }, 2.50)
+
+        /* breathing glow on halo */
+        .to("#t1-stat-mult .halo",
+          { opacity: 0.50, scale: 1.06, transformOrigin: "50% 50%",
+            duration: 1.6, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.80)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-stat-mult"] = tl;
+    </script>
+  </body>
+</html>