keyframes 0.1.0__py3-none-any.whl

keyframes/themes/default/layouts/grid-2.html

@@ -0,0 +1,19 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">One-sentence claim the two panels support</h2>
+  <div class="media" data-block="left" data-x="107" data-y="180" data-w="833" data-h="469">
+    <img class="contain" src="assets/left.png" alt="">
+  </div>
+  <p class="caption" data-block="left-caption" data-x="88" data-y="656" data-w="871" data-h="60">What happens · real robot, 2× speed</p>
+  <div class="media" data-block="right" data-x="980" data-y="180" data-w="833" data-h="469">
+    <img class="contain" src="assets/right.png" alt="">
+  </div>
+  <p class="caption" data-block="right-caption" data-x="961" data-y="656" data-w="871" data-h="60">What happens · simulation, 1× speed</p>
+  <div class="body" data-block="points" data-x="88" data-y="750" data-w="1744" data-h="190">
+    <ul class="small">
+      <li>Supporting point with a number: 12/15 successes</li>
+      <li data-step="1">Takeaway revealed last</li>
+    </ul>
+  </div>
+  <p class="cite" data-block="cite" data-x="88" data-y="975" data-w="1660" data-h="60">Author et al. Venue Year · Author et al. Venue Year</p>
+  <aside class="notes">Point at the difference between the panels, then give the so-what.</aside>
+</section>

keyframes/themes/default/layouts/grid-3x2.html

@@ -0,0 +1,28 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">One-sentence claim the grid demonstrates</h2>
+  <div class="media" data-block="clip-1" data-x="107" data-y="180" data-w="546" data-h="307">
+    <video src="assets/clip-1.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption-1" data-x="88" data-y="492" data-w="584" data-h="60">Condition 1 · real, 1×</p>
+  <div class="media" data-block="clip-2" data-x="687" data-y="180" data-w="546" data-h="307">
+    <video src="assets/clip-2.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption-2" data-x="668" data-y="492" data-w="584" data-h="60">Condition 2 · real, 1×</p>
+  <div class="media" data-block="clip-3" data-x="1267" data-y="180" data-w="546" data-h="307">
+    <video src="assets/clip-3.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption-3" data-x="1248" data-y="492" data-w="584" data-h="60">Condition 3 · real, 1×</p>
+  <div class="media" data-block="clip-4" data-x="107" data-y="565" data-w="546" data-h="307">
+    <video src="assets/clip-4.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption-4" data-x="88" data-y="877" data-w="584" data-h="60">Condition 4 · real, 1×</p>
+  <div class="media" data-block="clip-5" data-x="687" data-y="565" data-w="546" data-h="307">
+    <video src="assets/clip-5.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption-5" data-x="668" data-y="877" data-w="584" data-h="60">Condition 5 · real, 1×</p>
+  <div class="media" data-block="clip-6" data-x="1267" data-y="565" data-w="546" data-h="307">
+    <video src="assets/clip-6.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption-6" data-x="1248" data-y="877" data-w="584" data-h="60">Condition 6 · real, 1×</p>
+  <p class="cite" data-block="cite" data-x="88" data-y="975" data-w="1660" data-h="60">Author et al. Venue Year</p>
+</section>

keyframes/themes/default/layouts/grid-4.html

@@ -0,0 +1,44 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">One-sentence claim across four approaches</h2>
+  <div class="media" data-block="media-1" data-x="107" data-y="180" data-w="404" data-h="303">
+    <img class="contain" src="assets/figure-1.png" alt="">
+  </div>
+  <div class="body" data-block="text-1" data-x="88" data-y="495" data-w="423" data-h="440">
+    <h3 class="subhead">Heading 1</h3>
+    <ul class="small">
+      <li>Short point</li>
+      <li>Short point</li>
+    </ul>
+  </div>
+  <div class="media" data-block="media-2" data-x="541" data-y="180" data-w="404" data-h="303">
+    <img class="contain" src="assets/figure-2.png" alt="">
+  </div>
+  <div class="body" data-block="text-2" data-x="522" data-y="495" data-w="423" data-h="440">
+    <h3 class="subhead">Heading 2</h3>
+    <ul class="small">
+      <li>Short point</li>
+      <li>Short point</li>
+    </ul>
+  </div>
+  <div class="media" data-block="media-3" data-x="975" data-y="180" data-w="404" data-h="303">
+    <img class="contain" src="assets/figure-3.png" alt="">
+  </div>
+  <div class="body" data-block="text-3" data-x="956" data-y="495" data-w="423" data-h="440">
+    <h3 class="subhead">Heading 3</h3>
+    <ul class="small">
+      <li>Short point</li>
+      <li>Short point</li>
+    </ul>
+  </div>
+  <div class="media" data-block="media-4" data-x="1409" data-y="180" data-w="404" data-h="303">
+    <img class="contain" src="assets/figure-4.png" alt="">
+  </div>
+  <div class="body" data-block="text-4" data-x="1390" data-y="495" data-w="423" data-h="440">
+    <h3 class="subhead">Heading 4</h3>
+    <ul class="small">
+      <li>Short point</li>
+      <li>Short point</li>
+    </ul>
+  </div>
+  <p class="cite" data-block="cite" data-x="88" data-y="975" data-w="1660" data-h="60">Author et al. Venue Year</p>
+</section>

keyframes/themes/default/layouts/media-side.html

@@ -0,0 +1,16 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">One-sentence claim the media shows</h2>
+  <div class="media" data-block="media" data-x="107" data-y="180" data-w="1160" data-h="653">
+    <video src="assets/clip.mp4" autoplay muted loop playsinline></video>
+  </div>
+  <p class="caption" data-block="caption" data-x="88" data-y="840" data-w="1198" data-h="60">What happens · real robot, 1× speed</p>
+  <div class="body" data-block="side" data-x="1291" data-y="162" data-w="541" data-h="760">
+    <p class="lead">One sentence on what to look for.</p>
+    <table>
+      <tr><th>Method</th><th>Success</th></tr>
+      <tr><td>Baseline</td><td>41%</td></tr>
+      <tr><td>Ours</td><td>87%</td></tr>
+    </table>
+  </div>
+  <p class="cite" data-block="cite" data-x="88" data-y="975" data-w="1660" data-h="60">Author et al. Venue Year</p>
+</section>

keyframes/themes/default/layouts/section-arc.html

@@ -0,0 +1,4 @@
+<section data-layout="section-arc">
+  <h1 class="headline" data-block="title" data-x="220" data-y="401" data-w="1471" data-h="208">Extra Slides</h1>
+  <p class="eyebrow" data-block="subtitle" data-x="220" data-y="609" data-w="735" data-h="64">Optional one-line description</p>
+</section>

keyframes/themes/default/layouts/section-streaks.html

@@ -0,0 +1,4 @@
+<section data-layout="section-streaks">
+  <h1 class="headline" data-block="title" data-x="220" data-y="401" data-w="1471" data-h="208">Part III: Section Name</h1>
+  <p class="eyebrow" data-block="subtitle" data-x="220" data-y="609" data-w="735" data-h="64">Optional one-line description</p>
+</section>

keyframes/themes/default/layouts/section.html

@@ -0,0 +1,4 @@
+<section data-layout="section">
+  <h1 class="headline" data-block="title" data-x="220" data-y="401" data-w="1471" data-h="208">Part I: Section Name</h1>
+  <p class="eyebrow" data-block="subtitle" data-x="220" data-y="609" data-w="735" data-h="64">Optional one-line description</p>
+</section>

keyframes/themes/default/layouts/split-wide.html

@@ -0,0 +1,7 @@
+<section data-layout="split-wide">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="469" data-h="104">Slide Title</h2>
+  <div class="body" data-block="body" data-x="88" data-y="175" data-w="469" data-h="748">Short explanation.</div>
+  <div class="media" data-block="figure" data-x="660" data-y="80" data-w="1210" data-h="920">
+    <img class="contain" src="assets/figure.png" alt="">
+  </div>
+</section>

keyframes/themes/default/layouts/split.html

@@ -0,0 +1,13 @@
+<section data-layout="split">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="800" data-h="104">Slide Title</h2>
+  <div class="body" data-block="body" data-x="88" data-y="175" data-w="800" data-h="748">
+    Text on the left:
+    <ul class="small">
+      <li>Point one</li>
+      <li>Point two</li>
+    </ul>
+  </div>
+  <div class="media" data-block="figure" data-x="1010" data-y="92" data-w="860" data-h="896">
+    <img class="contain" src="assets/figure.png" alt="">
+  </div>
+</section>

keyframes/themes/default/layouts/statement.html

@@ -0,0 +1,4 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">Slide Title</h2>
+  <p class="statement" data-block="statement" data-x="88" data-y="300" data-w="1744" data-h="489">One big idea</p>
+</section>

keyframes/themes/default/layouts/title.html

@@ -0,0 +1,5 @@
+<section data-layout="title">
+  <h1 class="headline" data-block="title" data-x="220" data-y="193" data-w="735" data-h="220">Talk Title on Two Lines</h1>
+  <p class="subtitle" data-block="subtitle" data-x="220" data-y="465" data-w="735" data-h="135">Optional subtitle</p>
+  <p class="byline" data-block="byline" data-x="220" data-y="698" data-w="735" data-h="130">Speaker Name<br>Venue · Date</p>
+</section>

keyframes/themes/default/layouts/two-column.html

@@ -0,0 +1,5 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">Slide Title</h2>
+  <div class="body" data-block="left" data-x="88" data-y="200" data-w="840" data-h="760">Left column</div>
+  <div class="body" data-block="right" data-x="992" data-y="200" data-w="840" data-h="760">Right column</div>
+</section>

keyframes/themes/default/theme.css

@@ -0,0 +1,330 @@
+@import url("../_vendor/fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Roboto+Mono:wght@400;500&display=swap");
+
+/* Clone of the Google Slides "simple-light-2" template. Geometry is in canvas px (1920×1080),
+   converted from the template's EMU coordinates; type sizes measured from its PDF export. */
+
+:root {
+  --ink: #202124;
+  --fg: #606366;
+  --muted: #9aa0a6;
+  --panel: #f8f9fa;
+  --link: #0097a7;
+  --blue: #4285f4;
+  --red: #ea4335;
+  --yellow: #fbbc04;
+  --green: #34a853;
+  --accent: var(--blue);
+  --accent-2: var(--yellow);
+  --surface: var(--panel);
+  --border: #dadce0;
+  --font-display: "Google Sans", "Product Sans", Roboto, sans-serif;
+  --font-sans: Roboto, Arial, sans-serif;
+  --font-mono: "Roboto Mono", ui-monospace, monospace;
+  --inset: 18px 19px 10px;
+}
+
+.keyframes-slide > section {
+  background: #fff;
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-weight: 300;
+  font-size: 37.3px;
+  line-height: 1.4;
+}
+
+.keyframes-slide > section::before {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  background: no-repeat center / 100% 100%;
+}
+
+.keyframes-slide::after {
+  content: attr(data-number);
+  position: absolute;
+  left: 1760px;
+  top: 1002px;
+  width: 129px;
+  height: 39px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 19px;
+  box-sizing: border-box;
+  font: 400 18.7px var(--font-display);
+  color: var(--fg);
+}
+
+.keyframes-slide:has(> section[data-layout^="title"])::after {
+  display: none;
+}
+
+/* Text roles. Text boxes carry Google Slides' default insets so geometry matches the template. */
+
+.headline,
+.title,
+.subtitle,
+.body,
+.small,
+.caption,
+.cite,
+.eyebrow,
+.statement {
+  margin: 0;
+  padding: var(--inset);
+  box-sizing: border-box;
+}
+
+.headline {
+  font: 700 80px/1.2 var(--font-display);
+  color: var(--ink);
+}
+
+.title {
+  font: 700 53.3px/1.2 var(--font-display);
+  color: var(--ink);
+}
+
+.subtitle {
+  font: 400 48px/1.2 var(--font-display);
+  color: var(--fg);
+}
+
+.byline {
+  margin: 0;
+  padding: var(--inset);
+  font: 400 37.3px/1.2 var(--font-display);
+  color: var(--fg);
+}
+
+.byline a,
+section a {
+  color: var(--link);
+}
+
+.eyebrow {
+  font: 400 24px/1.3 var(--font-display);
+  color: var(--fg);
+}
+
+.lead {
+  margin: 0 0 0.5em;
+  font: 300 28px/1.35 var(--font-sans);
+  color: var(--ink);
+}
+
+.subhead {
+  margin: 0 0 0.3em;
+  font: 500 28px/1.3 var(--font-display);
+  color: var(--ink);
+}
+
+.body {
+  font-weight: 300;
+  font-size: 37.3px;
+  line-height: 1.4;
+  color: var(--fg);
+}
+
+.small,
+.body .small {
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 1.6;
+  color: var(--fg);
+}
+
+.body ul,
+.body ol,
+ul.body,
+ol.body {
+  margin: 0.15em 0 0.6em;
+  padding-left: 1.4em;
+}
+
+.body li {
+  line-height: 1.45;
+}
+
+.body li + li {
+  margin-top: 0.5em;
+}
+
+.body ul > li {
+  list-style: none;
+  position: relative;
+}
+
+.body ul > li::before {
+  content: "●";
+  position: absolute;
+  left: -1.1em;
+  font-family: Arial, sans-serif;
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.body ul.small {
+  margin-top: -0.3em;
+}
+
+.body ol > li::marker {
+  font-family: Arial, sans-serif;
+  color: var(--muted);
+}
+
+.body b,
+.body strong {
+  font-weight: 700;
+}
+
+.caption {
+  font: 400 24px/1.3 var(--font-display);
+  color: var(--fg);
+}
+
+.cite {
+  font: 400 18.7px/1.2 var(--font-display);
+  color: var(--fg);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font: 300 24px/1.35 var(--font-sans);
+  color: var(--fg);
+}
+
+th {
+  font: 500 24px/1.35 var(--font-display);
+  color: var(--ink);
+  text-align: left;
+}
+
+th,
+td {
+  padding: 10px 20px 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.statement {
+  font: 300 128px/1.2 var(--font-sans);
+  color: var(--fg);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.accent {
+  color: var(--accent);
+}
+
+/* Containers */
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 32px;
+  box-sizing: border-box;
+}
+
+.media {
+  overflow: hidden;
+}
+
+.media > img,
+.media > video,
+.fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+img.contain,
+video.contain,
+.contain,
+.media.contain > * {
+  object-fit: contain;
+}
+
+.media.figure {
+  background: #fff;
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+
+/* Layouts */
+
+section[data-layout="title"]::before {
+  left: 916px;
+  top: -6px;
+  width: 1004px;
+  height: 1086px;
+  background-image: url("assets/title-orbit.webp");
+}
+
+section[data-layout="title-ring"]::before {
+  left: 696px;
+  top: 205px;
+  width: 1224px;
+  height: 876px;
+  background-image: url("assets/orbit-ring.webp");
+}
+
+section[data-layout="title-streaks"]::before {
+  left: 946px;
+  top: 41px;
+  width: 974px;
+  height: 964px;
+  background-image: url("assets/streaks-wide.webp");
+}
+
+section[data-layout^="section"] {
+  background: var(--panel);
+}
+
+section[data-layout="section"]::before {
+  left: 0;
+  top: 0;
+  width: 511px;
+  height: 256px;
+  background-image: url("assets/sun-top.webp");
+}
+
+section[data-layout="section-arc"]::before {
+  left: 129px;
+  top: 0;
+  width: 487px;
+  height: 194px;
+  background-image: url("assets/arc-top.webp");
+}
+
+section[data-layout="section-streaks"]::before {
+  left: 8px;
+  top: 14px;
+  width: 422px;
+  height: 262px;
+  background-image: url("assets/streaks-top.webp");
+}
+
+section[data-layout="split"]::before {
+  left: 960px;
+  top: 0;
+  width: 960px;
+  height: 1080px;
+  background: var(--panel);
+}
+
+section[data-layout="split-wide"]::before {
+  left: 610px;
+  top: 0;
+  width: 1310px;
+  height: 1080px;
+  background: var(--panel);
+}

keyframes/themes/minimal/STYLE_GUIDE.md

@@ -0,0 +1,41 @@
+# Theme: minimal
+
+Clean, high-contrast research-talk style. Inter for text, JetBrains Mono for code.
+
+## Palette (CSS variables)
+
+| var | use |
+| --- | --- |
+| `--fg` `#16181d` | body text |
+| `--muted` `#5d6470` | captions, secondary text |
+| `--accent` `#2f6fed` | emphasis, eyebrows, key numbers (use sparingly) |
+| `--accent-2` `#f2994a` | second series / contrast highlight |
+| `--surface` `#f4f6fa` | cards, code background |
+| `--border` `#dfe3ea` | hairlines |
+
+## Type scale (on the 1920×1080 canvas)
+
+| class | size | use |
+| --- | --- | --- |
+| `title` | 64px / 700 | one per slide, ≤ 8 words |
+| `subtitle` | 36px | under titles on title/section slides |
+| `body` | 32px | bullets and paragraphs; ≤ 6 bullets, ≤ 2 lines each |
+| `lead` | 28px | one-sentence takeaway or setup next to media |
+| `subhead` | 28px / 600 | column / tile heading |
+| `small` | 24px | detail bullets (`<ul class="small">`) |
+| `caption` | 22px muted | figure captions |
+| `cite` | 18px muted | references footer, `Author et al. Venue Year · …` |
+| `eyebrow` | 22px caps accent | kicker above a title |
+
+## Spacing
+
+- Outer margin 96px left/right; titles at y=72 with h=96; content starts at y=220.
+- Gutter between columns: 48px. Content bottom edge ≤ 1000.
+- Cards: `card` class (20px radius, 40px padding). Media: `media` class (16px radius, clips,
+  black background); `media contain` letterboxes any child, `media figure` uses a white background.
+- Tables: plain `<table>` with `<th>` headers, 24px, hairline rows.
+
+## Layouts
+
+`title`, `section` (full-bleed accent), `title-body`, `two-column`, `figure`, `statement`.
+Set `data-layout` on the `<section>`; the title and section layouts hide the slide number.

keyframes/themes/minimal/layouts/figure.html

@@ -0,0 +1,7 @@
+<section data-layout="figure">
+  <h2 class="title" data-block="title" data-x="96" data-y="72" data-w="1728" data-h="96">Slide title</h2>
+  <div class="media" data-block="figure" data-x="96" data-y="200" data-w="1728" data-h="740">
+    <img class="contain" src="assets/figure.png" alt="">
+  </div>
+  <p class="caption" data-block="caption" data-x="96" data-y="960" data-w="1728" data-h="60">Figure caption, source.</p>
+</section>

keyframes/themes/minimal/layouts/section.html

@@ -0,0 +1,4 @@
+<section data-layout="section">
+  <p class="eyebrow" data-block="eyebrow" data-x="160" data-y="420" data-w="1600" data-h="40">Part 2</p>
+  <h1 class="title" data-block="title" data-x="160" data-y="480" data-w="1600" data-h="160">Section name</h1>
+</section>

keyframes/themes/minimal/layouts/statement.html

@@ -0,0 +1,3 @@
+<section data-layout="statement">
+  <p class="title" data-block="statement" data-x="240" data-y="380" data-w="1440" data-h="320" style="text-align:center">One big idea, stated plainly.</p>
+</section>

keyframes/themes/minimal/layouts/title-body.html

@@ -0,0 +1,10 @@
+<section data-layout="title-body">
+  <h2 class="title" data-block="title" data-x="96" data-y="72" data-w="1728" data-h="96">Slide title</h2>
+  <div class="body" data-block="body" data-x="96" data-y="220" data-w="1728" data-h="760">
+    <ul>
+      <li>First point</li>
+      <li data-step="1">Revealed on the first click</li>
+    </ul>
+  </div>
+  <aside class="notes">Speaker notes go here.</aside>
+</section>

keyframes/themes/minimal/layouts/title.html

@@ -0,0 +1,5 @@
+<section data-layout="title">
+  <p class="eyebrow" data-block="eyebrow" data-x="160" data-y="360" data-w="1600" data-h="40">Venue · Date</p>
+  <h1 class="title" data-block="title" data-x="160" data-y="420" data-w="1600" data-h="200">Talk title</h1>
+  <p class="subtitle" data-block="subtitle" data-x="160" data-y="640" data-w="1600" data-h="120">Speaker name · Affiliation</p>
+</section>

keyframes/themes/minimal/layouts/two-column.html

@@ -0,0 +1,11 @@
+<section data-layout="two-column">
+  <h2 class="title" data-block="title" data-x="96" data-y="72" data-w="1728" data-h="96">Slide title</h2>
+  <div class="body" data-block="left" data-x="96" data-y="220" data-w="840" data-h="780">
+    <ul>
+      <li>Left column point</li>
+    </ul>
+  </div>
+  <div class="card" data-block="right" data-x="984" data-y="220" data-w="840" data-h="780">
+    Right column: text, a figure, or an embed.
+  </div>
+</section>