@caoscompanybr/merlin 3.5.0

package/.merlin-core/skills/general/blkskrn/references/slide-types.md

@@ -0,0 +1,424 @@
+# Slide Types — Production-Quality HTML Examples
+
+Ready-to-use HTML templates for each slide type. Every example includes:
+
+- Ambient background effects (orbs, grid, or title-bg)
+- Staggered entrance animations on ALL content
+- Full screen usage (flex:1 fills the viewport)
+- Counter animations for numbers
+- Animated brand line
+
+All slides use the design system from `design-system.md`. Copy the base CSS
+from `slide-base.html` template, then add the slide-specific content below.
+
+---
+
+## 1. Title Slide
+
+The opening slide with logo spin, hero title, ambient orbs, and badge pops.
+
+```html
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="title-bg"></div>
+  <div class="orb orb-crystal" style="top:-100px;right:-80px;"></div>
+  <div
+    class="orb orb-violet"
+    style="bottom:-60px;left:-40px;animation-delay:0.5s;"
+  ></div>
+  <div class="slide-pad center" style="position:relative;z-index:1;">
+    <div
+      class="logo-mark"
+      style="opacity:0;animation:logoSpin 0.8s var(--ease-bounce) 0.8s forwards;margin-bottom:24px;"
+    >
+      M
+    </div>
+    <h1
+      class="hero-title text-gradient slide-up"
+      style="animation-delay:1.4s;margin-bottom:12px;"
+    >
+      Project Name
+    </h1>
+    <p
+      class="hero-sub slide-up"
+      style="animation-delay:1.8s;margin-bottom:32px;"
+    >
+      One-line project tagline goes here
+    </p>
+    <div style="display:flex;gap:12px;">
+      <span class="badge badge-crystal scale-pop" style="animation-delay:2.6s;"
+        >v3.0.0</span
+      >
+      <span class="badge badge-violet scale-pop" style="animation-delay:2.8s;"
+        >TypeScript</span
+      >
+    </div>
+  </div>
+  <span class="slide-num">01 / 08</span>
+</div>
+```
+
+**Key patterns:** `logoSpin` for logo, `slide-up` with increasing delays for text cascade, `scale-pop` for badges, `title-bg` + orbs for ambient depth.
+
+---
+
+## 2. Feature Grid Slide
+
+Cards showcasing features in a 2×2 grid with staggered card entrances, ambient grid, and orbs.
+
+```html
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="grid-bg"></div>
+  <div class="orb orb-crystal" style="top:-60px;right:-40px;"></div>
+  <div
+    class="orb orb-violet"
+    style="bottom:-80px;left:20%;animation-delay:0.6s;"
+  ></div>
+  <div class="slide-pad" style="position:relative;z-index:1;">
+    <span class="section-label slide-up" style="animation-delay:0.3s;"
+      >CORE CAPABILITIES</span
+    >
+    <h2 class="slide-title slide-up" style="animation-delay:0.4s;">
+      Key Features
+    </h2>
+    <p class="slide-subtitle slide-up" style="animation-delay:0.5s;">
+      What makes this project powerful
+    </p>
+    <div class="grid-2 slide-up-stagger" style="flex:1;align-content:center;">
+      <div class="feat-card">
+        <div style="font-size:24px;margin-bottom:8px;">⚡</div>
+        <div class="card-title">Feature One</div>
+        <div class="card-body">
+          Description of the first feature and its benefits.
+        </div>
+      </div>
+      <div class="feat-card">
+        <div style="font-size:24px;margin-bottom:8px;">🔒</div>
+        <div class="card-title">Feature Two</div>
+        <div class="card-body">Description of the second feature.</div>
+      </div>
+      <div class="feat-card">
+        <div style="font-size:24px;margin-bottom:8px;">📊</div>
+        <div class="card-title">Feature Three</div>
+        <div class="card-body">Description of the third feature.</div>
+      </div>
+      <div class="feat-card">
+        <div style="font-size:24px;margin-bottom:8px;">🚀</div>
+        <div class="card-title">Feature Four</div>
+        <div class="card-body">Description of the fourth feature.</div>
+      </div>
+    </div>
+  </div>
+  <span class="slide-num">02 / 08</span>
+</div>
+```
+
+**Key patterns:** `slide-up` on headings with explicit delays, `slide-up-stagger` on grid parent auto-staggers children (0.6s, 0.65s, 0.7s, 0.75s), `grid-bg` + orbs for depth, `flex:1;align-content:center` fills screen.
+
+---
+
+## 3. Architecture Slide
+
+Split layout with animated layers on the left and counter stats on the right.
+
+```html
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="grid-bg"></div>
+  <div
+    class="orb orb-emerald"
+    style="top:40%;right:-60px;animation-delay:0.3s;"
+  ></div>
+  <div class="slide-pad" style="position:relative;z-index:1;">
+    <span class="section-label slide-up" style="animation-delay:0.3s;"
+      >SYSTEM DESIGN</span
+    >
+    <h2 class="slide-title slide-up" style="animation-delay:0.4s;">
+      Architecture Overview
+    </h2>
+    <div class="split" style="flex:1;margin-top:24px;">
+      <!-- Left: Layers -->
+      <div
+        class="slide-up-stagger"
+        style="display:flex;flex-direction:column;gap:12px;"
+      >
+        <div
+          class="feat-card-accent"
+          style="border-left:3px solid var(--mc-accent);"
+        >
+          <div class="card-title">Layer 1 — API Gateway</div>
+          <div class="card-body">Routes, auth middleware, rate limiting</div>
+        </div>
+        <div
+          class="feat-card-accent"
+          style="border-left:3px solid var(--mc-info);"
+        >
+          <div class="card-title">Layer 2 — Business Logic</div>
+          <div class="card-body">Services, validators, transformers</div>
+        </div>
+        <div
+          class="feat-card-accent"
+          style="border-left:3px solid var(--mc-success);"
+        >
+          <div class="card-title">Layer 3 — Data Access</div>
+          <div class="card-body">Repositories, ORM, cache layer</div>
+        </div>
+      </div>
+      <!-- Right: Stats with counters -->
+      <div
+        class="slide-up-stagger"
+        style="display:flex;flex-direction:column;gap:16px;"
+      >
+        <div class="stat-card">
+          <div class="stat-value" id="s1">0</div>
+          <div class="stat-label">API Endpoints</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" id="s2">0</div>
+          <div class="stat-label">Services</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" id="s3">0</div>
+          <div class="stat-label">Models</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span class="slide-num">03 / 08</span>
+</div>
+<script>
+  animateCounter("s1", 42, 1000);
+  animateCounter("s2", 15, 1200);
+  animateCounter("s3", 8, 1400);
+</script>
+```
+
+**Key patterns:** `split` for two-column layout, `slide-up-stagger` on each column independently, `animateCounter` for stats, `grid-bg` + emerald orb for ambient.
+
+---
+
+## 4. Stats/Numbers Slide
+
+Grid of metric cards with animated counters, ambient orbs, and staggered entrances.
+
+```html
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="grid-bg"></div>
+  <div class="orb orb-crystal" style="top:-80px;left:30%;"></div>
+  <div
+    class="orb orb-violet"
+    style="bottom:-60px;right:20%;animation-delay:0.4s;"
+  ></div>
+  <div class="slide-pad" style="position:relative;z-index:1;">
+    <span class="section-label slide-up" style="animation-delay:0.3s;"
+      >BY THE NUMBERS</span
+    >
+    <h2 class="slide-title slide-up" style="animation-delay:0.4s;">
+      Project at a Glance
+    </h2>
+    <p class="slide-subtitle slide-up" style="animation-delay:0.5s;">
+      Key metrics from the codebase
+    </p>
+    <div class="grid-4 slide-up-stagger" style="flex:1;align-content:center;">
+      <div class="stat-card">
+        <div class="stat-value" id="m1">0</div>
+        <div class="stat-label">Files</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="m2">0</div>
+        <div class="stat-label">Modules</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="m3">0</div>
+        <div class="stat-label">Tests</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="m4">0</div>
+        <div class="stat-label">Commands</div>
+      </div>
+    </div>
+  </div>
+  <span class="slide-num">04 / 08</span>
+</div>
+<script>
+  animateCounter("m1", 156, 800);
+  animateCounter("m2", 24, 1000);
+  animateCounter("m3", 89, 1200);
+  animateCounter("m4", 18, 1400);
+</script>
+```
+
+**Key patterns:** `slide-up-stagger` on grid parent, `animateCounter` for every stat, `flex:1;align-content:center` centers the grid vertically in full screen, dual orbs for depth.
+
+---
+
+## 5. Timeline / Process Slide
+
+Horizontal flow with numbered phases, staggered entrances, and progress bar.
+
+```html
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="grid-bg"></div>
+  <div class="orb orb-crystal" style="bottom:-80px;left:40%;"></div>
+  <div class="slide-pad" style="position:relative;z-index:1;">
+    <span class="section-label slide-up" style="animation-delay:0.3s;"
+      >DEVELOPMENT FLOW</span
+    >
+    <h2 class="slide-title slide-up" style="animation-delay:0.4s;">
+      How It Works
+    </h2>
+    <div
+      class="slide-up-stagger"
+      style="flex:1;display:flex;align-items:center;"
+    >
+      <div style="display:flex;gap:24px;width:100%;">
+        <div class="feat-card" style="flex:1;text-align:center;">
+          <div
+            style="width:40px;height:40px;border-radius:50%;background:var(--mc-accent);color:#06080f;display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px;"
+          >
+            1
+          </div>
+          <div class="card-title">Research</div>
+          <div class="card-body">Deep codebase analysis</div>
+        </div>
+        <div
+          style="display:flex;align-items:center;color:var(--mc-text-muted);font-size:20px;"
+        >
+          →
+        </div>
+        <div class="feat-card" style="flex:1;text-align:center;">
+          <div
+            style="width:40px;height:40px;border-radius:50%;background:var(--mc-info);color:#06080f;display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px;"
+          >
+            2
+          </div>
+          <div class="card-title">Plan</div>
+          <div class="card-body">Spec-driven design</div>
+        </div>
+        <div
+          style="display:flex;align-items:center;color:var(--mc-text-muted);font-size:20px;"
+        >
+          →
+        </div>
+        <div class="feat-card" style="flex:1;text-align:center;">
+          <div
+            style="width:40px;height:40px;border-radius:50%;background:var(--mc-success);color:#06080f;display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px;"
+          >
+            3
+          </div>
+          <div class="card-title">Build</div>
+          <div class="card-body">Implementation + tests</div>
+        </div>
+        <div
+          style="display:flex;align-items:center;color:var(--mc-text-muted);font-size:20px;"
+        >
+          →
+        </div>
+        <div class="feat-card" style="flex:1;text-align:center;">
+          <div
+            style="width:40px;height:40px;border-radius:50%;background:var(--mc-warning);color:#06080f;display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px;"
+          >
+            4
+          </div>
+          <div class="card-title">Ship</div>
+          <div class="card-body">Deploy + verify</div>
+        </div>
+      </div>
+    </div>
+    <!-- Progress bar -->
+    <div
+      style="height:4px;border-radius:2px;background:var(--mc-bg-elevated);margin-top:16px;overflow:hidden;"
+    >
+      <div
+        class="grow-bar"
+        style="height:100%;border-radius:2px;background:linear-gradient(90deg,var(--mc-accent),var(--mc-info),var(--mc-success),var(--mc-warning));animation-delay:1.5s;"
+      ></div>
+    </div>
+  </div>
+  <span class="slide-num">05 / 08</span>
+</div>
+```
+
+**Key patterns:** `slide-up-stagger` wraps the flex row so cards + arrows stagger in together, `grow-bar` animates the progress bar after cards appear, color-coded step circles match the gradient bar.
+
+---
+
+## 6. Closing Slide
+
+Summary with animated logo, pillar cards, orbs, and footer.
+
+```html
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="title-bg"></div>
+  <div class="orb orb-crystal" style="top:-60px;left:60%;"></div>
+  <div
+    class="orb orb-violet"
+    style="bottom:10%;right:-40px;animation-delay:0.5s;"
+  ></div>
+  <div class="slide-pad center" style="position:relative;z-index:1;">
+    <div
+      class="logo-mark"
+      style="width:56px;height:56px;font-size:28px;border-radius:12px;margin-bottom:20px;opacity:0;animation:logoSpin 0.8s var(--ease-bounce) 0.8s forwards;"
+    >
+      M
+    </div>
+    <h2
+      class="hero-title text-gradient slide-up"
+      style="font-size:40px;margin-bottom:16px;animation-delay:1.4s;"
+    >
+      Ready to Ship
+    </h2>
+    <p
+      class="slide-subtitle slide-up"
+      style="margin-bottom:40px;max-width:600px;text-align:center;animation-delay:1.6s;"
+    >
+      Summary statement about the project's value and next steps.
+    </p>
+    <div class="grid-3 slide-up-stagger" style="max-width:800px;width:100%;">
+      <div class="feat-card-accent" style="text-align:center;">
+        <div class="card-title" style="color:var(--mc-accent);">Reliable</div>
+        <div class="card-body">Quality gates at every stage</div>
+      </div>
+      <div
+        class="feat-card-accent"
+        style="text-align:center;border-top-color:var(--mc-info);"
+      >
+        <div class="card-title" style="color:var(--mc-info);">Scalable</div>
+        <div class="card-body">Built for growth</div>
+      </div>
+      <div
+        class="feat-card-accent"
+        style="text-align:center;border-top-color:var(--mc-success);"
+      >
+        <div class="card-title" style="color:var(--mc-success);">Fast</div>
+        <div class="card-body">Optimized for performance</div>
+      </div>
+    </div>
+  </div>
+  <span class="slide-footer fade-in" style="animation-delay:2.0s;"
+    >© 2026 &lt;your-company&gt; · Merlin AI Framework</span
+  >
+  <span class="slide-num">08 / 08</span>
+</div>
+```
+
+**Key patterns:** `logoSpin` for logo, `slide-up` for text cascade, `slide-up-stagger` for pillar cards, `title-bg` + orbs for ambient depth, `fade-in` on footer.
+
+---
+
+## Quick Reference: Animation Checklist
+
+Before submitting any slide, verify:
+
+- [ ] Brand line present (auto-animated via `sweep-in`)
+- [ ] Ambient layer present (`grid-bg`, `title-bg`, or orbs)
+- [ ] At least 2 orbs with different colors and staggered delays
+- [ ] Section label, title, subtitle use `slide-up` with 0.3s/0.4s/0.5s delays
+- [ ] Card grids wrapped in `slide-up-stagger`
+- [ ] Stat numbers use `animateCounter()`, never static
+- [ ] Content fills viewport (`flex:1`, `align-content:center`)
+- [ ] `slide-pad` has `position:relative;z-index:1` (above ambient layers)