Skip to content

feat(registry): text-match-cut #4276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jmoran-heygen wants to merge 2 commits into from
Closed

feat(registry): text-match-cut #4276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83b2e24
feat(registry): add text-match-cut — one text becomes another mid-mov…
jakemoran2011 Sep 22, 2026
7a09814
chore(registry): integrate text-match-cut with current main
miguel-heygen Sep 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
407 changes: 407 additions & 0 deletions docs/catalog/components/text-match-cut.mdx
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions docs/docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -672,7 +672,7 @@
},
{
"group": "Motion & effects",
"tag": "94",
"tag": "95",
"expanded": false,
"pages": [
{
Expand Down Expand Up @@ -714,7 +714,7 @@
},
{
"group": "Effects",
"tag": "53",
"tag": "54",
"expanded": false,
"pages": [
"catalog/components/avatar-cloud",
Expand Down Expand Up @@ -769,7 +769,8 @@
"catalog/components/x-follow-card",
"catalog/components/yt-circle-pointer",
"catalog/components/yt-feather-highlight",
"catalog/components/zoom-through-transition"
"catalog/components/zoom-through-transition",
"catalog/components/text-match-cut"
]
},
{
Expand Down
16 changes: 16 additions & 0 deletions docs/public/catalog-index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4912,6 +4912,22 @@
"href": "/catalog/components/testimonial-proof-card",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/testimonial-proof-card.png"
},
{
"name": "text-match-cut",
"type": "component",
"title": "Text Match Cut",
"description": "One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.",
"tags": [
"motion-primitive",
"transition",
"typography",
"match-cut",
"hard-cut",
"continuity"
],
"href": "/catalog/components/text-match-cut",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-match-cut.png"
},
{
"name": "text-shimmer",
"type": "component",
Expand Down
1 change: 1 addition & 0 deletions docs/public/catalog/components/text-match-cut.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/snippets/catalog-gallery-data.mdx
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified registry/catalog-artifact/local-vectors.bin
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion registry/catalog-artifact/local-vectors.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"model": "bge-small-en-v1.5",
"modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
"dimensions": 384,
"revision": "eda107eecb902f204b6308c85794d269d5d53a8583c12008b3972f3efacb312a",
"revision": "cf2a7c8f9a69ae455c51a70fd368f4935961245bec3906e7829e94a9929a4384",
"names": [
"ai-chat-reveal",
"animated-bar-chart",
Expand Down Expand Up @@ -335,6 +335,7 @@
"terminal-simulator",
"testimonial-card",
"testimonial-proof-card",
"text-match-cut",
"text-shimmer",
"text-stagger",
"text-state-swap",
Expand Down
129 changes: 129 additions & 0 deletions registry/components/text-match-cut/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!doctype html>
<!--
text-match-cut demo. Four mounts of text-match-cut.html in a 2×2 grid, each
with a different mode, so one render shows the cut carried by scale, tracking,
and two slide directions. Non-default copy proves the variables flow through
the mount; every tile hard-cuts on the same frame (1.0 s).
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Text Match Cut Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 1920px;
height: 1080px;
overflow: hidden;
background: #262626;
}

#root {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: #262626;
}

.mount {
position: absolute;
width: 912px;
height: 513px;
container-type: size;
overflow: hidden;
border-radius: 8px;
}

.q0 {
left: 24px;
top: 18px;
}
.q1 {
left: 984px;
top: 18px;
}
.q2 {
left: 24px;
top: 549px;
}
.q3 {
left: 984px;
top: 549px;
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="text-match-cut-demo"
data-start="0"
data-width="1920"
data-height="1080"
data-duration="3"
data-fps="30"
>
<div
id="tmc-mount-0"
class="mount q0 clip"
data-composition-id="text-match-cut"
data-composition-src="./text-match-cut.html"
data-variable-values='{"mode":"scale-down","text_a":"Ship the update","text_b":"Watch it land"}'
data-start="0"
data-duration="3"
data-track-index="0"
data-width="912"
data-height="513"
></div>
<div
id="tmc-mount-1"
class="mount q1 clip"
data-composition-id="text-match-cut"
data-composition-src="./text-match-cut.html"
data-variable-values='{"mode":"scale-up","text_a":"Ship the update","text_b":"Watch it land"}'
data-start="0"
data-duration="3"
data-track-index="1"
data-width="912"
data-height="513"
></div>
<div
id="tmc-mount-2"
class="mount q2 clip"
data-composition-id="text-match-cut"
data-composition-src="./text-match-cut.html"
data-variable-values='{"mode":"tracking-in","text_a":"Ship the update","text_b":"Watch it land"}'
data-start="0"
data-duration="3"
data-track-index="2"
data-width="912"
data-height="513"
></div>
<div
id="tmc-mount-3"
class="mount q3 clip"
data-composition-id="text-match-cut"
data-composition-src="./text-match-cut.html"
data-variable-values='{"mode":"slide-left","text_a":"Ship the update","text_b":"Watch it land"}'
data-start="0"
data-duration="3"
data-track-index="3"
data-width="912"
data-height="513"
></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
window.__timelines["text-match-cut-demo"] = gsap.timeline({ paused: true });
</script>
</body>
</html>
79 changes: 79 additions & 0 deletions registry/components/text-match-cut/registry-item.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "text-match-cut",
"type": "hyperframes:component",
"title": "Text Match Cut",
"description": "One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.",
"tags": ["motion-primitive", "transition", "typography", "match-cut", "hard-cut", "continuity"],
"jobs": ["connect"],
"family": "transitions",
"profile": "transition",
"evidence": "Editing Snapped, The Match Cut Technique Every After Effects User Needs — text workflow measured per frame at 60 fps",
"syncPoints": [{ "id": "hard-cut", "phase": "in", "offset": 1.0 }],
"files": [
{
"path": "text-match-cut.html",
"target": "compositions/components/text-match-cut.html",
"type": "hyperframes:snippet"
}
],
"variables": [
{
"id": "text_a",
"type": "string",
"role": "content",
"label": "Outgoing text",
"description": "The line on screen before the cut.",
"default": "Basic Interface Behavior"
},
{
"id": "text_b",
"type": "string",
"role": "content",
"label": "Incoming text",
"description": "The line that continues the move after the cut.",
"default": "Thoughtful Experience Design"
},
{
"id": "mode",
"type": "enum",
"role": "style",
"label": "Move",
"description": "Which property carries the cut. Both texts ride the same curve.",
"default": "scale-down",
"options": [
{ "value": "scale-down", "label": "Scale down (tutorial)" },
{ "value": "scale-up", "label": "Scale up" },
{ "value": "tracking-in", "label": "Tracking in" },
{ "value": "slide-left", "label": "Slide left" },
{ "value": "slide-right", "label": "Slide right" },
{ "value": "slide-up", "label": "Slide up" },
{ "value": "slide-down", "label": "Slide down" }
]
},
{
"id": "sweep",
"type": "enum",
"role": "style",
"label": "Gradient sweep",
"description": "Cyan-to-blue bar sweeping through the glyphs around the cut.",
"default": "on",
"options": [
{ "value": "on", "label": "On" },
{ "value": "off", "label": "Off" }
]
},
{
"id": "background",
"type": "enum",
"role": "style",
"label": "Background",
"description": "The tutorial navy glow, or transparent so the host shows through.",
"default": "navy",
"options": [
{ "value": "navy", "label": "Navy glow" },
{ "value": "transparent", "label": "Transparent" }
]
}
]
}
Loading
Loading