luckiest-co 1.0.19 → 1.0.21

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

@@ -0,0 +1,208 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier2 · lower-third · MICNAME
+  Podcast-vibe name card. A glowing microphone icon (SVG) lives on the left
+  inside a small neon-rimmed circle; name + role float beside it on a frosted
+  pill. The mic icon pulses with a neon bloom. Clean, broadcast-studio feeling.
+  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-mic {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent; overflow: hidden;
+        font-family: var(--font-display);
+      }
+
+      /* Localized bloom - radiates from the mic icon */
+      #t2-lt-mic .local-bloom {
+        position: absolute;
+        left: 50px; bottom: 95px;
+        width: 420px; height: 240px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 20% 65%,
+          rgba(var(--accent-rgb), 0.38) 0%,
+          rgba(var(--accent-rgb), 0.10) 48%,
+          transparent 72%);
+        filter: blur(32px);
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      /* Row layout */
+      #t2-lt-mic .row {
+        position: absolute;
+        left: 80px; bottom: 122px;
+        display: flex; align-items: center; gap: 26px;
+        z-index: 2;
+      }
+
+      /* Mic icon circle */
+      #t2-lt-mic .mic-circle {
+        flex-shrink: 0;
+        width: 80px; height: 80px;
+        border-radius: 50%;
+        background: rgba(var(--accent-rgb), 0.10);
+        border: 2px solid rgba(var(--accent-rgb), 0.70);
+        box-shadow:
+          0 0 0 5px rgba(var(--accent-rgb), 0.10),
+          0 0 22px rgba(var(--accent-rgb), 0.50),
+          0 0 50px rgba(var(--accent-rgb), 0.22),
+          inset 0 1px 0 rgba(255,255,255,0.20);
+        display: flex; align-items: center; justify-content: center;
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
+      }
+
+      /* SVG mic icon inline */
+      #t2-lt-mic .mic-icon {
+        width: 36px; height: 36px;
+        fill: none;
+        stroke: var(--accent);
+        stroke-width: 2.2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.80));
+      }
+
+      /* Glass name pill */
+      #t2-lt-mic .pill {
+        padding: 20px 36px 18px;
+        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), inset 0 1px 0 var(--glass-hi);
+        /* hairline top shimmer */
+        position: relative; overflow: hidden;
+      }
+
+      #t2-lt-mic .pill::before {
+        content: "";
+        position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50) 40%, rgba(255,255,255,0.50) 60%, transparent);
+      }
+
+      #t2-lt-mic .name {
+        font-family: var(--font-display);
+        font-weight: var(--wt-bold);
+        font-size: 36px;
+        letter-spacing: var(--track-snug);
+        color: var(--white);
+        text-shadow: var(--textglow);
+        line-height: 1.1;
+        margin-bottom: 7px;
+        white-space: nowrap;
+      }
+
+      #t2-lt-mic .role {
+        font-family: var(--font-body);
+        font-weight: var(--wt-med);
+        font-size: 21px;
+        letter-spacing: 0.01em;
+        color: var(--text-dim);
+        white-space: nowrap;
+      }
+
+      /* "ON AIR" badge - upper-right corner of pill */
+      #t2-lt-mic .on-air {
+        position: absolute;
+        top: -10px; right: 18px;
+        padding: 4px 12px;
+        background: rgba(var(--alert-rgb),0.18);
+        border: 1.5px solid rgba(var(--alert-rgb),0.65);
+        border-radius: 999px;
+        font-family: var(--font-mono);
+        font-size: 13px;
+        font-weight: var(--wt-bold);
+        letter-spacing: 0.14em;
+        color: #ff5f58;
+        text-shadow: 0 0 10px rgba(var(--alert-rgb),0.70);
+        box-shadow: 0 0 12px rgba(var(--alert-rgb),0.30);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t2-lt-mic"
+         data-composition-id="t2-lt-mic"
+         data-start="0"
+         data-width="1920"
+         data-height="1080">
+
+      <div class="local-bloom"></div>
+
+      <div class="row">
+        <div class="mic-circle">
+          <!-- Microphone SVG (capsule body + stand + base) -->
+          <svg class="mic-icon" viewBox="0 0 24 24">
+            <rect x="9" y="2" width="6" height="11" rx="3"/>
+            <path d="M5 10a7 7 0 0014 0"/>
+            <line x1="12" y1="17" x2="12" y2="21"/>
+            <line x1="8" y1="21" x2="16" y2="21"/>
+          </svg>
+        </div>
+
+        <div class="pill">
+          <div class="on-air">ON AIR</div>
+          <div class="name" data-slot="name">Jordan Reese</div>
+          <div class="role" data-slot="role">Host · The AI Education Podcast</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 swells */
+      tl.from("#t2-lt-mic .local-bloom",
+        { autoAlpha: 0, scale: 0.60, duration: 1.2, ease: "power2.out" }, 0);
+
+      /* mic circle pops in with spring */
+      tl.from("#t2-lt-mic .mic-circle",
+        { autoAlpha: 0, scale: 0.50, transformOrigin: "50% 50%",
+          duration: 0.68, ease: "back.out(1.7)" }, 0.15);
+
+      /* ON AIR badge drops from above */
+      tl.from("#t2-lt-mic .on-air",
+        { autoAlpha: 0, y: -12, duration: 0.45, ease: "back.out(1.4)" }, 0.50);
+
+      /* pill slides in from left */
+      tl.from("#t2-lt-mic .pill",
+        { autoAlpha: 0, x: -28, filter: "blur(10px)",
+          duration: 0.70, ease: "back.out(1.4)" }, 0.32);
+
+      /* name reveals */
+      tl.from("#t2-lt-mic .name",
+        { autoAlpha: 0, x: -16, filter: "blur(7px)",
+          duration: 0.60, ease: "power4.out" }, 0.72);
+
+      /* role follows */
+      tl.from("#t2-lt-mic .role",
+        { autoAlpha: 0, x: -12, filter: "blur(5px)",
+          duration: 0.55, ease: "power3.out" }, 0.88);
+
+      /* mic circle glow pulse - finite */
+      tl.to("#t2-lt-mic .mic-circle",
+        { boxShadow:
+            "0 0 0 8px rgba(79,140,255,0.14), 0 0 38px rgba(79,140,255,0.70), 0 0 80px rgba(79,140,255,0.34), inset 0 1px 0 rgba(255,255,255,0.22)",
+          duration: 1.1, ease: "sine.inOut", repeat: 3, yoyo: true }, 1.55);
+
+      /* ON AIR red flicker - finite */
+      tl.to("#t2-lt-mic .on-air",
+        { opacity: 0.45, duration: 0.55, ease: "none", repeat: 5, yoyo: true }, 2.0);
+
+      tl.set({}, {}, 7);
+
+      window.__timelines["t2-lt-mic"] = tl;
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,176 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier2 · lower-third · MINICARD
+  A compact minimal mini-card: tiny glass chip, name bold + role micro
+  beneath, one accent dot. Designed to be unobtrusive - small footprint,
+  maximum legibility, instant read. Perfect for returning guest IDs or
+  secondary speaker credits.
+  Sits over live speaker footage - fully transparent background.
+  Slots: name (~20 chars), role (~32 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-mini {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent; overflow: hidden;
+        font-family: var(--font-display);
+      }
+
+      /* Localized bloom - very subtle, scaled down to match the tiny card */
+      #t2-lt-mini .local-bloom {
+        position: absolute;
+        left: 55px; bottom: 95px;
+        width: 380px; height: 170px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 50% 80%,
+          rgba(var(--accent-rgb), 0.22) 0%,
+          rgba(var(--accent-rgb), 0.06) 52%,
+          transparent 76%);
+        filter: blur(28px);
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      /* Mini glass chip */
+      #t2-lt-mini .chip {
+        position: absolute;
+        left: 80px; bottom: 120px;
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 14px 24px 13px;
+        background: var(--glass-bg-dark);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        border-radius: var(--radius-sm);
+        border: var(--stroke) solid var(--glass-border);
+        box-shadow:
+          0 16px 48px rgba(0, 0, 0, 0.44),
+          0 0 0 1.5px rgba(var(--accent-rgb), 0.50),
+          0 0 16px rgba(var(--accent-rgb), 0.18),
+          inset 0 1px 0 var(--glass-hi);
+        overflow: hidden;
+        z-index: 2;
+      }
+
+      /* Shimmer strip */
+      #t2-lt-mini .chip::before {
+        content: "";
+        position: absolute; top: 0; left: 8px; right: 8px; height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.48) 40%, rgba(255,255,255,0.48) 60%, transparent);
+        border-radius: 1px;
+      }
+
+      /* Accent dot indicator */
+      #t2-lt-mini .dot {
+        flex-shrink: 0;
+        width: 10px; height: 10px;
+        border-radius: 50%;
+        background: var(--accent);
+        box-shadow:
+          0 0 8px rgba(var(--accent-rgb), 0.85),
+          0 0 20px rgba(var(--accent-rgb), 0.40);
+      }
+
+      /* Text block */
+      #t2-lt-mini .text-block {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+
+      #t2-lt-mini .name {
+        font-family: var(--font-display);
+        font-weight: var(--wt-bold);
+        font-size: 26px;
+        letter-spacing: var(--track-snug);
+        color: var(--white);
+        text-shadow: var(--textglow);
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      #t2-lt-mini .role {
+        font-family: var(--font-body);
+        font-weight: var(--wt-med);
+        font-size: 15px;
+        letter-spacing: 0.025em;
+        color: var(--text-dim);
+        line-height: 1.3;
+        white-space: nowrap;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t2-lt-mini"
+         data-composition-id="t2-lt-mini"
+         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 fades in */
+      tl.from("#t2-lt-mini .local-bloom",
+        { autoAlpha: 0, scale: 0.70, duration: 1.1, ease: "power2.out" }, 0);
+
+      /* chip springs in from lower-left */
+      tl.from("#t2-lt-mini .chip",
+        { autoAlpha: 0, x: -36, y: 20, scale: 0.88,
+          filter: "blur(10px)", transformOrigin: "left bottom",
+          duration: 0.75, ease: "back.out(1.4)" }, 0.10);
+
+      /* dot blooms on */
+      tl.from("#t2-lt-mini .dot",
+        { autoAlpha: 0, scale: 0.30,
+          duration: 0.45, ease: "back.out(1.8)" }, 0.52);
+
+      /* name glides in */
+      tl.from("#t2-lt-mini .name",
+        { autoAlpha: 0, x: -16, filter: "blur(7px)",
+          duration: 0.55, ease: "power4.out" }, 0.60);
+
+      /* role follows */
+      tl.from("#t2-lt-mini .role",
+        { autoAlpha: 0, x: -10, filter: "blur(5px)",
+          duration: 0.50, ease: "power3.out" }, 0.74);
+
+      /* dot glow breathes - finite */
+      tl.to("#t2-lt-mini .dot",
+        { boxShadow:
+            "0 0 16px rgba(79,140,255,1.0), 0 0 36px rgba(79,140,255,0.55)",
+          duration: 0.90, ease: "sine.inOut", repeat: 4, yoyo: true }, 1.4);
+
+      /* chip rim pulse - finite */
+      tl.to("#t2-lt-mini .chip",
+        { boxShadow:
+            "0 16px 48px rgba(0,0,0,0.44), 0 0 0 1.5px rgba(79,140,255,0.88), 0 0 28px rgba(79,140,255,0.35), inset 0 1px 0 rgba(255,255,255,0.22)",
+          duration: 1.1, ease: "sine.inOut", repeat: 3, yoyo: true }, 1.55);
+
+      tl.set({}, {}, 7);
+
+      window.__timelines["t2-lt-mini"] = tl;
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,149 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier2 · lower-third · MINIMAL
+  Glowing name text on a slim dark glass underlay + a glowing accent underline
+  that draws in. Role appears smaller beneath. Deliberately spare - accent is
+  entirely in the glow and the underline.
+  Transparent background - only the underlay paints.
+  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-min {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent; overflow: hidden;
+        font-family: var(--font-display);
+      }
+
+      /* Localized bloom - very soft, directly behind text */
+      #t2-lt-min .local-bloom {
+        position: absolute;
+        left: 60px; bottom: 110px;
+        width: 440px; height: 160px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 30% 80%,
+          rgba(var(--accent-rgb), 0.20) 0%,
+          rgba(var(--accent-rgb), 0.05) 60%,
+          transparent 75%);
+        filter: blur(28px);
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      /* Slim glass underlay */
+      #t2-lt-min .underlay {
+        position: absolute;
+        left: 80px; bottom: 130px;
+        padding: 18px 36px 20px;
+        background: var(--glass-bg-dark);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        border-radius: var(--radius-sm);
+        border: var(--stroke) solid var(--glass-border);
+        box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
+        z-index: 2;
+        overflow: visible;
+      }
+
+      #t2-lt-min .name {
+        font-family: var(--font-display);
+        font-weight: var(--wt-black);
+        font-size: 42px;
+        letter-spacing: var(--track-snug);
+        color: var(--white);
+        text-shadow: var(--textglow);
+        line-height: 1.05;
+        margin-bottom: 8px;
+        white-space: nowrap;
+      }
+
+      /* Glowing underline - sits below name */
+      #t2-lt-min .underline {
+        height: 2px;
+        width: 100%;
+        background: linear-gradient(90deg,
+          var(--accent) 0%,
+          rgba(var(--accent-rgb), 0.30) 85%,
+          transparent 100%);
+        box-shadow:
+          0 0 8px rgba(var(--accent-rgb), 0.80),
+          0 0 20px rgba(var(--accent-rgb), 0.45);
+        border-radius: 2px;
+        margin-bottom: 12px;
+        /* GSAP draws this left-to-right via scaleX */
+        transform-origin: left center;
+      }
+
+      #t2-lt-min .role {
+        font-family: var(--font-body);
+        font-weight: var(--wt-med);
+        font-size: 22px;
+        color: var(--text-dim);
+        letter-spacing: 0.01em;
+        line-height: 1.3;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t2-lt-min"
+         data-composition-id="t2-lt-min"
+         data-start="0"
+         data-width="1920"
+         data-height="1080">
+
+      <div class="local-bloom"></div>
+
+      <div class="underlay">
+        <div class="name" data-slot="name">Ronny Mitchell</div>
+        <div class="underline"></div>
+        <div class="role" data-slot="role">Head of Content Strategy</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-min .local-bloom",
+        { autoAlpha: 0, scale: 0.7, duration: 1.0, ease: "power2.out" }, 0);
+
+      /* underlay glides up */
+      tl.from("#t2-lt-min .underlay",
+        { autoAlpha: 0, y: 28, filter: "blur(10px)",
+          duration: 0.78, ease: "back.out(1.4)" }, 0.05);
+
+      /* name glows in */
+      tl.from("#t2-lt-min .name",
+        { autoAlpha: 0, y: 14, filter: "blur(8px)",
+          duration: 0.65, ease: "power4.out" }, 0.40);
+
+      /* underline draws left-to-right */
+      tl.from("#t2-lt-min .underline",
+        { scaleX: 0, autoAlpha: 0,
+          duration: 0.50, ease: "power3.out" }, 0.72);
+
+      /* role fades in */
+      tl.from("#t2-lt-min .role",
+        { autoAlpha: 0, y: 8, filter: "blur(5px)",
+          duration: 0.50, ease: "power3.out" }, 0.88);
+
+      /* underline glow pulse - finite */
+      tl.to("#t2-lt-min .underline",
+        { boxShadow: "0 0 16px rgba(79,140,255,1.0), 0 0 36px rgba(79,140,255,0.60)",
+          duration: 1.1, ease: "sine.inOut", repeat: 3, yoyo: true }, 1.8);
+
+      tl.set({}, {}, 7);
+
+      window.__timelines["t2-lt-min"] = tl;
+    </script>
+  </body>
+</html>