ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 14:50:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(registry): connector geometry, family accent, and demo legibility

Browse Source 
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.
This commit is contained in:
Miguel Angel Simon Sierra
2026-08-01 01:36:18 +02:00
parent a98c120383
commit 35231e964d
7 changed files with 96 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/blocks/hw-pipeline/demo.html
Vendored
+33 -9
View File
@@ -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);
registry/blocks/hw-pipeline/hw-pipeline.html
Vendored
+33 -9
View File
@@ -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);
registry/blocks/hw-scribble-transition/hw-scribble-transition.html
Vendored
+4 -2
View File
@@ -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,
registry/components/hw-callout-circle/demo.html
Vendored
+9 -4
View File
@@ -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;
registry/components/hw-callout-circle/hw-callout-circle.html
Vendored
+9 -4
View File
@@ -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;
registry/components/yt-camera-move/demo.html
Vendored
+4 -2
View File
@@ -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;
registry/components/yt-camera-move/yt-camera-move.html
Vendored
+4 -2
View File
@@ -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;