Install
That writes one file:compositions/components/offset-path-traveler.html.
Paste it into your composition
Opencompositions/components/offset-path-traveler.html and copy what is inside into your own composition.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
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 |
|---|---|---|---|
path | M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35 | string | SVG path data authored in a 1000 by 500 route viewBox. |
traveler_label | Live preview | string | Text displayed inside the default traveler chip. |
accent | green | green, blue, violet | Color used by the traveler and route. |
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:
<div
data-composition-id="offset-path-traveler"
data-composition-src="compositions/components/offset-path-traveler.html"
data-variable-values='{"path":"M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35","traveler_label":"Live preview","accent":"green"}'
></div>
Source
offset-path-traveler.html
offset-path-traveler.html
<!doctype html>
<!--
offset-path-traveler: HyperFrames video primitive (product demo / path travel)
One traveler follows an authored SVG path and rotates to its tangent. The
traveler wrapper is the content slot; the default slot content is a chip.
Variables:
- path (string): SVG path data authored in the 1000 by 500 route viewBox.
- traveler_label (string): label inside the default traveler chip.
- accent (green | blue | violet): chip and route color.
Envelope, fixed IN and OUT with elastic HOLD only:
IN_BASE = 1.20s, traveler enters along the authored curve to 72 percent
HOLD = max(0, D - IN - OUT), subtle finite drift on the same curve
OUT_BASE = 0.65s, traveler accelerates along the curve and exits
If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
The timeline is never time-scaled.
Seek safety: GSAP tweens one plain progress value. Its onUpdate samples the
same SVG path for position and tangent, so repeated and reverse seeks render
the same pose at the same time without a plugin or a free-running loop.
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 offset-path-traveler key.
-->
<html
lang="en"
data-composition-id="offset-path-traveler"
data-composition-duration="4"
data-composition-variables='[
{ "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data authored in a 1000 by 500 route viewBox.", "default": "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35" },
{ "id": "traveler_label", "type": "string", "role": "content", "label": "Traveler label", "description": "Text displayed inside the default traveler chip.", "default": "Live preview" },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the traveler and route.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
]'
>
<head>
<meta charset="UTF-8" />
<title>Offset Path Traveler</title>
</head>
<body>
<template>
<div id="root" data-composition-id="offset-path-traveler" data-duration="4" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
color: var(--fg, #f8fafc);
font-family: var(--font-body, Inter, system-ui, sans-serif);
pointer-events: none;
}
.opt-clip {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--bg, transparent);
}
.opt-route {
position: absolute;
inset: 8cqh 4cqw;
}
.opt-route svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.opt-guide {
fill: none;
stroke: color-mix(in srgb, var(--opt-accent) 34%, var(--border, #475569));
stroke-width: 0.42cqmin;
stroke-linecap: round;
stroke-dasharray: 1.1cqmin 1.5cqmin;
opacity: 0.62;
vector-effect: non-scaling-stroke;
}
.opt-traveler-slot {
position: absolute;
left: 0;
top: 0;
display: block;
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.opt-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1, 1.4cqmin);
max-width: 34cqw;
min-height: 8cqh;
padding: var(--space-1, 1.6cqh) var(--space-2, 2.6cqw);
overflow: hidden;
border: 0.18cqmin solid
color-mix(in srgb, var(--opt-accent) 68%, var(--border, #475569));
border-radius: var(--radius, 999px);
background: color-mix(in srgb, var(--surface, #18212f) 88%, var(--opt-accent));
box-shadow:
0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #020617) 48%, transparent),
0 0 3.5cqh color-mix(in srgb, var(--opt-accent) 24%, transparent);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: clamp(12px, 3.5cqmin, 30px);
font-weight: 760;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
}
.opt-dot {
flex: 0 0 auto;
width: 2.4cqmin;
aspect-ratio: 1;
border-radius: 50%;
background: var(--opt-accent);
box-shadow: 0 0 2cqmin color-mix(in srgb, var(--opt-accent) 58%, transparent);
}
.opt-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div
id="offset-path-traveler-clip"
class="opt-clip clip"
data-start="0"
data-duration="4"
data-track-index="0"
>
<div class="opt-route">
<svg viewBox="0 0 1000 500" preserveAspectRatio="none" aria-hidden="true">
<path class="opt-guide"></path>
</svg>
<div class="opt-traveler-slot" data-slot="traveler">
<div class="opt-chip">
<span class="opt-dot" aria-hidden="true"></span>
<span class="opt-label"></span>
</div>
</div>
</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");
var route = root.querySelector(".opt-route");
var guide = root.querySelector(".opt-guide");
var traveler = root.querySelector(".opt-traveler-slot");
var label = root.querySelector(".opt-label");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var DEFAULT_PATH =
"M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35";
var requestedPath = vars.path == null ? "" : String(vars.path).trim();
var pathData = requestedPath === "" ? DEFAULT_PATH : requestedPath;
var travelerLabel =
vars.traveler_label == null ? "Live preview" : String(vars.traveler_label);
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";
guide.setAttribute("d", pathData);
label.textContent = travelerLabel;
root.style.setProperty("--opt-accent", accentColors[accent]);
var totalLength;
try {
totalLength = guide.getTotalLength();
} catch (_error) {
totalLength = 0;
}
if (!Number.isFinite(totalLength) || totalLength <= 0) {
guide.setAttribute("d", DEFAULT_PATH);
totalLength = guide.getTotalLength();
}
var VIEWBOX_WIDTH = 1000;
var VIEWBOX_HEIGHT = 500;
var travel = { progress: 0 };
function renderTraveler() {
var distance = Math.max(0, Math.min(1, travel.progress)) * totalLength;
var tangentStep = Math.max(0.5, totalLength * 0.002);
var before = guide.getPointAtLength(Math.max(0, distance - tangentStep));
var after = guide.getPointAtLength(Math.min(totalLength, distance + tangentStep));
var scaleX = route.clientWidth / VIEWBOX_WIDTH;
var scaleY = route.clientHeight / VIEWBOX_HEIGHT;
var point = guide.getPointAtLength(distance);
var rotation =
(Math.atan2((after.y - before.y) * scaleY, (after.x - before.x) * scaleX) * 180) /
Math.PI;
gsap.set(traveler, {
x: point.x * scaleX,
y: point.y * scaleY,
xPercent: -50,
yPercent: -50,
rotation: rotation,
});
}
var IN_BASE = 1.2;
var OUT_BASE = 0.65;
var STILLNESS = 0.3;
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
var totalBase = IN_BASE + OUT_BASE;
var scale = duration < totalBase ? duration / totalBase : 1;
var IN = IN_BASE * scale;
var OUT = OUT_BASE * scale;
var HOLD = Math.max(0, duration - (IN + OUT));
var OUT_START = IN + HOLD;
var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
gsap.set(traveler, { opacity: 0, scale: 0.9 });
renderTraveler();
var tl = gsap.timeline({ paused: true });
tl.to(
travel,
{ progress: 0.72, duration: IN, ease: "power3.out", onUpdate: renderTraveler },
0,
);
tl.to(traveler, { opacity: 1, duration: Math.min(0.28, IN), ease: "power2.out" }, 0);
tl.to(traveler, { scale: 1, duration: Math.min(0.5, IN), ease: "back.out(1.7)" }, 0);
if (driftHalf > 0) {
tl.to(
travel,
{
progress: 0.78,
duration: driftHalf,
ease: "sine.inOut",
yoyo: true,
repeat: 1,
onUpdate: renderTraveler,
},
IN,
);
}
tl.to(
travel,
{ progress: 1, duration: OUT, ease: "power2.in", onUpdate: renderTraveler },
OUT_START,
);
tl.to(traveler, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines["offset-path-traveler"] = tl;
})();
</script>
</div>
</template>
</body>
</html>
motion-primitive product-demo path traveler auto-rotate.