@hypersocial/decks-cli 0.2.0 → 0.2.2

package/templates/layouts/product.html

@@ -0,0 +1,57 @@
+<!--
+layout: product
+summary: A product screenshot in a browser frame (or .frame.phone for a phone shot), the point in the column beside it.
+use: a demo moment. Fill .shot with `hyperdecks screenshot <url>` output; a callout chip names what to look at.
+slot: bottom-right
+presenter: stage
+cues: [look: #__ID__-frame] when the narration turns to the product; [reveal: #__ID__-callout] for the detail.
+script: This is the product. [look: #__ID__-frame] Look at this part. [reveal: #__ID__-callout]
+-->
+<style>
+  .l-product { display: grid; grid-template-columns: 960px 1fr; grid-template-areas: "frame text"; column-gap: 56px; align-items: center; }
+  .l-product .text { grid-area: text; align-self: start; display: flex; flex-direction: column; gap: 20px; }
+  .l-product .tt { font-size: var(--t-sub); line-height: 1.02; }
+  .l-product .lead { font-size: var(--t-body); }
+  .l-product .frame { grid-area: frame; position: relative; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 30px 70px color-mix(in srgb, var(--ink) 18%, transparent); }
+  .l-product .bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
+  .l-product .bar i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); }
+  .l-product .bar span { margin-left: 14px; flex: 1; max-width: 420px; padding: 5px 14px; border-radius: 999px; background: var(--card); font: 14px var(--mono); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  /* Swap the div for an <img class="shot"> of your file (a 16:10 screenshot). */
+  /* The shot keeps its own aspect ratio: cover-cropping a screenshot cuts its edges. */
+  .l-product img.shot { display: block; width: 100%; height: auto; }
+  .l-product div.shot { display: block; width: 100%; aspect-ratio: 16 / 10; }
+  .l-product div.shot { background:
+      linear-gradient(var(--accent) 0 0) 248px 40px / 320px 26px no-repeat,
+      linear-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 0 0) 248px 92px / 640px 14px no-repeat,
+      linear-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 0 0) 248px 120px / 520px 14px no-repeat,
+      linear-gradient(var(--accent-2) 0 0) 248px 176px / 300px 300px no-repeat,
+      linear-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 0 0) 580px 176px / 308px 300px no-repeat,
+      linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0 0) 0 0 / 210px 100% no-repeat; }
+  .l-product .frame.phone { width: 300px; justify-self: center; border-radius: 40px; padding: 12px; background: var(--ink); }
+  .l-product .frame.phone .bar { display: none; }
+  .l-product .frame.phone .shot { aspect-ratio: 9 / 19.5; border-radius: 28px; }
+  .l-product .callout { position: absolute; left: 28px; bottom: 28px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 22px; }
+  @media (max-width: 650px) {
+    .l-product { display: flex; flex-direction: column; align-items: stretch; }
+    .l-product .text { gap: 10px; }
+    .l-product .frame { border-radius: 12px; }
+    .l-product .bar { height: 26px; padding: 0 10px; gap: 5px; }
+    .l-product .bar i { width: 7px; height: 7px; }
+    .l-product .bar span { font-size: 9px; padding: 2px 8px; margin-left: 6px; }
+    .l-product div.shot { background-size: 30% 6%, 60% 2%, 50% 2%, 28% 40%, 28% 40%, 20% 100%; background-position: 26% 8%, 40% 18%, 36% 23%, 26% 70%, 62% 70%, 0 0; }
+    .l-product .callout { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 12px; }
+  }
+</style>
+<section class="slide l-product" id="__ID__" data-chapter="The product" data-note="Screenshot: name the page and the date it was captured.">
+  <div class="text">
+    <div class="kicker">The product</div>
+    <h2 class="tt" data-title-mobile="Here it is.">Here it is, doing the job.</h2>
+    <p class="lead">One line on what the screenshot shows.</p>
+  </div>
+  <div class="frame" id="__ID__-frame">
+    <div class="bar"><i></i><i></i><i></i><span>app.example.com</span></div>
+    <div class="shot" role="img" aria-label="Product screenshot placeholder"></div>
+    <div class="callout reveal" id="__ID__-callout">The part to look at</div>
+  </div>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/quote.html

@@ -0,0 +1,31 @@
+<!--
+layout: quote
+summary: One quote, large, with who said it. The quote is the title.
+use: a customer or user in their own words. Quote them exactly and name the source in data-note.
+slot: bottom-left
+presenter: stage
+cues: [look: #__ID__-quote] as the narration reads it.
+script: In their words. [look: #__ID__-quote] Here is what they told us.
+-->
+<style>
+  .l-quote .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-left: 500px; }
+  .l-quote .quote { font-size: 76px; line-height: 1.02; letter-spacing: -.035em; text-indent: -.42em; }
+  .l-quote figcaption { display: flex; align-items: center; gap: 18px; }
+  /* Swap the span for an <img class="avatar"> of your file with their permission. */
+  .l-quote .avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--ink); color: var(--accent); font: 700 26px var(--font); }
+  .l-quote figcaption b { display: block; font-size: var(--t-body); }
+  .l-quote figcaption small { font: var(--t-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
+  @media (max-width: 650px) {
+    .l-quote .content { padding-left: 0; justify-content: flex-start; gap: 18px; }
+    .l-quote .quote { font-size: 32px; }
+    .l-quote .avatar { width: 44px; height: 44px; font-size: 16px; }
+  }
+</style>
+<section class="slide on-accent l-quote slot-left" id="__ID__" data-chapter="In their words" data-note="Quote: name who said it, where (email, call, review) and when.">
+  <figure class="content">
+    <div class="kicker">In their words</div>
+    <h2 class="tt quote" id="__ID__-quote" data-title-mobile="“It explained itself.”">“The deck explained itself before I got on the call.”</h2>
+    <figcaption><span class="avatar">AD</span><span><b>Their name</b><small>Role, company</small></span></figcaption>
+  </figure>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/team.html

@@ -0,0 +1,37 @@
+<!--
+layout: team
+summary: Up to four people, a face, a name and a role each; the presenter flies under each as it names them.
+use: who is behind it, who to talk to. Use real photos only with permission; initials otherwise.
+slot: bottom-right
+presenter: stage
+cues: [go: #__ID__-p1] … [go: #__ID__-p4] at each name, then [go: slot].
+script: Meet the team. [go: #__ID__-p1] Ana builds it. [go: #__ID__-p2] Sam sells it. [go: #__ID__-p3] Lee runs it. [go: #__ID__-p4] Kai designs it. [go: slot]
+-->
+<style>
+  .l-team .people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 20px; }
+  .l-team .person { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 26px; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
+  /* Swap the span for an <img class="face"> of your file with their permission. */
+  .l-team .face { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; background: var(--accent); font: 700 34px var(--font); }
+  .l-team .person:nth-child(2) .face { background: var(--accent-2); }
+  .l-team .person:nth-child(3) .face { background: var(--ink); color: var(--paper); }
+  .l-team b { font-size: 30px; letter-spacing: -.02em; }
+  .l-team small { font: var(--t-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
+  @media (max-width: 650px) {
+    .l-team .people { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
+    .l-team .person { padding: 12px; border-radius: 16px; gap: 2px; }
+    .l-team .face { width: 48px; height: 48px; font-size: 17px; margin-bottom: 4px; }
+    .l-team b { font-size: 16px; }
+    .l-team small { font-size: 10px; }
+  }
+</style>
+<section class="slide l-team" id="__ID__" data-chapter="The team" data-note="People: names and roles as they gave them; photos only with their permission.">
+  <div class="kicker">The team</div>
+  <h2 class="tt" data-title-mobile="The team.">Who is behind it.</h2>
+  <ul class="people">
+    <li class="person" id="__ID__-p1"><span class="face">AN</span><b>Ana</b><small>Builds it</small></li>
+    <li class="person" id="__ID__-p2"><span class="face">SA</span><b>Sam</b><small>Sells it</small></li>
+    <li class="person" id="__ID__-p3"><span class="face">LE</span><b>Lee</b><small>Runs it</small></li>
+    <li class="person" id="__ID__-p4"><span class="face">KA</span><b>Kai</b><small>Designs it</small></li>
+  </ul>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/timeline.html

@@ -0,0 +1,39 @@
+<!--
+layout: timeline
+summary: Four milestones on a line, left to right, the presenter flying under each in turn.
+use: history, a roadmap, a process over time. Label future steps "Proposed" if not agreed.
+slot: bottom-right
+presenter: stage
+cues: [go: #__ID__-m1] … [go: #__ID__-m4] at the word that starts each milestone, then [go: slot].
+script: It started [go: #__ID__-m1] with a sketch. Then [go: #__ID__-m2] a first user. Then [go: #__ID__-m3] a launch. Next, [go: #__ID__-m4] the plan. [go: slot]
+-->
+<style>
+  .l-timeline .line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; position: relative; }
+  .l-timeline .line::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
+  .l-timeline li { list-style: none; position: relative; padding: 48px 26px 26px; border-radius: 24px; }
+  .l-timeline li::before { content: ""; position: absolute; left: 26px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
+  .l-timeline li.is-next::before { background: var(--paper); box-shadow: inset 0 0 0 4px var(--ink), 0 0 0 6px var(--paper); }
+  .l-timeline time { display: block; font: 700 var(--t-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
+  .l-timeline b { display: block; font-size: 32px; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; }
+  .l-timeline p { font-size: 20px; line-height: 1.3; opacity: .7; }
+  @media (max-width: 650px) {
+    .l-timeline .line { grid-template-columns: 1fr; gap: 4px; margin-top: 4px; padding-left: 26px; }
+    .l-timeline .line::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
+    .l-timeline li { padding: 4px 0 8px 8px; border-radius: 0; }
+    .l-timeline li::before { left: -26px; top: 6px; width: 15px; height: 15px; box-shadow: 0 0 0 4px var(--paper); }
+    .l-timeline time { margin-bottom: 2px; }
+    .l-timeline b { font-size: 18px; margin-bottom: 2px; }
+    .l-timeline p { font-size: 13px; }
+  }
+</style>
+<section class="slide l-timeline" id="__ID__" data-chapter="How we got here" data-note="Source: name where each date comes from.">
+  <div class="kicker">How we got here</div>
+  <h2 class="tt" data-title-mobile="How we got here.">Four steps, so far.</h2>
+  <ol class="line">
+    <li id="__ID__-m1"><time>Jan</time><b>A sketch</b><p>The first version, on paper.</p></li>
+    <li id="__ID__-m2"><time>Apr</time><b>A first user</b><p>Someone used it for real.</p></li>
+    <li id="__ID__-m3"><time>Sep</time><b>Launch</b><p>Open to everyone.</p></li>
+    <li id="__ID__-m4" class="is-next"><time>Next</time><b>Proposed</b><p>Not agreed yet.</p></li>
+  </ol>
+  <div class="narration-slot"></div>
+</section>

package/templates/narrated-deck.html

@@ -4,29 +4,71 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>__TITLE__</title>
+<!-- Loading state (keep verbatim; `hyperdecks check` requires it). Until the
+     player marks body[data-hd-ready] the page shows only the slide card, at its
+     final size, in the deck's --hd-ground (its first slide's colour) on the
+     page's brand colour, with a quiet loader in --hd-ground-ink; then the
+     slides fade in. If the player never arrives, the slides show after 10 s
+     rather than never. Put data-layout="overlay" on <html> for the overlay. -->
+<link rel="modulepreload" href="https://decks.hypersocial.ai/player/v1/player.js">
+<link rel="preload" as="style" href="https://decks.hypersocial.ai/player/v1/player.css">
+<script>if (self !== top || /[?&]thumb\b/.test(location.search)) document.documentElement.dataset.hdFrame = "";</script>
+<style data-hd-loading>
+  body:not([data-hd-ready]) { overflow: hidden; background: var(--hd-frame, var(--hd-ground, var(--hd-accent, #ffda1b))); animation: hd-fail-open 0s 10s forwards; }
+  body:not([data-hd-ready]) > * { visibility: hidden; animation: hd-fail-open 0s 10s forwards; }
+  body[data-hd-ready] > * { animation: hd-in .2s ease-out; }
+  body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; transition: opacity .2s ease-out; }
+  /* The card as the player draws it (player.css, framed): 16:9, scaled to fit
+     between the 64px masthead and the 56px dock, 24px in from the sides. */
+  body::before { inset: 64px 24px 56px; margin: auto; width: min(100vw - 48px, (100dvh - 120px) * 16 / 9); height: min(100dvh - 120px, (100vw - 48px) * 9 / 16); border-radius: calc(min(100vw - 48px, (100dvh - 120px) * 16 / 9) * .01125); background: var(--hd-ground, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hd-ground-ink, #0b0b0f) 16%, transparent); }
+  body::after { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--hd-ground-ink, #0b0b0f); background: currentColor; box-shadow: -24px 0 currentColor, 24px 0 currentColor; opacity: 0; animation: hd-dots .7s ease-in-out .6s infinite alternate; }
+  body[data-hd-ready]::before, body[data-hd-ready]::after { opacity: 0; animation: none; }
+  /* The overlay (embedded, ?thumb, or data-layout="overlay"): the stage fills the window. */
+  :is([data-hd-frame], [data-layout="overlay"]) body::before { inset: 0; width: min(100vw, 100dvh * 16 / 9); height: min(100dvh, 100vw * 9 / 16); border-radius: calc(min(100vw, 100dvh * 16 / 9) * .01125); box-shadow: none; }
+  [data-layout="overlay"] body:not([data-hd-ready]) { background: var(--hd-backdrop, #16161c); }
+  [data-hd-frame] body:not([data-hd-ready]) { background: transparent; }
+  [data-hd-frame] body::before { border-radius: 0; }
+  /* Phones: the card fills the space between a 52px masthead and the dock, 8px in. */
+  @media (max-width: 650px) {
+    body::before { inset: 52px 8px calc(56px + env(safe-area-inset-bottom)); width: auto; height: auto; border-radius: 14px; }
+    :is([data-hd-frame], [data-layout="overlay"]) body::before { inset: 0; width: auto; height: auto; border-radius: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    body::before, body::after { transition: none; }
+    body:not([data-hd-ready])::after { animation: none; opacity: .4; }
+    body[data-hd-ready] > * { animation: none; }
+  }
+  @keyframes hd-in { from { opacity: 0; } }
+  @keyframes hd-dots { from { opacity: .15; } to { opacity: .6; } }
+  @keyframes hd-fail-open { to { visibility: visible; overflow: auto; } }
+</style>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&display=swap">
 <style>
   /* A narrated deck: slides only. The hosted player (player/v1) scales the
      stage, draws the chrome and the presenter, and plays the narration. */
-  :root { --ink: #0b0b0f; --paper: #fafaf7; --accent: #ffda1b; --font: "Space Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace; }
+  :root { --ink: #0b0b0f; --paper: #fafaf7; --accent: #ffda1b; --font: "Space Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace;
+    --hd-ground: var(--accent); --hd-ground-ink: var(--ink); /* the loading state: the first slide's colours */ }
   body { color: var(--ink); font-family: var(--font); --hd-font: var(--font); --hd-mono: var(--mono); }
   .slide { display: flex; flex-direction: column; gap: 28px; padding: 64px 72px 56px; background: var(--paper); }
   .slide.accent { background: var(--accent); }
   .kicker { font: 18px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
   .tt { font-size: 104px; line-height: .95; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
   .lead { font-size: 32px; line-height: 1.3; max-width: 30em; margin: 0; }
-  .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-right: 320px; }
-  /* The presenter (face + caption bubble) moves into each slide's slot. */
+  .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-right: 500px; }
+  /* The presenter glides to each slide's slot; slots alternate sides so the
+     move shows. A .slot-left slide keeps its text clear of the left side. */
   .narration-slot { position: absolute; right: 56px; bottom: 72px; }
+  .slot-left .narration-slot { right: auto; left: 56px; }
+  .slot-left .content { padding-right: 0; padding-left: 500px; }
   .reveal { opacity: 0; transition: opacity .4s; }
   .reveal.is-revealed { opacity: 1; }
   @media (max-width: 650px) {
     .slide { padding: 40px 20px 150px; }
     .tt { font-size: 40px; }
     .lead { font-size: 18px; }
-    .content { padding-right: 0; justify-content: flex-start; }
+    .content, .slot-left .content { padding: 0; justify-content: flex-start; }
     .narration-slot { right: 12px; left: 12px; bottom: 72px; }
   }
 </style>
@@ -39,7 +81,9 @@
                         `hyperdecks check` fails a slide without one.
      data-intro:        the bubble's text before the narration plays.
      data-title-mobile: shorter text below 650px; check requires it on any title
-                        over 28 characters. Every slide here carries one. -->
+                        over 28 characters. Every slide here carries one.
+     data-presenter-style: this slide's presenter (stage, bubble, glass, corner),
+                        overriding the deck's on the player tag below. -->
 <section class="slide accent" id="hello" data-chapter="Hello" data-intro="Hi! Press play." data-note="Title slide: no facts.">
   <div class="content">
     <div class="kicker">__SLUG__</div>
@@ -48,7 +92,7 @@
   <div class="narration-slot"></div>
 </section>
 
-<section class="slide" id="problem" data-chapter="Problem" data-note="Source: name the document, email or thread the problem comes from.">
+<section class="slide slot-left" id="problem" data-chapter="Problem" data-note="Source: name the document, email or thread the problem comes from.">
   <div class="content">
     <div class="kicker">The problem</div>
     <h2 class="tt" data-title-mobile="The problem.">The problem, in one line.</h2>
@@ -66,7 +110,7 @@
   <div class="narration-slot"></div>
 </section>
 
-<section class="slide" id="idea" data-chapter="The idea" data-note="Source: name the doc or conversation the idea is drawn from.">
+<section class="slide slot-left" id="idea" data-chapter="The idea" data-note="Source: name the doc or conversation the idea is drawn from.">
   <div class="content">
     <div class="kicker">The idea</div>
     <h2 class="tt" data-title-mobile="The idea.">One idea per slide.</h2>
@@ -84,7 +128,7 @@
   <div class="narration-slot"></div>
 </section>
 
-<section class="slide" id="proof" data-chapter="Proof" data-note="Source: name the metric's dashboard, report or email, with its date.">
+<section class="slide slot-left" id="proof" data-chapter="Proof" data-note="Source: name the metric's dashboard, report or email, with its date.">
   <div class="content">
     <div class="kicker">Proof</div>
     <h2 class="tt" data-title-mobile="The proof.">The evidence so far.</h2>
@@ -102,7 +146,7 @@
   <div class="narration-slot"></div>
 </section>
 
-<section class="slide" id="bye" data-chapter="Bye" data-note="Closing slide: no facts.">
+<section class="slide slot-left" id="bye" data-chapter="Bye" data-note="Closing slide: no facts.">
   <div class="content">
     <h2 class="tt" data-title-mobile="Thanks.">Thanks for watching.</h2>
   </div>
@@ -111,9 +155,11 @@
 
 <!-- `hyperdecks narrate decks/__SLUG__` fills data-manifest with the manifest
      URL it writes. data-presenter: head (live Minimoji, needs
-     data-avatar), static (data-presenter-image) or none (captions only). -->
+     data-avatar), static (data-presenter-image) or none (captions only).
+     data-presenter-style: stage (large head, lower-third captions), bubble,
+     glass (frosted panel) or corner (small head, subtitles). -->
 <script type="module" src="https://decks.hypersocial.ai/player/v1/player.js"
-        data-manifest="" data-stage="1600x900" data-presenter="none"></script>
+        data-manifest="" data-stage="1600x900" data-presenter="none" data-presenter-style="__PRESENTER_STYLE__"></script>
 <!-- Slide controllers for anything the built-in cues don't cover:
 <script type="module">
   window.hyperdecks.register("point", {

package/templates/script.md

@@ -9,7 +9,10 @@ One `## <slide-id>` block per slide, in slide order; the id is the slide's
 phrase (4 to 85 characters, two lines in the bubble). Aim for 150 to 180 s in
 all. Holds: 1.1 s by default, `hold: 2` on interactive slides. Stage tags become
 cues at the word before them: [wave], [mood: excited], [reveal: #detail],
-[custom: confetti]. With no `voice:` above, your first ready voice narrates.
+[go: #detail] (the presenter flies beside it; [go: slot] brings it home),
+[look: h2] (the head looks at it), [custom: confetti]. `presenterStyle: stage`
+above sets the deck's presenter; `presenter-style: corner` under a heading sets
+one slide's. With no `voice:` above, your first ready voice narrates.
 
     hyperdecks narrate decks/__SLUG__ --dry-run
     hyperdecks narrate decks/__SLUG__
@@ -25,7 +28,7 @@ Here is the problem. It costs people real time.
 Why now? Something just changed.
 
 ## idea
-Every slide makes one point. Here is the detail. [reveal: #detail]
+Every slide makes one point. Here is the detail. [reveal: #detail] [go: #detail]
 
 ## how
 It works in three steps. Each one is simple.