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.
82 lines
2.3 KiB
HTML
Vendored
82 lines
2.3 KiB
HTML
Vendored
<!--
|
|
Context Menu - 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-context-scene">
|
|
<div class="hf-ui-context-cursor"></div>
|
|
<div class="hf-ui-context-menu">
|
|
<div class="hf-ui-context-item is-active"><span>Duplicate</span><kbd>D</kbd></div>
|
|
<div class="hf-ui-context-item"><span>Rename</span><kbd>R</kbd></div>
|
|
<div class="hf-ui-context-separator"></div>
|
|
<div class="hf-ui-context-item danger"><span>Delete</span><kbd>Del</kbd></div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-ui-context-scene {
|
|
position: relative;
|
|
width: 360px;
|
|
height: 260px;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
.hf-ui-context-cursor {
|
|
position: absolute;
|
|
left: 54px;
|
|
top: 38px;
|
|
width: 24px;
|
|
height: 34px;
|
|
clip-path: polygon(0 0, 0 100%, 9px 78%, 16px 96%, 22px 93%, 15px 74%, 34px 74%);
|
|
background: #18181b;
|
|
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.22));
|
|
}
|
|
.hf-ui-context-menu {
|
|
position: absolute;
|
|
left: 94px;
|
|
top: 62px;
|
|
width: 230px;
|
|
padding: 8px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 16px;
|
|
background: #ffffff;
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
|
|
transform-origin: top left;
|
|
}
|
|
.hf-ui-context-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 38px;
|
|
padding: 0 10px;
|
|
border-radius: 10px;
|
|
color: #18181b;
|
|
font-size: 14px;
|
|
font-weight: 760;
|
|
}
|
|
.hf-ui-context-item.is-active {
|
|
background: #18181b;
|
|
color: #ffffff;
|
|
}
|
|
.hf-ui-context-item.danger {
|
|
color: #dc2626;
|
|
}
|
|
.hf-ui-context-separator {
|
|
height: 1px;
|
|
margin: 6px;
|
|
background: #e4e4e7;
|
|
}
|
|
.hf-ui-context-item kbd {
|
|
color: inherit;
|
|
opacity: 0.52;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.fromTo('.hf-ui-context-cursor', { x: -36, y: -18, opacity: 0 }, { x: 0, y: 0, opacity: 1, duration: 0.36, ease: 'power2.out' }, 0.25);
|
|
tl.fromTo('.hf-ui-context-menu', { opacity: 0, scale: 0.88 }, { opacity: 1, scale: 1, duration: 0.26, ease: 'back.out(1.8)' }, 0.62);
|
|
tl.fromTo('.hf-ui-context-item', { x: -10, opacity: 0 }, { x: 0, opacity: 1, duration: 0.2, stagger: 0.05, ease: 'power2.out' }, 0.75);
|
|
-->
|