luckiest-co 1.0.19 → 1.0.21

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

@@ -0,0 +1,217 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · overview · TRICARDS
+  Full-screen takeover. Three tall glass tiles in a row - platform/option
+  comparison layout. Each tile has a glowing icon placeholder, a heading,
+  and a body line. Tiles spring in staggered; title glides in first.
+  Slots: title, c1_h, c1_b, c2_h, c2_b, c3_h, c3_b.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-ov-tri {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-display); overflow: hidden;
+      }
+
+      /* Aurora bloom */
+      #t1-ov-tri .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      /* Dot grid */
+      #t1-ov-tri .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 30%, transparent 80%);
+                mask-image: radial-gradient(120% 100% at 50% 60%, #000 30%, transparent 80%);
+      }
+
+      /* Title row at top */
+      #t1-ov-tri .title-row {
+        position: absolute; left: 0; right: 0; top: 90px; text-align: center; z-index: 4;
+      }
+      #t1-ov-tri .title {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: var(--size-title); letter-spacing: var(--track-snug); line-height: 1.06;
+        color: var(--white); text-shadow: var(--textglow);
+        max-width: 1400px; margin: 0 auto;
+      }
+      #t1-ov-tri .title em {
+        font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Three-column card layout */
+      #t1-ov-tri .cards {
+        position: absolute; left: 96px; right: 96px; top: 240px; bottom: 80px;
+        display: flex; gap: 40px; align-items: stretch; z-index: 4;
+      }
+
+      /* Individual glass tile */
+      #t1-ov-tri .card {
+        flex: 1;
+        background: var(--glass-bg-dark);
+        border: var(--stroke) solid var(--glass-border);
+        border-radius: var(--radius);
+        box-shadow: var(--glass-shadow), 0 0 40px rgba(var(--accent-rgb), 0.08);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        padding: 56px 52px 52px;
+        display: flex; flex-direction: column; align-items: flex-start; gap: 0;
+        position: relative; overflow: hidden;
+      }
+      /* Top hairline highlight */
+      #t1-ov-tri .card::before {
+        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
+        background: linear-gradient(90deg, transparent, var(--glass-hi) 35%, var(--glass-hi) 65%, transparent);
+      }
+      /* Middle card gets a subtle accent rim glow */
+      #t1-ov-tri .card.featured {
+        border-color: rgba(var(--accent-rgb), 0.32);
+        box-shadow: var(--glass-shadow), 0 0 60px rgba(var(--accent-rgb), 0.18);
+      }
+
+      /* Icon placeholder */
+      #t1-ov-tri .icon-box {
+        width: 80px; height: 80px;
+        border-radius: var(--radius-sm);
+        border: var(--stroke) solid rgba(var(--accent-rgb), 0.55);
+        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28);
+        background: rgba(var(--accent-rgb), 0.07);
+        display: flex; align-items: center; justify-content: center;
+        margin-bottom: 36px;
+        flex-shrink: 0;
+      }
+      #t1-ov-tri .icon-box svg {
+        width: 40px; height: 40px; stroke: var(--accent); fill: none; stroke-width: 1.8;
+        filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.60));
+      }
+
+      /* Card heading */
+      #t1-ov-tri .card-heading {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: 42px; letter-spacing: var(--track-snug); line-height: 1.15;
+        color: var(--white); text-shadow: var(--textglow);
+        margin-bottom: 20px;
+      }
+
+      /* Card body */
+      #t1-ov-tri .card-body {
+        font-family: var(--font-body); font-weight: var(--wt-reg);
+        font-size: var(--size-body); line-height: 1.55;
+        color: var(--text-dim);
+      }
+
+      /* Bottom accent bar on featured card */
+      #t1-ov-tri .card.featured .card-heading {
+        color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Vignette + grain */
+      #t1-ov-tri .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-ov-tri .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-tri" data-composition-id="t1-ov-tri" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="title-row">
+        <div class="title" data-slot="title">Three Ways to <em>Approach This</em></div>
+      </div>
+
+      <div class="cards">
+        <!-- Card 1 -->
+        <div class="card" id="tri-c1">
+          <div class="icon-box">
+            <svg viewBox="0 0 40 40">
+              <rect x="6" y="6" width="28" height="28" rx="4"/>
+              <line x1="13" y1="14" x2="27" y2="14"/>
+              <line x1="13" y1="20" x2="27" y2="20"/>
+              <line x1="13" y1="26" x2="21" y2="26"/>
+            </svg>
+          </div>
+          <div class="card-heading" data-slot="c1_h">Build It Yourself</div>
+          <div class="card-body" data-slot="c1_b">Full control over every detail. Best when you have time and want to own the process end to end.</div>
+        </div>
+
+        <!-- Card 2 (featured / center) -->
+        <div class="card featured" id="tri-c2">
+          <div class="icon-box">
+            <svg viewBox="0 0 40 40">
+              <circle cx="20" cy="20" r="13"/>
+              <line x1="20" y1="10" x2="20" y2="20"/>
+              <circle cx="20" cy="20" r="3" fill="currentColor" stroke="none" style="color:var(--accent)"/>
+            </svg>
+          </div>
+          <div class="card-heading" data-slot="c2_h">Use a Platform</div>
+          <div class="card-body" data-slot="c2_b">Leverage existing tools and infrastructure. Faster time to value with manageable trade-offs.</div>
+        </div>
+
+        <!-- Card 3 -->
+        <div class="card" id="tri-c3">
+          <div class="icon-box">
+            <svg viewBox="0 0 40 40">
+              <path d="M8 32 L20 10 L32 32 Z"/>
+              <line x1="14" y1="26" x2="26" y2="26"/>
+            </svg>
+          </div>
+          <div class="card-heading" data-slot="c3_h">Hire Experts</div>
+          <div class="card-body" data-slot="c3_b">Bring in specialists who have done this before. Fastest path - but it comes with a cost.</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-tri .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "100px 80px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* environment in */
+      tl.from("#t1-ov-tri .bloom", { autoAlpha: 0, scale: 0.92, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-ov-tri .grid",  { autoAlpha: 0, duration: 1.2, ease: "power2.out" }, 0.2)
+
+        /* title glides in first */
+        .from("#t1-ov-tri .title", { autoAlpha: 0, y: 28, filter: "blur(14px)", duration: 1.0, ease: "power4.out" }, 0.55)
+
+        /* cards spring+parallax in - staggered */
+        .from("#tri-c1", { autoAlpha: 0, y: 52, scale: 0.95, transformOrigin: "50% 50%",
+          filter: "blur(12px)", duration: 0.9, ease: "back.out(1.4)" }, 1.0)
+        .from("#tri-c2", { autoAlpha: 0, y: 52, scale: 0.95, transformOrigin: "50% 50%",
+          filter: "blur(12px)", duration: 0.9, ease: "back.out(1.4)" }, 1.15)
+        .from("#tri-c3", { autoAlpha: 0, y: 52, scale: 0.95, transformOrigin: "50% 50%",
+          filter: "blur(12px)", duration: 0.9, ease: "back.out(1.4)" }, 1.30)
+
+        /* gentle breathing glow on featured card border - finite */
+        .to("#tri-c2", { boxShadow: "0 24px 70px rgba(0,0,0,0.50), 0 0 90px rgba(79,140,255,0.30)",
+          duration: 1.6, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.4)
+
+        /* slow upward drift on all cards during hold */
+        .to("#t1-ov-tri .cards", { y: -12, duration: 5.0, ease: "sine.inOut" }, 1.8)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-ov-tri"] = tl;
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,197 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · overview · VENN DIAGRAM
+  Full-screen takeover. Two large glowing translucent circles overlap in the
+  center of the canvas. Circles scale in from center (scale 0→1). Three labels:
+  A (left circle), B (right circle), overlap (intersection). Clean SVG circles
+  with glass fill and neon stroke.
+  Slots: title, label_a, label_a_sub, label_overlap, label_overlap_sub, label_b, label_b_sub.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-ov-venn {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-body); overflow: hidden;
+      }
+
+      #t1-ov-venn .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      #t1-ov-venn .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% 105% at 50% 55%, #000 28%, transparent 76%);
+                mask-image: radial-gradient(120% 105% at 50% 55%, #000 28%, transparent 76%);
+      }
+
+      /* Title top-center */
+      #t1-ov-venn .card-title {
+        position: absolute; left: 0; right: 0; top: 58px; z-index: 5;
+        text-align: center;
+        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); line-height: 1.1;
+      }
+      #t1-ov-venn .card-title em {
+        font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /*
+        Venn circles - SVG layer, full canvas.
+        Canvas center: 960, 540. Circle r=310.
+        Left center: 760, 540. Right center: 1160, 540.
+        Overlap intersection midpoint: 960, 540.
+      */
+      #t1-ov-venn .venn-svg {
+        position: absolute; inset: 0; z-index: 2;
+        pointer-events: none; overflow: visible;
+      }
+      /* Filled translucent circles */
+      #t1-ov-venn .venn-svg .circle-fill {
+        fill: rgba(var(--accent-rgb), 0.08);
+        stroke: rgba(var(--accent-rgb), 0.60);
+        stroke-width: 2;
+        filter: drop-shadow(0 0 22px rgba(var(--accent-rgb),0.30));
+      }
+      /* Glow ring overlay (same path, wider stroke, blurred) */
+      #t1-ov-venn .venn-svg .circle-glow {
+        fill: none;
+        stroke: rgba(var(--accent-rgb), 0.22);
+        stroke-width: 18;
+        filter: blur(8px);
+      }
+
+      /* Label text blocks - absolutely positioned */
+      #t1-ov-venn .venn-label {
+        position: absolute; z-index: 5;
+        text-align: center;
+      }
+      #t1-ov-venn .venn-label .v-title {
+        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);
+        margin-bottom: 8px;
+      }
+      #t1-ov-venn .venn-label .v-sub {
+        font-family: var(--font-body); font-size: 24px;
+        color: var(--text-dim); line-height: 1.4; max-width: 260px; margin: 0 auto;
+      }
+
+      /* Overlap label - center, accent */
+      #t1-ov-venn .venn-label.overlap .v-title {
+        color: var(--accent); text-shadow: var(--textglow-accent); font-size: 34px;
+      }
+
+      /*
+        Label positions:
+          A: left circle exclusive region ~left=460, vertically centered ~top=460
+          B: right circle exclusive region ~left=1240, top=460
+          Overlap: center ~left=850, top=460
+      */
+      #t1-ov-venn #vl-a        { left: 420px;  top: 452px; }
+      #t1-ov-venn #vl-overlap  { left: 848px;  top: 452px; }
+      #t1-ov-venn #vl-b        { left: 1240px; top: 452px; }
+
+      #t1-ov-venn .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-ov-venn .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-venn" data-composition-id="t1-ov-venn" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="card-title" data-slot="title">Where <em>Value</em> Is Created</div>
+
+      <!-- Venn SVG: two circles, r=310, left cx=760 right cx=1160, cy=560 -->
+      <svg class="venn-svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+        <!-- Glow halos (behind fills) -->
+        <circle class="circle-glow" id="ven-glow-a" cx="760"  cy="560" r="310" />
+        <circle class="circle-glow" id="ven-glow-b" cx="1160" cy="560" r="310" />
+        <!-- Filled circles -->
+        <circle class="circle-fill" id="ven-circle-a" cx="760"  cy="560" r="310" />
+        <circle class="circle-fill" id="ven-circle-b" cx="1160" cy="560" r="310" />
+      </svg>
+
+      <!-- Labels -->
+      <div class="venn-label" id="vl-a">
+        <div class="v-title" data-slot="label_a">Skills</div>
+        <div class="v-sub"   data-slot="label_a_sub">Deep domain expertise you've spent years building</div>
+      </div>
+
+      <div class="venn-label overlap" id="vl-overlap">
+        <div class="v-title" data-slot="label_overlap">Leverage</div>
+        <div class="v-sub"   data-slot="label_overlap_sub">Where rare skill meets market demand</div>
+      </div>
+
+      <div class="venn-label" id="vl-b">
+        <div class="v-title" data-slot="label_b">Market</div>
+        <div class="v-sub"   data-slot="label_b_sub">Urgent problems people will pay to solve</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-venn .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "100px 78px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* environment */
+      tl.from("#t1-ov-venn .bloom", { autoAlpha: 0, scale: 0.89, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-ov-venn .grid",  { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+
+        /* title */
+        .from("#t1-ov-venn .card-title", { autoAlpha: 0, y: 26, filter: "blur(12px)", duration: 0.85, ease: "power4.out" }, 0.46)
+
+        /* circles scale in from center - left then right, slight stagger */
+        .from("#ven-circle-a, #ven-glow-a", { scale: 0, transformOrigin: "760px 560px", autoAlpha: 0, duration: 0.80, ease: "back.out(1.3)" }, 0.90)
+        .from("#ven-circle-b, #ven-glow-b", { scale: 0, transformOrigin: "1160px 560px", autoAlpha: 0, duration: 0.80, ease: "back.out(1.3)" }, 1.10)
+
+        /* labels glide in */
+        .from("#vl-a",       { autoAlpha: 0, x: -30, filter: "blur(10px)", duration: 0.70, ease: "power3.out" }, 1.55)
+        .from("#vl-b",       { autoAlpha: 0, x:  30, filter: "blur(10px)", duration: 0.70, ease: "power3.out" }, 1.70)
+        .from("#vl-overlap", { autoAlpha: 0, y:  20, filter: "blur(10px)", duration: 0.70, ease: "power3.out" }, 1.90)
+
+        /* circle glow breathing - finite */
+        .to("#ven-circle-a",
+          { filter: "drop-shadow(0 0 40px rgba(79,140,255,0.48))",
+            duration: 1.3, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.8)
+        .to("#ven-circle-b",
+          { filter: "drop-shadow(0 0 40px rgba(79,140,255,0.48))",
+            duration: 1.3, ease: "sine.inOut", repeat: 2, yoyo: true }, 3.0)
+
+        /* overlap label accent pulse */
+        .to("#vl-overlap .v-title",
+          { textShadow: "0 0 28px rgba(79,140,255,0.90), 0 0 60px rgba(79,140,255,0.45)",
+            duration: 1.2, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.6)
+
+        /* slow upward drift */
+        .to("#t1-ov-venn .venn-svg, #t1-ov-venn #vl-a, #t1-ov-venn #vl-b, #t1-ov-venn #vl-overlap",
+          { y: -10, duration: 4.5, ease: "sine.inOut" }, 2.0)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-ov-venn"] = tl;
+    </script>
+  </body>
+</html>