From 4685e5cd74487b53cb8a23f6d22ace52f4830890 Mon Sep 17 00:00:00 2001 From: James Russo Date: Tue, 14 Apr 2026 16:16:03 -0700 Subject: [PATCH] =?UTF-8?q?feat(registry):=20seed=20blocks=20=E2=80=94=20d?= =?UTF-8?q?ata-chart,=20flowchart,=20logo-outro=20(#259)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extract three standalone blocks from existing example templates: - data-chart: Animated bar + line chart with staggered reveal (from nyt-graph) - flowchart: Decision tree with SVG connectors and cursor interaction (from decision-tree) - logo-outro: Cinematic logo reveal with tagline and URL pill (from product-promo) Each block is a complete HTML composition installable via `hyperframes add `. Blocks render as iframes in host compositions. --- registry/blocks/data-chart/data-chart.html | 460 ++++++++++++++++++ registry/blocks/data-chart/registry-item.json | 20 + registry/blocks/flowchart/flowchart.html | 441 +++++++++++++++++ registry/blocks/flowchart/registry-item.json | 20 + registry/blocks/logo-outro/logo-outro.html | 225 +++++++++ registry/blocks/logo-outro/registry-item.json | 20 + registry/registry.json | 12 + 7 files changed, 1198 insertions(+) create mode 100644 registry/blocks/data-chart/data-chart.html create mode 100644 registry/blocks/data-chart/registry-item.json create mode 100644 registry/blocks/flowchart/flowchart.html create mode 100644 registry/blocks/flowchart/registry-item.json create mode 100644 registry/blocks/logo-outro/logo-outro.html create mode 100644 registry/blocks/logo-outro/registry-item.json diff --git a/registry/blocks/data-chart/data-chart.html b/registry/blocks/data-chart/data-chart.html new file mode 100644 index 000000000..6d53ee34f --- /dev/null +++ b/registry/blocks/data-chart/data-chart.html @@ -0,0 +1,460 @@ + + + + + + Data Chart + + + + + + + +
+
+ +
+

Monthly Revenue vs. Conversion Rate

+

Jan–Jun 2024, in thousands

+
+
+
+ Revenue +
+
+
+ Conversion Rate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Source: Internal analytics
+
+ + + + +
+ + diff --git a/registry/blocks/data-chart/registry-item.json b/registry/blocks/data-chart/registry-item.json new file mode 100644 index 000000000..efeb32115 --- /dev/null +++ b/registry/blocks/data-chart/registry-item.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "data-chart", + "type": "hyperframes:block", + "title": "Data Chart", + "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels", + "tags": ["data", "chart", "statistics"], + "dimensions": { + "width": 1920, + "height": 1080 + }, + "duration": 15, + "files": [ + { + "path": "data-chart.html", + "target": "compositions/data-chart.html", + "type": "hyperframes:composition" + } + ] +} diff --git a/registry/blocks/flowchart/flowchart.html b/registry/blocks/flowchart/flowchart.html new file mode 100644 index 000000000..a1d1dec30 --- /dev/null +++ b/registry/blocks/flowchart/flowchart.html @@ -0,0 +1,441 @@ + + + + + + Flowchart + + + + + + + +
+
+ + + + + + + + + + + + + + +
Yes
+
Not sure
+ + +
+ Should I learn to code? +
+ + +
Yes
+
Not sure
+ + +
+
+ Start with Pythom + + + +
+
+
+ Try no-code first +
+
+ Build a personal website +
+
+ Take a free intro course +
+ + +
+ + + +
You
+
+ + +
👍
+ + +
+
+ + + + +
+ + diff --git a/registry/blocks/flowchart/registry-item.json b/registry/blocks/flowchart/registry-item.json new file mode 100644 index 000000000..66a9556ce --- /dev/null +++ b/registry/blocks/flowchart/registry-item.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "flowchart", + "type": "hyperframes:block", + "title": "Flowchart", + "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction", + "tags": ["diagram", "flowchart", "interactive"], + "dimensions": { + "width": 1920, + "height": 1080 + }, + "duration": 12, + "files": [ + { + "path": "flowchart.html", + "target": "compositions/flowchart.html", + "type": "hyperframes:composition" + } + ] +} diff --git a/registry/blocks/logo-outro/logo-outro.html b/registry/blocks/logo-outro/logo-outro.html new file mode 100644 index 000000000..f5fcca74a --- /dev/null +++ b/registry/blocks/logo-outro/logo-outro.html @@ -0,0 +1,225 @@ + + + + + + Logo Outro + + + + + + + +
+
+ +
+ + +
+ + + + + + + + +
+ +
+
Nothing great is made alone.
+
+ figma.com +
+
+
+ + + + +
+ + diff --git a/registry/blocks/logo-outro/registry-item.json b/registry/blocks/logo-outro/registry-item.json new file mode 100644 index 000000000..728da5925 --- /dev/null +++ b/registry/blocks/logo-outro/registry-item.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "logo-outro", + "type": "hyperframes:block", + "title": "Logo Outro", + "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill", + "tags": ["branding", "outro", "logo"], + "dimensions": { + "width": 1920, + "height": 1080 + }, + "duration": 6, + "files": [ + { + "path": "logo-outro.html", + "target": "compositions/logo-outro.html", + "type": "hyperframes:composition" + } + ] +} diff --git a/registry/registry.json b/registry/registry.json index 990035395..b320d91a6 100644 --- a/registry/registry.json +++ b/registry/registry.json @@ -34,6 +34,18 @@ { "name": "nyt-graph", "type": "hyperframes:example" + }, + { + "name": "data-chart", + "type": "hyperframes:block" + }, + { + "name": "flowchart", + "type": "hyperframes:block" + }, + { + "name": "logo-outro", + "type": "hyperframes:block" } ] }