Add weave home retail social examples

ATTRIBUTION.md

@@ -0,0 +1,21 @@
+# Attribution
+
+## Weave Home Retail Social Posts
+
+The Weave Home example set uses source-neutral Unsplash photos passed through template modification JSON files:
+
+- `examples/use-cases/assets/weave-home-ottoman-unsplash.jpg` - Photo by Katsia Jazwinska on Unsplash: https://unsplash.com/photos/fRYJMUmM7PQ
+- `examples/use-cases/assets/weave-home-lifestyle-unsplash.jpg` - Photo by Annie Spratt on Unsplash: https://unsplash.com/photos/Bre2Z7HBwlQ
+- `examples/use-cases/assets/weave-home-nursery-unsplash.jpg` - Photo by Alexander Mass on Unsplash: https://unsplash.com/photos/fYyc27_cHfQ
+
+Unsplash License: https://unsplash.com/license
+
+## Velora Social Kit
+
+The Velora example set uses source-neutral Unsplash photos passed through template modification JSON files:
+
+- `examples/use-cases/assets/velora-founder-unsplash.jpg` - Photo by Vitaly Gariev on Unsplash: https://unsplash.com/photos/272ClcPZ2Qs
+- `examples/use-cases/assets/velora-desk-unsplash.jpg` - Photo by Anil Jose Xavier on Unsplash: https://unsplash.com/photos/pu95Yl-Qp34
+- `examples/use-cases/assets/velora-textile-unsplash.jpg` - Photo by Oscar Salgado on Unsplash: https://unsplash.com/photos/NA_lOSxbQHY
+
+Unsplash License: https://unsplash.com/license

README.md

@@ -731,8 +731,8 @@ Result:
 
 Use a reusable template for an editorial founder social kit with refined serif typography, strict
 margins, muted neutrals, and deep red accents. This source-neutral adaptation replaces the
-inspiration's name, slogans, logos, handles, and media with fictional Velora copy plus CSS-drawn
-marks and abstract photo crops.
+inspiration's name, slogans, logos, handles, and media with fictional Velora copy plus Unsplash
+photos passed through JSON image layers.
 
 #### Founder Editorial Post
 
@@ -853,6 +853,100 @@ Result:
 
 ![Velora palette study social post result](./examples/use-cases/velora-social-kit-palette.png)
 
+### Render Weave Home Retail Social Posts
+
+Use a reusable template for a retail campaign with product-forward square posts, lifestyle overlays,
+and a warm family promo card. This set adapts the supplied three-post composition with a fictional
+home brand, original copy, Unsplash photos passed through JSON image layers, and shifted warm
+neutrals.
+
+#### Woven Ottoman Product Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/weave-home-social.html \
+  --css examples/use-cases/weave-home-social.css \
+  --modify-file examples/use-cases/weave-home-social-product.json \
+  --out examples/use-cases/weave-home-social-product.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/weave-home-social.html",
+  cssPath: "examples/use-cases/weave-home-social.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/weave-home-social-product.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/weave-home-social-product.png" },
+});
+```
+
+Result:
+
+![Weave Home woven ottoman product post result](./examples/use-cases/weave-home-social-product.png)
+
+#### Textile Lifestyle Overlay Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/weave-home-social.html \
+  --css examples/use-cases/weave-home-social.css \
+  --modify-file examples/use-cases/weave-home-social-lifestyle.json \
+  --out examples/use-cases/weave-home-social-lifestyle.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/weave-home-social.html",
+  cssPath: "examples/use-cases/weave-home-social.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/weave-home-social-lifestyle.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/weave-home-social-lifestyle.png" },
+});
+```
+
+Result:
+
+![Weave Home lifestyle textile overlay post result](./examples/use-cases/weave-home-social-lifestyle.png)
+
+#### Nursery Promo Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/weave-home-social.html \
+  --css examples/use-cases/weave-home-social.css \
+  --modify-file examples/use-cases/weave-home-social-family.json \
+  --out examples/use-cases/weave-home-social-family.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/weave-home-social.html",
+  cssPath: "examples/use-cases/weave-home-social.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/weave-home-social-family.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/weave-home-social-family.png" },
+});
+```
+
+Result:
+
+![Weave Home nursery promo post result](./examples/use-cases/weave-home-social-family.png)
+
 ### Render Custom HTML with Fit Text
 
 Use custom HTML/CSS when presets are too constrained, but keep `data-clickclick-fit` on important

examples/use-cases/velora-social-kit-founder.json

@@ -7,18 +7,16 @@
       "--ink": "#171615",
       "--muted": "#6d6865",
       "--accent": "#8f1d20",
-      "--accent-soft": "#cdb6b4",
-      "--photo-a": "#c7bcb3",
-      "--photo-b": "#837770",
-      "--photo-c": "#f4eee6",
-      "--photo-d": "#3a1e1f"
+      "--accent-soft": "#cdb6b4"
     }
   },
   { "name": "kicker_left", "text": "Field Notes" },
   { "name": "brand", "text": "Velora" },
   { "name": "kicker_right", "text": "No. 08" },
   { "name": "eyebrow", "text": "Founder Profile" },
   { "name": "title", "html": "The<br>founder<br>edit." },
+  { "name": "hero_image", "src": "./assets/velora-founder-unsplash.jpg", "fit": "cover", "anchor": "54% center" },
+  { "name": "secondary_image", "src": "./assets/velora-desk-unsplash.jpg", "fit": "cover", "anchor": "center" },
   { "name": "body", "text": "A calm system for showing the person, the proof, and the point of view." },
   { "name": "caption", "text": "Independent studio / advisory content" },
   { "name": "footer_left", "text": "velora.example" },

examples/use-cases/velora-social-kit-insight.json

@@ -7,18 +7,16 @@
       "--ink": "#191817",
       "--muted": "#625c59",
       "--accent": "#7c171b",
-      "--accent-soft": "#c9b3af",
-      "--photo-a": "#b5a89e",
-      "--photo-b": "#70625d",
-      "--photo-c": "#efe4d6",
-      "--photo-d": "#4d2325"
+      "--accent-soft": "#c9b3af"
     }
   },
   { "name": "kicker_left", "text": "Signal Lab" },
   { "name": "brand", "text": "Velora" },
   { "name": "kicker_right", "text": "Audit" },
   { "name": "eyebrow", "text": "Positioning Note" },
   { "name": "title", "html": "Make the<br>expertise<br>visible." },
+  { "name": "hero_image", "src": "./assets/velora-desk-unsplash.jpg", "fit": "cover", "anchor": "center" },
+  { "name": "secondary_image", "src": "./assets/velora-textile-unsplash.jpg", "fit": "cover", "anchor": "50% 58%" },
   { "name": "body", "text": "A text-first square balances proof, restraint, and a single image crop to keep the offer legible." },
   { "name": "caption", "hide": true },
   { "name": "metric_label", "text": "Content Lift" },

examples/use-cases/velora-social-kit-palette.json

@@ -7,18 +7,15 @@
       "--ink": "#161616",
       "--muted": "#75706d",
       "--accent": "#9e2428",
-      "--accent-soft": "#d1b9b5",
-      "--photo-a": "#d7c8ba",
-      "--photo-b": "#91857c",
-      "--photo-c": "#f3eadf",
-      "--photo-d": "#592b2d"
+      "--accent-soft": "#d1b9b5"
     }
   },
   { "name": "kicker_left", "text": "Visual System" },
   { "name": "brand", "text": "Velora" },
   { "name": "kicker_right", "text": "Palette" },
   { "name": "eyebrow", "text": "Brand Study" },
   { "name": "title", "html": "Four<br>tones,<br>one<br>voice." },
+  { "name": "secondary_image", "src": "./assets/velora-textile-unsplash.jpg", "fit": "cover", "anchor": "50% 58%" },
   { "name": "body", "text": "Use quiet neutrals for pace, then reserve red for the details that should be remembered." },
   { "name": "caption", "hide": true },
   { "name": "palette_label", "text": "Velora palette" },

examples/use-cases/velora-social-kit.css

@@ -12,10 +12,6 @@ body {
   --accent: #8b171d;
   --accent-soft: #d6b9b2;
   --rule: rgba(23, 21, 20, 0.16);
-  --photo-a: #d9cbbd;
-  --photo-b: #9a8b82;
-  --photo-c: #f1e6d8;
-  --photo-d: #462126;
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
@@ -131,34 +127,24 @@ h1 {
   position: absolute;
   z-index: 5;
   overflow: hidden;
-  background:
-    radial-gradient(circle at 43% 30%, rgba(250, 244, 236, 0.92) 0 7%, transparent 7.6%),
-    radial-gradient(circle at 70% 36%, rgba(250, 244, 236, 0.8) 0 3.5%, transparent 4%),
-    linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, 0.34) 42.3% 47%, transparent 47.3%),
-    linear-gradient(145deg, var(--photo-c) 0 20%, var(--photo-a) 20% 47%, var(--photo-b) 47% 70%, var(--photo-d) 70%);
+  background: var(--paper);
   box-shadow: 0 34px 70px rgba(38, 30, 28, 0.14);
 }
 
-.art-panel::before {
-  position: absolute;
-  left: 18%;
-  right: -28%;
-  bottom: -26%;
-  height: 54%;
-  border-radius: 50% 50% 0 0;
-  background:
-    radial-gradient(circle at 58% 42%, rgba(41, 22, 23, 0.42) 0 36%, transparent 37%),
-    var(--paper);
-  content: "";
-}
-
 .art-panel::after {
   position: absolute;
   inset: 20px;
   border: 1px solid rgba(255, 255, 255, 0.45);
   content: "";
 }
 
+.art-panel img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
 .hero-art {
   width: 388px;
   height: 530px;
@@ -167,91 +153,9 @@ h1 {
 .secondary-art {
   width: 390px;
   height: 250px;
-  background:
-    linear-gradient(90deg, var(--photo-c) 0 28%, rgba(255, 255, 255, 0.72) 28% 34%, var(--photo-a) 34% 62%, var(--paper) 62% 66%, var(--photo-b) 66%),
-    var(--paper);
   box-shadow: none;
 }
 
-.secondary-art::before {
-  inset: auto 24px 24px auto;
-  width: 160px;
-  height: 160px;
-  border: 18px solid rgba(255, 255, 255, 0.55);
-  border-radius: 0;
-  background: transparent;
-}
-
-.crop {
-  position: absolute;
-  display: block;
-  background: rgba(255, 255, 255, 0.48);
-}
-
-.crop-a {
-  left: 32px;
-  top: 40px;
-  width: 95px;
-  height: 130px;
-}
-
-.crop-b {
-  left: 160px;
-  top: 72px;
-  width: 92px;
-  height: 122px;
-}
-
-.crop-c {
-  right: 34px;
-  top: 34px;
-  width: 96px;
-  height: 152px;
-}
-
-.orb,
-.linework {
-  position: absolute;
-  display: block;
-  border-radius: 50%;
-}
-
-.orb-large {
-  right: -34px;
-  bottom: -42px;
-  width: 240px;
-  height: 240px;
-  border: 34px solid rgba(255, 255, 255, 0.82);
-}
-
-.orb-small {
-  left: 70px;
-  top: 82px;
-  width: 66px;
-  height: 66px;
-  border: 18px solid rgba(255, 255, 255, 0.78);
-}
-
-.linework {
-  border: 2px solid rgba(255, 255, 255, 0.86);
-  border-left-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.linework-a {
-  left: 110px;
-  bottom: 82px;
-  width: 175px;
-  height: 175px;
-}
-
-.linework-b {
-  left: 152px;
-  bottom: 126px;
-  width: 88px;
-  height: 88px;
-}
-
 .mark {
   position: absolute;
   z-index: 12;

examples/use-cases/velora-social-kit.html

@@ -6,16 +6,11 @@
   </header>
 
   <section data-layer="hero_art" class="art-panel hero-art">
-    <span class="orb orb-large"></span>
-    <span class="orb orb-small"></span>
-    <span class="linework linework-a"></span>
-    <span class="linework linework-b"></span>
+    <img data-layer="hero_image" alt="" />
   </section>
 
   <section data-layer="secondary_art" class="art-panel secondary-art">
-    <span class="crop crop-a"></span>
-    <span class="crop crop-b"></span>
-    <span class="crop crop-c"></span>
+    <img data-layer="secondary_image" alt="" />
   </section>
 
   <div data-layer="mark" class="mark" aria-hidden="true">

examples/use-cases/velora-social-kit.manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Velora Social Kit",
-  "description": "Use a reusable template for an editorial founder social kit with refined serif typography, strict margins, muted neutrals, and deep red accents. This source-neutral adaptation replaces the inspiration's name, slogans, logos, handles, and media with fictional Velora copy plus CSS-drawn marks and abstract photo crops.",
+  "description": "Use a reusable template for an editorial founder social kit with refined serif typography, strict margins, muted neutrals, and deep red accents. This source-neutral adaptation replaces the inspiration's name, slogans, logos, handles, and media with fictional Velora copy plus Unsplash photos passed through JSON image layers.",
   "template": "./velora-social-kit.html",
   "css": "./velora-social-kit.css",
   "width": 1080,

examples/use-cases/weave-home-social-family.json

@@ -0,0 +1,8 @@
+[
+  { "name": "post", "className": "post post-family" },
+  { "name": "brand", "text": "loftloom little" },
+  { "name": "site_top", "text": "loftloom.example" },
+  { "name": "title", "html": "Soft pieces for<br>small rituals" },
+  { "name": "family_image", "src": "./assets/weave-home-nursery-unsplash.jpg", "fit": "cover", "anchor": "52% 52%" },
+  { "name": "site_bottom", "text": "loftloom.example" }
+]

examples/use-cases/weave-home-social-lifestyle.json

@@ -0,0 +1,12 @@
+[
+  { "name": "post", "className": "post post-lifestyle" },
+  { "name": "brand", "text": "loftloom" },
+  { "name": "site_top", "text": "loftloom.example" },
+  { "name": "title", "html": "Settle in<br>with texture" },
+  { "name": "lifestyle_image", "src": "./assets/weave-home-lifestyle-unsplash.jpg", "fit": "cover", "anchor": "52% center" },
+  { "name": "item_one", "text": "Crescent cushion" },
+  { "name": "price_one", "text": "$78.00" },
+  { "name": "item_two", "text": "Wide checker rug. Custom weave and color plan" },
+  { "name": "price_two", "text": "$248.00" },
+  { "name": "site_bottom", "text": "loftloom.example" }
+]