mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
60 lines
1.4 KiB
HTML
Vendored
60 lines
1.4 KiB
HTML
Vendored
<!--
|
|
Hover Card - remocn-inspired UI primitive for HyperFrames.
|
|
|
|
Paste the markup and CSS into a composition. Animate the CSS variables
|
|
from a paused GSAP timeline for deterministic video renders.
|
|
-->
|
|
|
|
<div class="hf-ui-hover-card">
|
|
<button type="button">@maya</button>
|
|
<aside>
|
|
<strong>Maya Chen</strong><span>Motion designer</span>
|
|
<p>Building reusable launch scenes.</p>
|
|
</aside>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-ui-hover-card {
|
|
position: relative;
|
|
display: inline-grid;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
color: #18181b;
|
|
}
|
|
.hf-ui-hover-card button {
|
|
height: 38px;
|
|
padding: 0 14px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
font-weight: 850;
|
|
}
|
|
.hf-ui-hover-card aside {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
width: 260px;
|
|
padding: 16px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 13px;
|
|
background: #fff;
|
|
opacity: var(--hf-hover-open, 1);
|
|
transform: translateY(var(--hf-hover-y, 0px));
|
|
box-shadow: 0 20px 56px rgba(24, 24, 27, 0.14);
|
|
}
|
|
.hf-ui-hover-card span,
|
|
.hf-ui-hover-card p {
|
|
color: #71717a;
|
|
}
|
|
.hf-ui-hover-card p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.fromTo('.hf-ui-hover-card aside', { '--hf-hover-open': 0, '--hf-hover-y': '10px' }, { '--hf-hover-open': 1, '--hf-hover-y': '0px', duration: 0.28, ease: 'power2.out' }, startTime);
|
|
-->
|