luckiest-co 1.0.19 → 1.0.21

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/tokens.css

@@ -0,0 +1,134 @@
+/* ============================================================================
+   AURORA GLASS - style tokens
+   Single source of palette / type / motion / texture for every card in this
+   style. Cards reference these vars and never hardcode colors, fonts, easings,
+   glows, or textures. Tweak here, all cards update.
+   See DESIGN.md for the why.
+   Aesthetic: premium dark motion-graphics - near-black cool canvas, a blue
+   "aurora" glow blooming from below, glassmorphism cards, edge-lit neon
+   elements, gradient glow text, focus-stack blur, smooth After-Effects easing.
+   Palette is the default palette (blue is the hero glow). The opposite of paper collage in
+   every axis: smooth not choppy, dark not paper, glow not ink.
+   ============================================================================ */
+
+/* Type. No remote font import: apply-brand.mjs writes @font-face rules for local files
+   in composition/assets/fonts/, and the HyperFrames compiler embeds supported fonts by name. */
+
+:root {
+  /* --- palette (mirror style.json + DESIGN.md). default brand, dark. ----------- */
+  --canvas:       #0A0E14;   /* main near-black cool background */
+  --canvas-deep:  #07121C;   /* deeper navy - vignette / depth wells */
+  --ink:          #2A251F;   /* dark text for the rare light/cream surface */
+  --paper:        #F0EEE9;   /* warm white surface (light glass / chips) */
+  --white:        #FFFFFF;
+
+  --text:         #F0EEE9;   /* primary text on dark */
+  --text-dim:     rgba(240, 238, 233, 0.62);  /* secondary copy */
+  --text-faint:   rgba(240, 238, 233, 0.34);  /* metadata, fine print */
+
+  --accent:       #4F8CFF;   /* accent blue - THE hero glow */
+  --accent-2:     #F5D82A;   /* yellow - secondary pop / highlight numerals */
+  --alert:        #FF3B30;   /* red - alarm, negative delta, "lie" */
+  --warm:         #FF8A5C;   /* orange - warm secondary accent */
+
+  /* rgb triplets for building rgba() glows in cards without re-typing hex */
+  --accent-rgb:   79, 140, 255;
+  --accent2-rgb:  245, 216, 42;
+  --alert-rgb:    255, 59, 48;
+  --warm-rgb:     255, 138, 92;
+
+  /* semantic aliases the blueprint contract expects */
+  --bg:     var(--canvas);
+  --fg:     var(--text);
+  --muted:  var(--text-dim);
+
+  /* --- typography ---------------------------------------------------------- */
+  /* Plus Jakarta Sans = the voice (headlines, big numbers, glow text): geometric,
+     premium, rounds to match the glass radii, heavy at 800. Inter = body / labels /
+     captions, recedes. Space Mono = data chips, timestamps, %s - the "interface"
+     voice. No serif anywhere (that is paper collage). */
+  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
+  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono:    "Space Mono", ui-monospace, "SF Mono", monospace;
+  /* contract aliases */
+  --font-label:   var(--font-body);
+  --font-hand:    var(--font-body);
+
+  --wt-reg:    400;
+  --wt-med:    500;
+  --wt-semi:   600;
+  --wt-bold:   700;
+  --wt-black:  800;
+
+  /* video sizes for 1920x1080 (big - readable in 2s) */
+  --size-mega:     300px;   /* hero stat number */
+  --size-display:  140px;   /* takeover headline */
+  --size-title:    84px;    /* section title */
+  --size-headline: 54px;    /* card headline */
+  --size-body:     32px;    /* supporting copy */
+  --size-label:    24px;    /* kicker / metadata */
+  --size-tiny:     19px;    /* credits, fine print, timestamps */
+
+  --track-tight: -0.02em;   /* display tracking */
+  --track-snug:  -0.01em;
+  --track-wide:  0.18em;    /* uppercase label tracking */
+
+  /* --- glow - the signature. Soft, layered, never a hard ring. ------------- */
+  --glow-accent-sm: 0 0 10px rgba(var(--accent-rgb), 0.55);
+  --glow-accent:    0 0 22px rgba(var(--accent-rgb), 0.55), 0 0 56px rgba(var(--accent-rgb), 0.30);
+  --glow-accent-lg: 0 0 40px rgba(var(--accent-rgb), 0.60), 0 0 120px rgba(var(--accent-rgb), 0.32);
+  --glow-white:     0 0 16px rgba(255, 255, 255, 0.50), 0 0 46px rgba(255, 255, 255, 0.26);
+  --glow-white-lg:  0 0 30px rgba(255, 255, 255, 0.55), 0 0 90px rgba(255, 255, 255, 0.30);
+  /* text glow (set as text-shadow): white core that lifts off the dark canvas */
+  --textglow:       0 0 18px rgba(255, 255, 255, 0.45), 0 0 40px rgba(var(--accent-rgb), 0.30);
+  --textglow-accent:0 0 18px rgba(var(--accent-rgb), 0.65), 0 0 48px rgba(var(--accent-rgb), 0.35);
+
+  /* --- glass - frosted surfaces. Two tints: light (bright) + dark (recede). - */
+  --glass-bg:      rgba(255, 255, 255, 0.055);
+  --glass-bg-dark: rgba(16, 22, 34, 0.55);
+  --glass-border:  rgba(255, 255, 255, 0.14);
+  --glass-hi:      rgba(255, 255, 255, 0.22);  /* top inner-highlight edge */
+  --glass-blur:    blur(22px) saturate(135%);
+  --glass-shadow:  0 24px 70px rgba(0, 0, 0, 0.50);
+
+  /* --- shape --------------------------------------------------------------- */
+  --radius:     28px;       /* glass cards, pills - generously rounded */
+  --radius-sm:  16px;       /* chips, small tiles */
+  --radius-lg:  40px;       /* phone frames, large surfaces */
+  --pad:        80px;       /* canvas safe-area inset */
+  --stroke:     1.5px;      /* hairline neon edge weight */
+
+  /* --- motion - smooth, premium, breathing. The anti-collage. ------------------ */
+  /* Long expo/quint glides; spring overshoot for cards; blur-in for focus pull.
+     NEVER steps()/choppy - that is the paper-collage signature, not ours. */
+  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out - the default glide */
+  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric, for drifts */
+  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);   /* gentle settle */
+  /* GSAP string eases (used in card timelines) */
+  --gsap-glide:  power4.out;
+  --gsap-expo:   expo.out;
+  --gsap-spring: back.out(1.4);
+  --dur-in:   0.8s;    /* entrances breathe */
+  --dur-out:  0.5s;
+
+  /* --- textures (deterministic) ------------------------------------------- */
+  /* Aurora bloom - blue light rising from the bottom-center. The hero ambience.
+     Compose these as background layers under content; animate opacity/scale. */
+  --bloom-bottom: radial-gradient(120% 85% at 50% 118%,
+                    rgba(var(--accent-rgb), 0.45) 0%,
+                    rgba(var(--accent-rgb), 0.16) 32%,
+                    transparent 62%);
+  --bloom-corner: radial-gradient(90% 90% at 88% 12%,
+                    rgba(var(--accent-rgb), 0.30) 0%,
+                    transparent 55%);
+
+  /* Vignette - pulls the eye to center, deepens the canvas edges. */
+  --vignette: radial-gradient(125% 125% at 50% 45%, transparent 52%, rgba(0,0,0,0.55) 100%);
+
+  /* Faint dot grid (the refs' subtle technical texture). Low contrast. */
+  --dot:      radial-gradient(circle at center, rgba(255,255,255,0.06) 1px, transparent 1.4px);
+  --dot-size: 46px 46px;
+
+  /* Fine film grain over everything - keeps the dark from banding. */
+  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}

package/skills/luckiest-video-studio-cards/packs/_blueprint/DESIGN.md

@@ -0,0 +1,41 @@
+# <Style Name> - Design Spec
+
+> Source of truth: this file and tokens.css.
+
+## Style Prompt
+
+One paragraph describing the look and feel in plain language - what the viewer should perceive, the energy, the relationship to the speaker (takeover vs overlay).
+
+## Colors
+
+- Background: `#______`
+- Foreground / text: `#______`
+- Accent: `#______`
+- (optional secondary): `#______`
+
+2-3 colors max. These must match `tokens.css`.
+
+## Typography
+
+- Display / headline: `Font` - weight, when used
+- Body / supporting: `Font` - weight
+- Mono / label (optional): `Font`
+
+## Motion
+
+- Entrance feel: (snappy / fluid / dramatic) + the GSAP easing signature
+- Exit feel:
+- Ambient: any persistent background motion (drift, pulse, grain)
+- Timing: typical card duration, stagger between sub-elements
+
+## Card kinds in this style
+
+- tier1 takeovers: which purposes (thesis / stat / section / quote / overview)
+- tier2 cards: which purposes (label / list / equation / definition / lower-third)
+- innovations: any custom card kinds unique to this style
+
+## What NOT to do
+
+- (anti-pattern 1 - specific to this style)
+- (anti-pattern 2)
+- (anti-pattern 3)

package/skills/luckiest-video-studio-cards/packs/_blueprint/cards/tier1/t1-stat.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<!--
+  BLUEPRINT CARD · tier1 · stat (full-screen takeover)
+  Demonstrates the card contract. Replace layout/animation to match the style;
+  keep the structure: tokens.css for all colors/fonts/easings, data-slot on every
+  fillable text element, one paused GSAP timeline on window.__timelines.
+  tier1 = OPAQUE full-frame background (it replaces the video).
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/STYLE_ID/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+      #t1-stat {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--bg);                /* opaque: this is a takeover */
+        color: var(--fg);
+        font-family: var(--font-body);
+        display: flex; flex-direction: column;
+        align-items: center; justify-content: center; text-align: center;
+        overflow: hidden;
+      }
+      #t1-stat .kicker {
+        font-family: var(--font-mono); font-size: var(--size-label);
+        letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
+        margin-bottom: 28px;
+      }
+      #t1-stat .stat {
+        font-family: var(--font-display); font-weight: 800;
+        font-size: var(--size-display); line-height: 0.95; color: var(--accent);
+      }
+      #t1-stat .label {
+        font-size: var(--size-headline); font-weight: 500; max-width: 1200px;
+        margin-top: 28px; color: var(--fg);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t1-stat" data-composition-id="t1-stat" data-start="0" data-width="1920" data-height="1080">
+      <div class="kicker" data-slot="kicker">KICKER</div>
+      <div class="stat" data-slot="stat">00%</div>
+      <div class="label" data-slot="label">Supporting label goes here</div>
+    </div>
+
+    <script>
+      // One paused timeline, keyed exactly to data-composition-id.
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      tl.from("#t1-stat .kicker", { autoAlpha: 0, y: 16, duration: 0.45, ease: "power2.out" })
+        .from("#t1-stat .stat", { autoAlpha: 0, scale: 0.92, duration: 0.5, ease: "back.out(1.6)" }, "-=0.15")
+        .from("#t1-stat .label", { autoAlpha: 0, y: 16, duration: 0.45, ease: "power2.out" }, "-=0.25")
+        .set({}, {}, 5.5);          // hold so total duration ~6s; tl.duration() defines card length
+      window.__timelines["t1-stat"] = tl;
+    </script>
+  </body>
+</html>

package/skills/luckiest-video-studio-cards/packs/_blueprint/cards/tier2/t2-list.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<!--
+  BLUEPRINT CARD · tier2 · list (supporting card, speaker stays visible)
+  tier2 = TRANSPARENT everywhere except the card itself (it overlays the video).
+  Never cover the speaker's face - keep the card to one side / lower area.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/STYLE_ID/tokens.css" />
+    <style>
+      html, body { margin: 0; background: transparent; }
+      #t2-list {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: transparent;              /* overlay: do NOT fill the frame */
+        color: var(--fg); font-family: var(--font-body);
+      }
+      #t2-list .card {
+        position: absolute; left: 72px; bottom: 96px; width: 720px;
+        background: rgba(0, 0, 0, 0.55); border: 1px solid var(--accent);
+        border-radius: var(--radius); padding: var(--pad);
+        backdrop-filter: blur(8px);
+      }
+      #t2-list .tag {
+        font-family: var(--font-mono); font-size: var(--size-label);
+        letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
+        margin-bottom: 14px;
+      }
+      #t2-list .headline { font-size: var(--size-headline); font-weight: 700; margin-bottom: 18px; }
+      #t2-list ul { margin: 0; padding: 0; list-style: none; }
+      #t2-list li { font-size: var(--size-body); margin: 10px 0; opacity: 0.95; }
+    </style>
+  </head>
+  <body>
+    <div id="t2-list" data-composition-id="t2-list" data-start="0" data-width="1920" data-height="1080">
+      <div class="card">
+        <div class="tag" data-slot="tag">TAG</div>
+        <div class="headline" data-slot="headline">Headline goes here</div>
+        <ul data-slot="items">
+          <li>First item</li>
+          <li>Second item</li>
+          <li>Third item</li>
+        </ul>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      tl.from("#t2-list .card", { autoAlpha: 0, x: -40, duration: 0.5, ease: "power3.out" })
+        .from("#t2-list .tag", { autoAlpha: 0, y: 10, duration: 0.3 }, "-=0.2")
+        .from("#t2-list .headline", { autoAlpha: 0, y: 12, duration: 0.35 }, "-=0.15")
+        .from("#t2-list li", { autoAlpha: 0, y: 12, duration: 0.3, stagger: 0.12 }, "-=0.1")
+        .set({}, {}, 12);           // hold ~12s
+      window.__timelines["t2-list"] = tl;
+    </script>
+  </body>
+</html>

package/skills/luckiest-video-studio-cards/packs/_blueprint/style.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "../registry.schema.json",
+  "id": "STYLE_ID",
+  "name": "Human Readable Style Name",
+  "number": "NN",
+  "status": "draft",
+  "inspiration": "What creator / look this is based on (e.g. paper collage). Describe the look in DESIGN.md.",
+  "summary": "One-line description of the feeling and when to use this style.",
+  "palette": {
+    "bg": "#000000",
+    "fg": "#ffffff",
+    "accent": "#000000",
+    "notes": "2-3 colors max. Mirror these into tokens.css."
+  },
+  "fonts": {
+    "display": "FontName",
+    "body": "FontName",
+    "mono": "FontName"
+  },
+  "brandMap": {
+    "--bg": "paper",
+    "--fg": "ink",
+    "--accent": "accent",
+    "--muted": "muted",
+    "--font-display": "font:display",
+    "--font-body": "font:text",
+    "--font-mono": "font:mono"
+  },
+  "motion": "Snappy | fluid | dramatic - the easing signature (mirror into tokens.css --ease-*).",
+  "transitions": "Which entrance/exit feel matches this style.",
+  "cards": [
+    {
+      "id": "STYLE_ID.t1.stat",
+      "tier": "tier1",
+      "purpose": "stat",
+      "file": "cards/tier1/t1-stat.html",
+      "slots": [
+        {
+          "name": "kicker",
+          "type": "text",
+          "maxChars": 30
+        },
+        {
+          "name": "stat",
+          "type": "text",
+          "maxChars": 8
+        },
+        {
+          "name": "label",
+          "type": "text",
+          "maxChars": 48
+        }
+      ],
+      "duration": {
+        "min": 5,
+        "max": 8
+      }
+    },
+    {
+      "id": "STYLE_ID.t2.list",
+      "tier": "tier2",
+      "purpose": "list",
+      "file": "cards/tier2/t2-list.html",
+      "slots": [
+        {
+          "name": "tag",
+          "type": "text",
+          "maxChars": 24
+        },
+        {
+          "name": "headline",
+          "type": "text",
+          "maxChars": 48
+        },
+        {
+          "name": "items",
+          "type": "list",
+          "maxItems": 4,
+          "maxChars": 40
+        }
+      ],
+      "duration": {
+        "min": 12,
+        "max": 30
+      }
+    }
+  ]
+}

package/skills/luckiest-video-studio-cards/packs/_blueprint/tokens.css

@@ -0,0 +1,32 @@
+/* Style tokens - the single source of palette / type / motion for THIS style.
+   Every card in this style references these variables; cards never hardcode
+   colors, font names, or easings. Tweak a value here and all cards update. */
+
+:root {
+  /* palette (mirror style.json + DESIGN.md) */
+  --bg: #000000;
+  --fg: #ffffff;
+  --accent: #000000;
+  --muted: rgba(255, 255, 255, 0.62);
+
+  /* typography */
+  --font-display: "FontName", system-ui, sans-serif;
+  --font-body: "FontName", system-ui, sans-serif;
+  --font-mono: "FontName", ui-monospace, monospace;
+
+  --size-display: 96px;
+  --size-headline: 48px;
+  --size-body: 28px;
+  --size-label: 20px;
+
+  /* motion - easings as the style's signature (used in GSAP and CSS) */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
+  --dur-in: 0.45s;
+  --dur-out: 0.35s;
+
+  /* spacing / shape */
+  --radius: 16px;
+  --pad: 48px;
+}