From 35231e964daab6d6b73d8dc3917f9f95f5944157 Mon Sep 17 00:00:00 2001 From: Miguel Angel Simon Sierra Date: Sat, 1 Aug 2026 01:36:18 +0200 Subject: [PATCH] fix(registry): connector geometry, family accent, and demo legibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Found by stepping through motion contact sheets rather than single frames. - hw-pipeline: arrowheads were two asymmetric barbs (l -30 -14 / l -26 18) fixed to horizontal, so they detached from a curve that arrives on a descending tangent. Barbs now derive from the quadratic's end tangent (end - control) with symmetric length and spread. - hw-pipeline, hw-scribble-transition, hw-callout-circle: the family carried two accents — #ffb020 in hw-frame/hw-title/hw-underline and #6d6dff here. Unified on the warm marker accent; the blue read as a default UI colour. - hw-callout-circle: the scribble hatch rendered as stacked bars over the labelled subject. More rows so the zigzag reads as a scribble, lighter weight and alpha so it sits behind the label. - yt-camera-move: the stage grid was too faint to reveal the move, so the preview of a camera-move component looked static. Stronger grid; zoom, slide and tilt now read. Demos resynced from source — demo.html is a plate-swapped copy, so a source fix does not reach the catalog preview until it is regenerated. --- registry/blocks/hw-pipeline/demo.html | 42 +++++++++++++++---- registry/blocks/hw-pipeline/hw-pipeline.html | 42 +++++++++++++++---- .../hw-scribble-transition.html | 6 ++- .../components/hw-callout-circle/demo.html | 13 ++++-- .../hw-callout-circle/hw-callout-circle.html | 13 ++++-- registry/components/yt-camera-move/demo.html | 6 ++- .../yt-camera-move/yt-camera-move.html | 6 ++- 7 files changed, 96 insertions(+), 32 deletions(-) diff --git a/registry/blocks/hw-pipeline/demo.html b/registry/blocks/hw-pipeline/demo.html index cac624563..41555efcc 100644 --- a/registry/blocks/hw-pipeline/demo.html +++ b/registry/blocks/hw-pipeline/demo.html @@ -28,7 +28,9 @@ --hw-font-print: "Caveat", cursive; --hw-font-script: "Caveat", cursive; --hw-ink: #f4f2ec; - --hw-accent: #6d6dff; + /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The + previous #6d6dff read as a default UI blue against the family's ink. */ + --hw-accent: #ffb020; position: relative; width: 1920px; @@ -223,29 +225,51 @@ var c = document.createElementNS(NS, "path"); c.setAttribute("class", "hw-pl-conn"); c.setAttribute("id", "hw-pl-conn-" + i); + var sx = cx + 10, + tx = ex - 10; + var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16, + qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12; + /* Barbs follow the curve's incoming tangent. A quadratic's tangent + at its end is (end - control); barbs fixed to horizontal left the + head detached from a curve that arrives descending. Symmetric + length and angle, so it reads as one arrowhead. */ + var ang = Math.atan2(ey - qy, tx - qx) + Math.PI; + var BARB = 26, + SPREAD = 0.42; + var b1x = tx + BARB * Math.cos(ang - SPREAD), + b1y = ey + BARB * Math.sin(ang - SPREAD); + var b2x = tx + BARB * Math.cos(ang + SPREAD), + b2y = ey + BARB * Math.sin(ang + SPREAD); c.setAttribute( "d", "M " + - (cx + 10) + + sx + " " + cy + " Q " + - (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + + qx + " " + - (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) + + qy + " " + - (ex - 10) + + tx + " " + ey + " M " + - (ex - 10) + + tx + " " + ey + - " l -30 -14 M " + - (ex - 10) + + " L " + + b1x + + " " + + b1y + + " M " + + tx + " " + ey + - " l -26 18", + " L " + + b2x + + " " + + b2y, ); svg.appendChild(c); conns.push(c); diff --git a/registry/blocks/hw-pipeline/hw-pipeline.html b/registry/blocks/hw-pipeline/hw-pipeline.html index bfa5c7a0b..376e44394 100644 --- a/registry/blocks/hw-pipeline/hw-pipeline.html +++ b/registry/blocks/hw-pipeline/hw-pipeline.html @@ -25,7 +25,9 @@ --hw-font-print: "Caveat", cursive; --hw-font-script: "Caveat", cursive; --hw-ink: #f4f2ec; - --hw-accent: #6d6dff; + /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The + previous #6d6dff read as a default UI blue against the family's ink. */ + --hw-accent: #ffb020; position: relative; width: 1920px; @@ -220,29 +222,51 @@ var c = document.createElementNS(NS, "path"); c.setAttribute("class", "hw-pl-conn"); c.setAttribute("id", "hw-pl-conn-" + i); + var sx = cx + 10, + tx = ex - 10; + var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16, + qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12; + /* Barbs follow the curve's incoming tangent. A quadratic's tangent + at its end is (end - control); barbs fixed to horizontal left the + head detached from a curve that arrives descending. Symmetric + length and angle, so it reads as one arrowhead. */ + var ang = Math.atan2(ey - qy, tx - qx) + Math.PI; + var BARB = 26, + SPREAD = 0.42; + var b1x = tx + BARB * Math.cos(ang - SPREAD), + b1y = ey + BARB * Math.sin(ang - SPREAD); + var b2x = tx + BARB * Math.cos(ang + SPREAD), + b2y = ey + BARB * Math.sin(ang + SPREAD); c.setAttribute( "d", "M " + - (cx + 10) + + sx + " " + cy + " Q " + - (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + + qx + " " + - (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) + + qy + " " + - (ex - 10) + + tx + " " + ey + " M " + - (ex - 10) + + tx + " " + ey + - " l -30 -14 M " + - (ex - 10) + + " L " + + b1x + + " " + + b1y + + " M " + + tx + " " + ey + - " l -26 18", + " L " + + b2x + + " " + + b2y, ); svg.appendChild(c); conns.push(c); diff --git a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html index 16be9309c..6cf993833 100644 --- a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html +++ b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html @@ -16,7 +16,9 @@ overflow: hidden; } #hw-st-root { - --hw-accent: #6d6dff; + /* Warm marker accent, consistent with the rest of the hw family. + Override per use via CONFIG.color. */ + --hw-accent: #ffb020; position: relative; width: 1920px; @@ -75,7 +77,7 @@ coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s local), then everything clears. Place spanning the host's cut. */ var CONFIG = { - color: null, // css color; null = --hw-accent purple + color: null, // css color; null = --hw-accent (warm marker) bands: 7, // horizontal scribble bands strokeScale: 1.0, seed: 17, diff --git a/registry/components/hw-callout-circle/demo.html b/registry/components/hw-callout-circle/demo.html index 7cdaa1ac1..efcd893b0 100644 --- a/registry/components/hw-callout-circle/demo.html +++ b/registry/components/hw-callout-circle/demo.html @@ -47,9 +47,12 @@ stroke-width: var(--hw-co-w, 6); } .hw-callout .hw-co-scribble { - stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff)); - stroke-width: 4; - opacity: 0.7; + /* Warm marker accent to match hw-frame / hw-title / hw-underline; the + previous blue read as a default UI colour. Lighter weight and alpha + so the hatch sits behind the labelled subject instead of over it. */ + stroke: var(--hw-co-accent, var(--hw-accent, #ffb020)); + stroke-width: 3; + opacity: 0.42; } .hw-callout .hw-co-connector { stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec)); @@ -223,8 +226,10 @@ if (opts.scribble === false) { scr.style.display = "none"; } else { + /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows + the near-horizontal runs dominate and it renders as stacked bars. */ var d = "", - rows = 6; + rows = 11; for (var i = 0; i < rows; i++) { var t = (i + 0.5) / rows; var yy = cy - ry + t * ry * 2; diff --git a/registry/components/hw-callout-circle/hw-callout-circle.html b/registry/components/hw-callout-circle/hw-callout-circle.html index d18266d07..6ae45540e 100644 --- a/registry/components/hw-callout-circle/hw-callout-circle.html +++ b/registry/components/hw-callout-circle/hw-callout-circle.html @@ -44,9 +44,12 @@ stroke-width: var(--hw-co-w, 6); } .hw-callout .hw-co-scribble { - stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff)); - stroke-width: 4; - opacity: 0.7; + /* Warm marker accent to match hw-frame / hw-title / hw-underline; the + previous blue read as a default UI colour. Lighter weight and alpha + so the hatch sits behind the labelled subject instead of over it. */ + stroke: var(--hw-co-accent, var(--hw-accent, #ffb020)); + stroke-width: 3; + opacity: 0.42; } .hw-callout .hw-co-connector { stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec)); @@ -220,8 +223,10 @@ if (opts.scribble === false) { scr.style.display = "none"; } else { + /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows + the near-horizontal runs dominate and it renders as stacked bars. */ var d = "", - rows = 6; + rows = 11; for (var i = 0; i < rows; i++) { var t = (i + 0.5) / rows; var yy = cy - ry + t * ry * 2; diff --git a/registry/components/yt-camera-move/demo.html b/registry/components/yt-camera-move/demo.html index 1f97e1a08..d63a51e5a 100644 --- a/registry/components/yt-camera-move/demo.html +++ b/registry/components/yt-camera-move/demo.html @@ -53,12 +53,14 @@ overflow: hidden; background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%); } + /* Grid is the only cue that reveals the camera move on a flat gradient + plate; at 0.14/2px the zoom and slide were nearly imperceptible. */ #yt-cm-stage .yt-cm-grid { position: absolute; inset: -60px; background: - repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px), - repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px); + repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px), + repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px); } #yt-cm-stage .yt-cm-label { position: absolute; diff --git a/registry/components/yt-camera-move/yt-camera-move.html b/registry/components/yt-camera-move/yt-camera-move.html index 945c03368..6034ea643 100644 --- a/registry/components/yt-camera-move/yt-camera-move.html +++ b/registry/components/yt-camera-move/yt-camera-move.html @@ -50,12 +50,14 @@ overflow: hidden; background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%); } + /* Grid is the only cue that reveals the camera move on a flat gradient + plate; at 0.14/2px the zoom and slide were nearly imperceptible. */ #yt-cm-stage .yt-cm-grid { position: absolute; inset: -60px; background: - repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px), - repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px); + repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px), + repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px); } #yt-cm-stage .yt-cm-label { position: absolute;