ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat(registry): the video-primitive moves, documented and customisable (#3090)" (#3162)

Browse Source 
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
2026-08-10 14:47:47 -04:00
committed by GitHub
parent 3b53bfd2f7
commit c86d4013f5
2328 changed files with 5906 additions and 458525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/input-feedback/demo.html
Vendored
-144
View File
@@ -1,144 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Input Feedback - Demo</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
}
#demo {
width: 1920px;
height: 1080px;
display: grid;
place-items: center;
background: #f8fafc;
font-family: Inter, system-ui, sans-serif;
}
.demo-frame {
display: grid;
place-items: center;
min-width: 760px;
min-height: 480px;
padding: 56px;
/* ponytail: scale up the static wrapper so the widget fills ~60% of frame; GSAP targets children, not this element */
transform: scale(2.8);
}
.hf-transition-input-feedback {
display: grid;
gap: 10px;
width: 430px;
color: #18181b;
font-family: Inter, system-ui, sans-serif;
}
.hf-transition-input-feedback label {
color: #52525b;
font-size: 15px;
font-weight: 850;
}
.hf-transition-input-shell {
display: flex;
align-items: center;
gap: 12px;
height: 62px;
padding: 0 16px;
border: 1px solid #d4d4d8;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}
.hf-transition-input-value {
flex: 1;
font-size: 20px;
font-weight: 760;
}
.hf-transition-input-clear,
.hf-transition-input-check {
display: grid;
place-items: center;
height: 28px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
}
.hf-transition-input-clear {
width: 28px;
border: 0;
background: #f4f4f5;
color: #71717a;
}
.hf-transition-input-check {
min-width: 38px;
padding: 0 8px;
background: #dcfce7;
color: #166534;
}
.hf-transition-input-hint {
margin: 0;
color: #16a34a;
font-size: 14px;
font-weight: 800;
}
</style>
</head>
<body>
<div
id="demo"
data-composition-id="input-feedback-demo"
data-start="0"
data-width="1920"
data-height="1080"
data-duration="5"
>
<div class="demo-frame">
<div class="hf-transition-input-feedback" data-state="valid">
<label>Email</label>
<div class="hf-transition-input-shell">
<span class="hf-transition-input-value">mia@example.com</span>
<button class="hf-transition-input-clear" type="button">x</button>
<span class="hf-transition-input-check">OK</span>
</div>
<p class="hf-transition-input-hint">Looks good.</p>
</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo(
".hf-transition-input-feedback",
{ y: 22, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
0.3,
);
tl.to(
".hf-transition-input-shell",
{ x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: "none" },
0.72,
);
tl.fromTo(
".hf-transition-input-check",
{ scale: 0, opacity: 0 },
{ scale: 1, opacity: 1, duration: 0.28, ease: "back.out(2)" },
1.18,
);
tl.fromTo(
".hf-transition-input-hint",
{ opacity: 0, y: -6 },
{ opacity: 1, y: 0, duration: 0.22, ease: "power2.out" },
1.28,
);
tl.set({}, {}, 5);
window.__timelines = window.__timelines || {};
window.__timelines["input-feedback-demo"] = tl;
</script>
</div>
</body>
</html>