@prestyj/cli 5.27.0 → 5.28.1

package/assets/motion/library/looks/editorial-ink/look.md

@@ -0,0 +1,80 @@
+# Editorial Ink
+
+A documentary title sequence printed in ink. A deep bottle-green **field**
+(or oxblood on `--field-2`) with grain and a heavy vignette, **bone** type,
+and one lamplight **ochre accent**. Titles are Fraunces with its soft,
+slightly wonky display cut; people speak in Newsreader italic. The pace is
+patient: the look earns trust by not hurrying.
+
+## Palette
+
+- `--field` #0f2a24 bottle green; `--field-2` #3a1318 oxblood for a second
+  chapter or a darker, more intimate beat. Never cream, never paper white:
+  the page is dark.
+- `--ink` #ece4d4 bone (11.7:1 on the green, 12:1 on oxblood). Titles,
+  quotes and line illustrations are all bone.
+- `--accent` #e3a857 ochre = lamplight. One use per scene: the chapter
+  marker, a short rule, a single glowing point (a lamp, a window, a pin on a
+  map). Never on a title.
+- `--muted` (64% bone) for attributions and captions; `--line` (20%) for
+  frames and horizon lines.
+
+## Type
+
+- Titles: Fraunces 300–360, `font-variation-settings: "opsz" 144, "SOFT"
+  100, "WONK" 1`, 130–170px, line-height 0.98, tracking −0.025em. Sentence
+  case, no full stop, two lines with a meaningful break. The whole title is
+  serif; never mix it into a sans headline.
+- Voices: Newsreader italic 340–380, opsz 48, 44–56px, line-height 1.16, in
+  real curly quotes, broken by hand into 2–3 lines. Attribution Newsreader
+  roman 24–28px: name at 560 in ink, role in `--muted`.
+- Chapter markers: Newsreader all-small-caps, 28–32px, +0.08em, in accent.
+- Martian Mono only for archival data (dates on a map, coordinates), 18px,
+  never as frame decoration.
+
+## Background and framing
+
+- Two stacked radials: a warm ochre spill (10%) from the upper-left, and a
+  vignette to 55% black at the corners. Over everything, SVG
+  `feTurbulence` grain (fractalNoise, baseFrequency 0.9, fixed `seed`) at
+  14–18% opacity with `mix-blend-mode: overlay`.
+- Generous margins: 150px left, text column max 960px. Images and
+  illustrations sit in a porthole (circle) or a 4:5 plate with a 2px bone
+  rule at 55%, placed on the right third.
+- Illustrations are single-weight 2px bone line drawings that draw
+  themselves; the one light source in them is the accent.
+
+## Motion
+
+- Slow and continuous. Title lines rise out of line masks (`yPercent` 100 →
+  0, `power3.out` 1.4s, stagger 0.18s). Chapter markers and captions only
+  fade (`sine.inOut` 1.0s).
+- Quotes breathe in: opacity + y 16 + blur 6px → 0, `power2.out` 1.4s.
+- Line illustrations draw with `sine.inOut` 1.8s, stagger 0.12s. Ambient
+  movement (a sweeping beam, drifting water lines) runs the whole scene on
+  `sine.inOut` so the frame is never fully still.
+- Holds: 2.5s+ after the last element lands; the viewer reads a quote twice.
+- Transitions: dissolve through the field (0.8s), or a 1.2s cross-dissolve
+  between green and oxblood for a chapter change. No wipes, no slides, no
+  scale punches.
+
+## Avoid
+
+- Cream, beige or paper-white backgrounds (the banned AI default).
+- Italic serif accent words inside sans headlines.
+- Bright saturated accents, more than one accent, glowing text.
+- Fast eases (`expo`, `back`), bouncy type, kinetic typography.
+- Mono labels in the corners, timecodes, "01/02/03" markers.
+
+## Scene recipes
+
+1. **Title card:** chapter marker in accent, two-line Fraunces title left,
+   a 96px ochre rule, then the voice quote and attribution; line-drawn
+   porthole illustration on the right third with one moving light.
+2. **The voice:** oxblood field, only a quote, Newsreader italic at 72px,
+   centered vertically on the left two-thirds, attribution fading in 1s
+   after; a 2px bone rule grows left → right under it over the whole hold.
+3. **Place and date:** a line-drawn coastline or street map in bone draws
+   over 2.5s; one ochre point pulses once (scale 1 → 1.6 → 1, `sine.inOut`
+   1.2s); Fraunces 96px place name bottom-left, Martian Mono 18px coordinates
+   under it in `--muted`.

package/assets/motion/library/looks/editorial-ink/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "editorial-ink",
+  "name": "Editorial Ink",
+  "description": "A documentary title sequence printed in ink: deep bottle-green (or oxblood) field with film grain and a vignette, bone-colored type, soft and slightly wonky Fraunces for titles and Newsreader italic for the human voice. One lamplight ochre accent. Slow, patient, respectful motion.",
+  "tags": ["editorial", "documentary", "serif", "dark", "warm", "grain", "storytelling", "quiet"],
+  "fonts": ["Fraunces", "Newsreader", "Martian Mono"],
+  "bestFor": ["documentaries", "human stories", "brand films", "founder stories", "nonprofits", "long-form journalism"],
+  "pieces": [],
+  "samplePieces": [],
+  "previewAt": 3.2
+}

package/assets/motion/library/looks/editorial-ink/sample.html

@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/editorial-ink.css" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: var(--field);
+        overflow: hidden;
+        font-family: var(--text);
+        color: var(--ink);
+      }
+      /* Lamplight spill from the upper left, heavy vignette, printed grain. */
+      .light {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 1100px 800px at 18% 20%, rgba(227, 168, 87, 0.1), transparent 70%),
+          radial-gradient(ellipse 1500px 1000px at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
+      }
+      .grain {
+        position: absolute;
+        inset: 0;
+        opacity: 0.16;
+        mix-blend-mode: overlay;
+      }
+      .chapter {
+        position: absolute;
+        left: 150px;
+        top: 214px;
+        font-size: 30px;
+        font-weight: 400;
+        font-variant-caps: all-small-caps;
+        letter-spacing: 0.08em;
+        color: var(--accent);
+      }
+      .title {
+        position: absolute;
+        left: 144px;
+        top: 262px;
+        font-family: var(--display);
+        font-weight: var(--display-weight);
+        letter-spacing: var(--display-tracking);
+        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
+        font-size: 150px;
+        line-height: 0.98;
+      }
+      .title div {
+        overflow: hidden;
+        padding-bottom: 0.08em;
+        margin-bottom: -0.08em;
+      }
+      .title span {
+        display: block;
+      }
+      .rule {
+        position: absolute;
+        left: 150px;
+        top: 640px;
+        width: 96px;
+        height: 2px;
+        background: var(--accent);
+        transform-origin: 0 50%;
+      }
+      .quote {
+        position: absolute;
+        left: 150px;
+        top: 690px;
+        width: 860px;
+        font-style: italic;
+        font-weight: 360;
+        font-variation-settings: "opsz" 48;
+        font-size: 52px;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .by {
+        position: absolute;
+        left: 150px;
+        top: 846px;
+        font-size: 26px;
+        font-weight: 400;
+        color: var(--muted);
+      }
+      .by b {
+        font-weight: 560;
+        color: var(--ink);
+      }
+      .plate {
+        position: absolute;
+        left: 1170px;
+        top: 214px;
+        width: 600px;
+        height: 600px;
+      }
+      .caption {
+        position: absolute;
+        left: 1170px;
+        top: 846px;
+        width: 600px;
+        text-align: center;
+        font-style: italic;
+        font-size: 26px;
+        color: var(--muted);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-editorial-ink"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="light"></div>
+      <svg class="plate" id="plate" viewBox="0 0 600 600">
+        <defs>
+          <clipPath id="porthole"><circle cx="300" cy="300" r="298" /></clipPath>
+          <linearGradient id="beamR" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0" stop-color="#e3a857" stop-opacity="0.75" />
+            <stop offset="1" stop-color="#e3a857" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient id="beamL" x1="1" y1="0" x2="0" y2="0">
+            <stop offset="0" stop-color="#e3a857" stop-opacity="0.45" />
+            <stop offset="1" stop-color="#e3a857" stop-opacity="0" />
+          </linearGradient>
+          <radialGradient id="glow">
+            <stop offset="0" stop-color="#e3a857" stop-opacity="0.9" />
+            <stop offset="1" stop-color="#e3a857" stop-opacity="0" />
+          </radialGradient>
+        </defs>
+        <g clip-path="url(#porthole)">
+          <rect width="600" height="600" fill="#0b211c" />
+          <g id="beams">
+            <polygon points="300,208 760,70 760,330 300,218" fill="url(#beamR)" />
+            <polygon points="300,208 -160,70 -160,330 300,218" fill="url(#beamL)" />
+          </g>
+          <circle id="glow" cx="300" cy="213" r="46" fill="url(#glow)" />
+          <g fill="none" stroke="#ece4d4" stroke-width="2" stroke-linecap="round">
+            <path class="draw" d="M0 404 L600 404" stroke-opacity="0.5" />
+            <path class="draw" d="M340 440 L600 440 M420 470 L600 470 M470 500 L600 500 M520 530 L600 530" stroke-opacity="0.35" />
+            <path class="draw" d="M0 470 L90 446 L150 452 L210 424 L262 412 L338 412 L372 428 L402 424 L446 452" fill="#0b211c" />
+            <path class="draw" d="M264 412 L280 232 L320 232 L336 412 Z" fill="#0b211c" />
+            <path class="draw" d="M270 350 L330 350 M275 290 L325 290" stroke-opacity="0.6" />
+            <path class="draw" d="M266 232 L334 232 M286 232 L286 196 L314 196 L314 232 M280 196 L300 176 L320 196 Z" fill="#0b211c" />
+          </g>
+          <circle cx="300" cy="213" r="7" fill="#e3a857" />
+        </g>
+        <circle cx="300" cy="300" r="298" fill="none" stroke="#ece4d4" stroke-opacity="0.55" stroke-width="2" />
+      </svg>
+      <!-- edit: chapter -->
+      <div class="chapter" id="chapter">Chapter one · The keeper</div>
+      <!-- edit: title, one line per div -->
+      <div class="title" id="title">
+        <div><span>The last keeper</span></div>
+        <div><span>of the light</span></div>
+      </div>
+      <div class="rule" id="rule"></div>
+      <!-- edit: quote and attribution -->
+      <div class="quote" id="quote">“Every night for forty-one years,<br />I lit it anyway.”</div>
+      <div class="by" id="by"><b>Margaret Eunson</b>, keeper 1962 – 2003</div>
+      <div class="caption" id="caption">Muckle Flugga, Shetland</div>
+      <svg class="grain" width="1920" height="1080">
+        <filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" stitchTiles="stitch" /><feColorMatrix type="saturate" values="0" /></filter>
+        <rect width="1920" height="1080" filter="url(#noise)" />
+      </svg>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      document.querySelectorAll(".draw").forEach((p) => {
+        const l = p.getTotalLength();
+        gsap.set(p, { strokeDasharray: l, strokeDashoffset: l });
+      });
+
+      tl.from("#plate", { opacity: 0, scale: 0.97, transformOrigin: "50% 50%", duration: 1.6, ease: "power2.out" }, 0)
+        .to(".draw", { strokeDashoffset: 0, duration: 1.8, ease: "sine.inOut", stagger: 0.12 }, 0.1)
+        .fromTo("#beams", { rotation: -24, svgOrigin: "300 213", opacity: 0 }, { rotation: 10, svgOrigin: "300 213", opacity: 1, duration: 3.9, ease: "sine.inOut" }, 0.1)
+        .from("#glow", { opacity: 0, duration: 1.2, ease: "sine.inOut" }, 0.6)
+        .from("#chapter", { opacity: 0, duration: 1.0, ease: "sine.inOut" }, 0.3)
+        .from("#title span", { yPercent: 100, duration: 1.4, ease: "power3.out", stagger: 0.18 }, 0.45)
+        .from("#rule", { scaleX: 0, duration: 1.0, ease: "power2.inOut" }, 1.3)
+        .from("#quote", { opacity: 0, y: 16, filter: "blur(6px)", duration: 1.4, ease: "power2.out" }, 1.6)
+        .from("#by, #caption", { opacity: 0, duration: 1.0, ease: "sine.inOut", stagger: 0.2 }, 2.3)
+        .to({}, { duration: 0.1 }, 3.9);
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/editorial-ink/tokens.css

@@ -0,0 +1,16 @@
+/* Editorial Ink: deep ink-green field, bone type, soft wonky Fraunces, Newsreader for voices. */
+.look-editorial-ink {
+  --field: #0f2a24;
+  --field-2: #3a1318;
+  --ink: #ece4d4;
+  --accent: #e3a857;
+  --muted: rgba(236, 228, 212, 0.64);
+  --line: rgba(236, 228, 212, 0.2);
+  --display: "Fraunces", serif;
+  --display-weight: 340;
+  --display-stretch: 100%;
+  --display-tracking: -0.025em;
+  --text: "Newsreader", serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 2px;
+}

package/assets/motion/library/looks/mono-luxe/look.md

@@ -0,0 +1,19 @@
+# Mono luxe
+
+One object. One sentence. Enough time to notice both. A monochrome product-film system built around shape and material, not decorative luxury signals.
+
+## System
+
+Warm stone and charcoal are the entire palette. Gloock provides the high-contrast serif voice; Mona Sans handles restrained supporting copy. Keep headlines to six words or fewer. Set one object on a low plinth and leave broad negative space above. The sample uses an original abstract loop sculpture, not a real product or brand endorsement.
+
+## Motion
+
+Reveal the object in 1.2s with `power2.out`, then uncover the headline over 0.9s. Hold for at least 3s. Prefer a hard cut on a musical phrase or one finite iris. Never add bounce, neon rims or continuous orbit merely to fill time.
+
+## Scene recipes
+
+1. **Silhouette:** sculpture right, quiet title left, caption on a single baseline below.
+2. **Material study:** `clay-drop-3d` in monochrome, crop to the contact point, then cut to the complete form.
+3. **Closing thought:** `serif-quote` with a verified attributed line, followed by `end-card` with a real destination.
+
+Avoid faux seals, invented heritage dates, gold accents, microtype as decoration and gradients unrelated to lighting. Use real product media when supplied; never imply the abstract sample is the user's product.

package/assets/motion/library/looks/mono-luxe/meta.json

@@ -0,0 +1,9 @@
+{
+  "id": "mono-luxe", "name": "Mono luxe",
+  "description": "Stone and charcoal, high-contrast serif type and a sculptural product silhouette. Slow reveals and ample empty space give a single object the whole stage.",
+  "tags": ["monochrome", "serif", "luxury", "sculptural", "restrained"],
+  "fonts": ["Gloock", "Mona Sans", "Martian Mono"],
+  "bestFor": ["design objects", "craft stories", "premium product films"],
+  "pieces": ["serif-quote", "vignette", "clay-drop-3d", "iris-circle", "end-card"],
+  "samplePieces": [], "previewAt": 3.5
+}

package/assets/motion/library/looks/mono-luxe/sample.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="assets/fonts/fonts.css"><link rel="stylesheet" href="assets/looks/mono-luxe.css"><script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+html,body{margin:0;width:1920px;height:1080px;overflow:hidden}#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--field);color:var(--ink);font-family:var(--text)}
+.wordmark{position:absolute;left:112px;top:84px;font-size:24px;letter-spacing:.18em;line-height:1.4}.copy{position:absolute;left:112px;top:355px;width:830px}h1{font:400 140px/1.08 var(--display);letter-spacing:var(--display-tracking);margin:0 0 45px}.copy p{font-size:27px;line-height:1.5;max-width:440px;color:var(--muted)}
+.object{position:absolute;left:1130px;top:200px;width:480px;height:540px;border:90px solid var(--ink);border-radius:50% 50% 46% 46%;box-sizing:border-box;transform:rotate(-16deg);box-shadow:inset 14px 9px 18px color-mix(in srgb,var(--field) 18%,transparent),18px 12px 24px color-mix(in srgb,var(--ink) 16%,transparent)}
+.plinth{position:absolute;left:990px;top:770px;width:780px;height:130px;background:linear-gradient(110deg,var(--field),var(--line));color:var(--ink);border-top:2px solid var(--line);box-shadow:32px 42px 48px color-mix(in srgb,var(--ink) 14%,transparent)}
+.shadow{position:absolute;left:1180px;top:740px;width:410px;height:36px;background:var(--ink);color:var(--field);border-radius:50%;filter:blur(18px);opacity:.25}
+.footer{position:absolute;left:112px;right:112px;bottom:68px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;font-size:20px;line-height:1.4;color:var(--muted)}
+</style></head><body><div id="root" class="look-mono-luxe" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
+<!-- edit: illustrative collection and copy --><div class="wordmark">FORM STUDIES</div><section class="copy"><h1>Nothing<br>unnecessary.</h1><p>A study in weight, balance<br>and the space between.</p></section><div class="plinth"></div><div class="shadow"></div><div class="object" role="img" aria-label="Abstract charcoal loop sculpture"></div><div class="footer"><span>Loop / An original shape study</span><span>Stone &amp; charcoal</span></div></div>
+<script>(()=>{const tl=gsap.timeline({paused:true});tl.from('.plinth,.shadow',{opacity:0,duration:1},0).from('.object',{y:50,rotation:-8,opacity:0,duration:1.2,ease:'power2.out'},.1).from('h1',{clipPath:'inset(0 100% 0 0)',duration:.9,ease:'power2.inOut'},.8).from('.copy p,.wordmark,.footer',{opacity:0,duration:.8,stagger:.12},1.5).to({},{duration:3.46});window.__timelines={main:tl};})();</script></body></html>

package/assets/motion/library/looks/mono-luxe/tokens.css

@@ -0,0 +1,15 @@
+.look-mono-luxe {
+  --field: #e8e5de;
+  --field-2: #282725;
+  --ink: #282725;
+  --accent: #282725;
+  --muted: #65635e;
+  --line: #b5b1a8;
+  --display: "Gloock", serif;
+  --display-weight: 400;
+  --display-stretch: 100%;
+  --display-tracking: -0.045em;
+  --text: "Mona Sans", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}

package/assets/motion/library/looks/soft-light-ad/look.md

@@ -0,0 +1,63 @@
+# Soft Light Ad
+
+A calm, premium product ad. Light, air and one brand blue. Every frame has
+one soft 3D subject, one short lowercase sentence, and a lot of space.
+
+## Palette
+
+- `--field` cool near-white (#eef1f7-ish), never pure white and never cream.
+- `--field-2` a deep saturated brand color used only as the light pool at
+  one edge of the frame (and for the far haze in 3D scenes).
+- `--accent` the same brand hue, brighter: the 3D object, title bars, the
+  one highlighted word in each caption.
+- `--ink` a soft slate (#3a4150), not black. Everything else is white UI
+  with soft grey skeleton lines.
+- A single warm note is allowed in 3D skies (a peach haze at the top) and
+  one small yellow detail per scene (a dot, a tile) as a spark.
+
+## Type
+
+- Captions are one short lowercase sentence, Host Grotesk 500, 54–64px,
+  tracking −0.02em, centred above the subject, with one or two words in
+  `--accent`. Typed on (`typewriter-caption`), never slammed.
+- No headlines, no uppercase, no mono labels on screen. The product name
+  appears once, on the end card.
+
+## Background and framing
+
+- `soft-light-field`: white hotspot behind the subject, the deep pool
+  rolling in from one edge. Alternate the pool's side between scenes.
+- 3D scenes (`clay-drop-3d`) use a hazy horizon with blurred mountains:
+  the same airy palette in depth.
+- Subjects sit slightly below centre with a soft floor shadow. Back layers
+  are blurred (depth of field), never sharp.
+
+## Motion
+
+- Everything is smooth and continuous: `expo.out` arrivals over 1.2–1.4s,
+  `power2.out` camera drifts across the whole scene, holds of 1.5s+.
+- One gentle hero beat per scene (a card lifting toward the camera, an
+  object dropping into water), never more.
+- Scene changes: the camera keeps moving through the cut, or the subject
+  morphs into the next (windows collapse into the laptop screen, the clay
+  object becomes the app icon). No hard cuts, no flashes, no wipes.
+- Captions start typing ~0.3s into a scene and finish before the hero
+  beat.
+
+## Avoid
+
+- Dark backgrounds, neon, glows, gradients as decoration.
+- Detailed or realistic 3D. Keep forms simple, rounded, soft-shadowed.
+- Real screenshots at full sharpness in this look: use the illustrative
+  `ui-stack-3d` windows, or put the real UI inside them.
+- More than one accent word per caption.
+
+## Scene recipes
+
+1. **Promise:** `soft-light-field` + `typewriter-caption` ("a good *deal*
+   should not take all day") + `ui-stack-3d` fanning out below.
+2. **Moment:** `clay-drop-3d` alone, no caption, 3–4s: the pause that makes
+   the ad feel expensive.
+3. **Together:** `soft-light-field` (pool on the other side) + caption
+   ("flights and hotels, *together*") + `ui-stack-3d` with the inner card
+   lifting on the beat, then the end card.

package/assets/motion/library/looks/soft-light-ad/meta.json

@@ -0,0 +1,39 @@
+{
+  "id": "soft-light-ad",
+  "name": "Soft Light Ad",
+  "description": "Airy cool-white field with a deep blue light pool at one edge, one brand blue accent, soft clay 3D objects and illustrative UI cards stacked in depth with soft shadows, lowercase sentence captions typed on with one accent word. Smooth, continuous, calm: a premium product ad.",
+  "tags": [
+    "light",
+    "airy",
+    "soft-3d",
+    "clay",
+    "ad",
+    "premium",
+    "consumer",
+    "saas",
+    "calm"
+  ],
+  "fonts": [
+    "Host Grotesk",
+    "Martian Mono"
+  ],
+  "bestFor": [
+    "product ads",
+    "saas launches",
+    "consumer apps",
+    "feature teasers",
+    "social ads"
+  ],
+  "pieces": [
+    "soft-light-field",
+    "typewriter-caption",
+    "ui-stack-3d",
+    "clay-drop-3d"
+  ],
+  "samplePieces": [
+    "soft-light-field",
+    "ui-stack-3d",
+    "typewriter-caption"
+  ],
+  "previewAt": 3.4
+}

package/assets/motion/library/looks/soft-light-ad/sample.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/soft-light-ad.css" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: var(--field);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-soft-light-ad"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="bg" data-composition-id="soft-light-field" data-composition-src="compositions/soft-light-field.html" data-start="0" data-duration="5" data-width="1920" data-height="1080" data-track-index="0"></div>
+      <div id="stack" data-composition-id="ui-stack-3d" data-composition-src="compositions/ui-stack-3d.html" data-start="0" data-duration="5" data-width="1920" data-height="1080" data-track-index="1"></div>
+      <div id="caption" data-composition-id="typewriter-caption" data-composition-src="compositions/typewriter-caption.html" data-start="0" data-duration="4" data-width="1920" data-height="1080" data-track-index="2"></div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      tl.to({}, { duration: 5 });
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/soft-light-ad/tokens.css

@@ -0,0 +1,17 @@
+/* Soft Light Ad: airy cool-white field, one brand blue, a deep blue light
+   pool at the edge, soft clay 3D and illustrative UI with soft shadows. */
+.look-soft-light-ad {
+  --field: #eef1f7;
+  --field-2: #0b2a8f;
+  --ink: #3a4150;
+  --accent: #2f5bff;
+  --muted: rgba(58, 65, 80, 0.78);
+  --line: rgba(58, 65, 80, 0.12);
+  --display: "Host Grotesk", sans-serif;
+  --display-weight: 500;
+  --display-stretch: 100%;
+  --display-tracking: -0.02em;
+  --text: "Host Grotesk", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 22px;
+}

package/assets/motion/library/looks/sunlit-consumer/look.md

@@ -0,0 +1,19 @@
+# Sunlit consumer
+
+An everyday product made tangible by warm paper, a long shadow and one human sentence. Not a beige version of a tech dashboard.
+
+## System
+
+Cream field, chestnut ink, restrained terracotta emphasis. Fraunces carries the voice; Host Grotesk carries product details. Mono is optional and limited to dates or actual measurements. Set copy on the left and one physical-feeling product object on the right. Keep shadows directional, as though one window lights the scene.
+
+## Motion
+
+Settle the object over 0.9s with `power3.out`; let copy arrive 0.2s later. A slow, finite change in light can support a 3s hold. No perpetual floating. Transition by a warm field cut or a camera crop, not an unrelated particle effect.
+
+## Scene recipes
+
+1. **Small ritual:** the sample's paper day planner and one warm serif promise. Dates and tasks are illustrative editable copy.
+2. **Product moment:** `phone-frame` on the right with a real supplied screen, one sentence on the left. Use `light-leak-soft` sparingly behind the object, never across body text.
+3. **Human close:** `serif-quote` followed by `end-card`, with a concrete next step rather than invented praise.
+
+Avoid excessive capsules, yellow-on-cream text, claims without evidence, fake testimonials and a stack of unrelated decorative objects. Do not add grain over small text.

package/assets/motion/library/looks/sunlit-consumer/meta.json

@@ -0,0 +1,9 @@
+{
+  "id": "sunlit-consumer", "name": "Sunlit consumer",
+  "description": "Warm paper, chestnut ink and low afternoon shadows. Expressive serif copy sits beside a tangible product moment rather than a wall of floating cards.",
+  "tags": ["warm", "consumer", "serif", "daylight", "product"],
+  "fonts": ["Fraunces", "Host Grotesk", "Martian Mono"],
+  "bestFor": ["consumer app launches", "everyday products", "calm brand stories"],
+  "pieces": ["phone-frame", "serif-quote", "light-leak-soft", "end-card"],
+  "samplePieces": [], "previewAt": 3
+}

package/assets/motion/library/looks/sunlit-consumer/sample.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="assets/fonts/fonts.css"><link rel="stylesheet" href="assets/looks/sunlit-consumer.css"><script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+html,body{margin:0;width:1920px;height:1080px;overflow:hidden}#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--field);color:var(--ink);font-family:var(--text)}
+.light{position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,color-mix(in srgb,var(--accent) 9%,transparent) 70%,transparent 90%)}
+.copy{position:absolute;left:128px;top:230px;width:820px}.brand{font-size:30px;line-height:1.4;margin:0 0 64px;color:var(--accent)}h1{font:500 142px/1.02 var(--display);letter-spacing:var(--display-tracking);margin:0 0 40px}.dek{font-size:32px;line-height:1.5;max-width:620px;color:var(--muted)}
+.planner{position:absolute;left:1100px;top:180px;width:600px;height:720px;box-sizing:border-box;padding:54px;background:var(--field);color:var(--ink);border:2px solid var(--line);border-radius:8px;box-shadow:48px 64px 80px color-mix(in srgb,var(--ink) 20%,transparent);transform:rotate(7deg)}
+.day{font:22px/1.4 var(--mono);color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:24px}.date{font:500 150px/1.1 var(--display);margin:30px 0 32px;letter-spacing:-.06em}.task{font-size:28px;line-height:1.4;padding:22px 0;border-bottom:2px solid var(--line);display:flex;gap:20px}.check{width:26px;height:26px;border:2px solid var(--accent);border-radius:50%;flex-shrink:0;margin-top:4px}.done .check{background:var(--accent);color:var(--field)}.note{font:italic 30px/1.3 var(--display);margin-top:38px;color:var(--accent)}
+</style></head><body><div id="root" class="look-sunlit-consumer" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080"><div class="light"></div>
+<!-- edit: illustrative brand and message --><section class="copy"><p class="brand">Daylight / A little more space</p><h1>A day that<br>feels yours.</h1><p class="dek">Make time for the small things.<br>Leave room for everything else.</p></section>
+<!-- edit: illustrative planner date and tasks --><div class="planner"><div class="day">MONDAY / SEPTEMBER</div><div class="date">28</div><div class="task done"><span class="check"></span>A slower morning</div><div class="task"><span class="check"></span>One good idea</div><div class="task"><span class="check"></span>A walk before sunset</div><div class="note">Enough for today.</div></div></div>
+<script>(()=>{const tl=gsap.timeline({paused:true});tl.from('.planner',{y:90,rotation:12,opacity:0,duration:1,ease:'power3.out'},0).from('.brand,h1,.dek',{y:28,opacity:0,stagger:.16,duration:.7,ease:'power2.out'},.2).from('.task,.note',{opacity:0,stagger:.12,duration:.45},.8).from('.light',{opacity:0,duration:2},0).to({},{duration:3});window.__timelines={main:tl};})();</script></body></html>

package/assets/motion/library/looks/sunlit-consumer/tokens.css

@@ -0,0 +1,15 @@
+.look-sunlit-consumer {
+  --field: #f4ebdc;
+  --field-2: #70442e;
+  --ink: #382b23;
+  --accent: #995133;
+  --muted: #75604e;
+  --line: #d6c2a7;
+  --display: "Fraunces", serif;
+  --display-weight: 500;
+  --display-stretch: 100%;
+  --display-tracking: -0.045em;
+  --text: "Host Grotesk", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 28px;
+}