mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
52 lines
1.4 KiB
HTML
Vendored
52 lines
1.4 KiB
HTML
Vendored
<!--
|
|
Simulated Cursor - pointer and click pulse primitive.
|
|
|
|
Paste the markup once, then animate .hf-simulated-cursor with x/y values in
|
|
your paused GSAP timeline. Trigger the click pulse by scaling/fading
|
|
.hf-simulated-cursor-pulse.
|
|
-->
|
|
|
|
<div class="hf-simulated-cursor" aria-hidden="true">
|
|
<div class="hf-simulated-cursor-pulse"></div>
|
|
<svg viewBox="0 0 24 24" width="44" height="44">
|
|
<path
|
|
d="M3 2.8 20.6 14 12.8 15.5 9 22 3 2.8Z"
|
|
fill="white"
|
|
stroke="rgba(0,0,0,0.45)"
|
|
stroke-width="1.4"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-simulated-cursor {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
transform: translate3d(var(--hf-cursor-x, 0px), var(--hf-cursor-y, 0px), 0);
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
|
|
}
|
|
.hf-simulated-cursor-pulse {
|
|
position: absolute;
|
|
left: 9px;
|
|
top: 9px;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 2px solid rgba(255, 255, 255, 0.85);
|
|
border-radius: 999px;
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
|
|
tl.to(".hf-simulated-cursor", { "--hf-cursor-x": "760px", "--hf-cursor-y": "420px", duration: 0.8, ease: "power2.inOut" }, startTime);
|
|
tl.fromTo(".hf-simulated-cursor-pulse", { opacity: 0.8, scale: 0.2 }, { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" }, startTime + 0.8);
|
|
-->
|