Skip to content

Commit 03411e5

Browse files
AksharP5AksharP5
committed
feat(registry): add kinetic center build component
1 parent f7d2260 commit 03411e5

8 files changed

Lines changed: 1120 additions & 0 deletions

File tree

‎docs/catalog/components/kinetic-center-build.mdx‎

Lines changed: 649 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,7 @@
286286
"catalog/blocks/hw-path-text",
287287
"catalog/blocks/hw-title",
288288
"catalog/components/inline-highlight",
289+
"catalog/components/kinetic-center-build",
289290
"catalog/components/kinetic-type-swap",
290291
"catalog/components/line-by-line-slide",
291292
"catalog/components/line-swap",

‎docs/public/catalog-index.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2260,6 +2260,21 @@
22602260
"href": "/catalog/components/keyframe-scrub-stack",
22612261
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png"
22622262
},
2263+
{
2264+
"name": "kinetic-center-build",
2265+
"type": "component",
2266+
"title": "Kinetic Center Build",
2267+
"description": "Words enter from the right and push the growing phrase left until the final line locks centered.",
2268+
"tags": [
2269+
"motion-primitive",
2270+
"text-effects",
2271+
"kinetic-type",
2272+
"reveal",
2273+
"remocn-port"
2274+
],
2275+
"href": "/catalog/components/kinetic-center-build",
2276+
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/kinetic-center-build.png"
2277+
},
22632278
{
22642279
"name": "kinetic-type-swap",
22652280
"type": "component",

‎docs/public/catalog/components/kinetic-center-build.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎registry/components/kinetic-center-build/demo.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!doctype html>
2+
<!--
3+
Kinetic Center Build demo. The 1280x720 frame and default values match the
4+
pinned Hyfrme parity fixture so reviewers can compare the motion directly.
5+
-->
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8" />
9+
<meta name="viewport" content="width=1280, height=720" />
10+
<title>Kinetic Center Build Demo</title>
11+
<link
12+
rel="stylesheet"
13+
href="https://fonts.googleapis.com/css2?family=Geist:wght@600&amp;display=block"
14+
/>
15+
<style>
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: border-box;
20+
}
21+
22+
html,
23+
body {
24+
width: 1280px;
25+
height: 720px;
26+
overflow: hidden;
27+
}
28+
29+
#root {
30+
--font-display: Geist, system-ui, sans-serif;
31+
position: relative;
32+
width: 1280px;
33+
height: 720px;
34+
overflow: hidden;
35+
}
36+
37+
.kcb-demo-background,
38+
.kcb-demo-mount {
39+
position: absolute;
40+
inset: 0;
41+
width: 1280px;
42+
height: 720px;
43+
}
44+
45+
.kcb-demo-background {
46+
background: #ffffff;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<div
52+
id="root"
53+
data-composition-id="kinetic-center-build-demo"
54+
data-start="0"
55+
data-width="1280"
56+
data-height="720"
57+
data-duration="2"
58+
data-fps="30"
59+
>
60+
<div
61+
id="kcb-demo-background"
62+
class="kcb-demo-background clip"
63+
data-start="0"
64+
data-duration="2"
65+
data-track-index="0"
66+
></div>
67+
<div
68+
id="kcb-demo-mount"
69+
class="kcb-demo-mount clip"
70+
data-composition-id="kinetic-center-build"
71+
data-composition-src="./kinetic-center-build.html"
72+
data-start="0"
73+
data-duration="2"
74+
data-track-index="1"
75+
data-width="1280"
76+
data-height="720"
77+
></div>
78+
</div>
79+
80+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
81+
<script>
82+
window.__timelines = window.__timelines || {};
83+
window.__timelines["kinetic-center-build-demo"] = gsap.timeline({ paused: true });
84+
</script>
85+
</body>
86+
</html>

0 commit comments

Comments
 (0)