add: youtube engagement assets by bytenomad23 · Pull Request #358 · heygen-com/hyperframes

bytenomad23 · 2026-04-21T03:51:13Z

No description provided.

Agent-Logs-Url: https://github.com/bytenomad23/hyperframes/sessions/5e10f88f-a8be-4af1-848c-f18b1fe25963 Co-authored-by: bytenomad23 <209907175+bytenomad23@users.noreply.github.com>

…or-codespace chore: add GitHub Codespaces devcontainer configuration

Add production-ready video templates for YouTube engagement: - youtube-like-pulse: Animated like button with counter - youtube-bell-subscribe: Bell notification with CTA - youtube-floating-thumbs: Floating thumbs animation - youtube-subscribe-streak: Streak counter with fire effect - youtube-attention-grabber: High-energy like+subscribe combo All assets: - Pass Hyperframes validation - Are deterministic (no randomization) - Render to HD MP4 (1920x1080, 2-3s per asset) - Include registry manifests and documentation - Ready for marketplace distribution

Copilot

Pull request overview

Adds a new set of “YouTube engagement” example compositions to the Hyperframes registry, plus accompanying documentation (and a devcontainer setup to support local rendering/dev workflows).

Changes:

Added 5 new registry examples (youtube-*) with GSAP-driven HTML compositions.
Added YOUTUBE_ENGAGEMENT_ASSETS.md documenting the assets, usage, and packaging notes.
Added a .devcontainer/ configuration and Dockerfile for a consistent local dev/render environment.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
registry/examples/youtube-subscribe-streak/registry-item.json	Registers the “Subscribe Streak Counter” example in the registry
registry/examples/youtube-subscribe-streak/index.html	Implements the streak counter composition and GSAP timeline
registry/examples/youtube-like-pulse/registry-item.json	Registers the “Like Button Pulse” example in the registry
registry/examples/youtube-like-pulse/index.html	Implements the like/pulse composition and GSAP timeline
registry/examples/youtube-floating-thumbs/registry-item.json	Registers the “Floating Thumbs Up” example in the registry
registry/examples/youtube-floating-thumbs/index.html	Implements the floating thumbs composition and GSAP timeline
registry/examples/youtube-bell-subscribe/registry-item.json	Registers the “Bell Subscribe Alert” example in the registry
registry/examples/youtube-bell-subscribe/index.html	Implements the bell/notification composition and GSAP timeline
registry/examples/youtube-attention-grabber/registry-item.json	Registers the “Attention Grabber” example in the registry
registry/examples/youtube-attention-grabber/index.html	Implements the like+subscribe burst composition and GSAP timeline
YOUTUBE_ENGAGEMENT_ASSETS.md	Documents the 5 assets, specs, and usage
.devcontainer/devcontainer.json	Defines VS Code devcontainer config (extensions, env, lifecycle hooks)
.devcontainer/Dockerfile	Builds the devcontainer image with Chromium/FFmpeg/Node/Bun

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-21T03:55:50Z

+      // Pulse animation (repeats)
+      const createPulse = (ring, delay) => {
+        tl.to(
+          ring,
+          {
+            scale: 1.5,
+            opacity: 0,
+            duration: 1.2,
+            ease: "power1.out",
+          },
+          delay,
+        );
+      };


The pulse rings never become visible: .pulse-ring starts at opacity: 0, and createPulse() animates opacity to 0 (and leaves scale at the end state). As a result, the rings will remain invisible throughout the timeline. Use a fromTo (or a set + to) that briefly raises opacity (e.g., 0.6–1) while expanding, and reset scale/opacity so each pulse actually animates.

Copilot · 2026-04-21T03:55:51Z

+      // Glow rings
+      tl.to(
+        "#glow-1",
+        {
+          scale: 1.3,
+          opacity: 0,
+          duration: 0.8,
+          ease: "power1.out",
+        },
+        0.5,
+      );
+
+      tl.to(
+        "#glow-2",
+        {
+          scale: 1.3,
+          opacity: 0,
+          duration: 0.8,
+          ease: "power1.out",
+        },
+        0.7,
+      );


#glow-1 and #glow-2 start at opacity: 0 and are animated to opacity: 0, so the glow ring effect will never be visible. Consider using fromTo (or a set + to) to animate from a visible opacity down to 0 while scaling up.

Copilot · 2026-04-21T03:55:51Z

+      // Stars float in
+      starPositions.forEach((_, i) => {
+        const floatDistance = 50 + i * 15;
+        const duration = 1.5 + i * 0.1;
+        tl.to(
+          `#star-${i}`,
+          {
+            opacity: 1,
+            y: (index, target) => parseFloat(target.style.top) - floatDistance,
+            rotation: 360,
+            duration: duration,
+            ease: "power1.out",
+          },
+          0.8 + i * 0.15,
+        );
+      });


The star float animation computes y from target.style.top, but GSAP's y animates translateY (relative), not the absolute top position. This results in an incorrect final position (top + translateY). If you want to float upward by a fixed amount, tween y to a negative offset (or animate the top property instead).

Copilot · 2026-04-21T03:55:51Z

+      // Thumbs rotate and float
+      thumbElements.forEach((thumb, i) => {
+        const rotationAmount = 360 + i * 30;
+        const floatAmount = 100 + i * 20;
+        const duration = 2 + i * 0.15;
+        tl.to(
+          thumb,
+          {
+            rotation: rotationAmount,
+            y: (index, target) => parseFloat(target.style.top) - floatAmount,
+            duration: duration,
+            ease: "sine.inOut",
+          },
+          1,
+        );
+      });


This tween sets y based on target.style.top, but GSAP's y is translateY, so the final rendered position becomes top + y and will be off by a large amount. To float elements by floatAmount, tween y to a relative offset (e.g., -floatAmount) or animate the top property directly.

Copilot · 2026-04-21T03:55:51Z

+        overflow: hidden;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        font-family:
+          "Inter",
+          -apple-system,
+          sans-serif;
+      }


This example specifies the Inter font but doesn't load it, so headless renders may fall back to a different font and shift text metrics. Other examples in the repo import Inter via Google Fonts (e.g. registry/examples/decision-tree/index.html). Consider importing the font explicitly (or using an installed font).

Copilot · 2026-04-21T03:55:52Z

+        overflow: hidden;
+        background: linear-gradient(45deg, #ff1744 0%, #ff6e40 50%, #ffeb3b 100%);
+        font-family:
+          "Fredoka",
+          -apple-system,
+          sans-serif;
+      }


This example uses a non-system font (Fredoka) but doesn't load it, so rendering will likely fall back to a different font and alter the look/spacing. Consider importing the required font(s) (as other examples do via Google Fonts) or switching to a font that is guaranteed to exist in the rendering environment.

Copilot · 2026-04-21T03:55:52Z

+  // Install dependencies after the container is created
+  "postCreateCommand": "bun install",
+
+  // Build all packages and start the studio after each start


The comment says this will "Build all packages and start the studio" on each start, but the command only runs bun run build. Either update the comment to match the behavior, or change the command to also start the studio if that's intended.

Suggested change

// Build all packages and start the studio after each start

// Build all packages after each start

Copilot · 2026-04-21T03:55:52Z

+        overflow: hidden;
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        font-family:
+          "Inter",
+          -apple-system,
+          sans-serif;
+      }


This example specifies the Inter font but doesn't load it (unlike other examples, e.g. registry/examples/decision-tree/index.html, which imports it from Google Fonts). In the rendering container this will likely fall back to a different font and change layout/line breaks. Consider importing the font explicitly (or switching to a font guaranteed to exist in the render environment).

Copilot · 2026-04-21T03:55:52Z

+        overflow: hidden;
+        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+        font-family:
+          "Inter",
+          -apple-system,
+          sans-serif;
+      }


This example specifies the Inter font but doesn't load it, which can cause font fallback and layout differences in headless rendering. Other examples in the repo import Inter via Google Fonts (e.g. registry/examples/decision-tree/index.html). Consider importing the font explicitly (or using an installed font).

Copilot · 2026-04-21T03:55:53Z

+{
+  "name": "Hyperframes",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },


This PR is titled as adding YouTube engagement assets, but it also adds a full devcontainer setup. If the devcontainer isn't required for the assets, consider moving it to a separate PR to keep scope/review risk smaller (or update the PR title/description to reflect the additional change).

jrusso1020

Thanks for contributing! The intent here — more ready-to-drop engagement assets for creator-style videos — is genuinely useful, but the PR as submitted has enough structural and process issues that I don't think it can land as-is. Leaving inline comments with the specifics; summarizing the big picture here:

Blockers

Scope creep. .devcontainer/Dockerfile, .devcontainer/devcontainer.json, and YOUTUBE_ENGAGEMENT_ASSETS.md are unrelated to adding registry assets. The devcontainer is a substantive infra change that deserves its own PR; the top-level marketing doc shouldn't exist. Please strip all three from this PR.
Empty PR description. The PR body is blank. At minimum: what's being added, why, a short note on how each asset renders, and confirmation that you followed the checklist in CONTRIBUTING.md.
Wrong registry bucket. These are short CTA compositions — by the repo's own taxonomy that's registry/blocks/, not registry/examples/. The existing examples/ entries are long-form showcases (kinetic-type, nyt-graph, vignelli, swiss-grid). A knock-on effect: the Catalog Previews CI workflow only runs on registry/blocks/** and registry/components/**, so in examples/ these get zero automated render validation.
CONTRIBUTING.md checklist skipped. No update to registry/registry.json (step 2). No evidence npx hyperframes lint / validate was run (step 4). No generated MDX from scripts/generate-catalog-pages.ts. The checklist exists so the CLI, catalog, and docs pipelines stay in sync — skipping it means the items won't be discoverable or documented.

Significant

Duration mismatch on all 5 items. Declared durations are 7–9s but every timeline's visible content ends ~4–5s in. The remainder is empty/static frames. Either trim the declared duration or fill the time.
Trademark concern. "YouTube" is Google's trademark. Naming files, items, and titles youtube-* in a public registry implies official association and is legally risky. Rename to generic CTA language (e.g. like-pulse, engagement-bell, subscribe-streak, thumbs-up-burst) — it's also more broadly useful.
Emoji icons aren't render-deterministic. Central visual elements are Unicode emoji (👍, 🔔, etc.), which resolve via host fonts and will render differently across environments unless a specific emoji font is bundled and declared. SVG icons are the safer choice.

Minor

data-composition-id and __timelines keys don't align with the item names; worth making consistent.
Tone of the copy ("HIT THAT LIKE", "AMAZING!", "Make a difference!") is fine for creator CTAs but aggressive for the default; consider making text more obviously customizable or more neutral by default.

Happy to re-review once the scope is tightened and the registry conventions are followed. The underlying asset ideas are solid.

jrusso1020 · 2026-04-21T04:22:58Z

Scope creep — this file is unrelated to "youtube engagement assets" and should be split into its own PR with its own discussion. A devcontainer is a substantive change (mirrors production rendering env, installs Chromium + Node + Bun, sets PUPPETEER_* env, forwards ports) and deserves maintainer review on its own merits, not bundled with a registry drop.

A few things that would need sorting out before a devcontainer PR lands:

The repo already uses chrome-headless-shell for rendering (not full Chromium); setting PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium diverges from what the producer package actually uses and may mislead contributors.

ENV PATH="/root/.bun/bin:/home/vscode/.bun/bin:$PATH" puts root's bun ahead of vscode's, but the container runs as remoteUser: vscode (per devcontainer.json). The root install is unused by the interactive user — consider dropping it.

Installing chromium via apt plus PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true is a reasonable pattern, but it should be justified against the engine package's actual browser management.

Please drop these files from this PR.

jrusso1020 · 2026-04-21T04:23:02Z

Same scope-creep concern as the Dockerfile — please split into a separate PR.

One specific issue for when it is reviewed on its own: "postStartCommand": "bun run build" will re-run a full monorepo build every time the container starts, which is heavy and wasteful. Build typically belongs in postCreateCommand (alongside bun install, or as onCreateCommand/updateContentCommand). postStartCommand should be for fast per-start setup.

jrusso1020 · 2026-04-21T04:23:10Z

This file shouldn't exist. A few reasons:

Tone is off for the repo. "Ready-to-Sell Assets", green checkmarks, "Use Case / Customizable" marketing bullets — this reads like sales collateral, not engineering docs. The repo's style (see CONTRIBUTING.md, DESIGN.md, etc.) is concise, factual, and engineering-focused.

Wrong location. Top-level markdown files in this repo are reserved for project-wide docs (README.md, CONTRIBUTING.md, DESIGN.md, SECURITY.md, etc.). Per-item documentation doesn't live here.

Duplicates data. Everything useful here (title, duration, description) already lives in each item's registry-item.json — which is the source of truth the CLI and the catalog UI read from.

Auto-generated docs are the established pattern. CONTRIBUTING.md says to run scripts/generate-catalog-pages.ts after adding items, which produces MDX pages automatically. Hand-writing a catalog doc sidesteps that pipeline.

Please delete this file and let the generated catalog pages do their job.

jrusso1020 · 2026-04-21T04:23:20Z

Two structural concerns that apply to all five new items, using this one as the example:

1. examples/ is likely the wrong bucket. CONTRIBUTING.md describes the registry as containing two kinds of agent-installable items:

registry/blocks/ — standalone compositions (has dimensions + duration, like this)

registry/components/ — snippet fragments (requires a demo.html)

examples/ is populated today with full-length showcase compositions (kinetic-type, swiss-grid, nyt-graph, vignelli, etc.) — polished long-form pieces, not short CTAs. These YouTube assets are 7–9s CTAs designed to be dropped into a larger video; that's the definition of a block. Putting them in examples/ also means they won't get rendered by the Catalog Previews CI workflow (which only triggers on registry/blocks/** and registry/components/**), so nobody will notice if one fails to render.

2. registry/registry.json was not updated. Step 2 of the "Adding Registry Items" checklist in CONTRIBUTING.md explicitly requires adding each new item to registry/registry.json — I can't find it in the diff. Without this, hyperframes add may not discover these items.

Related process gaps:

Step 4: npx hyperframes lint and npx hyperframes validate — no evidence either was run.

Auto-generated docs: scripts/generate-catalog-pages.ts — not run (no docs/catalog/ additions in the diff).

jrusso1020 · 2026-04-21T04:23:35Z

Duration mismatch. registry-item.json declares duration: 8 and the root div has data-duration="8", but the timeline's entire visible sequence (button pop → counter → text → subtitle → hold → exit) completes at ~4.2s. The remaining ~3.8s is just the continuing pulse ring on an otherwise empty stage. Either trim the duration to match or genuinely fill the time — the current state renders wasted frames for half the video.

This same issue affects the other four items: I spot-checked all five and every one has its visible sequence ending well before the declared duration.

Brand/trademark concern. "YouTube" is a Google trademark. Shipping files named youtube-* with titles like "YouTube Like Button Pulse" / "YouTube Bell Subscribe Alert" in a public OSS registry is risky — even if the visual design is original, the naming implies an official association. Safer path: rename to generic CTA language (like-pulse, engagement-bell, subscribe-streak, thumbs-up-burst) and let copy inside the composition describe the use case. This also makes the assets useful for non-YouTube contexts (Twitch, TikTok, internal product promos, etc.).

Emoji glyphs (👍, 🔔, etc.) are not render-deterministic. Most of these compositions use Unicode emoji as their visual centerpiece. Emoji glyphs are resolved by the host font stack — they'll render differently on the renderer's fonts vs. a viewer's browser unless you explicitly preload a known emoji font (e.g. Noto Color Emoji) and declare it. The devcontainer Dockerfile in this PR ships fonts-noto-color-emoji, which suggests the author knows this — but production rendering doesn't go through that container, and none of the HTML files pin an emoji font. Consider SVG icons instead; they're deterministic and scale crisply at 1920×1080.

ID/name consistency. The item is youtube-like-pulse (kebab, with youtube- prefix) but the data-composition-id and __timelines key are just like-pulse. Convention in existing examples (kinetic-type) uses data-composition-id="main" for the top-level composition. Worth aligning.

Copilot AI and others added 3 commits April 21, 2026 01:55

chore: add GitHub Codespaces devcontainer configuration

bd67078

Agent-Logs-Url: https://github.com/bytenomad23/hyperframes/sessions/5e10f88f-a8be-4af1-848c-f18b1fe25963 Co-authored-by: bytenomad23 <209907175+bytenomad23@users.noreply.github.com>

Merge pull request #2 from bytenomad23/copilot/setup-infrastructure-f…

7190a5f

…or-codespace chore: add GitHub Codespaces devcontainer configuration

Copilot AI review requested due to automatic review settings April 21, 2026 03:51

Copilot started reviewing on behalf of bytenomad23 April 21, 2026 03:51 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

jrusso1020 requested changes Apr 21, 2026

View reviewed changes

	// Build all packages and start the studio after each start
	// Build all packages after each start

Conversation

bytenomad23 commented Apr 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 left a comment

Choose a reason for hiding this comment

Blockers

Significant

Minor

Uh oh!

jrusso1020 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants