ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +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/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;