luckiest-co 1.0.19 → 1.0.21

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

@@ -0,0 +1,188 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · overview · NUMLIST
+  Three big glowing numerals down the left with a heading + sub-line each.
+  Like "3 Metrics That Matter." Aurora canvas, bloom, glass rows, staggered build.
+  Slots: title, n1_h, n1_b, n2_h, n2_b, n3_h, n3_b.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-ov-num {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-body); overflow: hidden;
+      }
+
+      #t1-ov-num .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-ov-num .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(130% 110% at 50% 60%, #000 30%, transparent 78%);
+                mask-image: radial-gradient(130% 110% at 50% 60%, #000 30%, transparent 78%);
+      }
+
+      /* Page layout */
+      #t1-ov-num .layout {
+        position: absolute; inset: 0; z-index: 3;
+        display: flex; flex-direction: column;
+        padding: 90px var(--pad) 80px;
+        gap: 0;
+      }
+
+      /* Title */
+      #t1-ov-num .card-title {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: var(--size-headline); letter-spacing: var(--track-snug);
+        color: var(--white); text-shadow: var(--textglow);
+        margin-bottom: 60px; line-height: 1.1;
+      }
+      #t1-ov-num .card-title em {
+        font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Rows container */
+      #t1-ov-num .rows {
+        display: flex; flex-direction: column; gap: 32px; flex: 1;
+      }
+
+      /* Each numbered row */
+      #t1-ov-num .row {
+        display: flex; align-items: center; gap: 52px;
+        background: var(--glass-bg-dark);
+        border: var(--stroke) solid var(--glass-border);
+        border-radius: var(--radius);
+        padding: 36px 52px 36px 44px;
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        box-shadow: var(--glass-shadow),
+                    inset 0 1px 0 var(--glass-hi);
+      }
+
+      /* Big glowing numeral */
+      #t1-ov-num .num {
+        font-family: var(--font-display); font-weight: var(--wt-black);
+        font-size: 120px; line-height: 1; min-width: 110px;
+        text-align: center;
+        color: var(--accent);
+        text-shadow: var(--textglow-accent),
+                     0 0 80px rgba(var(--accent-rgb), 0.50);
+        flex-shrink: 0;
+      }
+
+      /* Vertical divider between numeral and text */
+      #t1-ov-num .divider {
+        width: 1.5px; height: 80px; flex-shrink: 0;
+        background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), 0.55) 40%, rgba(var(--accent-rgb), 0.55) 60%, transparent);
+        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
+      }
+
+      /* Text block */
+      #t1-ov-num .text { flex: 1; min-width: 0; }
+      #t1-ov-num .row-heading {
+        font-family: var(--font-display); font-weight: var(--wt-semi);
+        font-size: 38px; color: var(--white);
+        letter-spacing: var(--track-snug); line-height: 1.15;
+        margin-bottom: 8px;
+      }
+      #t1-ov-num .row-body {
+        font-family: var(--font-body); font-weight: var(--wt-reg);
+        font-size: var(--size-body); color: var(--text-dim); line-height: 1.4;
+      }
+
+      #t1-ov-num .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-ov-num .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-ov-num" data-composition-id="t1-ov-num" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="layout">
+        <div class="card-title" data-slot="title">3 Metrics That <em>Actually</em> Matter</div>
+
+        <div class="rows">
+          <div class="row" id="num-row-1">
+            <div class="num">1</div>
+            <div class="divider"></div>
+            <div class="text">
+              <div class="row-heading" data-slot="n1_h">Watch Time Percentage</div>
+              <div class="row-body" data-slot="n1_b">How long viewers stick around before they tap away - the algorithm's primary signal.</div>
+            </div>
+          </div>
+
+          <div class="row" id="num-row-2">
+            <div class="num">2</div>
+            <div class="divider"></div>
+            <div class="text">
+              <div class="row-heading" data-slot="n2_h">Click-Through Rate</div>
+              <div class="row-body" data-slot="n2_b">The ratio of impressions that became views - tells you if your thumbnail+title combo works.</div>
+            </div>
+          </div>
+
+          <div class="row" id="num-row-3">
+            <div class="num">3</div>
+            <div class="divider"></div>
+            <div class="text">
+              <div class="row-heading" data-slot="n3_h">Subscriber Conversion</div>
+              <div class="row-body" data-slot="n3_b">Non-subscribers who watch and then subscribe - the truest measure of content quality.</div>
+            </div>
+          </div>
+        </div>
+      </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 });
+
+      /* grain flicker - finite */
+      tl.fromTo("#t1-ov-num .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "100px 80px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* ambient bloom + grid */
+      tl.from("#t1-ov-num .bloom", { autoAlpha: 0, scale: 0.88, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-ov-num .grid",  { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+
+        /* title glides in */
+        .from("#t1-ov-num .card-title", { autoAlpha: 0, y: 28, filter: "blur(12px)", duration: 0.85, ease: "power4.out" }, 0.5)
+
+        /* rows build in one by one, staggered */
+        .from("#num-row-1", { autoAlpha: 0, y: 40, x: -20, filter: "blur(10px)", duration: 0.75, ease: "back.out(1.3)" }, 0.9)
+        .from("#num-row-2", { autoAlpha: 0, y: 40, x: -20, filter: "blur(10px)", duration: 0.75, ease: "back.out(1.3)" }, 1.07)
+        .from("#num-row-3", { autoAlpha: 0, y: 40, x: -20, filter: "blur(10px)", duration: 0.75, ease: "back.out(1.3)" }, 1.24)
+
+        /* dividers draw in via scaleY */
+        .from("#num-row-1 .divider, #num-row-2 .divider, #num-row-3 .divider",
+          { scaleY: 0, transformOrigin: "50% 0%", duration: 0.45, ease: "power3.out", stagger: 0.17 }, 1.05)
+
+        /* breathing glow pulse on numerals */
+        .to("#t1-ov-num .num",
+          { textShadow: "0 0 28px rgba(79,140,255,0.85), 0 0 90px rgba(79,140,255,0.50)", duration: 1.2, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.2)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-ov-num"] = tl;
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,240 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · overview · ORG CHART
+  Full-screen hierarchy takeover. One glass root node at top; connector lines
+  draw down (vertical stem → horizontal rail → three drops); three glass child
+  nodes spring on with glow, staggered. Clean neon SVG lines - no scribbles.
+  Slots: title, root, c1, c1_sub, c2, c2_sub, c3, c3_sub.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-ov-org {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-body); overflow: hidden;
+      }
+
+      #t1-ov-org .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-ov-org .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(130% 110% at 50% 60%, #000 30%, transparent 78%);
+                mask-image: radial-gradient(130% 110% at 50% 60%, #000 30%, transparent 78%);
+      }
+
+      /* Layout */
+      #t1-ov-org .layout {
+        position: absolute; inset: 0; z-index: 3;
+        padding: 72px var(--pad) 72px;
+        display: flex; flex-direction: column; align-items: center;
+      }
+
+      /* Title */
+      #t1-ov-org .card-title {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: var(--size-headline); letter-spacing: var(--track-snug);
+        color: var(--white); text-shadow: var(--textglow);
+        margin-bottom: 52px; line-height: 1.1; text-align: center;
+      }
+      #t1-ov-org .card-title em {
+        font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Tree canvas */
+      #t1-ov-org .tree-area {
+        position: relative; width: 1560px; flex: 1;
+      }
+
+      /* SVG connector overlay */
+      #t1-ov-org .connectors {
+        position: absolute; inset: 0; z-index: 1;
+        overflow: visible; pointer-events: none;
+      }
+      #t1-ov-org .connectors line {
+        stroke: var(--accent);
+        stroke-width: 2;
+        fill: none;
+        stroke-linecap: round;
+        opacity: 0.75;
+        filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.55));
+        stroke-dasharray: 600;
+        stroke-dashoffset: 600;
+      }
+
+      /* Glass nodes */
+      #t1-ov-org .node {
+        position: absolute; z-index: 2;
+        background: var(--glass-bg-dark);
+        border: var(--stroke) solid var(--glass-border);
+        border-radius: var(--radius);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
+        text-align: center;
+        padding: 30px 48px;
+      }
+
+      /* Root node - top center, accent-rimmed */
+      #t1-ov-org .node-root {
+        left: 50%; top: 0;
+        transform: translateX(-50%);
+        min-width: 520px;
+        border-color: rgba(var(--accent-rgb), 0.55);
+        box-shadow: var(--glass-shadow), 0 0 36px rgba(var(--accent-rgb), 0.28),
+                    inset 0 1px 0 var(--glass-hi);
+      }
+      #t1-ov-org .node-root .node-label {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: 38px; color: var(--white);
+        text-shadow: var(--textglow); letter-spacing: var(--track-snug);
+      }
+
+      /* Child nodes - evenly spaced bottom row */
+      #t1-ov-org .node-c1 { left: 0;    top: 420px; transform: translateX(0); min-width: 440px; }
+      #t1-ov-org .node-c2 { left: 50%;  top: 420px; transform: translateX(-50%); min-width: 440px; }
+      #t1-ov-org .node-c3 { left: 100%; top: 420px; transform: translateX(-100%); min-width: 440px; }
+
+      #t1-ov-org .node-dot {
+        width: 14px; height: 14px; border-radius: 50%;
+        background: var(--accent);
+        box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.80), 0 0 38px rgba(var(--accent-rgb), 0.38);
+        margin: 0 auto 16px;
+      }
+      #t1-ov-org .node-label {
+        font-family: var(--font-display); font-weight: var(--wt-semi);
+        font-size: 32px; color: var(--white);
+        letter-spacing: var(--track-snug); line-height: 1.25; margin-bottom: 8px;
+      }
+      #t1-ov-org .node-sub {
+        font-family: var(--font-body); font-size: 24px;
+        color: var(--text-dim); line-height: 1.4;
+      }
+
+      #t1-ov-org .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-ov-org .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-ov-org" data-composition-id="t1-ov-org" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="layout">
+        <div class="card-title" data-slot="title">How the <em>Company</em> Is Structured</div>
+
+        <div class="tree-area">
+          <!--
+            SVG coordinates (tree-area 1560px wide):
+            Root center: x=780, root bottom edge ~y=108
+            Branch mid: x=780, y=268
+            Child centers: c1=220, c2=780, c3=1340  drop-top y=420
+          -->
+          <svg class="connectors" viewBox="0 0 1560 580" preserveAspectRatio="none"
+               width="1560" height="580">
+            <line id="org-stem"   x1="780" y1="108" x2="780" y2="268" />
+            <line id="org-rail"   x1="220" y1="268" x2="1340" y2="268" />
+            <line id="org-drop1"  x1="220"  y1="268" x2="220"  y2="420" />
+            <line id="org-drop2"  x1="780"  y1="268" x2="780"  y2="420" />
+            <line id="org-drop3"  x1="1340" y1="268" x2="1340" y2="420" />
+          </svg>
+
+          <!-- Root node -->
+          <div class="node node-root" id="org-root">
+            <div class="node-label" data-slot="root">Chief Executive Officer</div>
+          </div>
+
+          <!-- Child nodes -->
+          <div class="node node-c1" id="org-c1">
+            <div class="node-dot" id="org-dot1"></div>
+            <div class="node-label" data-slot="c1">Product</div>
+            <div class="node-sub" data-slot="c1_sub">Design, Engineering, QA</div>
+          </div>
+
+          <div class="node node-c2" id="org-c2">
+            <div class="node-dot" id="org-dot2"></div>
+            <div class="node-label" data-slot="c2">Growth</div>
+            <div class="node-sub" data-slot="c2_sub">Marketing, Sales, Partnerships</div>
+          </div>
+
+          <div class="node node-c3" id="org-c3">
+            <div class="node-dot" id="org-dot3"></div>
+            <div class="node-label" data-slot="c3">Operations</div>
+            <div class="node-sub" data-slot="c3_sub">Finance, Legal, HR</div>
+          </div>
+        </div>
+      </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 });
+
+      /* grain flicker */
+      tl.fromTo("#t1-ov-org .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "110px 85px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* environment */
+      tl.from("#t1-ov-org .bloom", { autoAlpha: 0, scale: 0.88, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-ov-org .grid",  { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+
+        /* title */
+        .from("#t1-ov-org .card-title", { autoAlpha: 0, y: 28, filter: "blur(12px)", duration: 0.85, ease: "power4.out" }, 0.5)
+
+        /* root node springs in */
+        .from("#org-root", { autoAlpha: 0, scale: 0.88, y: -18, filter: "blur(10px)", transformOrigin: "50% 50%", duration: 0.75, ease: "back.out(1.4)" }, 0.88)
+
+        /* stem draws down */
+        .to("#org-stem",  { strokeDashoffset: 0, duration: 0.36, ease: "power3.inOut" }, 1.30)
+
+        /* horizontal rail draws */
+        .to("#org-rail",  { strokeDashoffset: 0, duration: 0.44, ease: "power3.inOut" }, 1.58)
+
+        /* drops + children - staggered */
+        .to("#org-drop1", { strokeDashoffset: 0, duration: 0.28, ease: "power2.out" }, 1.88)
+        .from("#org-c1",  { autoAlpha: 0, y: 30, filter: "blur(8px)", duration: 0.65, ease: "back.out(1.3)" }, 1.98)
+
+        .to("#org-drop2", { strokeDashoffset: 0, duration: 0.28, ease: "power2.out" }, 2.04)
+        .from("#org-c2",  { autoAlpha: 0, y: 30, filter: "blur(8px)", duration: 0.65, ease: "back.out(1.3)" }, 2.14)
+
+        .to("#org-drop3", { strokeDashoffset: 0, duration: 0.28, ease: "power2.out" }, 2.20)
+        .from("#org-c3",  { autoAlpha: 0, y: 30, filter: "blur(8px)", duration: 0.65, ease: "back.out(1.3)" }, 2.30)
+
+        /* node dot glow pulse */
+        .to("#org-dot1, #org-dot2, #org-dot3",
+          { boxShadow: "0 0 28px rgba(79,140,255,0.95), 0 0 64px rgba(79,140,255,0.50)",
+            duration: 1.1, ease: "sine.inOut", repeat: 2, yoyo: true, stagger: 0.14 }, 3.2)
+
+        /* root accent glow breathe */
+        .to("#org-root",
+          { boxShadow: "0 24px 70px rgba(0,0,0,0.50), 0 0 50px rgba(79,140,255,0.40), inset 0 1px 0 rgba(255,255,255,0.22)",
+            duration: 1.3, ease: "sine.inOut", repeat: 2, yoyo: true }, 3.5)
+
+        /* slow drift during hold */
+        .to("#t1-ov-org .tree-area", { y: -10, duration: 4.5, ease: "sine.inOut" }, 1.8)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-ov-org"] = tl;
+    </script>
+  </body>
+</html>