Files
hyperframes/docs/catalog/components/marker-highlight.mdx
miga-heygenandMiguel Ángel 7b5fdb1ad2 fix(docs): emit catalog source accordion titles as plain strings (#4006)
The generated catalog pages rendered the "Source" accordion title as a
JSX expression, `<Accordion title={`name.html`}>`. Mintlify's search
indexer stringifies expression attribute nodes rather than evaluating
them, so every one of the 399 catalog pages surfaced its Source section
in search results as "[object Object]" (visible on the Scroll Feed page,
among others).

The template literal carried no escaping benefit: every title is a
single-segment `name.html` path, and a double-quoted JSX string handles
it directly. Introduce `mdxStringAttribute`, which emits a plain
`name="value"` attribute and escapes `& " < { }` as HTML character
references (MDX decodes references inside quoted attribute values, and
unlike JSON.stringify it does not rely on backslash escapes, which JSX
strings do not honour). Use it for both the Source accordion title and
the preview iframe title, and regenerate the catalog pages.

Regenerated with `npx tsx scripts/generate-catalog-pages.ts`; the only
change across the 399 pages is the one Accordion title line each.

Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
2026-09-16 11:55:00 -04:00

804 lines
34 KiB
Plaintext

---
title: "Marker Highlight"
description: "Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue."
---
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add marker-highlight" item="marker-highlight" />
That writes one file: `compositions/components/marker-highlight.html`.
<VariablesExplorer
previewSrc="/public/catalog/components/marker-highlight.json"
compositionId="marker-highlight"
compositionSrc="compositions/components/marker-highlight.html"
variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Full line of display text.","default":"Ship it with confidence"},{"id":"emphasis_word","type":"string","role":"content","label":"Emphasis word","description":"First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.","default":"confidence"},{"id":"style","type":"enum","role":"style","label":"Marker style","description":"Shape of the hand-drawn marker stroke.","default":"highlight","options":[{"value":"highlight","label":"Highlight"},{"value":"circle","label":"Circle"},{"value":"underline","label":"Underline"},{"value":"scribble","label":"Scribble"}]},{"id":"draw_at","type":"number","role":"timing","label":"Draw at","description":"Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.","default":0.9,"min":0,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Marker ink color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
>
```html marker-highlight.html
<!doctype html>
<!--
marker-highlight: HyperFrames video primitive (typography / emphasis)
The corpus emphasis unit: a short line of display text settles in, then ONE
hand-drawn marker stroke draws over the emphasized word on cue. Four marker
styles share the same mechanic: an SVG path revealed by a getTotalLength
dash tween (never the pathLength attribute, never non-scaling-stroke on a
dashed path; the anisotropic viewBox stretch is what gives the ink its
hand-swiped weight).
Variables:
text (string): the full line.
emphasis_word (string): first case-insensitive substring match inside
text gets the marker. Empty or unmatched renders the line with no
marker. Keep it a word or short phrase; it stays on one line.
style (highlight | circle | underline | scribble): marker shape.
draw_at (seconds): cue for the draw, relative to mount start. Clamped so
the stroke always completes before any exit begins.
accent (green | blue | violet): ink color via the contract token map.
exit (none | fade | up, default none): frame roots own transitions;
holds end films.
Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
IN_BASE = 0.55s text rises into place
DRAW_BASE = 0.60s marker stroke, anchored at draw_at, plus a small
settle pop on the emphasized word
HOLD = max(0, D - phases), completely still
OUT_BASE = 0s for exit none, otherwise 0.45s
If D is shorter than the fixed phases, they compress together.
Mount contract: the runtime clones only this template. #root fills the host
box, establishes the container query basis, has no data-width or
data-height, and registers one paused timeline under the literal
marker-highlight key.
-->
<html
lang="en"
data-composition-id="marker-highlight"
data-composition-duration="3.5"
data-composition-variables='[
{ "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship it with confidence" },
{ "id": "emphasis_word", "type": "string", "role": "content", "label": "Emphasis word", "description": "First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.", "default": "confidence" },
{ "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
{ "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Marker ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
{ "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
]'
>
<head>
<meta charset="UTF-8" />
<title>Marker Highlight</title>
</head>
<body>
<template>
<div id="root" data-composition-id="marker-highlight" data-duration="3.5" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
background: var(--bg, #0b0c0e);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
pointer-events: none;
}
.mh-clip {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
}
.mh-stage {
max-width: 86cqw;
text-align: center;
will-change: transform, opacity;
}
.mh-text {
margin: 0;
font-size: var(--mh-font-size, min(8cqw, 15cqh));
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.03em;
}
.mh-em {
position: relative;
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.mh-em-text {
position: relative;
z-index: 1;
}
.mh-mark {
position: absolute;
z-index: 0;
overflow: visible;
}
/* Per-style marker box around the emphasized word. Explicit
width/height (svg is a replaced element: inset-stretching would
fall back to its intrinsic viewBox ratio); then
preserveAspectRatio="none" stretches the authored path (and its
stroke) into the box, which is exactly the marker-nib distortion
we want on a dashed path. */
.mh-em[data-marker-style="highlight"] .mh-mark {
left: -3%;
top: 14%;
width: 106%;
height: 76%;
}
.mh-em[data-marker-style="underline"] .mh-mark {
left: -2%;
bottom: -14%;
width: 105%;
height: 22%;
z-index: 2;
}
.mh-em[data-marker-style="circle"] .mh-mark {
left: -13%;
top: -26%;
width: 126%;
height: 152%;
z-index: 2;
}
.mh-em[data-marker-style="scribble"] .mh-mark {
left: -2%;
top: 12%;
width: 104%;
height: 76%;
z-index: 2;
}
</style>
<div
id="marker-highlight-clip"
class="mh-clip clip"
data-start="0"
data-duration="3.5"
data-track-index="0"
>
<div class="mh-stage">
<p class="mh-text"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
"use strict";
var root = document.getElementById("root");
// Literal key: the flattening step strips data-composition-id off
// the mounted root, so reading it back would register "null".
var compositionId = "marker-highlight";
var stage = root.querySelector(".mh-stage");
var textEl = root.querySelector(".mh-text");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var text =
vars.text == null
? "Ship it with confidence"
: String(vars.text).trim().replace(/\s+/g, " ");
var emphasis =
vars.emphasis_word == null
? "confidence"
: String(vars.emphasis_word).trim().replace(/\s+/g, " ");
var accentColors = {
green: "var(--brand, #71f5a7)",
blue: "var(--accent, #61a8ff)",
violet: "var(--accent-2, #c5a3ff)",
};
var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
? vars.accent
: "green";
var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
// Hand-drawn stroke library. Paths are authored in a fixed viewBox
// and stretched into the word box; wobble is baked into the
// control points, never randomized.
var markerStyles = {
highlight: {
viewBox: "0 0 100 40",
d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
strokeWidth: 26,
opacity: 0.5,
},
circle: {
viewBox: "0 0 100 40",
d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
strokeWidth: 2.8,
opacity: 1,
},
underline: {
viewBox: "0 0 100 12",
d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
strokeWidth: 4.5,
opacity: 1,
},
scribble: {
viewBox: "0 0 100 40",
d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
strokeWidth: 5,
opacity: 0.65,
},
};
var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
? vars.style
: "highlight";
var marker = markerStyles[styleName];
// Split text around the first case-insensitive emphasis match.
// textContent nodes only, never innerHTML.
var matchIndex =
emphasis.length > 0 ? text.toLowerCase().indexOf(emphasis.toLowerCase()) : -1;
var emEl = null;
var pathEl = null;
if (matchIndex >= 0) {
var before = text.slice(0, matchIndex);
var matched = text.slice(matchIndex, matchIndex + emphasis.length);
var after = text.slice(matchIndex + emphasis.length);
if (before) textEl.appendChild(document.createTextNode(before));
emEl = document.createElement("span");
emEl.className = "mh-em";
emEl.setAttribute("data-marker-style", styleName);
var svgNS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("class", "mh-mark");
svg.setAttribute("viewBox", marker.viewBox);
svg.setAttribute("preserveAspectRatio", "none");
svg.setAttribute("aria-hidden", "true");
pathEl = document.createElementNS(svgNS, "path");
pathEl.setAttribute("d", marker.d);
pathEl.setAttribute("fill", "none");
pathEl.setAttribute("stroke-width", String(marker.strokeWidth));
pathEl.setAttribute("stroke-linecap", "round");
pathEl.setAttribute("stroke-linejoin", "round");
// style.stroke, not the presentation attribute: var() only
// resolves as a CSS value.
pathEl.style.stroke = accentColors[accent];
svg.appendChild(pathEl);
var emText = document.createElement("span");
emText.className = "mh-em-text";
emText.textContent = matched;
emEl.appendChild(svg);
emEl.appendChild(emText);
textEl.appendChild(emEl);
if (after) textEl.appendChild(document.createTextNode(after));
} else {
textEl.textContent = text;
}
textEl.setAttribute("aria-label", text);
// Deterministic character-count fit; the line may wrap, the
// emphasized phrase never wraps internally.
var characters = Math.max(1, Array.from(text).length);
var fitted = Math.max(4.2, Math.min(9.5, 185 / characters));
root.style.setProperty("--mh-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
// RETIME RANGE: fixed phases; HOLD is the only elastic span.
var IN_BASE = 0.55;
var DRAW_BASE = 0.6;
var POP_BASE = 0.32;
var OUT_BASE = exit === "none" ? 0 : 0.45;
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
var totalBase = IN_BASE + DRAW_BASE + OUT_BASE;
var scale = duration < totalBase ? duration / totalBase : 1;
var IN = IN_BASE * scale;
var DRAW = DRAW_BASE * scale;
var POP = POP_BASE * scale;
var OUT = OUT_BASE * scale;
var OUT_START = duration - OUT;
var drawAtRaw = Number(vars.draw_at);
var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
// The stroke and its settle pop always land before the exit.
drawAt = Math.min(drawAt, Math.max(0, OUT_START - (DRAW + POP)));
gsap.set(stage, { opacity: 0, y: "6cqh" });
var tl = gsap.timeline({ paused: true });
// IN: the line rises into place.
tl.fromTo(
stage,
{ opacity: 0, y: "6cqh" },
{ opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
0,
);
// DRAW: dash reveal from measured length; both endpoints explicit
// so any seek is correct without playing through.
if (pathEl) {
var length = pathEl.getTotalLength();
pathEl.style.strokeDasharray = String(length);
// Hidden until the cue: at dashoffset == length the round cap
// still paints a dot at the path start, so the ink is opacity 0
// until the exact frame the draw begins.
gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
tl.set(pathEl, { opacity: marker.opacity }, drawAt);
tl.fromTo(
pathEl,
{ strokeDashoffset: length },
{ strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
drawAt,
);
// Settle pop on the emphasized word as the ink lands.
tl.fromTo(
emEl,
{ scale: 1 },
{
scale: 1.045,
duration: POP / 2,
ease: "power1.out",
yoyo: true,
repeat: 1,
},
drawAt + DRAW * 0.7,
);
}
// HOLD: completely still.
// OUT: optional departure; exit none holds until the frame cuts.
if (exit === "fade") {
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
} else if (exit === "up") {
tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
}
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
```
</VariablesExplorer>
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| --- | --- | --- | --- |
| `text` | `Ship it with confidence` | string | Full line of display text. |
| `emphasis_word` | `confidence` | string | First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker. |
| `style` | `highlight` | `highlight`, `circle`, `underline`, `scribble` | Shape of the hand-drawn marker stroke. |
| `draw_at` | `0.9` | number | Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit. |
| `accent` | `green` | `green`, `blue`, `violet` | Marker ink color from the contract token map. |
| `exit` | `none` | `none`, `fade`, `up` | Optional departure. Default none: the lockup holds until the frame cuts. |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap
<div
data-composition-id="marker-highlight"
data-composition-src="compositions/components/marker-highlight.html"
data-variable-values='{"text":"Ship it with confidence","emphasis_word":"confidence","style":"highlight","draw_at":0.9,"accent":"green","exit":"none"}'
></div>
```
## Source
<Accordion title="marker-highlight.html">
```html
<!doctype html>
<!--
marker-highlight: HyperFrames video primitive (typography / emphasis)
The corpus emphasis unit: a short line of display text settles in, then ONE
hand-drawn marker stroke draws over the emphasized word on cue. Four marker
styles share the same mechanic: an SVG path revealed by a getTotalLength
dash tween (never the pathLength attribute, never non-scaling-stroke on a
dashed path; the anisotropic viewBox stretch is what gives the ink its
hand-swiped weight).
Variables:
text (string): the full line.
emphasis_word (string): first case-insensitive substring match inside
text gets the marker. Empty or unmatched renders the line with no
marker. Keep it a word or short phrase; it stays on one line.
style (highlight | circle | underline | scribble): marker shape.
draw_at (seconds): cue for the draw, relative to mount start. Clamped so
the stroke always completes before any exit begins.
accent (green | blue | violet): ink color via the contract token map.
exit (none | fade | up, default none): frame roots own transitions;
holds end films.
Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
IN_BASE = 0.55s text rises into place
DRAW_BASE = 0.60s marker stroke, anchored at draw_at, plus a small
settle pop on the emphasized word
HOLD = max(0, D - phases), completely still
OUT_BASE = 0s for exit none, otherwise 0.45s
If D is shorter than the fixed phases, they compress together.
Mount contract: the runtime clones only this template. #root fills the host
box, establishes the container query basis, has no data-width or
data-height, and registers one paused timeline under the literal
marker-highlight key.
-->
<html
lang="en"
data-composition-id="marker-highlight"
data-composition-duration="3.5"
data-composition-variables='[
{ "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship it with confidence" },
{ "id": "emphasis_word", "type": "string", "role": "content", "label": "Emphasis word", "description": "First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.", "default": "confidence" },
{ "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
{ "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Marker ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
{ "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
]'
>
<head>
<meta charset="UTF-8" />
<title>Marker Highlight</title>
</head>
<body>
<template>
<div id="root" data-composition-id="marker-highlight" data-duration="3.5" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
background: var(--bg, #0b0c0e);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
pointer-events: none;
}
.mh-clip {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
}
.mh-stage {
max-width: 86cqw;
text-align: center;
will-change: transform, opacity;
}
.mh-text {
margin: 0;
font-size: var(--mh-font-size, min(8cqw, 15cqh));
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.03em;
}
.mh-em {
position: relative;
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.mh-em-text {
position: relative;
z-index: 1;
}
.mh-mark {
position: absolute;
z-index: 0;
overflow: visible;
}
/* Per-style marker box around the emphasized word. Explicit
width/height (svg is a replaced element: inset-stretching would
fall back to its intrinsic viewBox ratio); then
preserveAspectRatio="none" stretches the authored path (and its
stroke) into the box, which is exactly the marker-nib distortion
we want on a dashed path. */
.mh-em[data-marker-style="highlight"] .mh-mark {
left: -3%;
top: 14%;
width: 106%;
height: 76%;
}
.mh-em[data-marker-style="underline"] .mh-mark {
left: -2%;
bottom: -14%;
width: 105%;
height: 22%;
z-index: 2;
}
.mh-em[data-marker-style="circle"] .mh-mark {
left: -13%;
top: -26%;
width: 126%;
height: 152%;
z-index: 2;
}
.mh-em[data-marker-style="scribble"] .mh-mark {
left: -2%;
top: 12%;
width: 104%;
height: 76%;
z-index: 2;
}
</style>
<div
id="marker-highlight-clip"
class="mh-clip clip"
data-start="0"
data-duration="3.5"
data-track-index="0"
>
<div class="mh-stage">
<p class="mh-text"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
"use strict";
var root = document.getElementById("root");
// Literal key: the flattening step strips data-composition-id off
// the mounted root, so reading it back would register "null".
var compositionId = "marker-highlight";
var stage = root.querySelector(".mh-stage");
var textEl = root.querySelector(".mh-text");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var text =
vars.text == null
? "Ship it with confidence"
: String(vars.text).trim().replace(/\s+/g, " ");
var emphasis =
vars.emphasis_word == null
? "confidence"
: String(vars.emphasis_word).trim().replace(/\s+/g, " ");
var accentColors = {
green: "var(--brand, #71f5a7)",
blue: "var(--accent, #61a8ff)",
violet: "var(--accent-2, #c5a3ff)",
};
var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
? vars.accent
: "green";
var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
// Hand-drawn stroke library. Paths are authored in a fixed viewBox
// and stretched into the word box; wobble is baked into the
// control points, never randomized.
var markerStyles = {
highlight: {
viewBox: "0 0 100 40",
d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
strokeWidth: 26,
opacity: 0.5,
},
circle: {
viewBox: "0 0 100 40",
d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
strokeWidth: 2.8,
opacity: 1,
},
underline: {
viewBox: "0 0 100 12",
d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
strokeWidth: 4.5,
opacity: 1,
},
scribble: {
viewBox: "0 0 100 40",
d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
strokeWidth: 5,
opacity: 0.65,
},
};
var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
? vars.style
: "highlight";
var marker = markerStyles[styleName];
// Split text around the first case-insensitive emphasis match.
// textContent nodes only, never innerHTML.
var matchIndex =
emphasis.length > 0 ? text.toLowerCase().indexOf(emphasis.toLowerCase()) : -1;
var emEl = null;
var pathEl = null;
if (matchIndex >= 0) {
var before = text.slice(0, matchIndex);
var matched = text.slice(matchIndex, matchIndex + emphasis.length);
var after = text.slice(matchIndex + emphasis.length);
if (before) textEl.appendChild(document.createTextNode(before));
emEl = document.createElement("span");
emEl.className = "mh-em";
emEl.setAttribute("data-marker-style", styleName);
var svgNS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("class", "mh-mark");
svg.setAttribute("viewBox", marker.viewBox);
svg.setAttribute("preserveAspectRatio", "none");
svg.setAttribute("aria-hidden", "true");
pathEl = document.createElementNS(svgNS, "path");
pathEl.setAttribute("d", marker.d);
pathEl.setAttribute("fill", "none");
pathEl.setAttribute("stroke-width", String(marker.strokeWidth));
pathEl.setAttribute("stroke-linecap", "round");
pathEl.setAttribute("stroke-linejoin", "round");
// style.stroke, not the presentation attribute: var() only
// resolves as a CSS value.
pathEl.style.stroke = accentColors[accent];
svg.appendChild(pathEl);
var emText = document.createElement("span");
emText.className = "mh-em-text";
emText.textContent = matched;
emEl.appendChild(svg);
emEl.appendChild(emText);
textEl.appendChild(emEl);
if (after) textEl.appendChild(document.createTextNode(after));
} else {
textEl.textContent = text;
}
textEl.setAttribute("aria-label", text);
// Deterministic character-count fit; the line may wrap, the
// emphasized phrase never wraps internally.
var characters = Math.max(1, Array.from(text).length);
var fitted = Math.max(4.2, Math.min(9.5, 185 / characters));
root.style.setProperty("--mh-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
// RETIME RANGE: fixed phases; HOLD is the only elastic span.
var IN_BASE = 0.55;
var DRAW_BASE = 0.6;
var POP_BASE = 0.32;
var OUT_BASE = exit === "none" ? 0 : 0.45;
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
var totalBase = IN_BASE + DRAW_BASE + OUT_BASE;
var scale = duration < totalBase ? duration / totalBase : 1;
var IN = IN_BASE * scale;
var DRAW = DRAW_BASE * scale;
var POP = POP_BASE * scale;
var OUT = OUT_BASE * scale;
var OUT_START = duration - OUT;
var drawAtRaw = Number(vars.draw_at);
var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
// The stroke and its settle pop always land before the exit.
drawAt = Math.min(drawAt, Math.max(0, OUT_START - (DRAW + POP)));
gsap.set(stage, { opacity: 0, y: "6cqh" });
var tl = gsap.timeline({ paused: true });
// IN: the line rises into place.
tl.fromTo(
stage,
{ opacity: 0, y: "6cqh" },
{ opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
0,
);
// DRAW: dash reveal from measured length; both endpoints explicit
// so any seek is correct without playing through.
if (pathEl) {
var length = pathEl.getTotalLength();
pathEl.style.strokeDasharray = String(length);
// Hidden until the cue: at dashoffset == length the round cap
// still paints a dot at the path start, so the ink is opacity 0
// until the exact frame the draw begins.
gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
tl.set(pathEl, { opacity: marker.opacity }, drawAt);
tl.fromTo(
pathEl,
{ strokeDashoffset: length },
{ strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
drawAt,
);
// Settle pop on the emphasized word as the ink lands.
tl.fromTo(
emEl,
{ scale: 1 },
{
scale: 1.045,
duration: POP / 2,
ease: "power1.out",
yoyo: true,
repeat: 1,
},
drawAt + DRAW * 0.7,
);
}
// HOLD: completely still.
// OUT: optional departure; exit none holds until the frame cuts.
if (exit === "fade") {
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
} else if (exit === "up") {
tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
}
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
```
</Accordion>
## Usage
Open `compositions/components/marker-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
{/* hf:generated-footer */}
Tagged `motion-primitive` `typography` `emphasis` `marker` `deterministic`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)