← back to CelebritySignatures
wear: curve-warp hat signature overlays + fix dad-cap/bucket-hat placement (TK-10286)
178086a8507649367b2b2a70932df72c7cdb4165 · 2026-09-09 09:52:21 -0700 · Steve Abrams
Per /dtd (4/4 unanimous B): graphic-designer review flagged flat
rectangle overlays on curved cap crowns read as pasted stickers rather
than real DTF/embroidery prints. paintSignatures() now optionally
slices the signature into thin vertical strips and bends each along a
parabola (ob.curve, px) when a garment box declares one — cheap,
canvas-only, no 3D pipeline. Applied per-hat (trucker:6, dad-cap:14,
bucket-hat:18, matched to each crown's actual curvature).
Also fixed the two placement issues the same review caught: dad-cap
overlayBox was too close to the bill seam (y:705->640, h:150->130);
bucket-hat's right edge landed on the crown's ventilation grommet
(x:860->780). Verified via Playwright screenshots against local pm2 —
all three hats now centered, curved, and clear of seams/hardware.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AmxcNKtFg77wP47uZq5Zsm
Files touched
M data/wear-templates.jsonM public/wear.html
Diff
commit 178086a8507649367b2b2a70932df72c7cdb4165
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed Sep 9 09:52:21 2026 -0700
wear: curve-warp hat signature overlays + fix dad-cap/bucket-hat placement (TK-10286)
Per /dtd (4/4 unanimous B): graphic-designer review flagged flat
rectangle overlays on curved cap crowns read as pasted stickers rather
than real DTF/embroidery prints. paintSignatures() now optionally
slices the signature into thin vertical strips and bends each along a
parabola (ob.curve, px) when a garment box declares one — cheap,
canvas-only, no 3D pipeline. Applied per-hat (trucker:6, dad-cap:14,
bucket-hat:18, matched to each crown's actual curvature).
Also fixed the two placement issues the same review caught: dad-cap
overlayBox was too close to the bill seam (y:705->640, h:150->130);
bucket-hat's right edge landed on the crown's ventilation grommet
(x:860->780). Verified via Playwright screenshots against local pm2 —
all three hats now centered, curved, and clear of seams/hardware.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AmxcNKtFg77wP47uZq5Zsm
---
data/wear-templates.json | 17 ++++++++++-------
public/wear.html | 25 +++++++++++++++++++++----
2 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/data/wear-templates.json b/data/wear-templates.json
index 577c89e..6e057af 100644
--- a/data/wear-templates.json
+++ b/data/wear-templates.json
@@ -209,9 +209,10 @@
"photoHeight": 2048,
"overlayBox": {
"x": 865,
- "y": 705,
+ "y": 640,
"w": 520,
- "h": 150
+ "h": 130,
+ "curve": 14
},
"colors": [
{
@@ -221,7 +222,7 @@
"photo": "/assets/garments/dad-cap-white.jpg"
}
],
- "_note": "TK-10286, 2026-09-09: catalog GET verified blueprint/provider/variant/decoration. Official blank Printify lifestyle photo. Overlay and print scale are local preview estimates, not printer-mockup proof. saleEnabled stays false and priceUsd null until real cost, actual printer placement, and release approval are verified.",
+ "_note": "TK-10286, 2026-09-09: catalog GET verified blueprint/provider/variant/decoration. Official blank Printify lifestyle photo. Overlay and print scale are local preview estimates, not printer-mockup proof. saleEnabled stays false and priceUsd null until real cost, actual printer placement, and release approval are verified. overlayBox re-centered + curve added 2026-09-09 (claude-run-10286, graphic-designer review): original box (y:705,h:150) left only ~15px above the bill seam, too tight/low. Moved to y:640,h:130 for real clearance on the front panel (measured y:440-870). Added curve:14 (parabolic vertical bend) so the flat overlay follows the crown's dome instead of reading as a pasted sticker — see paintSignatures() in wear.html.",
"photoSource": "https://images.printify.com/66c4719a26c12b30ed07acc2",
"printify": {
"blueprintId": 1447,
@@ -254,7 +255,8 @@
"x": 955,
"y": 500,
"w": 450,
- "h": 140
+ "h": 140,
+ "curve": 6
},
"colors": [
{
@@ -294,11 +296,12 @@
"photoWidth": 2048,
"photoHeight": 2048,
"overlayBox": {
- "x": 860,
+ "x": 780,
"y": 310,
"w": 480,
"h": 135,
- "rotation": 9
+ "rotation": 9,
+ "curve": 18
},
"colors": [
{
@@ -308,7 +311,7 @@
"photo": "/assets/garments/bucket-hat-army.jpg"
}
],
- "_note": "TK-10286, 2026-09-09: catalog GET verified blueprint/provider/variant/decoration. Official blank Printify lifestyle photo. Overlay and print scale are local preview estimates, not printer-mockup proof. saleEnabled stays false and priceUsd null until real cost, actual printer placement, and release approval are verified.",
+ "_note": "TK-10286, 2026-09-09: catalog GET verified blueprint/provider/variant/decoration. Official blank Printify lifestyle photo. Overlay and print scale are local preview estimates, not printer-mockup proof. saleEnabled stays false and priceUsd null until real cost, actual printer placement, and release approval are verified. Re-tuned 2026-09-09 (claude-run-10286, graphic-designer review): x:860->780 so the right edge clears the crown's ventilation grommet (was landing right on top of it, ~x1310-1330). Added curve:18 (parabolic vertical bend, largest of the 3 hats — bucket crown is the most domed) so the flat overlay follows the fabric instead of reading as a pasted sticker.",
"photoSource": "https://images.printify.com/693146b0182c66341c092922",
"printify": {
"blueprintId": 1698,
diff --git a/public/wear.html b/public/wear.html
index a5ce0f3..0333f65 100644
--- a/public/wear.html
+++ b/public/wear.html
@@ -460,14 +460,31 @@ function paintSignatures(ctx, g, col, tx, ty, s){
const ar = sigImg.width/sigImg.height; let w=bw, h=w/ar; if(h>bh){ h=bh; w=h*ar; }
const x = ob.x + (ob.w-w)/2, y = ob.y + (ob.h-h)/2;
const cx = ob.x + ob.w/2, cy = ob.y + ob.h/2;
+ const dark = luminance(col.hex) < 0.4;
+ const src = dark ? recolorToLight(sigImg) : sigImg;
ctx.save();
ctx.translate(tx, ty); ctx.scale(s, s);
if (ob.rotation) { ctx.translate(cx, cy); ctx.rotate(ob.rotation * Math.PI / 180); ctx.translate(-cx, -cy); }
- if (luminance(col.hex) < 0.4){
- ctx.drawImage(recolorToLight(sigImg), x, y, w, h);
+ if (!dark) ctx.globalCompositeOperation = 'multiply';
+ if (ob.curve) {
+ // Cap crowns are domed, not flat — a plain rectangle overlay reads as
+ // a pasted sticker instead of a real DTF/embroidery print that would
+ // visibly follow the fabric's roll (graphic-design review, TK-10286,
+ // 2026-09-09). No canvas mesh-warp API exists, so this slices the
+ // signature into thin vertical strips and bends each one vertically
+ // along a parabola — enough to sell the curve at normal preview size
+ // without a real 3D pipeline. ob.curve = peak vertical offset in px.
+ const STRIPS = 28;
+ for (let i = 0; i < STRIPS; i++) {
+ const t0 = i / STRIPS, t1 = (i + 1) / STRIPS;
+ const sx0 = t0 * src.width, sx1 = t1 * src.width;
+ const dx0 = x + t0 * w, dx1 = x + t1 * w;
+ const mid = (t0 + t1) / 2 - 0.5; // -0.5..0.5 across the strip
+ const yOff = ob.curve * (1 - Math.pow(mid * 2, 2)); // parabola, peak at center
+ ctx.drawImage(src, sx0, 0, Math.max(1, sx1 - sx0), src.height, dx0, y + yOff, (dx1 - dx0) + 0.5, h);
+ }
} else {
- ctx.globalCompositeOperation='multiply';
- ctx.drawImage(sigImg, x, y, w, h);
+ ctx.drawImage(src, x, y, w, h);
}
ctx.restore();
}
← a15a0cd wear: re-center trucker-cap signature overlay (TK-10286)
·
back to CelebritySignatures
·
auto-data-snapshot: 2026-09-09T10:04:38 (1 data files) — dat 703013b →