mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +00:00
feat(registry): hw write-on wave — hw-write-title block + control surfaces for the handwritten family (#3557)
* feat(registry): hw write-on wave — hw-write-title block + control surfaces for four hw components Adds hw-write-title (true glyph write-on: pen-traced Caveat via baked centerline masks, curvature-adaptive pen velocity, pen lifts, underline) and grows the handwritten family's four components with declared control surfaces (controls per the #3227 convention), the completed stroke-texture matrix (sharp + deterministic seeded spray — no feTurbulence), boil poses, and physically-derived arrival deformation (travel-aligned squash with volume preserved and spring recovery). Shipped single-path callers keep working unchanged (legacy helper bodies preserved; proven in a legacy wiring harness). Validated in one reference build: check clean, double-render framemd5 910/910 bit-identical, seek-shuffle 8/8, WCAG 2.3.1 flash-scan zero violations, physics burn-ins hand-recomputed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(catalog): index hw-write-title for meaning search --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
This commit is contained in:
jbernard077
co-authored by
Claude Fable 5
Miguel Ángel
Claude Fable 5
Miguel Ángel
parent
61ba800a5d
commit
5b45bcc16d
@@ -0,0 +1,552 @@
|
||||
---
|
||||
title: "Handwritten Write-On Title"
|
||||
description: "True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<InstallCommand command="npx hyperframes add hw-write-title" item="hw-write-title" />
|
||||
|
||||
That writes `compositions/hw-write-title.html`, plus 2 supporting files under `assets/baked/` and `assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.html
|
||||
<div
|
||||
data-composition-id="hw-write-title"
|
||||
data-composition-src="compositions/hw-write-title.html"
|
||||
data-start="0"
|
||||
data-duration="6"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
```
|
||||
|
||||
Move it in time with `data-start`. Put it on a different timeline row with
|
||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||
|
||||
## Source
|
||||
|
||||
<Accordion title={`hw-write-title.html`}>
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="assets/baked/caveat-pen.js"></script>
|
||||
<style>
|
||||
/* Caveat is NOT auto-resolved by the renderer — bundle it. Asset paths
|
||||
are ROOT-relative. The glyph write-on itself renders BAKED outlines
|
||||
(no live font dependency); the bundled face serves the fallback path
|
||||
for characters outside the baked table. */
|
||||
@font-face {
|
||||
font-family: "Caveat";
|
||||
src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* ---- hw-write-title -------------------------------------------------
|
||||
TRUE glyph write-on: filled Caveat letterforms revealed by animated
|
||||
per-glyph centerline strokes (the AE mask-reveal classic — "a mask
|
||||
barely covering the line"), traced in real stroke order with a
|
||||
curvature-adaptive pen-velocity ease (fast on straights, slow into
|
||||
curves; inter-stroke pen lifts). Centerlines + outlines + stem widths
|
||||
ship baked (assets/baked/caveat-pen.js, generated deterministically
|
||||
from Caveat-700 — regeneration script in the PR).
|
||||
RULES: hwBoil owns x/y/rotation of the boil target; entrances/exits
|
||||
ride the outer wrapper. One timeline has ONE onUpdate (hwOnUpdate). */
|
||||
#hw-wt-root {
|
||||
--hw-font-print: "Caveat", cursive;
|
||||
--hw-ink: #f4f2ec;
|
||||
--hw-ink-dark: #26241f;
|
||||
--hw-accent-warm: #ffb020;
|
||||
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent; /* overlays footage or a board */
|
||||
font-family: var(--hw-font-print, "Caveat", cursive);
|
||||
}
|
||||
#hw-wt-wrap {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
#hw-wt-svg {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
}
|
||||
#hw-wt-under {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
margin-top: -8px;
|
||||
}
|
||||
#hw-wt-under path {
|
||||
fill: none;
|
||||
stroke: var(--hw-accent-warm);
|
||||
stroke-width: 7;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.hw-wt-fallback {
|
||||
font-weight: 700;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="hw-wt-root"
|
||||
data-composition-id="hw-write-title"
|
||||
data-start="0"
|
||||
data-duration="6"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div id="hw-wt-move">
|
||||
<div id="hw-wt-boil">
|
||||
<div id="hw-wt-wrap">
|
||||
<svg id="hw-wt-svg"></svg>
|
||||
<svg id="hw-wt-under" width="10" height="40"><path id="hw-wt-under-path"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="hw-wt-drv"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="6"
|
||||
data-track-index="0"
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
></div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var CONFIG = {
|
||||
// ── Content (freely editable — not counted) ─────────────────────
|
||||
text: "write it on",
|
||||
fontSize: 170, // px; the word block auto-centers when x/y are null
|
||||
x: null,
|
||||
y: null,
|
||||
|
||||
// ── Controls (family base + 2 item-specific; comment grammar is the published-parameter list) ──
|
||||
scheme: "chalk", // variant: "chalk" | "ink" — selects the authored token set (family default "chalk")
|
||||
animationIn: true, // toggle: entrance on/off — write-on IS the entrance; false = hard-on at t=0 (pairs with animationOut; the pair counts as one control)
|
||||
animationOut: true, // (exit fade; duration derived from DUR, never exposed)
|
||||
boil: "calm", // variant: "off" | "calm" | "lively" — authored amp/rot pairs over the family-locked frameDrop 3; seed locked
|
||||
writeOn: "trace", // variant: "trace" | "reveal" | "off" — trace = pen-traced glyph write-on (curvature-adaptive velocity, pen lifts); reveal = per-glyph staggered fade; off = hard-on; durations derived from stroke count, never exposed
|
||||
underline: true, // toggle: seeded squiggle underline drawn after the write completes
|
||||
|
||||
// ── Locked (edit the item source to change) ─────────────────────
|
||||
// seed, pen-velocity constants (kCurve 10, floor 0.22, lift 60ms),
|
||||
// trace-duration derivation, boil pose tables, all eases/durations
|
||||
};
|
||||
var SEED = 8; // locked — determinism
|
||||
var DUR = 6;
|
||||
|
||||
function clamp(v, lo, hi) {
|
||||
return Math.min(hi, Math.max(lo, v));
|
||||
}
|
||||
var OUT = clamp(DUR * 0.06, 0.25, 0.6);
|
||||
|
||||
/* ---- hw family runtime (copy identical across hw items) ---- */
|
||||
window.hwOnUpdate = function (tl, fn) {
|
||||
if (!tl.__hwRenders) {
|
||||
tl.__hwRenders = [];
|
||||
tl.eventCallback("onUpdate", function () {
|
||||
for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
|
||||
});
|
||||
}
|
||||
tl.__hwRenders.push(fn);
|
||||
fn();
|
||||
};
|
||||
window.hwHash = function (n, seed) {
|
||||
var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
|
||||
return (x - Math.floor(x)) * 2 - 1;
|
||||
};
|
||||
window.hwBoil = function (tl, target, opts) {
|
||||
opts = opts || {};
|
||||
var amp = opts.amp !== undefined ? opts.amp : 1.6;
|
||||
var rot = opts.rot !== undefined ? opts.rot : 0.5;
|
||||
var fps = opts.fps || 30;
|
||||
var drop = opts.frameDrop || 3;
|
||||
var seed = opts.seed || 1;
|
||||
var els = gsap.utils.toArray(target);
|
||||
window.hwOnUpdate(tl, function () {
|
||||
var step = Math.floor((tl.time() * fps) / drop);
|
||||
for (var i = 0; i < els.length; i++) {
|
||||
gsap.set(els[i], {
|
||||
x: window.hwHash(step * 3 + i * 97, seed) * amp,
|
||||
y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
|
||||
rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// boil control: authored poses over the family-locked frameDrop.
|
||||
// Unknown pose → default + console error (bounded-controls law).
|
||||
window.hwBoilPose = function (tl, target, pose, opts) {
|
||||
opts = opts || {};
|
||||
var poses = { calm: { amp: 1.6, rot: 0.5 }, lively: { amp: 2.6, rot: 0.9 } };
|
||||
if (pose === "off") return;
|
||||
var p = poses[pose];
|
||||
if (!p) {
|
||||
console.error('hw: unknown boil pose "' + pose + '" — falling back to "calm"');
|
||||
p = poses.calm;
|
||||
}
|
||||
window.hwBoil(tl, target, { amp: p.amp, rot: p.rot, frameDrop: 3, seed: opts.seed || 1 });
|
||||
};
|
||||
|
||||
/* ---- pen-velocity ease: pure function of the path geometry ----
|
||||
Sample 25–75 curvature-adaptive points, speed ∝ 1/(1+k·curvature)
|
||||
floored at 0.22 (a pen slows into curves, never stalls), integrate
|
||||
ds/speed, invert to a normalized time→distance ease. Seek-safe:
|
||||
no per-frame state. */
|
||||
window.hwPenEase = function (pathEl, opts) {
|
||||
opts = opts || {};
|
||||
var kCurve = opts.kCurve !== undefined ? opts.kCurve : 10;
|
||||
var L = pathEl.getTotalLength();
|
||||
if (L <= 0)
|
||||
return {
|
||||
ease: function (t) {
|
||||
return t;
|
||||
},
|
||||
samples: 2,
|
||||
inkTime: 1,
|
||||
len: 0,
|
||||
};
|
||||
var PRE = 48;
|
||||
var pts = [];
|
||||
for (var i = 0; i <= PRE; i++) pts.push(pathEl.getPointAtLength((L * i) / PRE));
|
||||
var curv = [0];
|
||||
for (i = 1; i < PRE; i++) {
|
||||
var ax = pts[i].x - pts[i - 1].x,
|
||||
ay = pts[i].y - pts[i - 1].y;
|
||||
var bx = pts[i + 1].x - pts[i].x,
|
||||
by = pts[i + 1].y - pts[i].y;
|
||||
var la = Math.hypot(ax, ay) || 1e-6,
|
||||
lb = Math.hypot(bx, by) || 1e-6;
|
||||
var dot = Math.max(-1, Math.min(1, (ax * bx + ay * by) / (la * lb)));
|
||||
curv.push(Math.acos(dot) / ((la + lb) / 2));
|
||||
}
|
||||
curv.push(0);
|
||||
var mass = 0;
|
||||
for (i = 0; i < curv.length; i++) mass += curv[i];
|
||||
var N = Math.max(25, Math.min(75, Math.round(25 + mass * 18)));
|
||||
var seg = L / N;
|
||||
var times = [0];
|
||||
var t = 0;
|
||||
for (i = 1; i <= N; i++) {
|
||||
var u = ((i - 0.5) / N) * PRE;
|
||||
var i0 = Math.floor(u),
|
||||
f = u - i0;
|
||||
var c = curv[Math.min(i0, PRE)] * (1 - f) + curv[Math.min(i0 + 1, PRE)] * f;
|
||||
var speed = Math.max(1 / (1 + kCurve * c * 14), 0.22);
|
||||
t += seg / speed;
|
||||
times.push(t);
|
||||
}
|
||||
var total = times[N];
|
||||
for (i = 0; i <= N; i++) times[i] /= total;
|
||||
var easeFn = function (p) {
|
||||
if (p <= 0) return 0;
|
||||
if (p >= 1) return 1;
|
||||
var lo = 0,
|
||||
hi = N;
|
||||
while (hi - lo > 1) {
|
||||
var mid = (lo + hi) >> 1;
|
||||
if (times[mid] <= p) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
var span = times[hi] - times[lo] || 1e-9;
|
||||
return (lo + (p - times[lo]) / span) / N;
|
||||
};
|
||||
return { ease: easeFn, samples: N, inkTime: total, len: L };
|
||||
};
|
||||
|
||||
/* ---- word assembly from the baked table ----
|
||||
Each glyph: <mask> of centerline strokes (stroke-width = the glyph's
|
||||
baked stem × 1.35) over the filled outline. Characters missing from
|
||||
the table fall back to live Caveat text revealed by fade (+ console
|
||||
warning) — the bundled face exists for exactly this path. */
|
||||
function buildWord(svg, text) {
|
||||
// everything in GLYPH UNITS (upem 1000, y-down, baseline 0) — the
|
||||
// svg viewBox maps units → px, no scale transform needed
|
||||
var table = window.__hwPenCaveat;
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
// scheme control: bounded lookup — unknown → default + console error
|
||||
var schemes = { chalk: "var(--hw-ink)", ink: "var(--hw-ink-dark)" };
|
||||
if (!(CONFIG.scheme in schemes)) {
|
||||
console.error('hw: unknown scheme "' + CONFIG.scheme + '" — falling back to "chalk"');
|
||||
}
|
||||
var ink = schemes[CONFIG.scheme] || schemes.chalk;
|
||||
var g = document.createElementNS(ns, "g");
|
||||
var x = 0;
|
||||
var strokes = [];
|
||||
var fallbacks = [];
|
||||
var gi = 0;
|
||||
for (var ci = 0; ci < text.length; ci++) {
|
||||
var ch = text[ci];
|
||||
var gl = table.glyphs[ch];
|
||||
if (ch === " ") {
|
||||
x += 340;
|
||||
continue;
|
||||
}
|
||||
if (!gl) {
|
||||
console.warn(
|
||||
'hw-write-title: "' + ch + '" not in the baked table — Caveat fallback fade',
|
||||
);
|
||||
var ft = document.createElementNS(ns, "text");
|
||||
ft.setAttribute("x", x);
|
||||
ft.setAttribute("y", 0);
|
||||
ft.setAttribute("class", "hw-wt-fallback");
|
||||
ft.setAttribute("font-size", "1000");
|
||||
ft.setAttribute("fill", ink);
|
||||
ft.textContent = ch;
|
||||
g.appendChild(ft);
|
||||
fallbacks.push(ft);
|
||||
x += 450;
|
||||
continue;
|
||||
}
|
||||
var gg = document.createElementNS(ns, "g");
|
||||
gg.setAttribute("transform", "translate(" + x + ",0)");
|
||||
var maskId = "hw-wt-m" + gi;
|
||||
var mask = document.createElementNS(ns, "mask");
|
||||
mask.setAttribute("id", maskId);
|
||||
mask.setAttribute("maskUnits", "userSpaceOnUse");
|
||||
mask.setAttribute("x", "-200");
|
||||
mask.setAttribute("y", "-900");
|
||||
mask.setAttribute("width", gl.adv + 400);
|
||||
mask.setAttribute("height", "1400");
|
||||
for (var si = 0; si < gl.strokes.length; si++) {
|
||||
var mp = document.createElementNS(ns, "path");
|
||||
mp.setAttribute("d", gl.strokes[si]);
|
||||
mp.setAttribute("fill", "none");
|
||||
mp.setAttribute("stroke", "#fff");
|
||||
mp.setAttribute("stroke-width", Math.max(30, Math.round(gl.stem * 1.35)));
|
||||
mp.setAttribute("stroke-linecap", "round");
|
||||
mp.setAttribute("stroke-linejoin", "round");
|
||||
mask.appendChild(mp);
|
||||
strokes.push({ path: mp, glyph: gi });
|
||||
}
|
||||
gg.appendChild(mask);
|
||||
var op = document.createElementNS(ns, "path");
|
||||
op.setAttribute("d", gl.outline);
|
||||
op.setAttribute("fill", ink);
|
||||
op.setAttribute("mask", "url(#" + maskId + ")");
|
||||
gg.appendChild(op);
|
||||
g.appendChild(gg);
|
||||
x += gl.adv;
|
||||
gi++;
|
||||
}
|
||||
svg.appendChild(g);
|
||||
return { el: g, widthUnits: x, strokes: strokes, fallbacks: fallbacks };
|
||||
}
|
||||
|
||||
/* ---- trace choreography: per-stroke reveals, pen-velocity eases,
|
||||
60ms pen lifts; duration DERIVED from stroke count (writeOn owns
|
||||
it — never exposed). One dispatcher-registered render applies the
|
||||
dashoffsets. */
|
||||
function writeOnTrace(tl, built, at) {
|
||||
var strokes = built.strokes;
|
||||
if (!strokes.length) return at;
|
||||
var lift = 0.06;
|
||||
var metas = [];
|
||||
var inkSum = 0;
|
||||
for (var i = 0; i < strokes.length; i++) {
|
||||
var pe = window.hwPenEase(strokes[i].path);
|
||||
var len = strokes[i].path.getTotalLength();
|
||||
metas.push({ pe: pe, len: len, st: { p: 0 } });
|
||||
inkSum += pe.inkTime;
|
||||
strokes[i].path.setAttribute("stroke-dasharray", len + " " + len);
|
||||
strokes[i].path.setAttribute("stroke-dashoffset", len);
|
||||
strokes[i].path.style.opacity = "0"; // no round-cap nub pre-draw
|
||||
}
|
||||
var dur = clamp(0.55 + 0.22 * strokes.length, 1.2, 4);
|
||||
var drawTotal = Math.max(0.1, dur - lift * (strokes.length - 1));
|
||||
var t = at;
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
var d = (metas[i].pe.inkTime / inkSum) * drawTotal;
|
||||
metas[i].d = d;
|
||||
tl.to(metas[i].st, { p: 1, duration: d, ease: metas[i].pe.ease }, t);
|
||||
t += d + lift;
|
||||
}
|
||||
window.hwOnUpdate(tl, function () {
|
||||
for (var i = 0; i < metas.length; i++) {
|
||||
var m = metas[i];
|
||||
strokes[i].path.style.strokeDashoffset = m.len * (1 - m.st.p);
|
||||
strokes[i].path.style.opacity = m.st.p > 0 ? "1" : "0";
|
||||
}
|
||||
});
|
||||
for (i = 0; i < built.fallbacks.length; i++) {
|
||||
gsap.set(built.fallbacks[i], { opacity: 0 });
|
||||
tl.to(
|
||||
built.fallbacks[i],
|
||||
{ opacity: 1, duration: 0.4, ease: "power2.out" },
|
||||
at + dur * 0.5,
|
||||
);
|
||||
}
|
||||
return t - lift;
|
||||
}
|
||||
|
||||
/* writeOn pose control — unknown → "trace" + console error */
|
||||
function writeOnPose(tl, built, at, pose) {
|
||||
if (pose !== "trace" && pose !== "reveal" && pose !== "off") {
|
||||
console.error('hw: unknown writeOn pose "' + pose + '" — falling back to "trace"');
|
||||
pose = "trace";
|
||||
}
|
||||
var all = built.strokes
|
||||
.map(function (s) {
|
||||
return s.path;
|
||||
})
|
||||
.concat(built.fallbacks);
|
||||
if (pose === "off") {
|
||||
for (var i = 0; i < all.length; i++) {
|
||||
all[i].style.opacity = "0";
|
||||
tl.set(all[i], { opacity: 1 }, at);
|
||||
}
|
||||
return at;
|
||||
}
|
||||
if (pose === "reveal") {
|
||||
// per-glyph staggered fade (the family sweep grammar); derived timing
|
||||
var byGlyph = {};
|
||||
for (var j = 0; j < built.strokes.length; j++) {
|
||||
(byGlyph[built.strokes[j].glyph] = byGlyph[built.strokes[j].glyph] || []).push(
|
||||
built.strokes[j].path,
|
||||
);
|
||||
}
|
||||
var keys = Object.keys(byGlyph);
|
||||
for (var k = 0; k < keys.length; k++) {
|
||||
var paths = byGlyph[keys[k]];
|
||||
for (var m = 0; m < paths.length; m++) {
|
||||
gsap.set(paths[m], { opacity: 0 });
|
||||
tl.to(paths[m], { opacity: 1, duration: 0.3, ease: "power2.out" }, at + k * 0.12);
|
||||
}
|
||||
}
|
||||
for (var f = 0; f < built.fallbacks.length; f++) {
|
||||
gsap.set(built.fallbacks[f], { opacity: 0 });
|
||||
tl.to(
|
||||
built.fallbacks[f],
|
||||
{ opacity: 1, duration: 0.3, ease: "power2.out" },
|
||||
at + keys.length * 0.06,
|
||||
);
|
||||
}
|
||||
return at + keys.length * 0.12 + 0.3;
|
||||
}
|
||||
return writeOnTrace(tl, built, at);
|
||||
}
|
||||
|
||||
/* ---- build ---- */
|
||||
var table = window.__hwPenCaveat;
|
||||
var scalePx = CONFIG.fontSize / 1000;
|
||||
var svg = document.getElementById("hw-wt-svg");
|
||||
var built = buildWord(svg, CONFIG.text);
|
||||
var wUnits = built.widthUnits;
|
||||
var hUnits = table.meta.ascent - table.meta.descent;
|
||||
var wPx = wUnits * scalePx;
|
||||
var hPx = hUnits * scalePx;
|
||||
svg.setAttribute("width", Math.ceil(wPx));
|
||||
svg.setAttribute("height", Math.ceil(hPx));
|
||||
svg.setAttribute("viewBox", "0 " + -table.meta.ascent + " " + wUnits + " " + hUnits);
|
||||
|
||||
var wrap = document.getElementById("hw-wt-wrap");
|
||||
var move = document.getElementById("hw-wt-move");
|
||||
move.style.position = "absolute";
|
||||
move.style.left = (CONFIG.x === null ? Math.round((1920 - wPx) / 2) : CONFIG.x) + "px";
|
||||
move.style.top = (CONFIG.y === null ? Math.round((1080 - hPx) / 2) : CONFIG.y) + "px";
|
||||
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var startAt = CONFIG.animationIn ? 0.35 : 0;
|
||||
var writeEnd = startAt;
|
||||
if (CONFIG.animationIn) {
|
||||
writeEnd = writeOnPose(tl, built, startAt, CONFIG.writeOn);
|
||||
} else {
|
||||
// hard-on pose regardless of writeOn (animationIn=false = instant-on)
|
||||
writeEnd = writeOnPose(tl, built, 0, "off");
|
||||
}
|
||||
|
||||
/* squiggle underline (accent), drawn as the write lands */
|
||||
var underPath = document.getElementById("hw-wt-under-path");
|
||||
if (CONFIG.underline) {
|
||||
var uw = Math.round(wPx);
|
||||
var usvg = document.getElementById("hw-wt-under");
|
||||
usvg.setAttribute("width", uw);
|
||||
usvg.setAttribute("viewBox", "0 0 " + uw + " 40");
|
||||
var segs = Math.max(6, Math.round(uw / 90));
|
||||
var d = "M 2 " + (18 + window.hwHash(0, SEED) * 4).toFixed(1);
|
||||
for (var i = 1; i <= segs; i++) {
|
||||
var x2 = (uw / segs) * i;
|
||||
var y2 = 18 + window.hwHash(i * 5 + 1, SEED) * 6;
|
||||
var cxp = x2 - uw / segs / 2 + window.hwHash(i * 5 + 2, SEED) * 10;
|
||||
var cyp = 18 + (i % 2 ? -1 : 1) * (9 + window.hwHash(i * 5 + 3, SEED) * 4);
|
||||
d +=
|
||||
" Q " +
|
||||
cxp.toFixed(1) +
|
||||
" " +
|
||||
cyp.toFixed(1) +
|
||||
" " +
|
||||
x2.toFixed(1) +
|
||||
" " +
|
||||
y2.toFixed(1);
|
||||
}
|
||||
underPath.setAttribute("d", d);
|
||||
var ulen = underPath.getTotalLength();
|
||||
gsap.set(underPath, {
|
||||
strokeDasharray: ulen + " " + ulen,
|
||||
strokeDashoffset: ulen,
|
||||
opacity: 0,
|
||||
});
|
||||
var uAt = Math.min(writeEnd + 0.1, DUR - 1.2);
|
||||
tl.set(underPath, { opacity: 1 }, uAt);
|
||||
tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: "power2.inOut" }, uAt);
|
||||
} else {
|
||||
document.getElementById("hw-wt-under").style.display = "none";
|
||||
}
|
||||
|
||||
/* the boil rides its own wrapper; entrances/exits ride #hw-wt-move */
|
||||
window.hwBoilPose(tl, "#hw-wt-boil", CONFIG.boil, { seed: SEED });
|
||||
|
||||
if (CONFIG.animationOut) {
|
||||
tl.to(move, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
|
||||
}
|
||||
tl.set("#hw-wt-root", { visibility: "hidden" }, DUR - 0.02);
|
||||
|
||||
window.__timelines["hw-write-title"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
{/* hf:generated-footer */}
|
||||
|
||||
Tagged `handwritten` `typography` `title-card` `write-on` `overlay`.
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Hand-Drawn Arrow"
|
||||
description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
|
||||
description: "Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
@@ -54,9 +54,12 @@ you paste it into.
|
||||
overflow: hidden;
|
||||
}
|
||||
/* ---- hw-arrow ------------------------------------------------------
|
||||
Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a
|
||||
curve preset, call the helpers. Requires the hw-boil helpers
|
||||
(hwOnUpdate / hwHash / hwBoil) in the host script. */
|
||||
Hand-wobbled draw-on arrow, boiling, with a travel-aligned
|
||||
arrival stretch on the head. Position the wrapper, build with a
|
||||
CONFIG (arrowStyle / strokeType / boil), wire with a position
|
||||
only: hwArrowBuild + hwArrowOn / hwArrowOff. Requires the hw
|
||||
family helpers below (hwOnUpdate / hwHash / hwBoil / hwBoilPose /
|
||||
springEase / hwStrokeApply / hwDrawOn) in the host script. */
|
||||
.hw-arrow {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
@@ -92,9 +95,25 @@ you paste it into.
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,
|
||||
and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the
|
||||
hw-boil helpers) into your host. Then:
|
||||
<!-- Self-preview. WIRING (g09): copy the .hw-arrow CSS, the markup
|
||||
pattern (positioned wrapper + empty svg with a viewBox), and the
|
||||
helpers into your host. Build with a CONFIG, wire with a position
|
||||
only — the helper owns its durations, eases, and seeds:
|
||||
|
||||
hwArrowBuild("#hw-my-arrow", {
|
||||
arrowStyle: "swoop", // "straight" | "gentle" | "swoop"
|
||||
strokeType: "spray", // "plain" | "soft" | "sharp" | "spray"
|
||||
boil: "calm", // "off" | "calm" | "lively"
|
||||
});
|
||||
hwArrowOn(tl, "#hw-my-arrow", 2.0);
|
||||
hwArrowOff(tl, "#hw-my-arrow", 8.0);
|
||||
|
||||
Each built target needs a UNIQUE id — the wobble seed and the
|
||||
sharp/spray mask id derive from it (an id-less target
|
||||
console.errors and falls back to a shared "hw-arrow" slot).
|
||||
|
||||
Legacy single-path wiring (a <path> in the svg + hwArrowPath)
|
||||
keeps working exactly as before:
|
||||
|
||||
document.querySelector("#hw-my-arrow path")
|
||||
.setAttribute("d", hwArrowPath(360, 160, "swoop", 3));
|
||||
@@ -116,7 +135,7 @@ you paste it into.
|
||||
id="hw-ar-demo"
|
||||
style="left: 560px; top: 320px; width: 380px; height: 180px"
|
||||
>
|
||||
<svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
|
||||
<svg viewBox="0 0 380 180"></svg>
|
||||
</div>
|
||||
<div
|
||||
id="hw-ar-drv"
|
||||
@@ -165,6 +184,248 @@ you paste it into.
|
||||
}
|
||||
});
|
||||
};
|
||||
// boil control: authored poses over the family-locked frameDrop.
|
||||
// Unknown pose → default + console error (bounded-controls law).
|
||||
window.hwBoilPose = function (tl, target, pose, opts) {
|
||||
opts = opts || {};
|
||||
var poses = { calm: { amp: 1.6, rot: 0.5 }, lively: { amp: 2.6, rot: 0.9 } };
|
||||
if (pose === "off") return;
|
||||
var p = poses[pose];
|
||||
if (!p) {
|
||||
console.error('hw: unknown boil pose "' + pose + '" — falling back to "calm"');
|
||||
p = poses.calm;
|
||||
}
|
||||
window.hwBoil(tl, target, { amp: p.amp, rot: p.rot, frameDrop: 3, seed: opts.seed || 1 });
|
||||
};
|
||||
|
||||
/* ---- spring library (snappy register; factory duration consumed verbatim) ---- */
|
||||
var LN1000 = Math.log(1000);
|
||||
var FEELS = {
|
||||
snappy: { zeta: 0.9, response: 0.22 },
|
||||
};
|
||||
window.springEase = function (opts) {
|
||||
var f = opts.feel ? FEELS[opts.feel] : opts;
|
||||
var zeta = f.zeta,
|
||||
response = f.response;
|
||||
var w0 = (2 * Math.PI) / response;
|
||||
var T = LN1000 / (zeta * w0);
|
||||
var x;
|
||||
if (zeta < 1) {
|
||||
var wd = w0 * Math.sqrt(1 - zeta * zeta);
|
||||
x = function (t) {
|
||||
return (
|
||||
1 -
|
||||
Math.exp(-zeta * w0 * t) *
|
||||
(Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t))
|
||||
);
|
||||
};
|
||||
} else {
|
||||
x = function (t) {
|
||||
return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
|
||||
};
|
||||
}
|
||||
var xT = x(T);
|
||||
return {
|
||||
ease: function (p) {
|
||||
return p >= 1 ? 1 : x(p * T) / xT;
|
||||
},
|
||||
duration: T,
|
||||
zeta: zeta,
|
||||
response: response,
|
||||
};
|
||||
};
|
||||
|
||||
/* ---- pen-velocity ease: pure function of the path geometry ----
|
||||
Sample 25–75 curvature-adaptive points, speed ∝ 1/(1+k·curvature)
|
||||
floored at 0.22 (a pen slows into curves, never stalls), integrate
|
||||
ds/speed, invert to a normalized time→distance ease. Seek-safe:
|
||||
no per-frame state. */
|
||||
window.hwPenEase = function (pathEl, opts) {
|
||||
opts = opts || {};
|
||||
var kCurve = opts.kCurve !== undefined ? opts.kCurve : 10;
|
||||
var L = pathEl.getTotalLength();
|
||||
if (L <= 0)
|
||||
return {
|
||||
ease: function (t) {
|
||||
return t;
|
||||
},
|
||||
samples: 2,
|
||||
inkTime: 1,
|
||||
len: 0,
|
||||
};
|
||||
var PRE = 48;
|
||||
var pts = [];
|
||||
for (var i = 0; i <= PRE; i++) pts.push(pathEl.getPointAtLength((L * i) / PRE));
|
||||
var curv = [0];
|
||||
for (i = 1; i < PRE; i++) {
|
||||
var ax = pts[i].x - pts[i - 1].x,
|
||||
ay = pts[i].y - pts[i - 1].y;
|
||||
var bx = pts[i + 1].x - pts[i].x,
|
||||
by = pts[i + 1].y - pts[i].y;
|
||||
var la = Math.hypot(ax, ay) || 1e-6,
|
||||
lb = Math.hypot(bx, by) || 1e-6;
|
||||
var dot = Math.max(-1, Math.min(1, (ax * bx + ay * by) / (la * lb)));
|
||||
curv.push(Math.acos(dot) / ((la + lb) / 2));
|
||||
}
|
||||
curv.push(0);
|
||||
var mass = 0;
|
||||
for (i = 0; i < curv.length; i++) mass += curv[i];
|
||||
var N = Math.max(25, Math.min(75, Math.round(25 + mass * 18)));
|
||||
var seg = L / N;
|
||||
var times = [0];
|
||||
var t = 0;
|
||||
for (i = 1; i <= N; i++) {
|
||||
var u = ((i - 0.5) / N) * PRE;
|
||||
var i0 = Math.floor(u),
|
||||
f = u - i0;
|
||||
var c = curv[Math.min(i0, PRE)] * (1 - f) + curv[Math.min(i0 + 1, PRE)] * f;
|
||||
var speed = Math.max(1 / (1 + kCurve * c * 14), 0.22);
|
||||
t += seg / speed;
|
||||
times.push(t);
|
||||
}
|
||||
var total = times[N];
|
||||
for (i = 0; i <= N; i++) times[i] /= total;
|
||||
var easeFn = function (p) {
|
||||
if (p <= 0) return 0;
|
||||
if (p >= 1) return 1;
|
||||
var lo = 0,
|
||||
hi = N;
|
||||
while (hi - lo > 1) {
|
||||
var mid = (lo + hi) >> 1;
|
||||
if (times[mid] <= p) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
var span = times[hi] - times[lo] || 1e-9;
|
||||
return (lo + (p - times[lo]) / span) / N;
|
||||
};
|
||||
return { ease: easeFn, samples: N, inkTime: total, len: L };
|
||||
};
|
||||
|
||||
/* ---- stroke matrix: plain | soft | sharp | spray -------------------
|
||||
strokeType is a g09 variant control. Authored constants per type;
|
||||
unknown value → default ("plain") + console error (bounded-controls
|
||||
law). sharp = micro stroke-dasharray gaps (dry marker) — draw-on
|
||||
therefore rides a MASK clone (the visible dasharray never animates).
|
||||
spray = index-seeded deterministic dots along the path via hwHash;
|
||||
NO feTurbulence anywhere.
|
||||
Returns { draw: pathToDashAnimate, group: maskedGroupOrNull } */
|
||||
window.hwStrokeTypes = {
|
||||
plain: {},
|
||||
soft: { blur: 0.6 },
|
||||
sharp: { dash: [3.0, 1.55] }, // × stroke-width
|
||||
spray: {
|
||||
coreOpacity: 0.5,
|
||||
coreBlur: 0.4,
|
||||
density: 0.16,
|
||||
scatter: 2.6,
|
||||
rMin: 1.1,
|
||||
rMax: 2.6,
|
||||
},
|
||||
};
|
||||
window.hwStrokeApply = function (pathEl, type, opts) {
|
||||
opts = opts || {};
|
||||
var cfg = window.hwStrokeTypes[type];
|
||||
if (!cfg) {
|
||||
console.error('hw: unknown strokeType "' + type + '" — falling back to "plain"');
|
||||
type = "plain";
|
||||
cfg = window.hwStrokeTypes.plain;
|
||||
}
|
||||
var svg = pathEl.ownerSVGElement;
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
var w = parseFloat(getComputedStyle(pathEl).strokeWidth) || 6;
|
||||
if (type === "plain") return { draw: pathEl, group: null, type: type };
|
||||
if (type === "soft") {
|
||||
pathEl.style.filter = "blur(" + cfg.blur + "px)";
|
||||
return { draw: pathEl, group: null, type: type };
|
||||
}
|
||||
// sharp + spray: wrap in a masked group, draw-on animates the mask clone
|
||||
var id =
|
||||
opts.id ||
|
||||
"hwsm-" + Math.abs(Math.round(window.hwHash((opts.seed || 1) * 13.7, 5) * 1e6));
|
||||
var defs = svg.querySelector("defs");
|
||||
if (!defs) {
|
||||
defs = document.createElementNS(ns, "defs");
|
||||
svg.insertBefore(defs, svg.firstChild);
|
||||
}
|
||||
var mask = document.createElementNS(ns, "mask");
|
||||
mask.setAttribute("id", id);
|
||||
mask.setAttribute("maskUnits", "userSpaceOnUse");
|
||||
var clone = document.createElementNS(ns, "path");
|
||||
clone.setAttribute("d", pathEl.getAttribute("d"));
|
||||
clone.setAttribute("fill", "none");
|
||||
clone.setAttribute("stroke", "#fff");
|
||||
clone.setAttribute(
|
||||
"stroke-width",
|
||||
w * (type === "spray" ? 2 + (cfg.scatter * 2) / w : 1.7),
|
||||
);
|
||||
clone.setAttribute("stroke-linecap", "round");
|
||||
clone.setAttribute("stroke-linejoin", "round");
|
||||
mask.appendChild(clone);
|
||||
defs.appendChild(mask);
|
||||
var group = document.createElementNS(ns, "g");
|
||||
group.setAttribute("mask", "url(#" + id + ")");
|
||||
pathEl.parentNode.insertBefore(group, pathEl);
|
||||
group.appendChild(pathEl);
|
||||
if (type === "sharp") {
|
||||
pathEl.setAttribute(
|
||||
"stroke-dasharray",
|
||||
(cfg.dash[0] * w).toFixed(1) + " " + (cfg.dash[1] * w).toFixed(1),
|
||||
);
|
||||
} else {
|
||||
// spray: faint core + seeded dots
|
||||
pathEl.setAttribute("stroke-opacity", cfg.coreOpacity);
|
||||
pathEl.style.filter = "blur(" + cfg.coreBlur + "px)";
|
||||
var len = pathEl.getTotalLength();
|
||||
var n = Math.round(len * cfg.density * (opts.densityScale || 1));
|
||||
var seed = opts.seed || 1;
|
||||
var dots = document.createElementNS(ns, "g");
|
||||
for (var i = 0; i < n; i++) {
|
||||
var t = Math.min(
|
||||
1,
|
||||
Math.max(0, (i + 0.5) / n + (window.hwHash(i * 7, seed) * 0.35) / n),
|
||||
);
|
||||
var pt = pathEl.getPointAtLength(t * len);
|
||||
var pt2 = pathEl.getPointAtLength(Math.min(len, t * len + 0.5));
|
||||
var tx = pt2.x - pt.x,
|
||||
ty = pt2.y - pt.y;
|
||||
var tl2 = Math.hypot(tx, ty) || 1;
|
||||
var nx = -ty / tl2,
|
||||
nyv = tx / tl2;
|
||||
var off = window.hwHash(i * 7 + 1, seed) * (cfg.scatter + w * 0.55);
|
||||
var r = cfg.rMin + Math.abs(window.hwHash(i * 7 + 2, seed)) * (cfg.rMax - cfg.rMin);
|
||||
var c = document.createElementNS(ns, "circle");
|
||||
c.setAttribute("cx", (pt.x + nx * off).toFixed(1));
|
||||
c.setAttribute("cy", (pt.y + nyv * off).toFixed(1));
|
||||
c.setAttribute("r", r.toFixed(2));
|
||||
c.setAttribute("fill", getComputedStyle(pathEl).stroke);
|
||||
dots.appendChild(c);
|
||||
}
|
||||
group.appendChild(dots);
|
||||
}
|
||||
return { draw: clone, group: group, type: type };
|
||||
};
|
||||
|
||||
/* Draw-on across the stroke matrix: dash-animate whatever hwStrokeApply
|
||||
says. The draw target is always solid (plain/soft: the path itself;
|
||||
sharp/spray: the mask clone — the visible path keeps its texture
|
||||
dasharray untouched). Optionally pen-velocity eased (opts.pen). */
|
||||
window.hwDrawOn = function (tl, applied, at, dur, opts) {
|
||||
opts = opts || {};
|
||||
var p = applied.draw;
|
||||
var len = p.getTotalLength();
|
||||
// the draw target is always solid (plain/soft: the path itself; sharp/spray:
|
||||
// the mask clone — the visible path keeps its texture dasharray untouched)
|
||||
p.setAttribute("stroke-dasharray", len + " " + len);
|
||||
p.setAttribute("stroke-dashoffset", len);
|
||||
gsap.set(p, { opacity: 0 }); // kill the round-cap start nub pre-draw
|
||||
var ease = opts.pen ? window.hwPenEase(p, opts).ease : opts.ease || "power2.inOut";
|
||||
tl.set(p, { opacity: 1 }, at);
|
||||
tl.to(
|
||||
p,
|
||||
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: ease },
|
||||
at,
|
||||
);
|
||||
};
|
||||
|
||||
// ---- hw-arrow helpers (copy these too) ----
|
||||
// Wobbled arrow path in a w x h box, tail at left, head at right.
|
||||
@@ -220,27 +481,219 @@ you paste it into.
|
||||
head(-0.5, wob(34, 10, 6))
|
||||
);
|
||||
};
|
||||
window.hwArrowOn = function (tl, target, at, dur) {
|
||||
var p = document.querySelector(target + " path");
|
||||
var len = p.getTotalLength();
|
||||
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
|
||||
tl.to(
|
||||
p,
|
||||
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
|
||||
at,
|
||||
|
||||
// ---- hwArrowBuild: CONFIG-reading component builder (g09) ----
|
||||
// Builds the arrow as TWO paths (curve + head group) inside the
|
||||
// target's svg with the same wobble math and seed slots as
|
||||
// hwArrowPath, applies CONFIG.strokeType to the curve (the head
|
||||
// stays plain — texture on a ~30px head reads as noise), and rigs
|
||||
// the travel-aligned arrival wrapper: an outer g rotated to the
|
||||
// travel direction + an inner g counter-rotated. The pair cancels,
|
||||
// so geometry stays put while scaleX on the outer acts along
|
||||
// travel. NO transform-box styles on these g's — they fight GSAP's
|
||||
// baked SVG origins (the outer's fill-box would derive from its
|
||||
// rotated child and the cancellation breaks).
|
||||
// `seed` is internal — defaults per target from the element id
|
||||
// (a pure hash of the id string: deterministic across page loads);
|
||||
// it is NOT a control. Targets must carry unique ids: id-less
|
||||
// targets fall back to a shared "hw-arrow" slot (identical wobble;
|
||||
// duplicate mask ids cross-wire sharp/spray reveals), so that case
|
||||
// fails loudly (bounded-controls law).
|
||||
window.hwArrowBuild = function (target, CONFIG, seed) {
|
||||
CONFIG = CONFIG || {};
|
||||
var el = typeof target === "string" ? document.querySelector(target) : target;
|
||||
var svg = el.querySelector("svg");
|
||||
if (!el.id)
|
||||
console.error(
|
||||
'hw: hwArrowBuild target has no id — falling back to the shared "hw-arrow" seed/mask slot; give each built target a unique id',
|
||||
);
|
||||
if (seed === undefined) {
|
||||
var idStr = el.id || "hw-arrow";
|
||||
seed = 0;
|
||||
for (var si = 0; si < idStr.length; si++)
|
||||
seed = (seed * 31 + idStr.charCodeAt(si)) % 997;
|
||||
seed = (seed % 96) + 1;
|
||||
}
|
||||
var style = CONFIG.arrowStyle === undefined ? "gentle" : CONFIG.arrowStyle;
|
||||
if (style !== "straight" && style !== "gentle" && style !== "swoop") {
|
||||
console.error('hw: unknown arrowStyle "' + style + '" — falling back to "gentle"');
|
||||
style = "gentle";
|
||||
}
|
||||
var vb = svg.viewBox.baseVal;
|
||||
var w = vb && vb.width ? vb.width : el.clientWidth;
|
||||
var h = vb && vb.height ? vb.height : el.clientHeight;
|
||||
// same wobble math + hash slots as hwArrowPath (1–8 body, 9/10 head)
|
||||
var bend = style === "swoop" ? 0.55 : style === "gentle" ? 0.28 : 0.06;
|
||||
function wob(v, n, range) {
|
||||
return v + window.hwHash(n, seed) * range;
|
||||
}
|
||||
var x0 = wob(4, 1, 3),
|
||||
y0 = wob(h * 0.72, 2, 4),
|
||||
x1 = wob(w - 10, 3, 4),
|
||||
y1 = wob(h * 0.3, 4, 4);
|
||||
var cx1 = wob(w * 0.35, 5, 10),
|
||||
cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);
|
||||
var cx2 = wob(w * 0.7, 7, 10),
|
||||
cy2 = wob(h * (0.3 + bend), 8, 8);
|
||||
var ang = Math.atan2(y1 - cy2, x1 - cx2);
|
||||
function headSeg(da, len) {
|
||||
var a = ang + Math.PI + da;
|
||||
return (
|
||||
"M " +
|
||||
x1.toFixed(1) +
|
||||
" " +
|
||||
y1.toFixed(1) +
|
||||
" l " +
|
||||
(Math.cos(a) * len).toFixed(1) +
|
||||
" " +
|
||||
(Math.sin(a) * len).toFixed(1)
|
||||
);
|
||||
}
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
var curve = document.createElementNS(ns, "path");
|
||||
curve.setAttribute(
|
||||
"d",
|
||||
"M " +
|
||||
x0.toFixed(1) +
|
||||
" " +
|
||||
y0.toFixed(1) +
|
||||
" C " +
|
||||
cx1.toFixed(1) +
|
||||
" " +
|
||||
cy1.toFixed(1) +
|
||||
", " +
|
||||
cx2.toFixed(1) +
|
||||
" " +
|
||||
cy2.toFixed(1) +
|
||||
", " +
|
||||
x1.toFixed(1) +
|
||||
" " +
|
||||
y1.toFixed(1),
|
||||
);
|
||||
svg.appendChild(curve);
|
||||
var headG = document.createElementNS(ns, "g");
|
||||
var headInner = document.createElementNS(ns, "g");
|
||||
var head = document.createElementNS(ns, "path");
|
||||
head.setAttribute("d", headSeg(0.5, wob(34, 9, 6)) + " " + headSeg(-0.5, wob(34, 10, 6)));
|
||||
headInner.appendChild(head);
|
||||
headG.appendChild(headInner);
|
||||
svg.appendChild(headG);
|
||||
// curve texture; mask id derived from the element id — deterministic
|
||||
// and collision-free across id-bearing instances (id-less targets
|
||||
// errored above and share the fallback)
|
||||
var applied = window.hwStrokeApply(
|
||||
curve,
|
||||
CONFIG.strokeType === undefined ? "plain" : CONFIG.strokeType,
|
||||
{ seed: seed, id: (el.id || "hw-arrow") + "-sm" },
|
||||
);
|
||||
if (applied.group) {
|
||||
// the item CSS (.hw-arrow path) outranks the mask clone's
|
||||
// presentation attributes — pin them as inline styles so the
|
||||
// reveal mask keeps its authored width and white stroke
|
||||
applied.draw.style.stroke = "#fff";
|
||||
applied.draw.style.strokeWidth = applied.draw.getAttribute("stroke-width");
|
||||
}
|
||||
// arrival rig: rotate the WRAPPER to travel, counter-rotate the
|
||||
// content — wrapper scaleX then acts along travel
|
||||
var angDeg = (ang * 180) / Math.PI;
|
||||
gsap.set(headG, { transformOrigin: "50% 50%", rotation: angDeg, opacity: 0 });
|
||||
gsap.set(headInner, { transformOrigin: "50% 50%", rotation: -angDeg });
|
||||
el.__hwArrowBuild = {
|
||||
el: el,
|
||||
applied: applied,
|
||||
headG: headG,
|
||||
headInner: headInner,
|
||||
seed: seed,
|
||||
boil: CONFIG.boil === undefined ? "calm" : CONFIG.boil,
|
||||
boiled: false,
|
||||
};
|
||||
return el.__hwArrowBuild;
|
||||
};
|
||||
|
||||
// Draw-on. Built targets (hwArrowBuild): accelerating draw (causal
|
||||
// arrival), then the head pops with the g21 travel-aligned stretch —
|
||||
// v measured numerically from the draw ease end-slope, S = min(0.06
|
||||
// × v/2000, 0.25), volume preserved (scaleX × scaleY ≈ 1, asserted),
|
||||
// 2-frame apply + snappy spring recovery (factory duration verbatim).
|
||||
// Legacy single-path targets keep the shipped dashoffset behavior.
|
||||
window.hwArrowOn = function (tl, target, at, dur) {
|
||||
var el = typeof target === "string" ? document.querySelector(target) : target;
|
||||
var b = el && el.__hwArrowBuild;
|
||||
if (!b) {
|
||||
var p = document.querySelector(target + " path");
|
||||
var len = p.getTotalLength();
|
||||
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
|
||||
tl.to(
|
||||
p,
|
||||
{
|
||||
strokeDashoffset: 0,
|
||||
duration: dur === undefined ? 0.7 : dur,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
at,
|
||||
);
|
||||
return;
|
||||
}
|
||||
// built targets (g09): durations are item-locked — a
|
||||
// legacy-signature `dur` is ignored + console.error (edit the item
|
||||
// source to change); the legacy branch above keeps honoring it
|
||||
if (dur !== undefined)
|
||||
console.error(
|
||||
"hw: hwArrowOn draw duration is locked for built targets — ignoring dur=" + dur,
|
||||
);
|
||||
dur = 0.7;
|
||||
// the pen ACCELERATES into the head (power2.in) so the measured
|
||||
// arrival velocity is real — a settling ease ends at ~zero slope
|
||||
// and would make the stretch invisible
|
||||
var drawEase = gsap.parseEase("power2.in");
|
||||
window.hwDrawOn(tl, b.applied, at, dur, { ease: drawEase });
|
||||
var dlen = b.applied.draw.getTotalLength();
|
||||
var eps = 1e-4;
|
||||
var v = ((drawEase(1) - drawEase(1 - eps)) / eps) * (dlen / dur);
|
||||
var S = Math.min(0.06 * (v / 2000), 0.25);
|
||||
var rec = window.springEase({ feel: "snappy" });
|
||||
var FPS = 30;
|
||||
var st = { s: 0 };
|
||||
var hg = b.headG;
|
||||
window.hwOnUpdate(tl, function () {
|
||||
// stretch ALONG travel (the wrapper's local x after rotation)
|
||||
var along = 1 + st.s;
|
||||
gsap.set(hg, { scaleX: along, scaleY: 1 / along });
|
||||
var ax = parseFloat(gsap.getProperty(hg, "scaleX"));
|
||||
var ay = parseFloat(gsap.getProperty(hg, "scaleY"));
|
||||
if (Math.abs(ax * ay - 1) > 0.01)
|
||||
console.error("hw volume law violated (arrowhead): " + (ax * ay).toFixed(4));
|
||||
});
|
||||
tl.set(hg, { opacity: 1 }, at + dur);
|
||||
tl.to(st, { s: S, duration: 2 / FPS, ease: "power3.out" }, at + dur);
|
||||
tl.to(st, { s: 0, duration: rec.duration, ease: rec.ease }, at + dur + 3 / FPS);
|
||||
// boil pose (recorded from CONFIG at build; hwBoil needs the
|
||||
// timeline, so it registers on first wiring). Boil owns x/y/rotation
|
||||
// of the WRAPPER element — the arrival stretch lives on the nested
|
||||
// head rig, never on the boiled element.
|
||||
if (!b.boiled) {
|
||||
b.boiled = true;
|
||||
window.hwBoilPose(tl, el, b.boil, { seed: b.seed });
|
||||
}
|
||||
};
|
||||
window.hwArrowOff = function (tl, target, at) {
|
||||
tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
|
||||
};
|
||||
|
||||
// ---- self-preview ----
|
||||
document
|
||||
.getElementById("hw-ar-demo-path")
|
||||
.setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
|
||||
var CONFIG = {
|
||||
// ── Controls (family base + 2 item-specific; comment grammar is the published-parameter list) ──
|
||||
arrowStyle: "gentle", // variant: "straight" | "gentle" | "swoop" — curve bend pose over the seeded wobble math (bend + both control points)
|
||||
strokeType: "plain", // variant: "plain" | "soft" | "sharp" | "spray" — curve texture via hwStrokeApply (sharp/spray draw on a mask clone); head stays plain
|
||||
boil: "calm", // variant: "off" | "calm" | "lively" — authored amp/rot pairs over the family-locked frameDrop 3; seed locked
|
||||
|
||||
// ── Locked (edit the item source to change) ─────────────────────
|
||||
// seed (derived per target), draw ease (power2.in), arrival
|
||||
// softness 0.06, snappy spring recovery, durations
|
||||
};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
window.hwArrowBuild("#hw-ar-demo", CONFIG);
|
||||
window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
|
||||
window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
|
||||
window.hwArrowOff(tl, "#hw-ar-demo", 3.4);
|
||||
tl.set("#hw-ar-root", { visibility: "hidden" }, 3.98);
|
||||
window.__timelines["hw-arrow"] = tl;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Hand-Drawn Boil"
|
||||
description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator"
|
||||
description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
@@ -61,14 +61,28 @@ you paste it into.
|
||||
The hand-drawn "boil": jitter that re-poses only every N frames
|
||||
(quake + frame-drop style). Pose is a pure function of quantized
|
||||
timeline time through a seeded hash — fully seek-safe, renders
|
||||
identically on every pass over the same frame.
|
||||
identically on every pass over the same frame. Ships the control
|
||||
layer on top of the raw mechanic: hwBoilPose (the "boil" control —
|
||||
authored amp/rot poses over the family-locked frameDrop), the
|
||||
stroke matrix (hwStrokeTypes / hwStrokeApply / hwDrawOn — the
|
||||
"strokeType" control: plain | soft | sharp | spray; spray is
|
||||
index-seeded deterministic dots, NO feTurbulence anywhere) and the
|
||||
curvature-adaptive pen-velocity ease (hwPenEase).
|
||||
|
||||
RULES:
|
||||
- hwBoil owns x/y/rotation of the boiled element. Entrance/exit
|
||||
tweens go on a WRAPPER around it, never the boiled element.
|
||||
- hwBoil owns x/y/rotation of the boiled element.
|
||||
Transform-touching entrance/exit tweens go on a WRAPPER
|
||||
around it, never the boiled element (non-transform tweens
|
||||
like opacity don't contend and may ride it).
|
||||
- One timeline has ONE onUpdate — hwOnUpdate is the dispatcher
|
||||
that lets the boil coexist with sweep scalars etc. Register
|
||||
every onUpdate-style render through it. */
|
||||
every onUpdate-style render through it.
|
||||
- Never boil an element carrying an SVG transform attribute —
|
||||
nest a positioning <g> (or div) and boil the clean inner group.
|
||||
- A textured path (sharp/spray) lives in its OWN svg inside the
|
||||
boiled wrapper, so the stroke-matrix mask in that svg's defs
|
||||
rides the boil with it (a mask left in a shared static svg
|
||||
would clip the texture at jitter extremes). */
|
||||
#hw-boil-root {
|
||||
--hw-font-print: "Caveat", cursive;
|
||||
--hw-font-script: "Caveat", cursive;
|
||||
@@ -112,7 +126,7 @@ you paste it into.
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgba(244, 242, 236, 0.45);
|
||||
color: rgba(244, 242, 236, 0.62);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -122,7 +136,26 @@ you paste it into.
|
||||
|
||||
hwBoil(tl, "#hw-my-annotation", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });
|
||||
|
||||
frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->
|
||||
frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it.
|
||||
|
||||
Control layer (copy alongside): hwBoilPose maps the "boil" control
|
||||
("off" | "calm" | "lively") to authored amp/rot pairs over the
|
||||
family-locked frameDrop 3 —
|
||||
|
||||
hwBoilPose(tl, "#hw-my-annotation", CONFIG.boil, { seed: 2 });
|
||||
|
||||
The stroke matrix (hwStrokeTypes / hwStrokeApply / hwDrawOn, plus
|
||||
hwPenEase) maps the "strokeType" control ("plain" | "soft" |
|
||||
"sharp" | "spray") to authored textures. sharp/spray return a mask
|
||||
clone in applied.draw and hwDrawOn animates THAT (the visible
|
||||
texture never animates); { pen: true } rides the curvature-adaptive
|
||||
pen-velocity ease —
|
||||
|
||||
var applied = hwStrokeApply(pathEl, CONFIG.strokeType, { seed: 4, id: "my-mask" });
|
||||
hwDrawOn(tl, applied, 0.3, 0.8, { pen: true });
|
||||
|
||||
Unknown control values fall back to the declared default with a
|
||||
console error (bounded-controls law). -->
|
||||
<div
|
||||
id="hw-boil-root"
|
||||
data-composition-id="hw-boil"
|
||||
@@ -132,7 +165,6 @@ you paste it into.
|
||||
data-height="1080"
|
||||
>
|
||||
<svg viewBox="0 0 1920 1080">
|
||||
<g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
|
||||
<g id="hw-b-arrow-g">
|
||||
<path
|
||||
id="hw-b-arrow"
|
||||
@@ -140,9 +172,23 @@ you paste it into.
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- the CONFIG element: own svg inside the boiled div — the
|
||||
stroke-matrix mask (in this svg's defs) rides the boil with it -->
|
||||
<div
|
||||
id="hw-b-circle-w"
|
||||
style="position: absolute; left: 250px; top: 470px; width: 420px; height: 300px"
|
||||
>
|
||||
<div id="hw-b-circle-g" style="position: absolute; inset: 0">
|
||||
<svg viewBox="0 0 420 300" style="overflow: visible">
|
||||
<path id="hw-b-circle"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
|
||||
<div class="hw-b-tag" style="left: 350px; top: 782px">FRAME DROP 3</div>
|
||||
<div class="hw-b-tag" style="left: 700px; top: 782px">FRAME DROP 1</div>
|
||||
<div class="hw-b-tag" id="hw-b-tag-config" style="left: 350px; top: 782px">
|
||||
BOIL "CALM" · STROKE "PLAIN"
|
||||
</div>
|
||||
<div class="hw-b-tag" style="left: 940px; top: 782px">FRAME DROP 1</div>
|
||||
<div class="hw-b-tag" style="left: 1230px; top: 700px">TEXT, AMP 1.2</div>
|
||||
<div
|
||||
id="hw-b-drv"
|
||||
@@ -157,6 +203,16 @@ you paste it into.
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var CONFIG = {
|
||||
// ── Controls (family base + 1 item-specific; comment grammar is the published-parameter list) ──
|
||||
boil: "calm", // variant: "off" | "calm" | "lively" — authored amp/rot pairs over the family-locked frameDrop 3, applied to the demo circle; seed locked (family base)
|
||||
strokeType: "plain", // variant: "plain" | "soft" | "sharp" | "spray" — authored stroke texture on the demo circle (soft = blur; sharp = micro-dash dry marker; spray = seeded deterministic dots); draw-on rides the mask clone for textured types (4 params)
|
||||
|
||||
// ── Locked (edit the item source to change) ─────────────────────
|
||||
// seeds, draw durations/eases, pen-velocity constants (kCurve 10,
|
||||
// floor 0.22), boil pose tables, frameDrop values, demo geometry
|
||||
};
|
||||
|
||||
// ---- copy these helpers into the host script ----
|
||||
|
||||
// Dispatcher: a GSAP timeline has ONE onUpdate. Register every
|
||||
@@ -201,6 +257,21 @@ you paste it into.
|
||||
});
|
||||
};
|
||||
|
||||
// The boil CONTROL: authored amp/rot poses over the family-locked
|
||||
// frameDrop 3; seed stays locked. Unknown pose → "calm" + console
|
||||
// error (bounded-controls law).
|
||||
window.hwBoilPose = function (tl, target, pose, opts) {
|
||||
opts = opts || {};
|
||||
var poses = { calm: { amp: 1.6, rot: 0.5 }, lively: { amp: 2.6, rot: 0.9 } };
|
||||
if (pose === "off") return;
|
||||
var p = poses[pose];
|
||||
if (!p) {
|
||||
console.error('hw: unknown boil pose "' + pose + '" — falling back to "calm"');
|
||||
p = poses.calm;
|
||||
}
|
||||
window.hwBoil(tl, target, { amp: p.amp, rot: p.rot, frameDrop: 3, seed: opts.seed || 1 });
|
||||
};
|
||||
|
||||
// Seeded hand-wobbled ellipse path (smooth quadratic chain).
|
||||
window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
|
||||
wobblePct = wobblePct === undefined ? 3 : wobblePct;
|
||||
@@ -230,23 +301,230 @@ you paste it into.
|
||||
return d;
|
||||
};
|
||||
|
||||
/* ---- pen-velocity ease: pure function of the path geometry ----
|
||||
Sample 25–75 curvature-adaptive points, speed ∝ 1/(1+k·curvature)
|
||||
floored at 0.22 (a pen slows into curves, never stalls), integrate
|
||||
ds/speed, invert to a normalized time→distance ease. Seek-safe:
|
||||
no per-frame state. */
|
||||
window.hwPenEase = function (pathEl, opts) {
|
||||
opts = opts || {};
|
||||
var kCurve = opts.kCurve !== undefined ? opts.kCurve : 10;
|
||||
var L = pathEl.getTotalLength();
|
||||
if (L <= 0)
|
||||
return {
|
||||
ease: function (t) {
|
||||
return t;
|
||||
},
|
||||
samples: 2,
|
||||
inkTime: 1,
|
||||
len: 0,
|
||||
};
|
||||
var PRE = 48;
|
||||
var pts = [];
|
||||
for (var i = 0; i <= PRE; i++) pts.push(pathEl.getPointAtLength((L * i) / PRE));
|
||||
var curv = [0];
|
||||
for (i = 1; i < PRE; i++) {
|
||||
var ax = pts[i].x - pts[i - 1].x,
|
||||
ay = pts[i].y - pts[i - 1].y;
|
||||
var bx = pts[i + 1].x - pts[i].x,
|
||||
by = pts[i + 1].y - pts[i].y;
|
||||
var la = Math.hypot(ax, ay) || 1e-6,
|
||||
lb = Math.hypot(bx, by) || 1e-6;
|
||||
var dot = Math.max(-1, Math.min(1, (ax * bx + ay * by) / (la * lb)));
|
||||
curv.push(Math.acos(dot) / ((la + lb) / 2));
|
||||
}
|
||||
curv.push(0);
|
||||
var mass = 0;
|
||||
for (i = 0; i < curv.length; i++) mass += curv[i];
|
||||
var N = Math.max(25, Math.min(75, Math.round(25 + mass * 18)));
|
||||
var seg = L / N;
|
||||
var times = [0];
|
||||
var t = 0;
|
||||
for (i = 1; i <= N; i++) {
|
||||
var u = ((i - 0.5) / N) * PRE;
|
||||
var i0 = Math.floor(u),
|
||||
f = u - i0;
|
||||
var c = curv[Math.min(i0, PRE)] * (1 - f) + curv[Math.min(i0 + 1, PRE)] * f;
|
||||
var speed = Math.max(1 / (1 + kCurve * c * 14), 0.22);
|
||||
t += seg / speed;
|
||||
times.push(t);
|
||||
}
|
||||
var total = times[N];
|
||||
for (i = 0; i <= N; i++) times[i] /= total;
|
||||
var easeFn = function (p) {
|
||||
if (p <= 0) return 0;
|
||||
if (p >= 1) return 1;
|
||||
var lo = 0,
|
||||
hi = N;
|
||||
while (hi - lo > 1) {
|
||||
var mid = (lo + hi) >> 1;
|
||||
if (times[mid] <= p) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
var span = times[hi] - times[lo] || 1e-9;
|
||||
return (lo + (p - times[lo]) / span) / N;
|
||||
};
|
||||
return { ease: easeFn, samples: N, inkTime: total, len: L };
|
||||
};
|
||||
|
||||
/* ---- stroke matrix: plain | soft | sharp | spray ------------------
|
||||
strokeType is a variant control. Authored constants per type;
|
||||
unknown value → default ("plain") + console error (bounded-controls
|
||||
law). sharp = micro stroke-dasharray gaps (dry marker) — draw-on
|
||||
must therefore ride a MASK clone (the visible dasharray never
|
||||
animates). spray = index-seeded deterministic dots along the path
|
||||
via hwHash: position a pure function of path parameter + seed; NO
|
||||
feTurbulence anywhere.
|
||||
Returns { draw: pathToDashAnimate, group: maskedGroupOrNull } */
|
||||
window.hwStrokeTypes = {
|
||||
plain: {},
|
||||
soft: { blur: 0.6 },
|
||||
sharp: { dash: [3.0, 1.55] }, // × stroke-width
|
||||
spray: {
|
||||
coreOpacity: 0.5,
|
||||
coreBlur: 0.4,
|
||||
density: 0.16,
|
||||
scatter: 2.6,
|
||||
rMin: 1.1,
|
||||
rMax: 2.6,
|
||||
},
|
||||
};
|
||||
window.hwStrokeApply = function (pathEl, type, opts) {
|
||||
opts = opts || {};
|
||||
var cfg = window.hwStrokeTypes[type];
|
||||
if (!cfg) {
|
||||
console.error('hw: unknown strokeType "' + type + '" — falling back to "plain"');
|
||||
type = "plain";
|
||||
cfg = window.hwStrokeTypes.plain;
|
||||
}
|
||||
var svg = pathEl.ownerSVGElement;
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
var w = parseFloat(getComputedStyle(pathEl).strokeWidth) || 6;
|
||||
if (type === "plain") return { draw: pathEl, group: null, type: type };
|
||||
if (type === "soft") {
|
||||
pathEl.style.filter = "blur(" + cfg.blur + "px)";
|
||||
return { draw: pathEl, group: null, type: type };
|
||||
}
|
||||
// sharp + spray: wrap in a masked group, draw-on animates the mask clone
|
||||
var id =
|
||||
opts.id ||
|
||||
"hwsm-" + Math.abs(Math.round(window.hwHash((opts.seed || 1) * 13.7, 5) * 1e6));
|
||||
var defs = svg.querySelector("defs");
|
||||
if (!defs) {
|
||||
defs = document.createElementNS(ns, "defs");
|
||||
svg.insertBefore(defs, svg.firstChild);
|
||||
}
|
||||
var mask = document.createElementNS(ns, "mask");
|
||||
mask.setAttribute("id", id);
|
||||
mask.setAttribute("maskUnits", "userSpaceOnUse");
|
||||
var clone = document.createElementNS(ns, "path");
|
||||
clone.setAttribute("d", pathEl.getAttribute("d"));
|
||||
clone.setAttribute("fill", "none");
|
||||
clone.setAttribute("stroke", "#fff");
|
||||
clone.setAttribute(
|
||||
"stroke-width",
|
||||
w * (type === "spray" ? 2 + (cfg.scatter * 2) / w : 1.7),
|
||||
);
|
||||
clone.setAttribute("stroke-linecap", "round");
|
||||
clone.setAttribute("stroke-linejoin", "round");
|
||||
mask.appendChild(clone);
|
||||
defs.appendChild(mask);
|
||||
var group = document.createElementNS(ns, "g");
|
||||
group.setAttribute("mask", "url(#" + id + ")");
|
||||
pathEl.parentNode.insertBefore(group, pathEl);
|
||||
group.appendChild(pathEl);
|
||||
if (type === "sharp") {
|
||||
pathEl.setAttribute(
|
||||
"stroke-dasharray",
|
||||
(cfg.dash[0] * w).toFixed(1) + " " + (cfg.dash[1] * w).toFixed(1),
|
||||
);
|
||||
} else {
|
||||
// spray: faint core + seeded dots
|
||||
pathEl.setAttribute("stroke-opacity", cfg.coreOpacity);
|
||||
pathEl.style.filter = "blur(" + cfg.coreBlur + "px)";
|
||||
var len = pathEl.getTotalLength();
|
||||
var n = Math.round(len * cfg.density * (opts.densityScale || 1));
|
||||
var seed = opts.seed || 1;
|
||||
var dots = document.createElementNS(ns, "g");
|
||||
for (var i = 0; i < n; i++) {
|
||||
var t = Math.min(
|
||||
1,
|
||||
Math.max(0, (i + 0.5) / n + (window.hwHash(i * 7, seed) * 0.35) / n),
|
||||
);
|
||||
var pt = pathEl.getPointAtLength(t * len);
|
||||
var pt2 = pathEl.getPointAtLength(Math.min(len, t * len + 0.5));
|
||||
var tx = pt2.x - pt.x,
|
||||
ty = pt2.y - pt.y;
|
||||
var tl2 = Math.hypot(tx, ty) || 1;
|
||||
var nx = -ty / tl2,
|
||||
nyv = tx / tl2;
|
||||
var off = window.hwHash(i * 7 + 1, seed) * (cfg.scatter + w * 0.55);
|
||||
var r = cfg.rMin + Math.abs(window.hwHash(i * 7 + 2, seed)) * (cfg.rMax - cfg.rMin);
|
||||
var c = document.createElementNS(ns, "circle");
|
||||
c.setAttribute("cx", (pt.x + nx * off).toFixed(1));
|
||||
c.setAttribute("cy", (pt.y + nyv * off).toFixed(1));
|
||||
c.setAttribute("r", r.toFixed(2));
|
||||
c.setAttribute("fill", getComputedStyle(pathEl).stroke);
|
||||
dots.appendChild(c);
|
||||
}
|
||||
group.appendChild(dots);
|
||||
}
|
||||
return { draw: clone, group: group, type: type };
|
||||
};
|
||||
|
||||
/* Draw-on across the stroke matrix: dash-animate whatever
|
||||
hwStrokeApply says. Optionally pen-velocity eased (opts.pen: true). */
|
||||
window.hwDrawOn = function (tl, applied, at, dur, opts) {
|
||||
opts = opts || {};
|
||||
var p = applied.draw;
|
||||
var len = p.getTotalLength();
|
||||
// the draw target is always solid (plain/soft: the path itself; sharp/spray:
|
||||
// the mask clone — the visible path keeps its texture dasharray untouched)
|
||||
p.setAttribute("stroke-dasharray", len + " " + len);
|
||||
p.setAttribute("stroke-dashoffset", len);
|
||||
gsap.set(p, { opacity: 0 }); // kill the round-cap start nub pre-draw
|
||||
var ease = opts.pen ? window.hwPenEase(p, opts).ease : opts.ease || "power2.inOut";
|
||||
tl.set(p, { opacity: 1 }, at);
|
||||
tl.to(
|
||||
p,
|
||||
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: ease },
|
||||
at,
|
||||
);
|
||||
};
|
||||
|
||||
// ---- self-preview (not part of the snippet you copy) ----
|
||||
var circle = document.getElementById("hw-b-circle");
|
||||
circle.setAttribute("d", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));
|
||||
circle.setAttribute("d", window.hwWobbleEllipse(210, 150, 190, 130, 4, 3.2));
|
||||
|
||||
document.getElementById("hw-b-tag-config").textContent = (
|
||||
'boil "' +
|
||||
CONFIG.boil +
|
||||
'" · stroke "' +
|
||||
CONFIG.strokeType +
|
||||
'"'
|
||||
).toUpperCase();
|
||||
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
/* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */
|
||||
[circle, document.getElementById("hw-b-arrow")].forEach(function (p, i) {
|
||||
var len = p.getTotalLength();
|
||||
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
|
||||
tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.3 + i * 0.35);
|
||||
});
|
||||
/* the CONFIG circle rides the stroke matrix: texture from
|
||||
CONFIG.strokeType, draw-on through the mask-safe hwDrawOn with the
|
||||
pen-velocity ease (strokeDashoffset — never x/y, the boil owns those) */
|
||||
var applied = window.hwStrokeApply(circle, CONFIG.strokeType, { seed: 4, id: "hw-b-mask" });
|
||||
window.hwDrawOn(tl, applied, 0.3, 0.8, { pen: true });
|
||||
|
||||
/* raw draw-on entrance for the arrow (not routed through the matrix) */
|
||||
var arrow = document.getElementById("hw-b-arrow");
|
||||
var alen = arrow.getTotalLength();
|
||||
gsap.set(arrow, { strokeDasharray: alen, strokeDashoffset: alen });
|
||||
tl.to(arrow, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.65);
|
||||
|
||||
gsap.set("#hw-b-word", { opacity: 0 });
|
||||
tl.to("#hw-b-word", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.1);
|
||||
|
||||
/* three boils with different characters, one dispatcher */
|
||||
window.hwBoil(tl, "#hw-b-circle-g", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });
|
||||
/* three boils with different characters, one dispatcher: the circle
|
||||
rides the boil CONTROL (CONFIG.boil → authored pose); arrow + word
|
||||
keep raw hwBoil calls — the multi-character demo */
|
||||
window.hwBoilPose(tl, "#hw-b-circle-g", CONFIG.boil, { seed: 2 });
|
||||
window.hwBoil(tl, "#hw-b-arrow-g", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });
|
||||
window.hwBoil(tl, "#hw-b-word", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Hand-Drawn Box Label"
|
||||
description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
|
||||
description: "Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
@@ -55,17 +55,30 @@ you paste it into.
|
||||
}
|
||||
/* ---- hw-box-label ----------------------------------------------------
|
||||
Rounded hand-drawn box + marker label (map-label style annotations).
|
||||
Requires the hw-boil helpers in the host. */
|
||||
Requires the hw-boil helpers in the host.
|
||||
Wrapper anatomy (outer to inner): .hw-box = position/move wrapper
|
||||
(entrances/exits target THIS, never the boil element) > .hw-bx-deform
|
||||
= deform wrapper (g21 squash scale, transform-origin 50% 100%) >
|
||||
.hw-bx-boil = boil target (hwBoilPose owns its x/y/rotation) >
|
||||
content (svg + label). */
|
||||
.hw-box {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hw-box .hw-bx-deform,
|
||||
.hw-box .hw-bx-boil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.hw-box svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.hw-box path {
|
||||
/* :not([stroke]) keeps texture machinery out of the ink rule: the
|
||||
stroke-matrix mask clone carries a stroke="#fff" attribute and must
|
||||
not inherit the ink color/width (CSS would beat its attributes). */
|
||||
.hw-box path:not([stroke]) {
|
||||
fill: none;
|
||||
stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
|
||||
stroke-width: var(--hw-box-w, 6);
|
||||
@@ -93,14 +106,20 @@ you paste it into.
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the
|
||||
hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the
|
||||
hw-boil helpers. Size the wrapper over your target, then:
|
||||
<!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern (position
|
||||
wrapper > .hw-bx-deform > .hw-bx-boil > svg + label), the CONFIG
|
||||
block, the hw family runtime, the spring library, the stroke matrix,
|
||||
AND the hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers. Size
|
||||
the wrapper over your target, then wire with positions only:
|
||||
|
||||
hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe", labelPos: "above" });
|
||||
hwBoxOn(tl, "#hw-my-box", 2.0);
|
||||
hwBoil(tl, "#hw-my-box", { frameDrop: 3, seed: 3 });
|
||||
hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe" });
|
||||
hwBoxOn(tl, "#hw-my-box", 2.0); // entrance + boil per CONFIG
|
||||
hwBoxOff(tl, "#hw-my-box", 8.0);
|
||||
|
||||
The levers live in CONFIG (entrance / strokeType / labelPos / boil).
|
||||
Multi-instance hosts may override per instance via hwBoxBuild opts
|
||||
using the SAME declared values (bounded identically). The helpers own
|
||||
all durations/eases internally — no raw tween args in host code.
|
||||
-->
|
||||
<div
|
||||
id="hw-bx-root"
|
||||
@@ -116,8 +135,12 @@ you paste it into.
|
||||
id="hw-bx-demo"
|
||||
style="left: 700px; top: 420px; width: 420px; height: 230px"
|
||||
>
|
||||
<svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
|
||||
<div class="hw-bx-label" id="hw-bx-demo-label"></div>
|
||||
<div class="hw-bx-deform">
|
||||
<div class="hw-bx-boil">
|
||||
<svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
|
||||
<div class="hw-bx-label" id="hw-bx-demo-label"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="hw-bx-drv"
|
||||
@@ -132,6 +155,25 @@ you paste it into.
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var CONFIG = {
|
||||
// ── Content (freely editable — not counted) ─────────────────────
|
||||
// per-instance content rides hwBoxBuild(target, opts):
|
||||
// opts.label (the label text) · opts.seed (which wobble pose the
|
||||
// box gets — an identity pick, not a feel lever)
|
||||
|
||||
// ── Controls (family base + 3 item-specific; comment grammar is the published-parameter list) ──
|
||||
entrance: "draw", // variant: "draw" | "drop" — draw = stroke draw-on + label fade (the shipped entrance); drop = landing squash: box+label drop in, contact squash on the deform wrapper, bouncy spring recovery; travel/duration derived, never exposed
|
||||
strokeType: "plain", // variant: "plain" | "soft" | "sharp" | "spray" — authored stroke texture on the box path (constants per type; draw-on composes via the mask clone)
|
||||
labelPos: "above", // variant: "above" | "inside" — label above the box or vertically centered inside it
|
||||
boil: "calm", // variant: "off" | "calm" | "lively" — authored amp/rot pairs over the family-locked frameDrop 3; seed locked
|
||||
|
||||
// ── Locked (edit the item source to change) ─────────────────────
|
||||
// draw duration/ease, drop travel/duration derivation (≈1.9× box
|
||||
// height into ~0.5s, power2.in), softness tier 0.11 (UI card),
|
||||
// spring registers, stroke-type constants, boil pose tables,
|
||||
// label fade timing, wobble amplitude
|
||||
};
|
||||
|
||||
/* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
|
||||
window.hwOnUpdate = function (tl, fn) {
|
||||
if (!tl.__hwRenders) {
|
||||
@@ -166,6 +208,252 @@ you paste it into.
|
||||
}
|
||||
});
|
||||
};
|
||||
// boil control: authored poses over the family-locked frameDrop.
|
||||
// Unknown pose → default + console error (bounded-controls law).
|
||||
window.hwBoilPose = function (tl, target, pose, opts) {
|
||||
opts = opts || {};
|
||||
var poses = { calm: { amp: 1.6, rot: 0.5 }, lively: { amp: 2.6, rot: 0.9 } };
|
||||
if (pose === "off") return;
|
||||
var p = poses[pose];
|
||||
if (!p) {
|
||||
console.error('hw: unknown boil pose "' + pose + '" — falling back to "calm"');
|
||||
p = poses.calm;
|
||||
}
|
||||
window.hwBoil(tl, target, { amp: p.amp, rot: p.rot, frameDrop: 3, seed: opts.seed || 1 });
|
||||
};
|
||||
|
||||
/* ---- spring library (authored feel registers) -------------------
|
||||
The factory owns the recovery duration — consume rec.duration
|
||||
verbatim, never scale or multiply it. */
|
||||
var LN1000 = Math.log(1000);
|
||||
var FEELS = {
|
||||
snappy: { zeta: 0.9, response: 0.22 },
|
||||
bouncy: { zeta: 0.5, response: 0.4 },
|
||||
};
|
||||
window.springEase = function (opts) {
|
||||
var f = opts.feel ? FEELS[opts.feel] : opts;
|
||||
var zeta = f.zeta,
|
||||
response = f.response;
|
||||
var w0 = (2 * Math.PI) / response;
|
||||
var T = LN1000 / (zeta * w0);
|
||||
var x;
|
||||
if (zeta < 1) {
|
||||
var wd = w0 * Math.sqrt(1 - zeta * zeta);
|
||||
x = function (t) {
|
||||
return (
|
||||
1 -
|
||||
Math.exp(-zeta * w0 * t) *
|
||||
(Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t))
|
||||
);
|
||||
};
|
||||
} else {
|
||||
x = function (t) {
|
||||
return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
|
||||
};
|
||||
}
|
||||
var xT = x(T);
|
||||
return {
|
||||
ease: function (p) {
|
||||
return p >= 1 ? 1 : x(p * T) / xT;
|
||||
},
|
||||
duration: T,
|
||||
zeta: zeta,
|
||||
response: response,
|
||||
};
|
||||
};
|
||||
|
||||
/* ---- stroke matrix: plain | soft | sharp | spray ----------------
|
||||
strokeType is a g09 variant control. Authored constants per type;
|
||||
unknown value → default ("plain") + console error (bounded-controls
|
||||
law). sharp = micro stroke-dasharray gaps (dry marker) — draw-on
|
||||
must therefore ride a MASK clone (the visible dasharray never
|
||||
animates). spray = index-seeded deterministic dots along the path
|
||||
via hwHash: position a pure function of path parameter + seed; NO
|
||||
feTurbulence anywhere.
|
||||
Returns { draw: pathToDashAnimate, group: maskedGroupOrNull } */
|
||||
window.hwStrokeTypes = {
|
||||
plain: {},
|
||||
soft: { blur: 0.6 },
|
||||
sharp: { dash: [3.0, 1.55] }, // × stroke-width
|
||||
spray: {
|
||||
coreOpacity: 0.5,
|
||||
coreBlur: 0.4,
|
||||
density: 0.16,
|
||||
scatter: 2.6,
|
||||
rMin: 1.1,
|
||||
rMax: 2.6,
|
||||
},
|
||||
};
|
||||
window.hwStrokeApply = function (pathEl, type, opts) {
|
||||
opts = opts || {};
|
||||
var cfg = window.hwStrokeTypes[type];
|
||||
if (!cfg) {
|
||||
console.error('hw: unknown strokeType "' + type + '" — falling back to "plain"');
|
||||
type = "plain";
|
||||
cfg = window.hwStrokeTypes.plain;
|
||||
}
|
||||
var svg = pathEl.ownerSVGElement;
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
var w = parseFloat(getComputedStyle(pathEl).strokeWidth) || 6;
|
||||
if (type === "plain") return { draw: pathEl, group: null, type: type };
|
||||
if (type === "soft") {
|
||||
pathEl.style.filter = "blur(" + cfg.blur + "px)";
|
||||
return { draw: pathEl, group: null, type: type };
|
||||
}
|
||||
// sharp + spray: wrap in a masked group, draw-on animates the mask clone
|
||||
var id =
|
||||
opts.id ||
|
||||
"hwsm-" + Math.abs(Math.round(window.hwHash((opts.seed || 1) * 13.7, 5) * 1e6));
|
||||
var defs = svg.querySelector("defs");
|
||||
if (!defs) {
|
||||
defs = document.createElementNS(ns, "defs");
|
||||
svg.insertBefore(defs, svg.firstChild);
|
||||
}
|
||||
var mask = document.createElementNS(ns, "mask");
|
||||
mask.setAttribute("id", id);
|
||||
mask.setAttribute("maskUnits", "userSpaceOnUse");
|
||||
var clone = document.createElementNS(ns, "path");
|
||||
clone.setAttribute("d", pathEl.getAttribute("d"));
|
||||
clone.setAttribute("fill", "none");
|
||||
clone.setAttribute("stroke", "#fff");
|
||||
clone.setAttribute(
|
||||
"stroke-width",
|
||||
w * (type === "spray" ? 2 + (cfg.scatter * 2) / w : 1.7),
|
||||
);
|
||||
clone.setAttribute("stroke-linecap", "round");
|
||||
clone.setAttribute("stroke-linejoin", "round");
|
||||
mask.appendChild(clone);
|
||||
defs.appendChild(mask);
|
||||
var group = document.createElementNS(ns, "g");
|
||||
group.setAttribute("mask", "url(#" + id + ")");
|
||||
pathEl.parentNode.insertBefore(group, pathEl);
|
||||
group.appendChild(pathEl);
|
||||
if (type === "sharp") {
|
||||
pathEl.setAttribute(
|
||||
"stroke-dasharray",
|
||||
(cfg.dash[0] * w).toFixed(1) + " " + (cfg.dash[1] * w).toFixed(1),
|
||||
);
|
||||
} else {
|
||||
// spray: faint core + seeded dots
|
||||
pathEl.setAttribute("stroke-opacity", cfg.coreOpacity);
|
||||
pathEl.style.filter = "blur(" + cfg.coreBlur + "px)";
|
||||
var len = pathEl.getTotalLength();
|
||||
var n = Math.round(len * cfg.density * (opts.densityScale || 1));
|
||||
var seed = opts.seed || 1;
|
||||
var dots = document.createElementNS(ns, "g");
|
||||
for (var i = 0; i < n; i++) {
|
||||
var t = Math.min(
|
||||
1,
|
||||
Math.max(0, (i + 0.5) / n + (window.hwHash(i * 7, seed) * 0.35) / n),
|
||||
);
|
||||
var pt = pathEl.getPointAtLength(t * len);
|
||||
var pt2 = pathEl.getPointAtLength(Math.min(len, t * len + 0.5));
|
||||
var tx = pt2.x - pt.x,
|
||||
ty = pt2.y - pt.y;
|
||||
var tl2 = Math.hypot(tx, ty) || 1;
|
||||
var nx = -ty / tl2,
|
||||
nyv = tx / tl2;
|
||||
var off = window.hwHash(i * 7 + 1, seed) * (cfg.scatter + w * 0.55);
|
||||
var r = cfg.rMin + Math.abs(window.hwHash(i * 7 + 2, seed)) * (cfg.rMax - cfg.rMin);
|
||||
var c = document.createElementNS(ns, "circle");
|
||||
c.setAttribute("cx", (pt.x + nx * off).toFixed(1));
|
||||
c.setAttribute("cy", (pt.y + nyv * off).toFixed(1));
|
||||
c.setAttribute("r", r.toFixed(2));
|
||||
c.setAttribute("fill", getComputedStyle(pathEl).stroke);
|
||||
dots.appendChild(c);
|
||||
}
|
||||
group.appendChild(dots);
|
||||
}
|
||||
return { draw: clone, group: group, type: type };
|
||||
};
|
||||
|
||||
/* Draw-on across the stroke matrix: dash-animate whatever
|
||||
hwStrokeApply says. (opts.pen requires the hwPenEase helper from
|
||||
the write-on items — not bundled here, never passed here.) */
|
||||
window.hwDrawOn = function (tl, applied, at, dur, opts) {
|
||||
opts = opts || {};
|
||||
var p = applied.draw;
|
||||
var len = p.getTotalLength();
|
||||
// the draw target is always solid (plain/soft: the path itself; sharp/spray:
|
||||
// the mask clone — the visible path keeps its texture dasharray untouched)
|
||||
p.setAttribute("stroke-dasharray", len + " " + len);
|
||||
p.setAttribute("stroke-dashoffset", len);
|
||||
gsap.set(p, { opacity: 0 }); // kill the round-cap start nub pre-draw
|
||||
var ease = opts.pen ? window.hwPenEase(p, opts).ease : opts.ease || "power2.inOut";
|
||||
tl.set(p, { opacity: 1 }, at);
|
||||
tl.to(
|
||||
p,
|
||||
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: ease },
|
||||
at,
|
||||
);
|
||||
};
|
||||
|
||||
/* ---- g21 volume squash-stretch on hw impacts ----------------------
|
||||
S = min(SOFTNESS × v/V_REF, 0.25), v measured numerically from the
|
||||
entrance ease end-slope; scaleAlong × scalePerp ≈ 1 every frame
|
||||
(one proxy drives both); in-flight stretch E = 0.55 × SOFTNESS,
|
||||
velocity term clamped; contact squash ≤2 frames + 1-frame hold;
|
||||
recovery on a spring register with the factory duration consumed
|
||||
verbatim. Deformation lives on a WRAPPER (boil owns x/y/rotation of
|
||||
its own target; type counter-scaled to net identity inside). All
|
||||
per-frame application runs through hwOnUpdate.
|
||||
Volume assertion: |along×perp − 1| > 0.01 → console.error (fails check). */
|
||||
window.hwImpactSquash = function (tl, opts) {
|
||||
var wrap = opts.wrap; // deform wrapper (transform-origin 50% 100%)
|
||||
var label = opts.label || null; // counter-scaled type inside
|
||||
var travel = opts.travel;
|
||||
var at = opts.at;
|
||||
var dur = opts.dur;
|
||||
var softness = opts.softness !== undefined ? opts.softness : 0.11;
|
||||
var V_REF = 2000;
|
||||
var E = 0.55 * softness;
|
||||
var FPS = opts.fps || 30;
|
||||
var dropEase = opts.dropEase || gsap.parseEase("power2.in");
|
||||
// measured impact velocity (px/s) from the entrance ease end-slope
|
||||
var eps = 1e-4;
|
||||
var v = ((dropEase(1) - dropEase(1 - eps)) / eps) * (travel / dur);
|
||||
var S = Math.min(softness * (v / V_REF), 0.25);
|
||||
var rec = window.springEase({ feel: opts.feel || "bouncy" });
|
||||
var st = { ph: 0, s: 0 }; // ph: flight progress (linear), s: contact squash
|
||||
gsap.set(wrap, { transformOrigin: "50% 100%" });
|
||||
var setBoth = function (along) {
|
||||
gsap.set(wrap, { scaleY: along, scaleX: 1 / along });
|
||||
if (label) gsap.set(label, { scaleY: 1 / along, scaleX: along });
|
||||
// assert on the APPLIED transforms — catches any competing tween that
|
||||
// breaks the one-proxy-drives-both-axes law
|
||||
var ay = parseFloat(gsap.getProperty(wrap, "scaleY"));
|
||||
var ax = parseFloat(gsap.getProperty(wrap, "scaleX"));
|
||||
if (Math.abs(ax * ay - 1) > 0.01)
|
||||
console.error("hw volume law violated: scaleX*scaleY=" + (ax * ay).toFixed(4));
|
||||
};
|
||||
window.hwOnUpdate(tl, function () {
|
||||
if (st.ph > 0 && st.ph < 1) {
|
||||
var p = st.ph;
|
||||
var vp = ((dropEase(Math.min(p + eps, 1)) - dropEase(p)) / eps) * (travel / dur);
|
||||
setBoth(1 + E * Math.min(Math.abs(vp) / V_REF, 1));
|
||||
} else {
|
||||
setBoth(1 - st.s);
|
||||
}
|
||||
});
|
||||
// flight: wrapper position tween + linear proxy (same window)
|
||||
gsap.set(opts.moveTarget || wrap, { y: -travel }); // off-stage until entrance
|
||||
tl.fromTo(
|
||||
opts.moveTarget || wrap,
|
||||
{ y: -travel },
|
||||
{ y: 0, duration: dur, ease: dropEase, immediateRender: false },
|
||||
at,
|
||||
);
|
||||
tl.fromTo(st, { ph: 0 }, { ph: 1, duration: dur, ease: "none" }, at);
|
||||
// contact: squash in 2 frames, 1-frame hold, spring home (factory duration verbatim)
|
||||
tl.to(st, { s: S, duration: 2 / FPS, ease: "power3.out" }, at + dur);
|
||||
tl.to(st, { s: 0, duration: rec.duration, ease: rec.ease }, at + dur + 3 / FPS);
|
||||
return {
|
||||
v: Math.round(v),
|
||||
S: +S.toFixed(3),
|
||||
T: +rec.duration.toFixed(3),
|
||||
feel: opts.feel || "bouncy",
|
||||
};
|
||||
};
|
||||
|
||||
// ---- hw-box helpers (copy these too) ----
|
||||
// Wobbled rounded-rect path in a w x h box.
|
||||
@@ -197,6 +485,13 @@ you paste it into.
|
||||
d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
|
||||
return d;
|
||||
};
|
||||
// bounded variant resolution (g09): unknown value → declared default
|
||||
// + console error. strokeType/boil bound inside their own helpers.
|
||||
function hwBxPick(name, val, values, dflt) {
|
||||
if (values.indexOf(val) !== -1) return val;
|
||||
console.error("hw: unknown " + name + ' "' + val + '" — falling back to "' + dflt + '"');
|
||||
return dflt;
|
||||
}
|
||||
window.hwBoxBuild = function (target, opts) {
|
||||
opts = opts || {};
|
||||
var el = document.querySelector(target);
|
||||
@@ -204,13 +499,35 @@ you paste it into.
|
||||
var vb = svg.getAttribute("viewBox").split(" ");
|
||||
var W = parseFloat(vb[2]),
|
||||
H = parseFloat(vb[3]);
|
||||
el.querySelector("path").setAttribute(
|
||||
"d",
|
||||
window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
|
||||
);
|
||||
var path = el.querySelector("path");
|
||||
path.setAttribute("d", window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1));
|
||||
// resolve the control set: CONFIG defaults; per-instance opts
|
||||
// overrides accepted (declared enum values only — bounded the same)
|
||||
var cfg = {
|
||||
seed: opts.seed || 1,
|
||||
entrance: hwBxPick(
|
||||
"entrance",
|
||||
opts.entrance !== undefined ? opts.entrance : CONFIG.entrance,
|
||||
["draw", "drop"],
|
||||
"draw",
|
||||
),
|
||||
labelPos: hwBxPick(
|
||||
"labelPos",
|
||||
opts.labelPos !== undefined ? opts.labelPos : CONFIG.labelPos,
|
||||
["above", "inside"],
|
||||
"above",
|
||||
),
|
||||
strokeType: opts.strokeType !== undefined ? opts.strokeType : CONFIG.strokeType,
|
||||
boil: opts.boil !== undefined ? opts.boil : CONFIG.boil,
|
||||
};
|
||||
el.__hwCfg = cfg;
|
||||
el.__hwApplied = window.hwStrokeApply(path, cfg.strokeType, {
|
||||
seed: cfg.seed,
|
||||
id: "hw-bx-m-" + target.replace(/[^a-zA-Z0-9_-]/g, ""),
|
||||
});
|
||||
var label = el.querySelector(".hw-bx-label");
|
||||
label.textContent = opts.label || "";
|
||||
if ((opts.labelPos || "above") === "above") {
|
||||
if (cfg.labelPos === "above") {
|
||||
label.style.top = "-64px";
|
||||
} else {
|
||||
label.style.top = "50%";
|
||||
@@ -218,25 +535,45 @@ you paste it into.
|
||||
}
|
||||
};
|
||||
window.hwBoxOn = function (tl, target, at) {
|
||||
var p = document.querySelector(target + " path");
|
||||
var len = p.getTotalLength();
|
||||
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
|
||||
tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
|
||||
tl.to(
|
||||
document.querySelector(target + " .hw-bx-label"),
|
||||
{ opacity: 1, duration: 0.4, ease: "power2.out" },
|
||||
at + 0.55,
|
||||
);
|
||||
var el = document.querySelector(target);
|
||||
var cfg = el.__hwCfg;
|
||||
var label = el.querySelector(".hw-bx-label");
|
||||
if (cfg.entrance === "drop") {
|
||||
// landing squash: the whole box+label drops in and lands with a
|
||||
// contact squash on the deform wrapper; the label is counter-
|
||||
// scaled to net identity inside the shared apply (type NEVER
|
||||
// takes a non-uniform scale). Travel/duration derivation LOCKED:
|
||||
// ≈1.9× box height into ~0.5s of power2.in.
|
||||
gsap.set(label, { opacity: 1 }); // the label rides the drop
|
||||
gsap.set(el, { opacity: 0 }); // hidden until the entrance
|
||||
tl.set(el, { opacity: 1 }, at);
|
||||
window.hwImpactSquash(tl, {
|
||||
wrap: el.querySelector(".hw-bx-deform"),
|
||||
moveTarget: el,
|
||||
label: label,
|
||||
travel: Math.round(el.offsetHeight * 1.9),
|
||||
at: at,
|
||||
dur: 0.5,
|
||||
softness: 0.11, // UI-card tier
|
||||
feel: "bouncy",
|
||||
});
|
||||
} else {
|
||||
// "draw" — the shipped entrance, routed through hwDrawOn so
|
||||
// sharp/spray textures compose (the mask clone animates; the
|
||||
// visible texture dasharray never does)
|
||||
window.hwDrawOn(tl, el.__hwApplied, at, 0.75);
|
||||
tl.to(label, { opacity: 1, duration: 0.4, ease: "power2.out" }, at + 0.55);
|
||||
}
|
||||
window.hwBoilPose(tl, target + " .hw-bx-boil", cfg.boil, { seed: cfg.seed });
|
||||
};
|
||||
window.hwBoxOff = function (tl, target, at) {
|
||||
tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
|
||||
};
|
||||
|
||||
// ---- self-preview ----
|
||||
window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe", labelPos: "above" });
|
||||
window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe" });
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
window.hwBoxOn(tl, "#hw-bx-demo", 0.4);
|
||||
window.hwBoil(tl, "#hw-bx-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });
|
||||
window.hwBoxOff(tl, "#hw-bx-demo", 3.4);
|
||||
tl.set("#hw-bx-root", { visibility: "hidden" }, 3.98);
|
||||
window.__timelines["hw-box-label"] = tl;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Scribble Callout Circle"
|
||||
description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
|
||||
description: "Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
@@ -56,11 +56,29 @@ you paste it into.
|
||||
/* ---- hw-callout-circle ----------------------------------------------
|
||||
The full callout anatomy: wobbled ellipse outline draws around a
|
||||
target, optional scribble fill sketches in, a curved connector leads
|
||||
to a handwritten label. Requires the hw-boil helpers in the host. */
|
||||
to a handwritten label that POPS in with momentum — the drawn shapes
|
||||
absorb the arrival with a volume-preserving contact squash (g21).
|
||||
Ships the full family runtime it needs (hw-boil + boil poses +
|
||||
stroke matrix + springEase) — copy the helpers once per host.
|
||||
WRAPPER RULES: boil owns x/y/rotation of .hw-co-boil; the squash
|
||||
deforms .hw-co-deform (outline + scribble only); the label rides
|
||||
the uniform-scale .hw-co-pop OUTSIDE the deform — non-uniform
|
||||
scale never reaches glyphs. One timeline has ONE onUpdate
|
||||
(everything registers through hwOnUpdate). */
|
||||
.hw-callout {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hw-callout .hw-co-boil,
|
||||
.hw-callout .hw-co-deform,
|
||||
.hw-callout .hw-co-conn-layer,
|
||||
.hw-callout .hw-co-pop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.hw-callout .hw-co-pop {
|
||||
opacity: 0;
|
||||
}
|
||||
.hw-callout svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -94,7 +112,6 @@ you paste it into.
|
||||
font-size: 54px;
|
||||
color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
/* self-preview scene */
|
||||
@@ -122,21 +139,26 @@ you paste it into.
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the
|
||||
hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil
|
||||
helpers. Size the wrapper around your target, then:
|
||||
<!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern (the
|
||||
boil / deform / conn-layer / pop wrapper stack is REQUIRED — boil
|
||||
owns x/y/rotation, the squash owns the deform, the label pops on
|
||||
.hw-co-pop) and ALL helpers below. Size the wrapper around your
|
||||
target, then:
|
||||
|
||||
hwCalloutBuild("#hw-my-callout", { scribble: true, seed: 4,
|
||||
label: "look here!", labelAt: "right" });
|
||||
label: "look here!", labelAt: "right",
|
||||
strokeType: "plain", boil: "calm" });
|
||||
hwCalloutOn(tl, "#hw-my-callout", 2.0);
|
||||
hwBoil(tl, "#hw-my-callout", { frameDrop: 3, seed: 4 });
|
||||
hwCalloutOff(tl, "#hw-my-callout", 8.0);
|
||||
|
||||
hwCalloutOn applies the boil pose internally — do NOT add a host
|
||||
hwBoil call on the callout (it would double-boil).
|
||||
-->
|
||||
<div
|
||||
id="hw-co-root"
|
||||
data-composition-id="hw-callout-circle"
|
||||
data-start="0"
|
||||
data-duration="5"
|
||||
data-duration="4"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
@@ -147,18 +169,27 @@ you paste it into.
|
||||
id="hw-co-demo"
|
||||
style="left: 640px; top: 370px; width: 340px; height: 250px"
|
||||
>
|
||||
<svg viewBox="0 0 340 250">
|
||||
<path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
|
||||
<path class="hw-co-outline" id="hw-co-demo-outline"></path>
|
||||
<path class="hw-co-connector" id="hw-co-demo-connector"></path>
|
||||
</svg>
|
||||
<div class="hw-co-label" id="hw-co-demo-label"></div>
|
||||
<div class="hw-co-boil">
|
||||
<div class="hw-co-deform">
|
||||
<svg viewBox="0 0 340 250">
|
||||
<path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
|
||||
<path class="hw-co-outline" id="hw-co-demo-outline"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<svg class="hw-co-conn-layer" viewBox="0 0 340 250">
|
||||
<path class="hw-co-connector" id="hw-co-demo-connector"></path>
|
||||
</svg>
|
||||
<div class="hw-co-pop">
|
||||
<!-- labels intentionally hang outside the wrapper box -->
|
||||
<div class="hw-co-label" id="hw-co-demo-label" data-layout-allow-overflow></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="hw-co-drv"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="5"
|
||||
data-duration="4"
|
||||
data-track-index="0"
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
></div>
|
||||
@@ -167,6 +198,24 @@ you paste it into.
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var CONFIG = {
|
||||
// ── Content (freely editable — not counted) ─────────────────────
|
||||
label: "look here!",
|
||||
scribble: true, // which anatomy pieces exist (content, not a feel lever)
|
||||
connector: true, // (connector: false also suppresses the label anchor)
|
||||
|
||||
// ── Controls (family base + 2 item-specific; comment grammar is the published-parameter list) ──
|
||||
labelAt: "right", // variant: "left" | "right" | "below" — connector start point, sweep direction + label anchor pose (6 geometry params)
|
||||
strokeType: "plain", // variant: "plain" | "soft" | "sharp" | "spray" — outline + connector stroke texture (authored constants per type); the scribble fill stays plain — texture-on-texture reads as mud
|
||||
boil: "calm", // variant: "off" | "calm" | "lively" — authored amp/rot pairs over the family-locked frameDrop 3; seed locked
|
||||
|
||||
// ── Locked (edit the item source to change) ─────────────────────
|
||||
// draw durations/eases, pop ease + contact-squash constants
|
||||
// (softness 0.08 light-drawn-line tier, snappy recovery),
|
||||
// stroke-type constants, boil pose tables, seeds
|
||||
};
|
||||
var SEED = 4; // locked — determinism (hosts pass a distinct seed per callout instance)
|
||||
|
||||
/* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
|
||||
window.hwOnUpdate = function (tl, fn) {
|
||||
if (!tl.__hwRenders) {
|
||||
@@ -201,6 +250,58 @@ you paste it into.
|
||||
}
|
||||
});
|
||||
};
|
||||
// boil control: authored poses over the family-locked frameDrop.
|
||||
// Unknown pose → default + console error (bounded-controls law).
|
||||
window.hwBoilPose = function (tl, target, pose, opts) {
|
||||
opts = opts || {};
|
||||
var poses = { calm: { amp: 1.6, rot: 0.5 }, lively: { amp: 2.6, rot: 0.9 } };
|
||||
if (pose === "off") return;
|
||||
var p = poses[pose];
|
||||
if (!p) {
|
||||
console.error('hw: unknown boil pose "' + pose + '" — falling back to "calm"');
|
||||
p = poses.calm;
|
||||
}
|
||||
window.hwBoil(tl, target, { amp: p.amp, rot: p.rot, frameDrop: 3, seed: opts.seed || 1 });
|
||||
};
|
||||
/* ---- spring library (spring-lab, validated 2026-08-04 — verbatim) ---- */
|
||||
var LN1000 = Math.log(1000);
|
||||
var FEELS = {
|
||||
snappy: { zeta: 0.9, response: 0.22 },
|
||||
"heavy-settle": { zeta: 1.0, response: 0.8 },
|
||||
bouncy: { zeta: 0.5, response: 0.4 },
|
||||
wobbly: { zeta: 0.28, response: 0.5 },
|
||||
};
|
||||
window.springEase = function (opts) {
|
||||
var f = opts.feel ? FEELS[opts.feel] : opts;
|
||||
var zeta = f.zeta,
|
||||
response = f.response;
|
||||
var w0 = (2 * Math.PI) / response;
|
||||
var T = LN1000 / (zeta * w0);
|
||||
var x;
|
||||
if (zeta < 1) {
|
||||
var wd = w0 * Math.sqrt(1 - zeta * zeta);
|
||||
x = function (t) {
|
||||
return (
|
||||
1 -
|
||||
Math.exp(-zeta * w0 * t) *
|
||||
(Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t))
|
||||
);
|
||||
};
|
||||
} else {
|
||||
x = function (t) {
|
||||
return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
|
||||
};
|
||||
}
|
||||
var xT = x(T);
|
||||
return {
|
||||
ease: function (p) {
|
||||
return p >= 1 ? 1 : x(p * T) / xT;
|
||||
},
|
||||
duration: T,
|
||||
zeta: zeta,
|
||||
response: response,
|
||||
};
|
||||
};
|
||||
window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
|
||||
wobblePct = wobblePct === undefined ? 3 : wobblePct;
|
||||
var N = 14,
|
||||
@@ -229,10 +330,138 @@ you paste it into.
|
||||
return d;
|
||||
};
|
||||
|
||||
/* ---- stroke matrix (family runtime): plain | soft | sharp | spray ----
|
||||
strokeType is a g09 variant control. Authored constants per type;
|
||||
unknown value → default ("plain") + console error (bounded-controls
|
||||
law). sharp = micro stroke-dasharray gaps (dry marker) — draw-on
|
||||
must therefore ride a MASK clone (the visible dasharray never
|
||||
animates). spray = index-seeded deterministic dots along the path
|
||||
via hwHash: position a pure function of path parameter + seed; NO
|
||||
feTurbulence anywhere.
|
||||
Returns { draw: pathToDashAnimate, group: maskedGroupOrNull } */
|
||||
window.hwStrokeTypes = {
|
||||
plain: {},
|
||||
soft: { blur: 0.6 },
|
||||
sharp: { dash: [3.0, 1.55] }, // × stroke-width
|
||||
spray: {
|
||||
coreOpacity: 0.5,
|
||||
coreBlur: 0.4,
|
||||
density: 0.16,
|
||||
scatter: 2.6,
|
||||
rMin: 1.1,
|
||||
rMax: 2.6,
|
||||
},
|
||||
};
|
||||
window.hwStrokeApply = function (pathEl, type, opts) {
|
||||
opts = opts || {};
|
||||
var cfg = window.hwStrokeTypes[type];
|
||||
if (!cfg) {
|
||||
console.error('hw: unknown strokeType "' + type + '" — falling back to "plain"');
|
||||
type = "plain";
|
||||
cfg = window.hwStrokeTypes.plain;
|
||||
}
|
||||
var svg = pathEl.ownerSVGElement;
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
var w = parseFloat(getComputedStyle(pathEl).strokeWidth) || 6;
|
||||
if (type === "plain") return { draw: pathEl, group: null, type: type };
|
||||
if (type === "soft") {
|
||||
pathEl.style.filter = "blur(" + cfg.blur + "px)";
|
||||
return { draw: pathEl, group: null, type: type };
|
||||
}
|
||||
// sharp + spray: wrap in a masked group, draw-on animates the mask clone
|
||||
var id =
|
||||
opts.id ||
|
||||
"hwsm-" + Math.abs(Math.round(window.hwHash((opts.seed || 1) * 13.7, 5) * 1e6));
|
||||
var defs = svg.querySelector("defs");
|
||||
if (!defs) {
|
||||
defs = document.createElementNS(ns, "defs");
|
||||
svg.insertBefore(defs, svg.firstChild);
|
||||
}
|
||||
var mask = document.createElementNS(ns, "mask");
|
||||
mask.setAttribute("id", id);
|
||||
mask.setAttribute("maskUnits", "userSpaceOnUse");
|
||||
var clone = document.createElementNS(ns, "path");
|
||||
clone.setAttribute("d", pathEl.getAttribute("d"));
|
||||
clone.setAttribute("fill", "none");
|
||||
clone.setAttribute("stroke", "#fff");
|
||||
clone.setAttribute(
|
||||
"stroke-width",
|
||||
w * (type === "spray" ? 2 + (cfg.scatter * 2) / w : 1.7),
|
||||
);
|
||||
clone.setAttribute("stroke-linecap", "round");
|
||||
clone.setAttribute("stroke-linejoin", "round");
|
||||
mask.appendChild(clone);
|
||||
defs.appendChild(mask);
|
||||
var group = document.createElementNS(ns, "g");
|
||||
group.setAttribute("mask", "url(#" + id + ")");
|
||||
pathEl.parentNode.insertBefore(group, pathEl);
|
||||
group.appendChild(pathEl);
|
||||
if (type === "sharp") {
|
||||
pathEl.setAttribute(
|
||||
"stroke-dasharray",
|
||||
(cfg.dash[0] * w).toFixed(1) + " " + (cfg.dash[1] * w).toFixed(1),
|
||||
);
|
||||
} else {
|
||||
// spray: faint core + seeded dots
|
||||
pathEl.setAttribute("stroke-opacity", cfg.coreOpacity);
|
||||
pathEl.style.filter = "blur(" + cfg.coreBlur + "px)";
|
||||
var len = pathEl.getTotalLength();
|
||||
var n = Math.round(len * cfg.density * (opts.densityScale || 1));
|
||||
var seed = opts.seed || 1;
|
||||
var dots = document.createElementNS(ns, "g");
|
||||
for (var i = 0; i < n; i++) {
|
||||
var t = Math.min(
|
||||
1,
|
||||
Math.max(0, (i + 0.5) / n + (window.hwHash(i * 7, seed) * 0.35) / n),
|
||||
);
|
||||
var pt = pathEl.getPointAtLength(t * len);
|
||||
var pt2 = pathEl.getPointAtLength(Math.min(len, t * len + 0.5));
|
||||
var tx = pt2.x - pt.x,
|
||||
ty = pt2.y - pt.y;
|
||||
var tl2 = Math.hypot(tx, ty) || 1;
|
||||
var nx = -ty / tl2,
|
||||
nyv = tx / tl2;
|
||||
var off = window.hwHash(i * 7 + 1, seed) * (cfg.scatter + w * 0.55);
|
||||
var r = cfg.rMin + Math.abs(window.hwHash(i * 7 + 2, seed)) * (cfg.rMax - cfg.rMin);
|
||||
var c = document.createElementNS(ns, "circle");
|
||||
c.setAttribute("cx", (pt.x + nx * off).toFixed(1));
|
||||
c.setAttribute("cy", (pt.y + nyv * off).toFixed(1));
|
||||
c.setAttribute("r", r.toFixed(2));
|
||||
c.setAttribute("fill", getComputedStyle(pathEl).stroke);
|
||||
dots.appendChild(c);
|
||||
}
|
||||
group.appendChild(dots);
|
||||
}
|
||||
return { draw: clone, group: group, type: type };
|
||||
};
|
||||
|
||||
/* Draw-on across the stroke matrix: dash-animate whatever hwStrokeApply
|
||||
says. (The pen-velocity ease variant rides the write-on item, not
|
||||
this one.) */
|
||||
window.hwDrawOn = function (tl, applied, at, dur, opts) {
|
||||
opts = opts || {};
|
||||
var p = applied.draw;
|
||||
var len = p.getTotalLength();
|
||||
// the draw target is always solid (plain/soft: the path itself; sharp/spray:
|
||||
// the mask clone — the visible path keeps its texture dasharray untouched)
|
||||
p.setAttribute("stroke-dasharray", len + " " + len);
|
||||
p.setAttribute("stroke-dashoffset", len);
|
||||
gsap.set(p, { opacity: 0 }); // kill the round-cap start nub pre-draw
|
||||
var ease = opts.ease || "power2.inOut";
|
||||
tl.set(p, { opacity: 1 }, at);
|
||||
tl.to(
|
||||
p,
|
||||
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: ease },
|
||||
at,
|
||||
);
|
||||
};
|
||||
|
||||
// ---- hw-callout helpers (copy these too) ----
|
||||
// Builds outline + scribble + connector + label inside the wrapper.
|
||||
// opts: scribble (bool), seed, label, labelAt ("right"|"left"|"below"),
|
||||
// connector (bool)
|
||||
// Builds outline + scribble + connector + label inside the wrapper and
|
||||
// stores the draw records + control poses hwCalloutOn consumes.
|
||||
// opts — content (uncounted): scribble (bool), seed, label, connector (bool)
|
||||
// controls (g09 — see the CONFIG block, the published-parameter
|
||||
// list): labelAt, strokeType, boil
|
||||
window.hwCalloutBuild = function (target, opts) {
|
||||
opts = opts || {};
|
||||
var seed = opts.seed || 1;
|
||||
@@ -246,10 +475,8 @@ you paste it into.
|
||||
rx = W * 0.42,
|
||||
ry = H * 0.36;
|
||||
|
||||
el.querySelector(".hw-co-outline").setAttribute(
|
||||
"d",
|
||||
window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
|
||||
);
|
||||
var outline = el.querySelector(".hw-co-outline");
|
||||
outline.setAttribute("d", window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4));
|
||||
|
||||
var scr = el.querySelector(".hw-co-scribble");
|
||||
if (opts.scribble === false) {
|
||||
@@ -278,14 +505,24 @@ you paste it into.
|
||||
|
||||
var conn = el.querySelector(".hw-co-connector");
|
||||
var label = el.querySelector(".hw-co-label");
|
||||
// labelAt is a declared variant control — bounded: unknown value
|
||||
// falls back to the default WITH a console error. Validated BEFORE
|
||||
// the connector branch so a malformed value always logs, even when
|
||||
// connector: false leaves the control inert.
|
||||
var at = opts.labelAt || "right";
|
||||
if (at !== "left" && at !== "right" && at !== "below") {
|
||||
console.error('hw: unknown labelAt "' + at + '" — falling back to "right"');
|
||||
at = "right";
|
||||
}
|
||||
var ex = null,
|
||||
ey = null;
|
||||
if (opts.connector === false) {
|
||||
conn.style.display = "none";
|
||||
} else {
|
||||
var at = opts.labelAt || "right";
|
||||
var sx = at === "left" ? cx - rx : at === "below" ? cx : cx + rx;
|
||||
var sy = at === "below" ? cy + ry : cy + ry * 0.35;
|
||||
var ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
|
||||
var ey = sy + 55;
|
||||
ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
|
||||
ey = sy + 55;
|
||||
conn.setAttribute(
|
||||
"d",
|
||||
"M " +
|
||||
@@ -305,40 +542,112 @@ you paste it into.
|
||||
label.style.top = ey - 24 + "px";
|
||||
}
|
||||
label.textContent = opts.label || "";
|
||||
|
||||
// strokeType control: OUTLINE + CONNECTOR take the texture (the
|
||||
// scribble stays plain). Bounding lives inside hwStrokeApply.
|
||||
var strokeType = opts.strokeType || "plain";
|
||||
var idBase = (el.id || "hw-co") + "-sm";
|
||||
el.__hwCo = {
|
||||
rx: rx,
|
||||
seed: seed,
|
||||
boil: opts.boil || "calm",
|
||||
// the label pops out of the connector tip (falls back to center
|
||||
// when the connector anatomy is off)
|
||||
popOrigin: ex === null ? "50% 50%" : ex.toFixed(1) + "px " + ey.toFixed(1) + "px",
|
||||
draw: {
|
||||
outline: window.hwStrokeApply(outline, strokeType, {
|
||||
seed: seed,
|
||||
id: idBase + "-outline",
|
||||
}),
|
||||
scribble:
|
||||
opts.scribble === false ? null : window.hwStrokeApply(scr, "plain", { seed: seed }),
|
||||
connector:
|
||||
opts.connector === false
|
||||
? null
|
||||
: window.hwStrokeApply(conn, strokeType, {
|
||||
seed: seed,
|
||||
id: idBase + "-connector",
|
||||
}),
|
||||
},
|
||||
};
|
||||
};
|
||||
// Draw sequence: outline -> scribble -> connector -> label pop.
|
||||
// Draw sequence: outline -> scribble -> connector -> label pop, with
|
||||
// the g21 contact squash on the shapes group at pop arrival. The boil
|
||||
// pose registers here too — the host wires a position only.
|
||||
window.hwCalloutOn = function (tl, target, at) {
|
||||
var el = document.querySelector(target);
|
||||
var co = el.__hwCo;
|
||||
var t = at;
|
||||
["outline", "scribble", "connector"].forEach(function (k, idx) {
|
||||
var p = el.querySelector(".hw-co-" + k);
|
||||
if (!p || p.style.display === "none") return;
|
||||
var len = p.getTotalLength();
|
||||
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
|
||||
["outline", "scribble", "connector"].forEach(function (k) {
|
||||
var rec = co.draw[k];
|
||||
if (!rec) return;
|
||||
var dur = k === "scribble" ? 0.55 : k === "connector" ? 0.35 : 0.7;
|
||||
tl.to(p, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, t);
|
||||
window.hwDrawOn(tl, rec, t, dur);
|
||||
t += dur * 0.85;
|
||||
});
|
||||
var label = el.querySelector(".hw-co-label");
|
||||
gsap.set(label, { scale: 0.8, transformOrigin: "0% 50%" });
|
||||
tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(1.6)" }, t);
|
||||
// label pop: the pop ARRIVES WITH MOMENTUM (accelerating into
|
||||
// contact) — the squash absorbs it; a settling back.out crosses
|
||||
// scale 1.0 at ~zero speed and the computed squash is invisible
|
||||
// (measured, not hand-picked)
|
||||
var pop = el.querySelector(".hw-co-pop");
|
||||
var popEase = gsap.parseEase("power2.in");
|
||||
gsap.set(pop, { scale: 0.001, opacity: 0, transformOrigin: co.popOrigin });
|
||||
tl.to(pop, { opacity: 1, duration: 0.08, ease: "none" }, t);
|
||||
tl.to(pop, { scale: 1, duration: 0.3, ease: popEase, immediateRender: false }, t);
|
||||
// arrival velocity in px of radial (rx) travel, measured at the
|
||||
// FIRST crossing of 1.0 — a settling ease's end-slope is ~0 and is
|
||||
// NOT the arrival velocity
|
||||
var eps = 1e-4;
|
||||
var pc = 1;
|
||||
for (var k2 = 1; k2 <= 1000; k2++) {
|
||||
if (popEase(k2 / 1000) >= 1) {
|
||||
pc = k2 / 1000;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var vPop =
|
||||
((popEase(Math.min(pc + eps, 1)) - popEase(pc - eps)) / (2 * eps)) * (co.rx / 0.3);
|
||||
var S = Math.min(0.08 * (Math.abs(vPop) / 2000), 0.25); // 0.08 = light drawn line tier
|
||||
var rec2 = window.springEase({ feel: "snappy" });
|
||||
var st = { s: 0 };
|
||||
var deform = el.querySelector(".hw-co-deform");
|
||||
gsap.set(deform, { transformOrigin: "50% 100%" });
|
||||
// volume-preserving squash on the SHAPES wrapper only — the label
|
||||
// rides the uniform-scale pop OUTSIDE the deform, so non-uniform
|
||||
// scale never reaches glyphs. Read-back assertion enforces the law.
|
||||
window.hwOnUpdate(tl, function () {
|
||||
var along = 1 - st.s;
|
||||
gsap.set(deform, { scaleY: along, scaleX: 1 / along });
|
||||
var ax = parseFloat(gsap.getProperty(deform, "scaleX"));
|
||||
var ay = parseFloat(gsap.getProperty(deform, "scaleY"));
|
||||
if (Math.abs(ax * ay - 1) > 0.01)
|
||||
console.error("hw volume law violated (callout): " + (ax * ay).toFixed(4));
|
||||
});
|
||||
// contact: squash in 2 frames, 1-frame hold, spring home (factory
|
||||
// duration consumed verbatim)
|
||||
tl.to(st, { s: S, duration: 2 / 30, ease: "power3.out" }, t + 0.3);
|
||||
tl.to(st, { s: 0, duration: rec2.duration, ease: rec2.ease }, t + 0.3 + 3 / 30);
|
||||
// boil control (family base) — x/y/rotation on the boil wrapper only
|
||||
window.hwBoilPose(tl, el.querySelector(".hw-co-boil"), co.boil, { seed: co.seed });
|
||||
};
|
||||
window.hwCalloutOff = function (tl, target, at) {
|
||||
tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
|
||||
};
|
||||
|
||||
// ---- self-preview ----
|
||||
// ---- self-preview (shipped-default CONFIG) ----
|
||||
window.hwCalloutBuild("#hw-co-demo", {
|
||||
scribble: true,
|
||||
seed: 4,
|
||||
label: "look here!",
|
||||
labelAt: "right",
|
||||
scribble: CONFIG.scribble,
|
||||
seed: SEED,
|
||||
label: CONFIG.label,
|
||||
connector: CONFIG.connector,
|
||||
labelAt: CONFIG.labelAt,
|
||||
strokeType: CONFIG.strokeType,
|
||||
boil: CONFIG.boil,
|
||||
});
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
|
||||
window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
|
||||
window.hwCalloutOff(tl, "#hw-co-demo", 4.3);
|
||||
tl.set("#hw-co-root", { visibility: "hidden" }, 4.98);
|
||||
window.hwCalloutOff(tl, "#hw-co-demo", 3.3);
|
||||
tl.set("#hw-co-root", { visibility: "hidden" }, 3.98);
|
||||
window.__timelines["hw-callout-circle"] = tl;
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -295,6 +295,7 @@
|
||||
"catalog/components/headline-slam",
|
||||
"catalog/blocks/hw-path-text",
|
||||
"catalog/blocks/hw-title",
|
||||
"catalog/blocks/hw-write-title",
|
||||
"catalog/components/inline-highlight",
|
||||
"catalog/components/kinetic-type-swap",
|
||||
"catalog/components/line-by-line-slide",
|
||||
|
||||
@@ -1946,7 +1946,7 @@
|
||||
"name": "hw-arrow",
|
||||
"type": "component",
|
||||
"title": "Hand-Drawn Arrow",
|
||||
"description": "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen",
|
||||
"description": "Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen",
|
||||
"tags": [
|
||||
"handwritten",
|
||||
"annotation",
|
||||
@@ -1960,7 +1960,7 @@
|
||||
"name": "hw-boil",
|
||||
"type": "component",
|
||||
"title": "Hand-Drawn Boil",
|
||||
"description": "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator",
|
||||
"description": "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on",
|
||||
"tags": [
|
||||
"handwritten",
|
||||
"effect",
|
||||
@@ -1973,7 +1973,7 @@
|
||||
"name": "hw-box-label",
|
||||
"type": "component",
|
||||
"title": "Hand-Drawn Box Label",
|
||||
"description": "Wobbled rounded rectangle draws around a region with a handwritten label above or centered",
|
||||
"description": "Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils",
|
||||
"tags": [
|
||||
"handwritten",
|
||||
"annotation",
|
||||
@@ -1986,7 +1986,7 @@
|
||||
"name": "hw-callout-circle",
|
||||
"type": "component",
|
||||
"title": "Scribble Callout Circle",
|
||||
"description": "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label",
|
||||
"description": "Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils",
|
||||
"tags": [
|
||||
"handwritten",
|
||||
"annotation",
|
||||
@@ -2090,6 +2090,21 @@
|
||||
"href": "/catalog/components/hw-underline",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png"
|
||||
},
|
||||
{
|
||||
"name": "hw-write-title",
|
||||
"type": "block",
|
||||
"title": "Handwritten Write-On Title",
|
||||
"description": "True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils",
|
||||
"tags": [
|
||||
"handwritten",
|
||||
"typography",
|
||||
"title-card",
|
||||
"write-on",
|
||||
"overlay"
|
||||
],
|
||||
"href": "/catalog/blocks/hw-write-title",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.png"
|
||||
},
|
||||
{
|
||||
"name": "icon-morph-beat",
|
||||
"type": "component",
|
||||
|
||||
Reference in New Issue
Block a user