diff --git a/package.json b/package.json
index f0123d3..ded1f0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hallmark",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A design skill for AI coding assistants. Makes the UIs they generate look made, not generated. Powered by Together AI.",
   "keywords": [
     "claude",
diff --git a/site/_tests/_thumbs/anya.jpg b/site/_tests/_thumbs/anya.jpg
new file mode 100644
index 0000000..cdb6882
Binary files /dev/null and b/site/_tests/_thumbs/anya.jpg differ
diff --git a/site/_tests/_thumbs/bananastudio.jpg b/site/_tests/_thumbs/bananastudio.jpg
new file mode 100644
index 0000000..5c3cb51
Binary files /dev/null and b/site/_tests/_thumbs/bananastudio.jpg differ
diff --git a/site/_tests/_thumbs/carnival-01.jpg b/site/_tests/_thumbs/carnival-01.jpg
index 4cd40ad..1364ff6 100644
Binary files a/site/_tests/_thumbs/carnival-01.jpg and b/site/_tests/_thumbs/carnival-01.jpg differ
diff --git a/site/_tests/_thumbs/cobalt-01.jpg b/site/_tests/_thumbs/cobalt-01.jpg
index a6d7543..539a682 100644
Binary files a/site/_tests/_thumbs/cobalt-01.jpg and b/site/_tests/_thumbs/cobalt-01.jpg differ
diff --git a/site/_tests/_thumbs/custom-04.jpg b/site/_tests/_thumbs/custom-04.jpg
index 2b4b8f4..65ed307 100644
Binary files a/site/_tests/_thumbs/custom-04.jpg and b/site/_tests/_thumbs/custom-04.jpg differ
diff --git a/site/_tests/_thumbs/hum-07.jpg b/site/_tests/_thumbs/hum-07.jpg
index b7ae648..ac10e5a 100644
Binary files a/site/_tests/_thumbs/hum-07.jpg and b/site/_tests/_thumbs/hum-07.jpg differ
diff --git a/site/_tests/_thumbs/hyperlane.jpg b/site/_tests/_thumbs/hyperlane.jpg
new file mode 100644
index 0000000..608d90c
Binary files /dev/null and b/site/_tests/_thumbs/hyperlane.jpg differ
diff --git a/site/_tests/_thumbs/lumen-01.jpg b/site/_tests/_thumbs/lumen-01.jpg
index a7ddac2..91a032b 100644
Binary files a/site/_tests/_thumbs/lumen-01.jpg and b/site/_tests/_thumbs/lumen-01.jpg differ
diff --git a/site/_tests/_thumbs/najm.jpg b/site/_tests/_thumbs/najm.jpg
new file mode 100644
index 0000000..9f5b47a
Binary files /dev/null and b/site/_tests/_thumbs/najm.jpg differ
diff --git a/site/_tests/_thumbs/soroe.jpg b/site/_tests/_thumbs/soroe.jpg
new file mode 100644
index 0000000..09963de
Binary files /dev/null and b/site/_tests/_thumbs/soroe.jpg differ
diff --git a/site/_tests/_thumbs/tally.jpg b/site/_tests/_thumbs/tally.jpg
new file mode 100644
index 0000000..d237daa
Binary files /dev/null and b/site/_tests/_thumbs/tally.jpg differ
diff --git a/site/_tests/_thumbs/wayfare.jpg b/site/_tests/_thumbs/wayfare.jpg
new file mode 100644
index 0000000..c2f8547
Binary files /dev/null and b/site/_tests/_thumbs/wayfare.jpg differ
diff --git a/site/css/components.css b/site/css/components.css
index b89099c..83d701f 100644
--- a/site/css/components.css
+++ b/site/css/components.css
@@ -3802,11 +3802,14 @@ html[data-theme="aurora"] body {
    decode. Touch devices and reduced-motion get a static top crop. Only the
    <img> cards scroll; the original <video> cards keep their hover-play. */
 @media (hover: hover) and (prefers-reduced-motion: no-preference) {
-  .ex-card__thumb img { transition: object-position 600ms ease; }
+  .ex-card__thumb img { transition: object-position 400ms ease; }
   .ex-card:hover .ex-card__thumb img,
   .ex-card:focus-visible .ex-card__thumb img {
     object-position: left bottom;
-    transition: object-position 5s ease-in-out;
+    /* steady, even scroll through the whole page; per-card duration is set
+       inline (--scroll-dur) proportional to page height so every card scrolls
+       at the same brisk speed. */
+    transition: object-position var(--scroll-dur, 2.4s) linear;
   }
 }
 
diff --git a/site/index.html b/site/index.html
index 2acaa55..2422bb3 100644
--- a/site/index.html
+++ b/site/index.html
@@ -56,10 +56,10 @@
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&family=Young+Serif&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />
 
-  <link rel="stylesheet" href="css/tokens.css?v=20" />
-  <link rel="stylesheet" href="css/base.css?v=20" />
-  <link rel="stylesheet" href="css/components.css?v=20" />
-  <link rel="stylesheet" href="css/sections.css?v=20" />
+  <link rel="stylesheet" href="css/tokens.css?v=22" />
+  <link rel="stylesheet" href="css/base.css?v=22" />
+  <link rel="stylesheet" href="css/components.css?v=22" />
+  <link rel="stylesheet" href="css/sections.css?v=22" />
 
   <script>
     // Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
@@ -104,7 +104,7 @@
   <header class="banner" role="banner">
     <a class="banner__mark" href="#top" aria-label="Hallmark — top of page">
       <span class="brand-mark" aria-hidden="true"><span class="brand-mark__slash">/</span><span class="brand-mark__name">hallmark</span></span>
-      <span class="banner__ver tnum">v1.0</span>
+      <span class="banner__ver tnum">v1.1</span>
     </a>
 
     <a class="banner__install" href="#install" aria-label="Jump to install section">Install</a>
@@ -240,30 +240,30 @@
         <!-- New-theme showcase. Scroll previews via Remotion from the live pages
              (see examples/scroll-demos.json); swap each <img> for
              <video data-hover-play src="_tests/_thumbs/<slug>-scroll.mp4" poster="..."> once rendered. -->
-        <a class="ex-card" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example — content-extraction API, Cobalt — in a new tab">
+        <a class="ex-card" style="--scroll-dur:2.5s" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example — content-extraction API, Cobalt — in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/cobalt-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/cobalt-01.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a content-extraction API, Cobalt</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example — record-label EP page, Carnival — in a new tab">
+        <a class="ex-card" style="--scroll-dur:2.7s" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example — record-label EP page, Carnival — in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/carnival-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/carnival-01.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a record-label EP page, Carnival</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example — AI reasoning tool, Lumen — in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.1s" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example — AI reasoning tool, Lumen — in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/lumen-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/lumen-01.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an AI reasoning tool, Lumen</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.3s" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/hum-07.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/hum-07.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a guided sourdough app, Hum</p>
         </a>
@@ -271,65 +271,58 @@
         <!-- Custom / bespoke showcase. One featured bespoke build; the others live under
              site/examples/custom-*. Scroll preview via Remotion (see examples/scroll-demos.json);
              once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
-        <a class="ex-card" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
+        <a class="ex-card" style="--scroll-dur:4s" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/custom-04.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/custom-04.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a repair-café manifesto poster, custom</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example — SaaS product page, modern-minimal — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/SaaS-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example, a SaaS product page, modern-minimal, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/tally.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page, modern-minimal</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example — travel booking site, atmospheric — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/wayfare-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:3s" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example, a travel booking site, atmospheric, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/wayfare.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site, atmospheric</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="_tests/09-slow-pour/" target="_blank" rel="noopener" aria-label="Open the Slow Pour example — small-batch coffee subscription — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/slow-pour-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
-          </div>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small-batch coffee subscription page</p>
-        </a>
-
-        <a class="ex-card" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example — creative studio with playful motion — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/BananaStudio-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:3.2s" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example, a creative studio with playful motion, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/bananastudio.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example — software architect personal site — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/anya-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:1.8s" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example, a software architect personal site, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/anya.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect personal site</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example — Moroccan fashion brand landing page — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/Najm-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:2s" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example, a Moroccan fashion brand landing page, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/najm.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a Moroccan fashion brand landing page</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="_tests/11-soroe-ceramics/" target="_blank" rel="noopener" aria-label="Open the Soroe example — small ceramics studio site — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/Soroe-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1804" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:1.7s" role="listitem" href="_tests/11-soroe-ceramics/" target="_blank" rel="noopener" aria-label="Open the Soroe example, a small ceramics studio site, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/soroe.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small ceramics studio site</p>
         </a>
 
-        <a class="ex-card" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example — developer infrastructure landing page — in a new tab">
-          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/Hyperlane-example.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+        <a class="ex-card" style="--scroll-dur:3.5s" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example, a developer infrastructure landing page, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/hyperlane.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a developer infrastructure landing page</p>
         </a>
@@ -1084,7 +1077,7 @@
 
       <div class="foot__masthead">
         <span class="foot__wordmark" aria-label="Hallmark"><span class="brand-mark brand-mark--lg" aria-hidden="true"><span class="brand-mark__slash">/</span><span class="brand-mark__name">hallmark</span></span></span>
-        <span class="foot__version tnum">v1.0 · MMXXVI</span>
+        <span class="foot__version tnum">v1.1 · MMXXVI</span>
       </div>
 
       <div class="foot__grid">
@@ -1120,7 +1113,7 @@
     </div>
   </template>
 
-  <script type="module" src="js/main.js?v=20"></script>
+  <script type="module" src="js/main.js?v=22"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/site/js/main.js b/site/js/main.js
index 1e9437c..4e33de3 100644
--- a/site/js/main.js
+++ b/site/js/main.js
@@ -413,7 +413,7 @@ const COPY = {
     letterBody: "The polished-SaaS school of restraint, but warmer. Warm-grey paper instead of pure white; coral accent on focus rings and small marks. Pill CTAs, two-column heroes, generous space.",
     signoff: "Yours,",
     captionA: "Coral",
-    captionB: "v1.0",
+    captionB: "v1.1",
   },
   aurora: {
     eyebrow: "Atmospheric · cool",
@@ -536,7 +536,7 @@ const COPY = {
     letterBody: "The dev-tool register, executed with restraint: a cool near-white canvas, hairlines doing the structural work, one electric cobalt accent reserved for the signal — a live request, a 200, a focused field. Space Grotesk for headings, Inter for prose, JetBrains Mono for the code.",
     signoff: "Ship it,",
     captionA: "Cobalt",
-    captionB: "v1.0",
+    captionB: "v1.1",
   },
 };
 
diff --git a/skills/hallmark/SKILL.md b/skills/hallmark/SKILL.md
index 14a0645..859b6a4 100644
--- a/skills/hallmark/SKILL.md
+++ b/skills/hallmark/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: hallmark
 description: "Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study."
-version: 1.0.0
+version: 1.1.0
 ---
 
 # Hallmark
@@ -409,7 +409,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 **Format** (Markdown bullets, not ASCII boxes — they render reliably across every chat client and terminal):
 
 ```markdown
-**Hallmark · v1.0.0**
+**Hallmark · v1.1.0**
 
 - **Macrostructure** · Stat-Led
 - **Theme** · Plain (#fff paper · cool greys · ink-blue accent)
diff --git a/skills/hallmark/references/preview-examples.md b/skills/hallmark/references/preview-examples.md
index 9f3a374..7c2b9c2 100644
--- a/skills/hallmark/references/preview-examples.md
+++ b/skills/hallmark/references/preview-examples.md
@@ -5,7 +5,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
 ---
 
 *Long Document (editorial, motion-cut):*
-> **Hallmark · v1.0.0**
+> **Hallmark · v1.1.0**
 >
 > - **Macrostructure** · Long Document
 > - **Theme** · Newsprint (cool slate paper · steel-blue accent · geometric sans)
@@ -16,7 +16,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
 > - **Diversification** · first run for this project
 
 *Bento Grid (SaaS, motion-on):*
-> **Hallmark · v1.0.0**
+> **Hallmark · v1.1.0**
 >
 > - **Macrostructure** · Bento Grid
 > - **Theme** · Newsprint (cool slate paper · steel-blue accent · geometric sans)
@@ -27,7 +27,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
 > - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)
 
 *Manifesto (declarative, no enrichment):*
-> **Hallmark · v1.0.0**
+> **Hallmark · v1.1.0**
 >
 > - **Macrostructure** · Manifesto
 > - **Theme** · Manifesto (dark · Inter Tight 900 · single red bleed)
@@ -38,7 +38,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
 > - **Diversification** · differs from Newsprint on paper band (dark vs light) + display style (display-heavy vs geometric-sans)
 
 *Custom (Coffeebox archival café):*
-> **Hallmark · v1.0.0**
+> **Hallmark · v1.1.0**
 >
 > - **Macrostructure** · Long Document
 > - **Theme** · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)