mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
59 lines
1.4 KiB
HTML
Vendored
59 lines
1.4 KiB
HTML
Vendored
<!--
|
|
Scroll Area - 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-scroll-area">
|
|
<div class="hf-ui-scroll-content">
|
|
<p>Intro scene</p>
|
|
<p>Feature sweep</p>
|
|
<p>Pricing card</p>
|
|
<p>Call to action</p>
|
|
</div>
|
|
<span class="hf-ui-scroll-thumb"></span>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-ui-scroll-area {
|
|
position: relative;
|
|
width: 320px;
|
|
height: 190px;
|
|
padding: 16px 28px 16px 16px;
|
|
overflow: hidden;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 13px;
|
|
background: #fff;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
.hf-ui-scroll-content {
|
|
display: grid;
|
|
gap: 10px;
|
|
transform: translateY(var(--hf-scroll-y, 0px));
|
|
}
|
|
.hf-ui-scroll-content p {
|
|
margin: 0;
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
background: #f4f4f5;
|
|
color: #18181b;
|
|
font-weight: 750;
|
|
}
|
|
.hf-ui-scroll-thumb {
|
|
position: absolute;
|
|
right: 9px;
|
|
top: 16px;
|
|
width: 5px;
|
|
height: 52px;
|
|
border-radius: 999px;
|
|
background: #a1a1aa;
|
|
transform: translateY(var(--hf-scroll-thumb-y, 0px));
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.to('.hf-ui-scroll-content', { '--hf-scroll-y': '-76px', duration: 0.8, ease: 'power2.inOut' }, startTime); tl.to('.hf-ui-scroll-thumb', { '--hf-scroll-thumb-y': '62px', duration: 0.8, ease: 'power2.inOut' }, startTime);
|
|
-->
|