css-motion-library 0.0.0-stage → 1.0.1

package/examples/002-commerce-film/animation.css

@@ -0,0 +1,197 @@
+/* Every picture is HTML, SVG or CSS. The native player controls CSS animation time. */
+.film { --ink:#11150f; --acid:#e5ef46; --paper:#efeee6; --film-duration:30s; background:var(--ink); color:var(--paper); }
+.film__screen { container-type:inline-size; position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; isolation:isolate; }
+.film__overview { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:8%; background:var(--ink); }
+.film__overview h1 { margin:28px 0; font-size:clamp(34px,8cqw,130px); line-height:1; letter-spacing:-.065em; font-weight:900; }
+.film__overview h1 em { color:var(--acid); }
+.film__overview p { max-width:32em; font-size:clamp(12px,1.7cqw,22px); line-height:1.65; color:#bbc4b1; }
+.film em { font-style:normal; }
+.film__shots, .film__shot { position:absolute; inset:0; }
+.film__shot { display:none; overflow:hidden; background:var(--ink); }
+.film__frame { position:absolute; inset:0 0 auto; z-index:8; display:flex; justify-content:space-between; padding:2.5% 4%; color:#eeeee0; font:clamp(9px,.85cqw,13px) ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; mix-blend-mode:difference; pointer-events:none; }
+.film__eyebrow { display:block; font:clamp(10px,1cqw,15px) ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
+.film__shot-copy { position:absolute; z-index:3; left:7%; top:18%; }
+.film__shot-copy h2 { margin:22px 0; font-size:clamp(40px,10cqw,160px); font-weight:900; line-height:.93; letter-spacing:-.065em; }
+.film__shot-copy h2 em { color:var(--acid); }
+.film__shot-copy p { font-size:clamp(12px,1.45cqw,23px); line-height:1.55; margin:0; }
+.film__corner-note { position:absolute; left:7%; bottom:8%; font:clamp(9px,.9cqw,14px) ui-monospace,monospace; }
+.film.is-ready .film__overview { visibility:hidden; }
+.film.is-ready .film__screen { animation:mvl-clock var(--film-duration) linear infinite paused; }
+.film.is-ready .film__shot { display:block; opacity:0; visibility:hidden; animation:mvl-shot var(--film-duration) linear infinite paused; animation-delay:calc(var(--shot) * 5s); }
+.film.is-ready .film__shot-copy { animation:mvl-copy var(--film-duration) cubic-bezier(.2,.7,.2,1) infinite paused; animation-delay:calc(var(--shot) * 5s); }
+/* 00—05 / Opening: big type, a slow lens move and a running bottom strip. */
+.film__shot--open { background:#11150f; }
+.film__disc { position:absolute; width:58%; aspect-ratio:1; border:1px solid #829141; border-radius:50%; right:-10%; top:-23%; background:radial-gradient(circle at 35% 35%,#394327 0,#172014 65%,#11150f 100%); }
+.film__disc::after { content:''; position:absolute; inset:12%; border:1px solid #a6ba4a; border-radius:50%; }
+.film__intro-label { position:absolute; left:7%; top:20%; color:var(--acid); }
+.film__opening-type { position:absolute; inset:30% 7% auto; font-size:clamp(36px,10.8cqw,174px); font-weight:950; line-height:.95; letter-spacing:-.075em; }
+.film__opening-type > div { overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
+.film__opening-type span { display:block; }
+.film__opening-type em { color:var(--acid); }
+.film__subtitle { position:absolute; left:7%; bottom:17%; font-size:clamp(11px,1.4cqw,21px); color:#aeb9a6; }
+.film__ticker { position:absolute; bottom:0; padding-block:1.3%; width:max-content; font-size:clamp(15px,2.1cqw,34px); font-weight:800; letter-spacing:-.02em; color:var(--ink); background:var(--acid); white-space:nowrap; }
+.film.is-ready .film__opening-type span { animation:mvl-title var(--film-duration) cubic-bezier(.2,.75,.2,1) infinite paused; }
+.film.is-ready .film__opening-type > div:nth-child(2) span { animation-delay:.18s; }
+.film.is-ready .film__ticker { animation:mvl-ticker var(--film-duration) linear infinite paused; }
+.film.is-ready .film__disc { animation:mvl-disc var(--film-duration) ease-in-out infinite paused; }
+/* 05—10 / Audit: full-bleed color cut and a window moving through a scanner. */
+.film__shot--audit { background:var(--acid); color:var(--ink); }
+.film__shot--audit .film__shot-copy h2 em { color:var(--ink); text-decoration:underline; text-decoration-thickness:.035em; text-underline-offset:.1em; }
+.film__backword { position:absolute; bottom:17%; left:3%; color:#11150f12; font-size:19cqw; font-weight:950; letter-spacing:-.08em; white-space:nowrap; }
+.film__audit-window { position:absolute; width:36%; right:6%; top:26%; background:var(--ink); color:var(--paper); padding:2.2%; border:1px solid #414e2a; border-radius:8px; box-shadow:0 30px 0 #11150f22; transform:rotate(-7deg); }
+.film__window-top { display:flex; align-items:center; justify-content:space-between; gap:10px; font:clamp(8px,.85cqw,13px) ui-monospace,monospace; padding-bottom:5%; border-bottom:1px solid #4a543a; }
+.film__audit-item { display:flex; justify-content:space-between; gap:12px; padding-block:8%; border-bottom:1px solid #38432b; font-size:clamp(10px,1.3cqw,20px); }
+.film__audit-item b { align-self:center; padding:4px 8px; font:clamp(8px,.75cqw,12px) ui-monospace,monospace; border:1px solid #596644; color:var(--acid); border-radius:20px; }
+.film__scan-line { position:absolute; left:-5%; right:-5%; top:25%; height:2px; background:var(--acid); box-shadow:0 0 25px 3px #e5ef4677; }
+.film__crosshair { position:absolute; width:8%; aspect-ratio:1; right:10%; top:55%; border:1px solid var(--acid); transform:rotate(45deg); }
+.film.is-ready .film__audit-window { animation:mvl-audit-camera var(--film-duration) cubic-bezier(.16,.7,.2,1) infinite paused; animation-delay:5s; }
+.film.is-ready .film__scan-line { animation:mvl-scan var(--film-duration) linear infinite paused; animation-delay:5s; }
+/* 10—15 / Plan: a moving blueprint, drawing wires and assembling nodes. */
+.film__shot--plan { background:#131e2b; color:#edf2e8; }
+.film__blueprint-grid { position:absolute; inset:-20%; background-image:linear-gradient(#8399ae20 1px,transparent 1px),linear-gradient(90deg,#8399ae20 1px,transparent 1px); background-size:5% 8%; transform:rotate(-15deg) scale(1.1); }
+.film__wires { position:absolute; inset:0; width:100%; height:100%; stroke:#e5ef46; stroke-width:2; fill:none; opacity:.5; stroke-dasharray:2200; }
+.film__plan-node { position:absolute; z-index:2; padding:1.8% 2.5%; border:1px solid #a7bb7b; color:#d8e3b9; background:#182532; font:clamp(8px,1cqw,16px) ui-monospace,monospace; letter-spacing:.08em; }
+.film__plan-node--one { left:62%; top:18%; }
+.film__plan-node--two { left:70%; top:46%; }
+.film__plan-node--three { left:58%; top:76%; }
+.film.is-ready .film__blueprint-grid { animation:mvl-blueprint var(--film-duration) linear infinite paused; animation-delay:10s; }
+.film.is-ready .film__wires { animation:mvl-wires var(--film-duration) ease-out infinite paused; animation-delay:10s; }
+.film.is-ready .film__plan-node { animation:mvl-node var(--film-duration) cubic-bezier(.2,.8,.2,1) infinite paused; animation-delay:10s; }
+.film.is-ready .film__plan-node--two { animation-delay:10.3s; }
+.film.is-ready .film__plan-node--three { animation-delay:10.6s; }
+/* 15—20 / Build: camera pulls through the type into a completed storefront. */
+.film__shot--build { background:var(--paper); color:var(--ink); perspective:1200px; }
+.film__build-label { position:absolute; top:15%; left:7%; }
+.film__build-type { position:absolute; top:24%; left:6%; font-size:14cqw; font-weight:950; letter-spacing:-.085em; line-height:.85; color:#c4c6b5; }
+.film__build-type em { color:#b7c46d; }
+.film__browser { position:absolute; top:21%; left:29%; width:59%; border:1px solid #7c826e; border-radius:8px; background:#f9f8f0; box-shadow:0 25px 50px #27311726; padding:1.5%; transform:rotate(-4deg); transform-origin:center; }
+.film__browser .film__window-top { color:#657054; border-color:#d6d7ca; padding-bottom:2%; font-size:clamp(7px,.7cqw,11px); }
+.film__shop-nav { display:flex; justify-content:space-between; align-items:center; padding-block:4%; gap:12px; font-size:clamp(7px,.8cqw,12px); }
+.film__shop-nav strong { font-size:clamp(9px,1.1cqw,17px); letter-spacing:-.04em; }
+.film__shop { display:grid; grid-template-columns:1fr 1fr; gap:5%; }
+.film__product-art { position:relative; aspect-ratio:1; background:#d4dcbf; overflow:hidden; }
+.film__product-art svg { position:absolute; width:60%; height:90%; left:20%; top:5%; fill:#859b61; stroke:#304c29; stroke-width:2; }
+.film__product-art > span { position:absolute; bottom:7%; left:7%; font:clamp(7px,.65cqw,10px) ui-monospace,monospace; }
+.film__product-info { align-self:center; padding-right:8%; }
+.film__product-info > span { font:clamp(6px,.65cqw,10px) ui-monospace,monospace; }
+.film__product-info h3 { font-size:clamp(16px,2.6cqw,40px); line-height:1; letter-spacing:-.055em; margin:8% 0; }
+.film__product-info i { display:block; width:90%; height:3px; background:#c3c8b6; margin-bottom:5%; }
+.film__product-info i:nth-of-type(2) { width:65%; }
+.film__product-info > div { background:var(--ink); color:var(--paper); font-size:clamp(6px,.65cqw,11px); padding:8% 4%; text-align:center; margin-top:12%; }
+.film.is-ready .film__browser { animation:mvl-browser var(--film-duration) cubic-bezier(.2,.65,.2,1) infinite paused; animation-delay:15s; }
+/* 20—25 / Measure: staggered bars and an oversized orbit. No invented metrics. */
+.film__shot--measure { background:#101510; }
+.film__shot--measure .film__shot-copy { top:15%; }
+.film__shot--measure .film__shot-copy h2 { font-size:9cqw; }
+.film__measure-ring { position:absolute; width:70%; aspect-ratio:1; left:55%; top:-10%; border:1px solid #7a8a45; border-radius:50%; }
+.film__measure-ring::after { content:''; position:absolute; inset:12%; border:1px dashed #414e2d; border-radius:50%; }
+.film__chart { position:absolute; width:36%; right:8%; bottom:20%; }
+.film__chart > span { font:clamp(8px,.85cqw,14px) ui-monospace,monospace; letter-spacing:.05em; color:#abbf7e; }
+.film__bars { height:19cqw; display:flex; align-items:flex-end; gap:7%; border-bottom:1px solid #697d47; margin-block:7% 5%; }
+.film__bars i { display:block; flex:1; height:var(--height); background:#6a8042; transform-origin:bottom; }
+.film__bars i:last-child { background:var(--acid); }
+.film__chart small { display:block; font:clamp(7px,.7cqw,11px) ui-monospace,monospace; color:#a4b293; line-height:1.5; }
+.film.is-ready .film__bars i { animation:mvl-bar var(--film-duration) cubic-bezier(.2,.75,.2,1) infinite paused; animation-delay:calc(20s + var(--bar) * .13s); }
+.film.is-ready .film__measure-ring { animation:mvl-ring var(--film-duration) linear infinite paused; }
+/* 25—30 / Closing title: a deliberate hold, then back to the first frame. */
+.film__shot--end { background:var(--acid); color:var(--ink); padding:12% 7% 6%; }
+.film__end-type { position:relative; font-size:10.2cqw; font-weight:950; line-height:.88; letter-spacing:-.075em; margin-top:4%; }
+.film__end-type em { -webkit-text-stroke:1px var(--ink); color:transparent; }
+.film__shot--end > p { position:relative; margin-top:4%; font-size:clamp(10px,1.3cqw,20px); }
+.film__end-credit { position:absolute; bottom:7%; right:6%; font:clamp(8px,.8cqw,12px) ui-monospace,monospace; }
+.film__end-orbit { position:absolute; width:70%; aspect-ratio:1; right:-20%; top:-10%; border:2px solid #11150f33; border-radius:50%; }
+.film__end-orbit::before, .film__end-orbit::after { content:''; position:absolute; inset:10%; border:1px solid #11150f22; border-radius:50%; }
+.film__end-orbit::after { inset:20%; }
+.film.is-ready .film__end-type { animation:mvl-title var(--film-duration) cubic-bezier(.2,.8,.2,1) infinite paused; animation-delay:25s; }
+.film.is-ready .film__end-orbit { animation:mvl-end-orbit var(--film-duration) ease-out infinite paused; animation-delay:25s; }
+.film__cut { position:absolute; z-index:7; inset:0; background:var(--acid); transform:translateX(-110%); pointer-events:none; }
+.film.is-ready .film__cut { animation:mvl-cut 5s cubic-bezier(.76,0,.24,1) infinite paused; }
+/* The controller overrides paused CSSAnimation objects together via the native API. */
+.film__controls { display:flex; align-items:center; gap:18px; min-height:68px; padding:12px 4%; background:#0c100b; border-top:1px solid #39412d; font-size:11px; }
+.film__controls[hidden] { display:none; }
+.film__controls button { min-height:40px; padding:8px 10px; background:none; border:0; color:#dce5cd; cursor:pointer; white-space:nowrap; }
+.film__controls button:hover { color:var(--acid); }
+.film__controls :focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
+.film__seek-label { flex:1; min-width:40px; display:flex; align-items:center; min-height:40px; }
+.film__controls input[type=range] { appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:4px; border-radius:3px; cursor:pointer; background:linear-gradient(to right,var(--acid) var(--progress,0%),#49543a var(--progress,0%)); }
+.film__controls input::-webkit-slider-thumb { appearance:none; width:12px; height:12px; border-radius:50%; background:var(--acid); }
+.film__controls input::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:var(--acid); }
+.film__controls output { font:11px ui-monospace,monospace; color:#b9c4ab; white-space:nowrap; }
+.film__speed select { min-height:40px; background:#0c100b; color:#dce5cd; border:1px solid #49543a; padding:5px; border-radius:4px; }
+.film__sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.film.is-reduced .film__overview { visibility:visible; z-index:6; }
+.film.is-reduced .film__shots, .film.is-reduced .film__cut { visibility:hidden; opacity:0; }
+@keyframes mvl-clock { from { outline-color:transparent; } to { outline-color:transparent; } }
+@keyframes mvl-shot { 0%,14.5% { opacity:1; visibility:visible; transform:scale(1); } 16.66%,100% { opacity:0; visibility:hidden; transform:scale(1.035); } }
+@keyframes mvl-copy { 0% { opacity:0; transform:translateY(24px); } 2.2%,13.7% { opacity:1; transform:translateY(0); } 16.6%,100% { opacity:0; transform:translateY(-18px); } }
+@keyframes mvl-title { 0% { transform:translateY(110%); opacity:0; } 2.6%,13.8% { transform:translateY(0); opacity:1; } 16.6%,100% { transform:translateY(-18%); opacity:0; } }
+@keyframes mvl-ticker { from { transform:translateX(0); } to { transform:translateX(-45%); } }
+@keyframes mvl-disc { 0% { transform:scale(.8) translateX(8%); } 16.6%,100% { transform:scale(1.2) translateX(-8%); } }
+@keyframes mvl-audit-camera { 0% { transform:perspective(1000px) rotateY(-30deg) rotate(-10deg) translateX(30%); opacity:0; } 3%,13.5% { transform:perspective(1000px) rotateY(-5deg) rotate(-4deg) translateX(0); opacity:1; } 16.6%,100% { transform:perspective(1000px) rotateY(8deg) rotate(2deg) translateX(-5%); opacity:0; } }
+@keyframes mvl-scan { 0%,2% { transform:translateY(0); opacity:0; } 3% { opacity:1; } 13% { transform:translateY(13cqw); opacity:1; } 16.6%,100% { transform:translateY(13cqw); opacity:0; } }
+@keyframes mvl-blueprint { 0% { transform:rotate(-15deg) scale(1.1) translateX(0); } 16.6%,100% { transform:rotate(-10deg) scale(1.25) translateX(-4%); } }
+@keyframes mvl-wires { 0% { stroke-dashoffset:2200; } 11%,100% { stroke-dashoffset:0; } }
+@keyframes mvl-node { 0% { opacity:0; transform:scale(.75) translateY(15px); } 3%,14% { opacity:1; transform:scale(1) translateY(0); } 16.6%,100% { opacity:0; transform:scale(1.08) translateY(-10px); } }
+@keyframes mvl-browser { 0% { transform:translateY(45%) rotateX(20deg) rotateY(-25deg) rotate(-5deg) scale(.75); opacity:0; } 4% { transform:translateY(0) rotateX(4deg) rotateY(-10deg) rotate(-3deg) scale(1); opacity:1; } 14% { transform:translateY(-3%) rotateX(0) rotateY(0) rotate(-1deg) scale(1.08); opacity:1; } 16.6%,100% { transform:translateY(-8%) scale(1.15); opacity:0; } }
+@keyframes mvl-bar { 0% { transform:scaleY(0); } 4%,14% { transform:scaleY(1); } 16.6%,100% { transform:scaleY(.8); } }
+@keyframes mvl-ring { to { transform:rotate(180deg); } }
+@keyframes mvl-end-orbit { 0% { transform:scale(.65); } 16.6%,100% { transform:scale(1.15); } }
+@keyframes mvl-cut { 0%,90% { transform:translateX(-110%); } 96% { transform:translateX(0); } 100% { transform:translateX(110%); } }
+/* Standalone page: shrink the 16:9 frame so the controls stay on screen. */
+@media (min-width:601px) { html:not(.is-embedded) .film { max-width:max(480px,calc((100svh - 130px) * 16 / 9)); margin-inline:auto; } }
+@media (max-width:600px) {
+  .film__screen { aspect-ratio:3 / 4; }
+  .film__frame { padding:5% 6%; font-size:8px; }
+  .film__eyebrow { font-size:9px; }
+  .film__opening-type { top:29%; font-size:11.6cqw; }
+  .film__intro-label { top:21%; }
+  .film__disc { width:110%; right:-44%; top:-12%; }
+  .film__subtitle { font-size:11px; max-width:70%; bottom:24%; }
+  .film__ticker { padding-block:3%; font-size:4cqw; }
+  .film__shot-copy { top:13%; left:7%; }
+  .film__shot-copy h2 { font-size:15cqw; margin:18px 0; }
+  .film__shot-copy p { font-size:11px; }
+  .film__audit-window { width:65%; right:10%; top:53%; padding:5%; }
+  .film__audit-item { padding-block:6%; font-size:11px; }
+  .film__audit-item b { font-size:8px; padding:3px 6px; }
+  .film__window-top { font-size:8px; }
+  .film__backword { bottom:17%; font-size:25cqw; }
+  .film__corner-note { font-size:8px; bottom:5%; max-width:75%; }
+  .film__wires { top:35%; height:65%; }
+  .film__plan-node { font-size:8px; padding:3% 4%; }
+  .film__plan-node--one { top:58%; left:14%; }
+  .film__plan-node--two { top:73%; left:57%; }
+  .film__plan-node--three { top:85%; left:24%; }
+  .film__build-label { top:14%; }
+  .film__build-type { top:23%; font-size:20cqw; }
+  .film__browser { width:86%; left:7%; top:47%; padding:3%; }
+  .film__shop-nav { font-size:6px; }
+  .film__shop-nav strong { font-size:9px; }
+  .film__browser .film__window-top { font-size:6px; }
+  .film__product-info h3 { font-size:5cqw; }
+  .film__product-info > span, .film__product-info > div { font-size:6px; }
+  .film__shot--measure .film__shot-copy { top:13%; }
+  .film__shot--measure .film__shot-copy h2 { font-size:15cqw; }
+  .film__chart { width:58%; right:10%; bottom:9%; }
+  .film__bars { height:25cqw; }
+  .film__chart > span { font-size:8px; }
+  .film__chart small { font-size:7px; }
+  .film__measure-ring { width:125%; top:23%; left:30%; }
+  .film__shot--end { padding-top:27%; }
+  .film__end-type { font-size:13.3cqw; margin-top:10%; }
+  .film__shot--end > p { margin-top:13%; font-size:10px; }
+  .film__end-orbit { width:150%; right:-75%; top:4%; }
+  .film__end-credit { font-size:8px; }
+  .film__controls { gap:8px; padding-inline:3%; flex-wrap:wrap; }
+  .film__controls button { font-size:10px; padding-inline:5px; }
+  .film__seek-label { order:5; flex-basis:100%; min-height:28px; }
+  .film__controls output { margin-left:auto; font-size:10px; }
+  .film__speed select { min-height:34px; font-size:10px; }
+  .film__overview h1 { font-size:11cqw; }
+  .film__overview p { font-size:13px; }
+}
+@media (prefers-reduced-motion:reduce) {
+  .film.is-ready .film__overview { visibility:visible; z-index:6; }
+  .film .film__shots, .film .film__cut { visibility:hidden; opacity:0; }
+  .film__controls { display:none; }
+}

package/examples/002-commerce-film/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="color-scheme" content="dark">
+  <title>002 — Commerce Film | CSS Motion Library</title>
+  <script>if (new URLSearchParams(location.search).has('embed')) document.documentElement.classList.add('is-embedded');</script>
+  <link rel="stylesheet" href="../../src/demo.css">
+  <link rel="stylesheet" href="animation.css">
+</head>
+<body>
+  <nav class="demo-nav"><a href="../../">← Library</a><span>002 / Commerce Film</span><a href="../001-commerce-storyboard/">Original edition ↗</a></nav>
+  <main>
+    <section class="film" data-motion-player data-duration="30" aria-labelledby="film-title">
+      <div class="film__screen" data-motion-stage>
+        <div class="film__overview">
+          <span class="film__eyebrow">Commerce Film / CSS Motion Library</span>
+          <h1 id="film-title">Better commerce.<br><em>By design.</em></h1>
+          <p>Audit the store. Make a plan. Build with purpose. Measure and refine.</p>
+        </div>
+        <div class="film__frame" aria-hidden="true"><span>CSS Motion Library</span><span>Commerce Film / 002</span></div>
+        <div class="film__shots" aria-hidden="true">
+          <div class="film__shot film__shot--open" style="--shot:0">
+            <div class="film__disc"></div>
+            <span class="film__eyebrow film__intro-label">A small film. Made of CSS.</span>
+            <div class="film__opening-type"><div><span>COMMERCE</span></div><div><span>IN <em>MOTION.</em></span></div></div>
+            <p class="film__subtitle">From the first question to what comes next.</p>
+            <div class="film__ticker">AUDIT / PLAN / BUILD / MEASURE / AUDIT / PLAN / BUILD / MEASURE /</div>
+          </div>
+          <div class="film__shot film__shot--audit" style="--shot:1">
+            <span class="film__backword">LOOK CLOSER</span>
+            <div class="film__shot-copy"><span class="film__eyebrow">01 / Audit</span><h2>Find the<br><em>friction.</em></h2><p>Before changing the store,<br>understand what is in the way.</p></div>
+            <div class="film__audit-window"><div class="film__window-top"><span>● ● ●</span><span>Store diagnostics</span></div><div class="film__audit-item"><span>Storefront</span><b>Inspect</b></div><div class="film__audit-item"><span>Checkout</span><b>Inspect</b></div><div class="film__audit-item"><span>Integrations</span><b>Inspect</b></div><div class="film__scan-line"></div><div class="film__crosshair"></div></div>
+            <span class="film__corner-note">The right questions come first.</span>
+          </div>
+          <div class="film__shot film__shot--plan" style="--shot:2">
+            <div class="film__blueprint-grid"></div>
+            <svg class="film__wires" viewBox="0 0 1000 600" preserveAspectRatio="none"><path d="M0 300H360V120H740V300H1000 M360 300V480H740V300 M740 120V480"/></svg>
+            <div class="film__plan-node film__plan-node--one">STOREFRONT</div><div class="film__plan-node film__plan-node--two">CHECKOUT</div><div class="film__plan-node film__plan-node--three">INTEGRATIONS</div>
+            <div class="film__shot-copy"><span class="film__eyebrow">02 / Architecture</span><h2>Make<br><em>a plan.</em></h2><p>A clear direction.<br>Every connection considered.</p></div>
+          </div>
+          <div class="film__shot film__shot--build" style="--shot:3">
+            <span class="film__eyebrow film__build-label">03 / Build</span>
+            <div class="film__build-type">FROM PLAN<br><em>TO LIVE.</em></div>
+            <div class="film__browser"><div class="film__window-top"><span>● ● ●</span><span>YOUR NEXT STORE</span><span>↗</span></div><div class="film__shop-nav"><strong>STUDIO / GOODS</strong><span>Collection &nbsp; About &nbsp; Bag (0)</span></div><div class="film__shop"><div class="film__product-art"><svg viewBox="0 0 200 240"><path d="M65 62V35Q100 5 135 35V62L167 100V217H33V100Z"/><path d="M65 62Q100 89 135 62M66 35Q100 63 134 35"/></svg><span>OBJECT / 001</span></div><div class="film__product-info"><span>MADE FOR EVERY DAY</span><h3>Less noise.<br>More purpose.</h3><i></i><i></i><div>Explore the collection ↗</div></div></div></div>
+            <span class="film__corner-note">Design. Development. The details between.</span>
+          </div>
+          <div class="film__shot film__shot--measure" style="--shot:4">
+            <div class="film__measure-ring"></div>
+            <div class="film__shot-copy"><span class="film__eyebrow">04 / Measure</span><h2>Learn.<br>Refine.<br><em>Repeat.</em></h2></div>
+            <div class="film__chart"><span>OBSERVE → LEARN → REFINE</span><div class="film__bars"><i style="--bar:0;--height:32%"></i><i style="--bar:1;--height:48%"></i><i style="--bar:2;--height:40%"></i><i style="--bar:3;--height:65%"></i><i style="--bar:4;--height:58%"></i><i style="--bar:5;--height:80%"></i></div><small>Illustrative motion graphic · no performance claims</small></div>
+          </div>
+          <div class="film__shot film__shot--end" style="--shot:5">
+            <div class="film__end-orbit"></div><span class="film__eyebrow">A clear path forward.</span><div class="film__end-type">BETTER<br>COMMERCE.<br><em>BY DESIGN.</em></div><p>Audit → Plan → Build → Measure</p><span class="film__end-credit">CSS Motion Library / 002</span>
+          </div>
+        </div>
+        <div class="film__cut" aria-hidden="true"></div>
+        <span class="film__sr-only">A thirty-second CSS film in six shots: an opening title, store audit, architecture plan, store build, measurement, and a closing title. The chart is illustrative.</span>
+      </div>
+      <div class="film__controls" data-motion-controls hidden>
+        <button type="button" data-motion-toggle aria-label="Pause animation">Ⅱ Pause</button>
+        <button type="button" data-motion-restart aria-label="Replay animation from the beginning">↺ Replay</button>
+        <label class="film__seek-label"><span class="film__sr-only">Animation position in seconds</span><input data-motion-seek type="range" min="0" max="30" step="0.1" value="0" aria-label="Animation position in seconds"></label>
+        <output data-motion-time>0:00 / 0:30</output>
+        <label class="film__speed"><span class="film__sr-only">Playback speed</span><select data-motion-speed aria-label="Playback speed"><option value="0.5">0.5×</option><option value="1" selected>1×</option><option value="1.5">1.5×</option></select></label>
+      </div>
+    </section>
+  </main>
+  <footer class="demo-footer">30-second CSS film · Six shots · Native playback controls · <a href="animation.css">View CSS</a></footer>
+  <script type="module" src="../../src/auto.js"></script>
+</body>
+</html>

package/examples/003-kinetic-headline/README.md

@@ -0,0 +1,29 @@
+# 003 — Kinetic Headline
+
+An eight-second hero headline reveal: words rise through overflow masks, a hand-drawn
+SVG underline draws in, then the subline and call to action follow. Pure CSS keyframes
+on one shared timeline, driven by `src/player.js`.
+
+| Time | Beat |
+|---|---|
+| 0.2–0.7s | Eyebrow slides in |
+| 0.6–1.7s | Headline words rise one by one |
+| 1.8–2.7s | Underline draws under the last word |
+| 2.2–2.9s | Subline fades up |
+| 2.7–3.5s | CTA pops in |
+| 3.5–7.2s | Hold |
+| 7.2–8s | Everything exits up; loop restarts |
+
+## Customize
+
+- Theme: `--paper`, `--ink`, `--accent` on `.kh`.
+- Copy: edit both the static `.kh__overview` (no-JS / reduced motion) and the animated
+  `.kh__scene`. Keep one `.kh__mask > .kh__word` per word; add `kh__word--N` and a
+  matching keyframe if you add words.
+- Use it as a page hero by dropping the `.kh` section in and keeping `src/player.js`, or remove
+  the controls block and the player for an autoplay-only headline (keep the reduced-motion rule).
+
+## Accessibility
+
+The real heading lives in the static overview; the animated copy is `aria-hidden`. Reduced
+motion and no-JS show the finished headline with no movement and no controls.

package/examples/003-kinetic-headline/animation.css

@@ -0,0 +1,276 @@
+/* Theme tokens: --paper background, --ink text, --accent highlight, --surface raised paper, --muted secondary text, --line borders. */
+.kh {
+  --paper: #f2f0e8;
+  --ink: #121212;
+  --accent: #ff5b2e;
+  --surface: #fbfaf4;
+  --muted: #67645d;
+  --line: #12121224;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: calc((100svh - 140px) * 16 / 9);
+  margin-inline: auto;
+  color: var(--ink);
+  color-scheme: light;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--paper);
+}
+.kh, .kh * { box-sizing: border-box; }
+.kh__stage {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  max-width: calc((100svh - 140px) * 16 / 9);
+  aspect-ratio: 16 / 9;
+  margin-inline: auto;
+  overflow: hidden;
+  container-type: inline-size;
+  border: 1px solid var(--line);
+  border-radius: 1.25rem;
+  background: radial-gradient(circle at 82% 20%, #ff5b2e24 0 11%, transparent 36%), linear-gradient(135deg, #faf8f0, var(--paper) 58%, #e8e4d8);
+}
+.kh__stage::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  top: -24%;
+  right: -8%;
+  width: 34%;
+  aspect-ratio: 1;
+  border: 1px solid #12121220;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.kh__stage::after {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  top: 12%;
+  right: 7%;
+  width: clamp(.55rem, 1.1cqw, 1rem);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--accent);
+  pointer-events: none;
+}
+.kh__overview, .kh__scene { position: absolute; inset: 0; }
+.kh__overview { display: grid; place-items: center; }
+.kh__scene { display: none; }
+.kh.is-ready:not(.is-reduced) .kh__overview { display: none; }
+.kh.is-ready:not(.is-reduced) .kh__scene { display: grid; place-items: center; }
+.kh__content { position: relative; z-index: 1; width: min(82cqw, 72rem); }
+.kh__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: .7em;
+  margin: 0 0 clamp(1rem, 2.6cqw, 2.5rem);
+  font-size: clamp(.62rem, 1.15cqw, .78rem);
+  font-weight: 700;
+  letter-spacing: .18em;
+}
+.kh__eyebrow::before { content: ""; width: 2.4em; height: 2px; background: var(--accent); }
+.kh__headline {
+  margin: 0;
+  font-size: clamp(1.55rem, 8.3cqw, 6.7rem);
+  font-weight: 700;
+  line-height: .95;
+  letter-spacing: -.055em;
+}
+.kh__line { display: flex; align-items: flex-end; gap: .22em; white-space: nowrap; }
+.kh__line--second { margin-top: .06em; }
+.kh__mask { display: block; overflow: hidden; }
+.kh__word { display: block; }
+.kh__last { position: relative; display: inline-block; }
+.kh__underline {
+  position: absolute;
+  left: -.02em;
+  bottom: -.1em;
+  width: 104%;
+  height: .25em;
+  overflow: visible;
+}
+.kh__underline-path {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+}
+.kh__subline {
+  max-width: 42ch;
+  margin: clamp(1rem, 2.2cqw, 2rem) 0 0;
+  color: var(--muted);
+  font-size: clamp(.9rem, 1.55cqw, 1.18rem);
+  line-height: 1.45;
+}
+.kh__pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.8rem;
+  margin-top: clamp(1.25rem, 2.4cqw, 2rem);
+  padding: .65rem 1.15rem;
+  border-radius: 999px;
+  color: var(--ink);
+  background: var(--accent);
+  box-shadow: 0 .35rem 0 var(--ink);
+  font-size: clamp(.78rem, 1.35cqw, 1rem);
+  font-weight: 700;
+}
+.kh__content--scene { animation: kh-exit 8s cubic-bezier(.4, 0, .2, 1) infinite both; }
+.kh__content--scene .kh__eyebrow { animation: kh-eyebrow 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__word--1 { animation: kh-word-1 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__word--2 { animation: kh-word-2 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__word--3 { animation: kh-word-3 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__word--4 { animation: kh-word-4 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__word--5 { animation: kh-word-5 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__word--6 { animation: kh-word-6 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__underline-path { animation: kh-underline 8s cubic-bezier(.4, 0, .2, 1) infinite both; }
+.kh__content--scene .kh__subline { animation: kh-subline 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+.kh__content--scene .kh__pill { animation: kh-cta 8s cubic-bezier(.22, 1, .36, 1) infinite both; }
+@keyframes kh-eyebrow {
+  0%, 2% { opacity: 0; transform: translateX(-130%); }
+  9%, 100% { opacity: 1; transform: translateX(0); }
+}
+@keyframes kh-word-1 {
+  0%, 7% { opacity: 0; transform: translateY(110%); }
+  14%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-word-2 {
+  0%, 8.5% { opacity: 0; transform: translateY(110%); }
+  15.5%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-word-3 {
+  0%, 10% { opacity: 0; transform: translateY(110%); }
+  17%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-word-4 {
+  0%, 11.5% { opacity: 0; transform: translateY(110%); }
+  18.5%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-word-5 {
+  0%, 13% { opacity: 0; transform: translateY(110%); }
+  20%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-word-6 {
+  0%, 14.5% { opacity: 0; transform: translateY(110%); }
+  21.5%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-underline {
+  0%, 22% { opacity: 0; stroke-dashoffset: 1; }
+  24% { opacity: 1; }
+  34%, 100% { opacity: 1; stroke-dashoffset: 0; }
+}
+@keyframes kh-subline {
+  0%, 28% { opacity: 0; transform: translateY(1.1cqw); }
+  36%, 100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes kh-cta {
+  0%, 34% { opacity: 0; transform: scale(.86); }
+  40% { opacity: 1; transform: scale(1.04); }
+  44%, 100% { opacity: 1; transform: scale(1); }
+}
+@keyframes kh-exit {
+  0%, 90% { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(-4cqw); }
+}
+@keyframes mvl-clock { to { opacity: 1; } }
+.kh__clock {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  animation: mvl-clock 8s linear infinite;
+}
+.kh__controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem .7rem;
+  width: 100%;
+  min-width: 0;
+  margin: .7rem auto 0;
+  padding: .48rem .6rem;
+  border-radius: .85rem;
+  color: var(--paper);
+  background: var(--ink);
+  color-scheme: dark;
+}
+.kh__controls[hidden] { display: none; }
+.kh__controls button, .kh__controls select {
+  min-height: 2rem;
+  border: 1px solid #ffffff33;
+  border-radius: .55rem;
+  color: inherit;
+  background: #ffffff0d;
+  font: inherit;
+  font-size: .78rem;
+}
+.kh__controls button { padding: .38rem .65rem; cursor: pointer; }
+.kh__controls button:hover { background: #ffffff1c; }
+.kh__controls select { padding: .35rem 1.8rem .35rem .55rem; cursor: pointer; }
+.kh__controls option { color: var(--paper); background: var(--ink); }
+.kh__controls label { display: flex; align-items: center; min-width: 0; }
+.kh__controls label:first-of-type { flex: 1 1 9rem; }
+.kh__controls input[type="range"] {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  height: .45rem;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  appearance: none;
+  background: linear-gradient(to right, var(--accent) var(--progress, 0%), #ffffff33 0);
+  cursor: pointer;
+}
+.kh__controls input[type="range"]::-webkit-slider-runnable-track { height: .45rem; background: transparent; }
+.kh__controls input[type="range"]::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -.275rem;
+  border: 2px solid var(--paper);
+  border-radius: 50%;
+  appearance: none;
+  background: var(--accent);
+  box-shadow: 0 0 0 1px var(--ink);
+}
+.kh__controls input[type="range"]::-moz-range-track { height: .45rem; border: 0; background: transparent; }
+.kh__controls input[type="range"]::-moz-range-thumb {
+  width: .85rem;
+  height: .85rem;
+  border: 2px solid var(--paper);
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 0 1px var(--ink);
+}
+.kh__controls output { min-width: 4.8rem; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.kh__controls :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+.kh__sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+.kh.is-reduced .kh__overview { display: grid; }
+.kh.is-reduced .kh__scene { display: none; }
+.kh.is-reduced .kh__controls { display: none !important; }
+.kh.is-reduced .kh__scene *, .kh.is-reduced .kh__clock { animation: none !important; }
+@media (max-width: 640px) {
+  .kh__stage { aspect-ratio: auto; min-height: min(34rem, calc(100svh - 9rem)); border-radius: 1rem; }
+  .kh__content { width: 84cqw; }
+  .kh__headline { font-size: clamp(1.55rem, 8.3cqw, 4.4rem); }
+  .kh__controls { gap: .5rem; padding: .5rem; }
+  .kh__controls output { font-size: .72rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kh__overview { display: grid !important; }
+  .kh__scene { display: none !important; }
+  .kh__controls { display: none !important; }
+  .kh__scene *, .kh__clock { animation: none !important; }
+}