Setting the file. One moment.
Skill 18 · Hyperframes Animation
Subchapter 18.74
rules/css-marker-patterns.mdMarkdown6 KBView on GitHub
Pure CSS + GSAP implementations of all five MarkerHighlight.js drawing modes — no external library dependency, full timeline control. Snippets show mechanism DOM only, inside a standard scene clip (hyperframes-core); assume tl exists.
Shared scaffold for every mode: the wrap is ; the text copy is and z-indexed the accent (below it for sketchout, where the lines cross the text).
position: relative; display: inlineposition: relativeYellow marker sweep behind text — the most common mode.
<span class="mh-highlight-wrap">
<span class="mh-highlight-bar" id="hl-1"></span>
<span class="mh-highlight-text">highlighted text</span>
</span>.mh-highlight-bar {
position: absolute;
inset: 0 -6px; /* bleed past the text edges */
background: #fdd835;
opacity: 0.35;
transform: scaleX(0);
transform-origin: left center;
border-radius: 3px;
z-index: 0;
}tl.to("#hl-1", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.6);
// Optional hand-drawn skew: gsap.set("#hl-1", { skewX: -2 });
// Multi-line: tl.to(".mh-highlight-bar", { scaleX: 1, ..., stagger: 0.3 }, 0.6);Hand-drawn ellipse around text — border-radius: 50% plus a slight rotation for organic feel.
<span class="mh-circle-wrap">
<span class="mh-circle-text">IMPORTANT</span>
<span class="mh-circle-ring" id="circle-1"></span>
</span>.mh-circle-ring {
position: absolute;
top: 50%;
left: 50%;
width: 130%; /* tight (short words): 150%; rounded-rect: 120% + border-radius: 30% */
height: 160%;
transform: translate(-50%, -50%) rotate(-3deg) scale(0);
border: 3px solid #e53935;
border-radius: 50%;
z-index: 0;
}tl.to("#circle-1", { scale: 1, rotation: -3, duration: 0.6, ease: "back.out(1.7)" }, 0.7);Radiating lines from text center — each line a positioned span rotated to its angle. Use ~12 lines at 30° steps and vary --len (40–80px); equal lengths look mechanical.
<span class="mh-burst-wrap">
<span class="mh-burst-text">WOW</span>
<span class="mh-burst-container" id="burst-1">
<span class="mh-burst-line" style="--angle: 0deg; --len: 70px;"></span>
<span class="mh-burst-line" style="--angle: 30deg; --len: 55px;"></span>
<!-- …one line per 30° step through 330deg, --len varied 40-80px -->
</span>
</span>.mh-burst-container {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
z-index: 1; /* text copy at z-index: 2 */
}
.mh-burst-line {
position: absolute;
display: block;
width: 3px;
height: var(--len);
background: #1e88e5;
left: -1.5px;
top: calc(-1 * var(--len));
transform: rotate(var(--angle));
transform-origin: bottom center;
opacity: 0;
}tl.fromTo(
"#burst-1 .mh-burst-line",
{ scaleY: 0, opacity: 0 },
{ scaleY: 1, opacity: 1, duration: 0.4, ease: "power2.out", stagger: 0.03 },
0.7,
);Wavy SVG underline that draws itself via stroke-dashoffset.
<span class="mh-scribble-wrap">
<span class="mh-scribble-text">underlined text</span>
<svg class="mh-scribble-svg" viewBox="0 0 500 24" preserveAspectRatio="none">
<path
id="scribble-1"
d="M0,12 Q31,0 62,12 Q93,24 125,12 Q156,0 187,12 Q218,24 250,12 Q281,0 312,12 Q343,24 375,12 Q406,0 437,12 Q468,24 500,12"
fill="none"
stroke="#FDD835"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
</span>.mh-scribble-svg {
position: absolute;
left: 0;
bottom: -6px; /* strikethrough variant: top: 50%; transform: translateY(-50%) */
width: 100%;
height: 24px;
z-index: 0;
}const path = document.querySelector("#scribble-1");
const len = path.getTotalLength();
gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
tl.to("#scribble-1", { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" }, 0.7);Path tuning: the Q control points alternate y between 0 and 24 for a natural wobble. Tighter waves = smaller x-increments (~25px per half-wave); looser = ~50px; subtler amplitude = y range 0–16.
Cross-hatch over de-emphasized text — two angled lines create a “crossed out” effect.
<span class="mh-sketchout-wrap">
<span class="mh-sketchout-text">old price</span>
<span class="mh-sketchout-lines" id="sketchout-1">
<span class="mh-sketchout-line mh-sketchout-fwd"></span>
<span class="mh-sketchout-line mh-sketchout-bwd"></span>
</span>
</span>.mh-sketchout-lines {
position: absolute;
inset: 0 -4px;
overflow: hidden;
z-index: 1; /* text at z-index: 0 — the lines cross OVER it */
}
.mh-sketchout-line {
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: #e53935;
transform-origin: left center;
}
.mh-sketchout-fwd {
transform: scaleX(0) rotate(-12deg);
}
.mh-sketchout-bwd {
transform: scaleX(0) rotate(12deg);
}// Forward slash first, backward follows
tl.to("#sketchout-1 .mh-sketchout-fwd", { scaleX: 1, duration: 0.3, ease: "power2.out" }, 1.0);
tl.to("#sketchout-1 .mh-sketchout-bwd", { scaleX: 1, duration: 0.3, ease: "power2.out" }, 1.15);Cycle modes across caption groups for visual variety — every 2-3 groups for high energy, 3-4 for medium, 4-5 for low:
const MODES = ["highlight", "circle", "burst", "scribble"];
GROUPS.forEach((group, gi) => {
const mode = MODES[gi % MODES.length];
group.emphasisWords.forEach((word) => applyMode(word.el, mode, tl, word.start));
});