mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
Miguel Ángel
cf7db37697
Port Remocn UI primitives into installable HyperFrames snippets. Add a first transitions.dev-inspired primitive set for agent-friendly motion patterns.
77 lines
2.2 KiB
HTML
Vendored
77 lines
2.2 KiB
HTML
Vendored
<!--
|
|
Cursor - shadcn-style UI primitive for HyperFrames.
|
|
|
|
Paste the markup and CSS into a composition. Use the timeline integration
|
|
note at the bottom as the starting point for deterministic GSAP animation.
|
|
-->
|
|
|
|
<div class="hf-ui-cursor-stage">
|
|
<div class="hf-ui-cursor-target">Generate</div>
|
|
<div class="hf-ui-cursor-ripple"></div>
|
|
<div class="hf-ui-cursor-pointer"></div>
|
|
<div class="hf-ui-cursor-label">Click</div>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-ui-cursor-stage {
|
|
position: relative;
|
|
width: 420px;
|
|
height: 240px;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
.hf-ui-cursor-target {
|
|
position: absolute;
|
|
left: 170px;
|
|
top: 84px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 150px;
|
|
height: 56px;
|
|
border-radius: 14px;
|
|
background: #18181b;
|
|
color: #ffffff;
|
|
font-weight: 850;
|
|
}
|
|
.hf-ui-cursor-pointer {
|
|
position: absolute;
|
|
left: 70px;
|
|
top: 42px;
|
|
width: 28px;
|
|
height: 40px;
|
|
clip-path: polygon(0 0, 0 100%, 10px 78%, 18px 98%, 25px 95%, 17px 74%, 38px 74%);
|
|
background: #ffffff;
|
|
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
|
|
}
|
|
.hf-ui-cursor-ripple {
|
|
position: absolute;
|
|
left: 240px;
|
|
top: 112px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #18181b;
|
|
border-radius: 999px;
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.2);
|
|
}
|
|
.hf-ui-cursor-label {
|
|
position: absolute;
|
|
left: 64px;
|
|
top: 88px;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
background: #ffffff;
|
|
color: #18181b;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.fromTo('.hf-ui-cursor-pointer', { x: 0, y: 0, opacity: 0 }, { x: 154, y: 74, opacity: 1, duration: 0.82, ease: 'power3.inOut' }, 0.25);
|
|
tl.fromTo('.hf-ui-cursor-label', { opacity: 0, y: 8 }, { opacity: 1, y: 0, duration: 0.22, ease: 'power2.out' }, 0.35);
|
|
tl.fromTo('.hf-ui-cursor-ripple', { opacity: 0.75, scale: 0.2 }, { opacity: 0, scale: 2.7, duration: 0.54, ease: 'power2.out' }, 1.02);
|
|
tl.to('.hf-ui-cursor-target', { scale: 0.96, duration: 0.1, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.02);
|
|
-->
|