Install
That writes one file:compositions/components/light-sweep-pass.html.
Paste it into your composition
Opencompositions/components/light-sweep-pass.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 |
|---|---|---|---|
angle | 115 | 60deg to 160deg, step 1deg | Band and highlight gradient angle in degrees. |
sweep_at | 0.9 | 0s to 8s, step 0.05s | Seconds after mount start when the band starts crossing. |
strength | standard | subtle, standard | Band opacity and highlight bloom multiplier. |
accent | green | green, blue, violet | Tint inside the band and the highlight blooms. |
exit | none | none, fade, up | Outgoing transition. None holds the settled key. |
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="light-sweep-pass"
data-composition-src="compositions/components/light-sweep-pass.html"
data-variable-values='{"angle":115,"sweep_at":0.9,"strength":"standard","accent":"green","exit":"none"}'
></div>
Source
light-sweep-pass.html
light-sweep-pass.html
<!doctype html>
<!--
light-sweep-pass: HyperFrames video primitive (overlays / light)
Concept: a traveling key light re-shades a slotted scene. A soft diagonal
gradient band crosses the frame once while every per-element highlight and
shadow shifts in lockstep, then the light settles into a resting key from
the upper third. Quiet, expensive-feeling; the scene itself never moves.
Wave L, unit L3. Reference: motion-reference/ordinaryfolkco
2001090228958752945 (the traveling light band re-shading the frame).
ONE PROPERTY OWNS THE PASS: --light-x (a unitless 0-100-ish scalar on
#root) is the only animated value. The band's translate, every element's
highlight bloom, every shadow offset, and the ambient lift all read it
through calc()/clamp()/max() in static CSS. The timeline tweens a plain
JS number proxy and writes --light-x in onUpdate (never a var() string),
so seeks in any order resolve the same computed styles.
Slot (see README.md for a worked example):
- [data-slot="scene"]: the full-bleed scene being lit. Replace the
children of this element in your installed copy. Default: a token
hero card and three feature cards. Elements opt into the light with
the data-lit attribute plus an inline --lsp-x (their center along
the sweep axis, percent of frame width).
Variables (declared in data-composition-variables below):
- angle (number, degrees, default 115, 60 to 160): band and highlight
gradient angle. 115 reads as upper-left key light.
- sweep_at (number, seconds, default 0.9): when the band starts
crossing, relative to mount start.
- strength (subtle | standard, default standard): band opacity and
highlight bloom multiplier. subtle is the barely-there pass.
- accent (green | blue | violet, default green): warm tint inside the
band and the highlight blooms. green maps to --brand, blue to
--accent, violet to --accent-2.
- exit (none | fade | up, default none): outgoing transition. none
holds the settled key (frame roots own transitions).
Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
IN = sweep_at + 1.60s crossing + 0.55s settle to the resting key
HOLD = elastic = max(0, D - (IN + OUT)); the settled key is still
OUT = 0.50s when exit is fade or up, 0 when exit is none
If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
Sync point: sweep-land when the light reaches its resting key (3.05s at
defaults). Dispatches a bubbling hf:sfx CustomEvent with id
"light-settle-soft" there. This primitive never plays audio.
Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
<template> contents; #root fills the host box (inset:0, container-type:
size), has no data-width/data-height, and registers one paused timeline
under the literal "light-sweep-pass" key. Variables come from
window.__hyperframes.getVariables().
-->
<html
lang="en"
data-composition-id="light-sweep-pass"
data-composition-duration="4"
data-composition-variables='[
{ "id": "angle", "type": "number", "role": "style", "label": "Angle", "description": "Band and highlight gradient angle in degrees.", "default": 115, "min": 60, "max": 160, "step": 1, "unit": "deg" },
{ "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Seconds after mount start when the band starts crossing.", "default": 0.9, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
{ "id": "strength", "type": "enum", "role": "style", "label": "Strength", "description": "Band opacity and highlight bloom multiplier.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }] },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint inside the band and the highlight blooms.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
{ "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled key.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
]'
>
<head>
<meta charset="UTF-8" />
<title>Light Sweep Pass</title>
</head>
<body>
<template>
<div id="root" data-composition-id="light-sweep-pass" data-duration="4" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
/* --light-x starts off-frame left; the timeline is its only
writer. --lsp-angle and --lsp-strength are set once at mount. */
#root {
--light-x: -35;
--lsp-angle: 115;
--lsp-strength: 1;
position: absolute;
inset: 0;
container-type: size;
isolation: isolate;
overflow: hidden;
background: var(--bg, #0b0c0e);
color: var(--fg, #f8fafc);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.lsp-clip,
.lsp-stage,
.lsp-scene,
.lsp-ambient,
.lsp-band {
position: absolute;
inset: 0;
}
.lsp-clip {
overflow: hidden;
}
.lsp-stage {
opacity: 0;
}
.lsp-scene {
overflow: hidden;
}
/* Every lit element derives its whole treatment from the ONE
--light-x scalar: distance d to the band, |d| via max(d, -d),
a 0..1 proximity bloom, a shadow that slides away from the
light and deepens as the band passes. Elements opt in with
data-lit and an inline --lsp-x (center along the sweep axis,
percent of frame width). */
[data-lit] {
--lsp-d: calc(var(--light-x) - var(--lsp-x, 50));
--lsp-abs: max(var(--lsp-d), calc(-1 * var(--lsp-d)));
--lsp-glow: clamp(0, calc(1 - var(--lsp-abs) / 26), 1);
position: relative;
box-shadow: calc(clamp(-30, var(--lsp-d), 30) * -0.05cqw)
calc(0.8cqh + var(--lsp-glow) * 0.7cqh) calc(2.2cqh + var(--lsp-glow) * 2.4cqh)
color-mix(in srgb, #000000 26%, transparent);
}
/* The highlight bloom: a static angle-matched gradient whose
opacity is the proximity term. No transitions, no tweens. */
[data-lit]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
calc(var(--lsp-angle) * 1deg),
color-mix(in srgb, #ffffff 86%, var(--lsp-accent, #22c55e)) 0%,
transparent 62%
);
opacity: calc(var(--lsp-glow) * 0.32 * var(--lsp-strength));
}
/* Ambient lift: the scene starts a touch dim and brightens for
good once the band has entered the frame. Monotonic in
--light-x, so the settle never re-dims it. */
.lsp-ambient {
pointer-events: none;
background: #000000;
opacity: calc(clamp(0, (26 - var(--light-x)) / 130, 0.16) * var(--lsp-strength));
}
/* The band: an oversized angle-matched gradient sheet that only
ever translates along X, driven by the same scalar. Screen
blend keeps it a light, never a paint. */
.lsp-band {
inset: -55%;
pointer-events: none;
mix-blend-mode: screen;
background: linear-gradient(
calc(var(--lsp-angle) * 1deg),
transparent 36%,
color-mix(in srgb, #ffffff 24%, transparent) 46%,
color-mix(in srgb, #ffffff 78%, var(--lsp-accent, #22c55e)) 50%,
color-mix(in srgb, #ffffff 24%, transparent) 54%,
transparent 64%
);
opacity: 0;
transform: translateX(calc((var(--light-x) - 50) * 1.4cqw));
will-change: transform, opacity;
}
#root[data-strength="subtle"] {
--lsp-strength: 0.55;
}
/* ---------- default slot scene: token hero + three cards ---------- */
.lsp-default {
position: absolute;
inset: 0;
display: grid;
grid-template-rows: auto auto;
align-content: center;
justify-items: center;
row-gap: var(--space-3, 5cqh);
padding: var(--space-3, 6cqh) 10cqw;
background: linear-gradient(
calc(var(--lsp-angle) * 1deg),
color-mix(in srgb, var(--fg, #f8fafc) 3%, var(--bg, #0b0c0e)) 0%,
var(--bg, #0b0c0e) 55%,
color-mix(in srgb, #000000 6%, var(--bg, #0b0c0e)) 100%
);
}
.lsp-hero {
display: grid;
align-content: center;
row-gap: var(--space-2, 2.4cqh);
width: 58cqw;
height: 30cqh;
padding: var(--space-3, 4cqh) var(--space-3, 3cqw);
border: 0.16cqw solid var(--border, #343a46);
border-radius: var(--radius, 2.4cqmin);
background: var(--surface, #14171c);
}
.lsp-hero-bar {
width: 46%;
height: 4.6cqh;
border-radius: 1.4cqh;
background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #14171c));
}
.lsp-hero-line {
height: 2.2cqh;
border-radius: 1.1cqh;
background: var(--muted, #94a3b8);
opacity: 0.55;
}
.lsp-hero-line:nth-of-type(3) {
width: 72%;
}
.lsp-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-2, 2cqw);
width: 58cqw;
}
.lsp-card {
display: grid;
align-content: start;
row-gap: var(--space-1, 1.6cqh);
height: 24cqh;
padding: var(--space-2, 2.6cqh) var(--space-2, 1.6cqw);
border: 0.16cqw solid var(--border, #343a46);
border-radius: var(--radius, 2.4cqmin);
background: var(--surface, #14171c);
}
.lsp-dot {
width: 3.4cqh;
height: 3.4cqh;
border-radius: 50%;
background: color-mix(in srgb, var(--lsp-accent, #22c55e) 72%, var(--surface, #14171c));
}
.lsp-line {
height: 1.9cqh;
border-radius: 1cqh;
background: var(--muted, #94a3b8);
opacity: 0.5;
}
.lsp-line:nth-of-type(3) {
width: 64%;
}
</style>
<div
id="light-sweep-pass-clip"
class="lsp-clip clip"
data-start="0"
data-duration="4"
data-track-index="0"
>
<div class="lsp-stage">
<div class="lsp-scene" data-slot="scene">
<!-- SLOT "scene": replace the children of this element with
your own full-bleed content. Mark elements that should
catch the light with data-lit and give each an inline
style="--lsp-x: NN" (center along the sweep, percent). -->
<div class="lsp-default" aria-hidden="true">
<div class="lsp-hero" data-lit style="--lsp-x: 50">
<div class="lsp-hero-bar"></div>
<div class="lsp-hero-line"></div>
<div class="lsp-hero-line"></div>
</div>
<div class="lsp-row">
<div class="lsp-card" data-lit style="--lsp-x: 31">
<div class="lsp-dot"></div>
<div class="lsp-line"></div>
<div class="lsp-line"></div>
</div>
<div class="lsp-card" data-lit style="--lsp-x: 50">
<div class="lsp-dot"></div>
<div class="lsp-line"></div>
<div class="lsp-line"></div>
</div>
<div class="lsp-card" data-lit style="--lsp-x: 69">
<div class="lsp-dot"></div>
<div class="lsp-line"></div>
<div class="lsp-line"></div>
</div>
</div>
</div>
</div>
<div class="lsp-ambient" aria-hidden="true"></div>
<div class="lsp-band" aria-hidden="true"></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");
// Literal id: mount flattening strips data-composition-id from the
// live root before this timeline registers.
var compositionId = "light-sweep-pass";
var stage = root.querySelector(".lsp-stage");
var band = root.querySelector(".lsp-band");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
function clampNumber(raw, fallback, min, max) {
var value = raw == null ? fallback : Number(raw);
if (!Number.isFinite(value)) return fallback;
return Math.max(min, Math.min(max, value));
}
var angle = clampNumber(vars.angle, 115, 60, 160);
var sweepAt = clampNumber(vars.sweep_at, 0.9, 0, 8);
var strength = vars.strength === "subtle" ? "subtle" : "standard";
var accentTokens = {
green: "var(--brand, #22c55e)",
blue: "var(--accent, #38bdf8)",
violet: "var(--accent-2, #c5a3ff)",
};
var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
? vars.accent
: "green";
// The bundler mirrors composition variables as scoped CSS custom
// props, so this unit's own accent variable can shadow the contract
// --accent token ("blue" is a valid CSS color). When the shadow is
// present, fall back to the literal contract value.
var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
if (
shadowedAccent === "green" ||
shadowedAccent === "blue" ||
shadowedAccent === "violet"
) {
accentTokens.blue = "#38bdf8";
}
// INVARIANT: only none | fade | up reaches the timeline.
var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
root.dataset.strength = strength;
root.style.setProperty("--lsp-angle", String(angle));
root.style.setProperty("--lsp-accent", accentTokens[accent]);
// RETIME RANGE: fixed IN and OUT scale together only when D is
// too short. HOLD is the sole elastic phase. Never timeScale().
var SWEEP_BASE = 1.6;
var SETTLE_BASE = 0.55;
var STAGE_IN_BASE = 0.5;
var IN_BASE = sweepAt + SWEEP_BASE + SETTLE_BASE;
var OUT_BASE = exit === "none" ? 0 : 0.5;
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 SWEEP = SWEEP_BASE * scale;
var SETTLE = SETTLE_BASE * scale;
var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN_BASE * scale);
var SWEEP_AT = sweepAt * scale;
var SWEEP_END = SWEEP_AT + SWEEP;
var IN = IN_BASE * scale;
var OUT = OUT_BASE * scale;
var HOLD = Math.max(0, duration - (IN + OUT));
var OUT_START = IN + HOLD;
// The light's authored waypoints: parked off-frame left, fully
// crossed off-frame right, then the resting key in the upper
// third of the travel. All in --light-x units (frame percent).
var LIGHT_START = -35;
var LIGHT_CROSSED = 118;
var LIGHT_REST = 62;
function fireSfx(id, t) {
root.dispatchEvent(
new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
);
}
// ONE proxy owns --light-x; every highlight, shadow, ambient
// lift, and the band transform read it via calc in static CSS.
var light = { x: LIGHT_START };
function writeLight() {
root.style.setProperty("--light-x", light.x.toFixed(3));
}
writeLight();
gsap.set(stage, { opacity: 0, y: "1.5cqh" });
gsap.set(band, { autoAlpha: 0 });
var tl = gsap.timeline({ paused: true });
// IN: the scene settles first, then one confident crossing.
tl.to(stage, { opacity: 1, y: "0cqh", duration: STAGE_IN, ease: "power2.out" }, 0);
tl.fromTo(
light,
{ x: LIGHT_START },
{
x: LIGHT_CROSSED,
duration: SWEEP,
ease: "sine.inOut",
onUpdate: writeLight,
},
SWEEP_AT,
);
tl.fromTo(
band,
{ autoAlpha: 0 },
{
autoAlpha: 1,
duration: Math.min(0.3 * scale, SWEEP),
ease: "power1.out",
immediateRender: false,
},
SWEEP_AT,
);
tl.to(
band,
{ autoAlpha: 0, duration: 0.35 * scale, ease: "power1.in" },
Math.max(SWEEP_AT, SWEEP_END - 0.35 * scale),
);
// The settle: the band is gone; the key light glides back to its
// resting position and the per-element shading follows it there.
tl.to(
light,
{ x: LIGHT_REST, duration: SETTLE, ease: "power2.out", onUpdate: writeLight },
SWEEP_END,
);
tl.call(
function () {
fireSfx("light-settle-soft", IN);
},
[],
IN,
);
// HOLD: deliberately still under the settled key.
// OUT: only when the exit variable asks for one.
if (exit !== "none") {
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
if (exit === "up") {
tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
}
}
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
motion-primitive overlay light sweep slots deterministic.