luckiest-co 1.0.19 → 1.0.21

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-chapterbar.html

@@ -0,0 +1,196 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier2 · lower-third · CHAPTERBAR
+  A "Chapter X" accent pill slides in first; then a full-width dark glass bar
+  slides up below the pill and reveals the section title. The bar has a thin
+  accent top-edge line that draws across. Functional chapter/section marker for
+  educational video.
+  Slots: chapter (~12 chars, e.g. "Chapter 03"), title (~52 chars).
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; background: transparent; }
+
+      #t2-lt-chbar {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent; overflow: hidden;
+        font-family: var(--font-display);
+      }
+
+      /* Bloom behind the bar */
+      #t2-lt-chbar .local-bloom {
+        position: absolute;
+        left: -30px; bottom: 100px;
+        width: 700px; height: 240px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 30% 80%,
+          rgba(var(--accent-rgb), 0.22) 0%,
+          rgba(var(--accent-rgb), 0.06) 55%,
+          transparent 80%);
+        filter: blur(42px);
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      /* Stack: pill → bar */
+      #t2-lt-chbar .stack {
+        position: absolute;
+        left: 80px; bottom: 118px;
+        display: flex; flex-direction: column;
+        align-items: flex-start; gap: 8px;
+        z-index: 2;
+      }
+
+      /* Chapter pill */
+      #t2-lt-chbar .chapter-pill {
+        display: inline-flex; align-items: center; gap: 10px;
+        padding: 8px 22px 8px 16px;
+        background: rgba(var(--accent-rgb), 0.12);
+        border: 1.5px solid rgba(var(--accent-rgb), 0.58);
+        border-radius: 999px;
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.32),
+                    inset 0 1px 0 rgba(255,255,255,0.16);
+      }
+
+      #t2-lt-chbar .chapter-num-dot {
+        width: 7px; height: 7px; border-radius: 50%;
+        background: var(--accent);
+        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.85);
+        flex-shrink: 0;
+      }
+
+      #t2-lt-chbar .chapter-num {
+        font-family: var(--font-mono);
+        font-size: 18px;
+        font-weight: var(--wt-bold);
+        letter-spacing: 0.12em;
+        color: var(--accent);
+        text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.65);
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+
+      /* Section title bar */
+      #t2-lt-chbar .title-bar {
+        width: 860px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* Accent top-edge line (drawn by GSAP scaleX) */
+      #t2-lt-chbar .edge-line {
+        display: block;
+        height: 2px;
+        width: 100%;
+        background: linear-gradient(90deg,
+          rgba(var(--accent-rgb), 0.90) 0%,
+          rgba(var(--accent-rgb), 0.45) 40%,
+          rgba(var(--accent-rgb), 0.08) 75%,
+          transparent 100%);
+        box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
+        transform-origin: left center;
+      }
+
+      /* Dark glass fill below the line */
+      #t2-lt-chbar .bar-inner {
+        padding: 16px 60px 16px 24px;
+        background: linear-gradient(90deg,
+          rgba(10, 14, 20, 0.78) 0%,
+          rgba(16, 22, 34, 0.60) 50%,
+          rgba(16, 22, 34, 0.22) 82%,
+          transparent 100%);
+        backdrop-filter: blur(16px) saturate(120%);
+        -webkit-backdrop-filter: blur(16px) saturate(120%);
+        clip-path: inset(0 100% 0 0);
+      }
+
+      #t2-lt-chbar .title {
+        font-family: var(--font-display);
+        font-weight: var(--wt-bold);
+        font-size: 38px;
+        letter-spacing: var(--track-snug);
+        color: var(--white);
+        text-shadow: var(--textglow);
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      #t2-lt-chbar .title em {
+        font-style: normal;
+        color: var(--accent);
+        text-shadow: var(--textglow-accent);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t2-lt-chbar"
+         data-composition-id="t2-lt-chbar"
+         data-start="0"
+         data-width="1920"
+         data-height="1080">
+
+      <div class="local-bloom"></div>
+
+      <div class="stack">
+
+        <div class="chapter-pill">
+          <div class="chapter-num-dot"></div>
+          <div class="chapter-num" data-slot="chapter">Chapter 04</div>
+        </div>
+
+        <div class="title-bar">
+          <span class="edge-line"></span>
+          <div class="bar-inner">
+            <div class="title" data-slot="title">Prompt Engineering for <em>Real Results</em></div>
+          </div>
+        </div>
+
+      </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 });
+      gsap.set("#t2-lt-chbar .edge-line", { scaleX: 0 }); // was a CSS transform; GSAP owns it now
+
+      /* bloom fades in */
+      tl.from("#t2-lt-chbar .local-bloom",
+        { autoAlpha: 0, scale: 0.72, duration: 1.1, ease: "power2.out" }, 0);
+
+      /* chapter pill slides in from left */
+      tl.from("#t2-lt-chbar .chapter-pill",
+        { autoAlpha: 0, x: -30, filter: "blur(8px)",
+          duration: 0.62, ease: "back.out(1.4)" }, 0.10);
+
+      /* edge line draws left→right */
+      tl.to("#t2-lt-chbar .edge-line",
+        { scaleX: 1, duration: 0.65, ease: "power4.out" }, 0.45);
+
+      /* bar wipes in */
+      tl.to("#t2-lt-chbar .bar-inner",
+        { clipPath: "inset(0 0% 0 0)", duration: 0.68, ease: "power3.out" }, 0.55);
+
+      /* title glides */
+      tl.from("#t2-lt-chbar .title",
+        { autoAlpha: 0, x: -20, filter: "blur(8px)",
+          duration: 0.62, ease: "power4.out" }, 0.88);
+
+      /* chapter pill glow pulse - finite */
+      tl.to("#t2-lt-chbar .chapter-pill",
+        { boxShadow:
+            "0 0 32px rgba(79,140,255,0.55), inset 0 1px 0 rgba(255,255,255,0.22)",
+          duration: 1.1, ease: "sine.inOut", repeat: 3, yoyo: true }, 1.60);
+
+      tl.set({}, {}, 7);
+
+      window.__timelines["t2-lt-chbar"] = tl;
+    </script>
+  </body>
+</html>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-chip.html

@@ -0,0 +1,162 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier2 · lower-third · CHIP
+  Name and role in a compact glass chip with a glowing accent dot indicator.
+  Tighter and more interface-like than the pill - the dot gives it a "live"
+  signal feel. Transparent background.
+  Slots: name (~26 chars), role (~40 chars).
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; background: transparent; }
+
+      #t2-lt-chip {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent; overflow: hidden;
+        font-family: var(--font-display);
+      }
+
+      /* Localized bloom */
+      #t2-lt-chip .local-bloom {
+        position: absolute;
+        left: 54px; bottom: 120px;
+        width: 480px; height: 160px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 35% 80%,
+          rgba(var(--accent-rgb), 0.22) 0%,
+          rgba(var(--accent-rgb), 0.05) 58%,
+          transparent 75%);
+        filter: blur(28px);
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      /* Chip */
+      #t2-lt-chip .chip {
+        position: absolute;
+        left: 80px; bottom: 140px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 16px 28px 16px 20px;
+        background: var(--glass-bg-dark);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        border-radius: var(--radius);
+        border: var(--stroke) solid var(--glass-border);
+        box-shadow:
+          var(--glass-shadow),
+          0 0 0 1px rgba(var(--accent-rgb), 0.18),
+          inset 0 1px 0 var(--glass-hi);
+        z-index: 2;
+        overflow: hidden;
+      }
+
+      #t2-lt-chip .chip::before {
+        content: "";
+        position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.44) 45%, rgba(255,255,255,0.44) 55%, transparent);
+      }
+
+      /* Accent dot - the "live" indicator */
+      #t2-lt-chip .dot {
+        width: 12px; height: 12px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        background: var(--accent);
+        box-shadow:
+          0 0 0 3px rgba(var(--accent-rgb), 0.22),
+          0 0 12px rgba(var(--accent-rgb), 0.80),
+          0 0 28px rgba(var(--accent-rgb), 0.40);
+      }
+
+      /* Text column */
+      #t2-lt-chip .text-block {
+        display: flex; flex-direction: column; gap: 5px;
+      }
+
+      #t2-lt-chip .name {
+        font-family: var(--font-display);
+        font-weight: var(--wt-bold);
+        font-size: 32px;
+        letter-spacing: var(--track-snug);
+        color: var(--white);
+        text-shadow: var(--textglow);
+        white-space: nowrap;
+        line-height: 1.1;
+      }
+
+      #t2-lt-chip .role {
+        font-family: var(--font-body);
+        font-weight: var(--wt-med);
+        font-size: 20px;
+        color: var(--text-dim);
+        letter-spacing: 0.01em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t2-lt-chip"
+         data-composition-id="t2-lt-chip"
+         data-start="0"
+         data-width="1920"
+         data-height="1080">
+
+      <div class="local-bloom"></div>
+
+      <div class="chip">
+        <div class="dot"></div>
+        <div class="text-block">
+          <div class="name" data-slot="name">Ronny Mitchell</div>
+          <div class="role" data-slot="role">Head of Content Strategy</div>
+        </div>
+      </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 });
+
+      /* bloom in */
+      tl.from("#t2-lt-chip .local-bloom",
+        { autoAlpha: 0, scale: 0.65, duration: 1.0, ease: "power2.out" }, 0);
+
+      /* chip springs in */
+      tl.from("#t2-lt-chip .chip",
+        { autoAlpha: 0, x: -36, y: 20, scale: 0.90,
+          filter: "blur(12px)", transformOrigin: "left bottom",
+          duration: 0.78, ease: "back.out(1.4)" }, 0.08);
+
+      /* dot pops on */
+      tl.from("#t2-lt-chip .dot",
+        { autoAlpha: 0, scale: 0,
+          duration: 0.32, ease: "back.out(2.0)" }, 0.55);
+
+      /* name */
+      tl.from("#t2-lt-chip .name",
+        { autoAlpha: 0, x: -12, filter: "blur(7px)",
+          duration: 0.55, ease: "power4.out" }, 0.66);
+
+      /* role */
+      tl.from("#t2-lt-chip .role",
+        { autoAlpha: 0, x: -10, filter: "blur(5px)",
+          duration: 0.50, ease: "power3.out" }, 0.82);
+
+      /* dot halo pulse - finite */
+      tl.to("#t2-lt-chip .dot",
+        { boxShadow:
+            "0 0 0 5px rgba(79,140,255,0.28), 0 0 22px rgba(79,140,255,1.0), 0 0 50px rgba(79,140,255,0.55)",
+          duration: 0.90, ease: "sine.inOut", repeat: 4, yoyo: true }, 1.6);
+
+      tl.set({}, {}, 7);
+
+      window.__timelines["t2-lt-chip"] = tl;
+    </script>
+  </body>
+</html>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-cinemastrip.html

@@ -0,0 +1,190 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier2 · lower-third · CINEMASTRIP
+  A wide frosted-glass cinematic letter-box strip spanning the full lower third.
+  Name is left-anchored in large display type; role sits below in dimmer body
+  type. The strip wipes in from the left edge and a hairline top/bottom edge
+  animate-draw. Transparent overlay - only the strip paints over footage.
+  Slots: name (~28 chars), role (~48 chars).
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; background: transparent; }
+
+      #t2-lt-cine {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent; overflow: hidden;
+        font-family: var(--font-display);
+      }
+
+      /* Localized bloom behind strip */
+      #t2-lt-cine .local-bloom {
+        position: absolute;
+        left: -60px; bottom: 110px;
+        width: 900px; height: 220px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 35% 80%,
+          rgba(var(--accent-rgb), 0.22) 0%,
+          rgba(var(--accent-rgb), 0.06) 55%,
+          transparent 78%);
+        filter: blur(40px);
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      /* The wide cinematic strip */
+      #t2-lt-cine .strip {
+        position: absolute;
+        left: 0; bottom: 130px;
+        width: 900px;
+        padding: 26px 72px 24px 80px;
+        background: linear-gradient(90deg,
+          rgba(10, 14, 20, 0.82) 0%,
+          rgba(16, 22, 34, 0.68) 55%,
+          rgba(16, 22, 34, 0.32) 82%,
+          transparent 100%);
+        backdrop-filter: blur(18px) saturate(130%);
+        -webkit-backdrop-filter: blur(18px) saturate(130%);
+        z-index: 2;
+        /* clip-path used for wipe-in animation */
+        clip-path: inset(0 100% 0 0);
+      }
+
+      /* Top + bottom hairlines - drawn by SVG */
+      #t2-lt-cine .hairlines {
+        position: absolute;
+        left: 0; bottom: 130px;
+        width: 900px;
+        pointer-events: none;
+        z-index: 3;
+      }
+      #t2-lt-cine .hairlines .hl-top,
+      #t2-lt-cine .hairlines .hl-bot {
+        display: block;
+        height: 1.5px;
+        width: 100%;
+        background: linear-gradient(90deg,
+          rgba(var(--accent-rgb), 0.85) 0%,
+          rgba(var(--accent-rgb), 0.45) 45%,
+          rgba(var(--accent-rgb), 0.10) 75%,
+          transparent 100%);
+        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.50);
+        transform-origin: left center;
+      }
+      #t2-lt-cine .hairlines .hl-top {
+        position: absolute; top: 0;
+      }
+      #t2-lt-cine .hairlines .hl-bot {
+        position: absolute; bottom: 0;
+      }
+
+      /* Strip height proxy - so hairlines know the bottom offset */
+      #t2-lt-cine .strip-height-proxy {
+        position: absolute;
+        left: 0; bottom: 130px;
+        width: 900px; height: 96px;  /* matches strip content height */
+        pointer-events: none; visibility: hidden;
+      }
+
+      #t2-lt-cine .name {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 42px;
+        letter-spacing: var(--track-tight);
+        color: var(--white);
+        text-shadow: var(--textglow);
+        line-height: 1.08;
+        margin-bottom: 8px;
+        white-space: nowrap;
+      }
+
+      #t2-lt-cine .role {
+        font-family: var(--font-body);
+        font-weight: var(--wt-med);
+        font-size: 22px;
+        letter-spacing: 0.025em;
+        color: var(--text-dim);
+        line-height: 1.3;
+        white-space: nowrap;
+      }
+
+      /* Thin accent notch on the left edge */
+      #t2-lt-cine .strip::before {
+        content: "";
+        position: absolute;
+        left: 0; top: 0; bottom: 0;
+        width: 5px;
+        background: linear-gradient(180deg,
+          rgba(var(--accent-rgb), 0.95) 0%,
+          rgba(var(--accent-rgb), 0.55) 60%,
+          rgba(var(--accent-rgb), 0.10) 100%);
+        box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.70),
+                    0 0 32px rgba(var(--accent-rgb), 0.35);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t2-lt-cine"
+         data-composition-id="t2-lt-cine"
+         data-start="0"
+         data-width="1920"
+         data-height="1080">
+
+      <div class="local-bloom"></div>
+
+      <div class="hairlines">
+        <span class="hl-top"></span>
+        <span class="hl-bot" style="bottom:-96px;"></span>
+      </div>
+
+      <div class="strip">
+        <div class="name" data-slot="name">Marcus J. Holloway</div>
+        <div class="role" data-slot="role">Lead AI Curriculum Designer · ACME Academy</div>
+      </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 });
+      gsap.set(["#t2-lt-cine .hl-top", "#t2-lt-cine .hl-bot"], { scaleX: 0 }); // was a CSS transform; GSAP owns it now
+
+      /* bloom fades in */
+      tl.from("#t2-lt-cine .local-bloom",
+        { autoAlpha: 0, scale: 0.7, duration: 1.1, ease: "power2.out" }, 0);
+
+      /* hairlines draw left→right */
+      tl.to("#t2-lt-cine .hl-top",
+        { scaleX: 1, duration: 0.70, ease: "power4.out" }, 0.05);
+      tl.to("#t2-lt-cine .hl-bot",
+        { scaleX: 1, duration: 0.70, ease: "power4.out" }, 0.12);
+
+      /* strip wipes in: reveal clip-path from left */
+      tl.to("#t2-lt-cine .strip",
+        { clipPath: "inset(0 0% 0 0)", duration: 0.72, ease: "power3.out" }, 0.18);
+
+      /* name fades + blurs in */
+      tl.from("#t2-lt-cine .name",
+        { autoAlpha: 0, x: -22, filter: "blur(10px)",
+          duration: 0.65, ease: "power4.out" }, 0.62);
+
+      /* role follows */
+      tl.from("#t2-lt-cine .role",
+        { autoAlpha: 0, x: -16, filter: "blur(7px)",
+          duration: 0.60, ease: "power3.out" }, 0.80);
+
+      /* hairline glow pulse - finite */
+      tl.to(["#t2-lt-cine .hl-top", "#t2-lt-cine .hl-bot"],
+        { boxShadow: "0 0 18px rgba(79,140,255,0.75), 0 0 40px rgba(79,140,255,0.36)",
+          duration: 1.1, ease: "sine.inOut", repeat: 3, yoyo: true }, 1.8);
+
+      tl.set({}, {}, 7);
+
+      window.__timelines["t2-lt-cine"] = tl;
+    </script>
+  </body>
+</html>