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.
76 lines
2.0 KiB
HTML
Vendored
76 lines
2.0 KiB
HTML
Vendored
<!--
|
|
Stepper - 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-stepper">
|
|
<div class="hf-ui-stepper-line"><div class="hf-ui-stepper-fill"></div></div>
|
|
<div class="hf-ui-step is-done"><span>1</span><strong>Prompt</strong></div>
|
|
<div class="hf-ui-step is-active"><span>2</span><strong>Preview</strong></div>
|
|
<div class="hf-ui-step"><span>3</span><strong>Render</strong></div>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-ui-stepper {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 44px;
|
|
width: 640px;
|
|
color: #18181b;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
.hf-ui-stepper-line {
|
|
position: absolute;
|
|
left: 54px;
|
|
right: 54px;
|
|
top: 25px;
|
|
height: 4px;
|
|
border-radius: 999px;
|
|
background: #e4e4e7;
|
|
overflow: hidden;
|
|
}
|
|
.hf-ui-stepper-fill {
|
|
width: 55%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: #18181b;
|
|
transform-origin: left center;
|
|
}
|
|
.hf-ui-step {
|
|
position: relative;
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 12px;
|
|
font-weight: 850;
|
|
}
|
|
.hf-ui-step span {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 54px;
|
|
height: 54px;
|
|
border: 2px solid #e4e4e7;
|
|
border-radius: 999px;
|
|
background: #ffffff;
|
|
color: #71717a;
|
|
}
|
|
.hf-ui-step.is-done span,
|
|
.hf-ui-step.is-active span {
|
|
border-color: #18181b;
|
|
background: #18181b;
|
|
color: #ffffff;
|
|
}
|
|
.hf-ui-step strong {
|
|
font-size: 15px;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.fromTo('.hf-ui-stepper-fill', { scaleX: 0 }, { scaleX: 1, duration: 0.72, ease: 'power3.out' }, 0.35);
|
|
tl.fromTo('.hf-ui-step', { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, stagger: 0.12, ease: 'back.out(1.3)' }, 0.35);
|
|
tl.to('.hf-ui-step.is-active span', { scale: 1.14, duration: 0.18, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.05);
|
|
-->
|