Setting the file. One moment.
Skill 24 · Hyperframes Registry
Subchapter 24.11
examples/add-component.mdMarkdown1 KBView on GitHub
User wants to add a shimmer light sweep effect to their title text.
hyperframes add shimmer-sweepOpen compositions/components/shimmer-sweep.html and read the comment header.
HTML — wrap target elements:
<div class="shimmer-sweep-target" style="--shimmer-color: rgba(255, 255, 255, 0.5)">
<h1 class="title">AI-Powered Video</h1>
</div>CSS — paste the .shimmer-sweep-target and .shimmer-mask rules from the snippet.
JS — paste the auto-injection script (before timeline code):
document.querySelectorAll(".shimmer-sweep-target").forEach((el) => {
if (!el.querySelector(".shimmer-mask")) {
const mask = document.createElement("div");
mask.className = "shimmer-mask";
el.appendChild(mask);
}
});Timeline — add the sweep:
tl.fromTo(
".shimmer-sweep-target",
{
"--shimmer-pos": "-20%",
},
{
"--shimmer-pos": "120%",
duration: 1.2,
ease: "power2.inOut",
stagger: 0.15,
},
1.5,
);hyperframes lint
hyperframes preview--shimmer-color: highlight color per element--shimmer-width: light band width (default 20%)--shimmer-angle: sweep direction (default 120deg)duration, ease, stagger: control speed and feel