Files
open-design/plugins/_official/video-templates
2940876409 feat(plugins): refresh HyperFrames video templates from html-video (#4063)
* feat(plugins): refresh HyperFrames video templates from html-video

Replace the 11 HeyGen catalog stub entries (no bundled source, duplicate
catalog-block cover images) with 23 fully bundled HyperFrames templates
imported from nexu-io/html-video, so both the in-app Plugins home and the
marketing site's /plugins/templates/hyperframes/ show real, renderable,
visually distinct templates with hover-autoplay motion previews.

Added (plugins/_official/video-templates/<slug>/):
- open-design.json — od.surface "hyperframes" (HyperFrames artifact type),
  en + zh-CN title/description, inputs, and jsDelivr-hosted preview assets.
- template.json — client card metadata.
- SKILL.md — how to repaint and render the composition.
- source/ — the HTML+CSS+GSAP (or Remotion) composition, verbatim.
- preview.mp4 — a looping motion preview rendered with the html-video
  HyperFrames renderer, trimmed to the full animation length (cards
  hover-autoplay from frame 0, detail page plays it); each under the 1 MiB
  blob limit. 21 of 23 ship a video; frame-logo-outro (a held logo) and
  frame-data-rollup (Remotion, blank native render) ship a still poster.
- preview.png — poster frame extracted from that render.

Landing-page tweaks:
- Hide the two cover-less examples/{hyperframes,video-hyperframes} onboarding
  scenarios from the public template library (feature demos, not templates).
- Point the "use this" CTAs (template card + plugin detail) at the desktop
  download page instead of the detail page / GitHub releases.
- Hover-autoplay restarts each preview from frame 0 so the full animation
  plays on every hover instead of resuming mid-loop.
- SEO: keyword-led <title> ("HyperFrames templates & skills …") and a
  rewritten, keyword-rich category description (all 18 locales) to target
  "hyperframes template" / "hyperframes skill" search intent.

Removed the 11 source-less hyperframes-* HeyGen catalog stubs. Licensing is
mirrored faithfully per upstream and summarised in HYPERFRAMES-ATTRIBUTIONS.md:
8 Apache-2.0 forks of heygen-com/hyperframes, 1 MIT from
nateherkai/hyperframes-student-kit, 7 original Apache-2.0, and 7 derived from
MIT design skills (frontend-slides, huashu-design) with studio inspiration
recorded as non-affiliated L1 origin.

Registry seed nets +12 entries (402 -> 414); bundledPreinstallCount updated.

* fix(plugins): self-contain hyperframes templates + narrow aspect options

Address review on the HyperFrames import:
- Narrow each fixed-layout (1920×1080) hyperframes manifest's
  od.inputs.aspect.options to the single aspect its template.json actually
  ships (e.g. frame-vignelli is 9:16, the rest 16:9), so the picker/agent
  can't request portrait/square renders the composition can't produce.
  frame-data-rollup (responsive Remotion, layout computed off canvas size)
  keeps 16:9/9:16/1:1.
- frame-kinetic-type: drop the external 9 MB S3 A-roll video from
  source/compositions/main-graphics.html. The timeline sets that layer to
  opacity:0 at t=0 and never reveals it, so it was never visible; replacing
  it with an empty self-contained layer keeps the render identical (verified)
  and removes the only third-party runtime media dependency. Re-rendered its
  preview from the vendored source.

* fix(plugins): vendor all runtime assets so hyperframes templates are self-contained

Make every bundled HyperFrames template render with no third-party network
dependency, per review and per each template's own SKILL.md "keep the
composition self-contained under source/" contract:

- GSAP: vendor gsap@3.14.2 into each template's source/ and rewrite the
  jsDelivr <script src> to a relative path (9 templates).
- Google Fonts: fetch each family's woff2, ship them under source/fonts/,
  inline a local @font-face fonts.css, and drop the googleapis <link>/@import
  (20 templates). CJK families (Noto Sans/Serif SC) are intentionally not
  vendored — they exceed the 1 MiB blob limit; their placeholder sample text
  falls back to the OS CJK font, keeping the source dependency-free.
- Tailwind: replace the cdn.tailwindcss.com JIT script with a static
  tailwind.css built from the classes each template actually uses (6).
- Textures/media: vendor the remaining external texture (warm-grain) and copy
  the previously-missing local assets/ (screenshots, audio, swiss-grid.svg)
  into frame-product-promo, frame-product-promo-30s, frame-swiss-grid.
- od.context.assets now stages ./template.json + ./source so the renderer
  materializes the full bundle.

All vendored files are under the 1 MiB blob limit. Re-rendered the six
templates whose output could shift (Tailwind static build + CJK fallback);
verified renders are visually intact. Final audit: zero external CDN/http
asset references across all 23 template sources.

* fix(plugins): inline vendored GSAP + enrich plugin detail SEO

- Inline the vendored GSAP runtime directly into each template's index.html
  instead of shipping gsap.min.js, so no new committed `.js` files trip the
  repository-layout guard (`scripts/guard.ts` residual-JS policy). Compositions
  use the global `gsap` the inlined runtime defines. Templates stay fully
  self-contained; re-rendered frame-kinetic-type / frame-swiss-grid to confirm
  motion is intact.
- Plugin detail pages now lead their <title> and meta description with the
  artifact type + brand keywords — "<HyperFrames video template> · Open Design"
  and "... for Open Design — the open-source Claude Design alternative" — so
  each detail page ranks for "hyperframes template", "Open Design", and
  "open source Claude Design alternative".

* fix(plugins): replace placeholder screenshots in frame-product-promo-30s

The product-surfaces scene referenced source/assets/screenshot-{1,2,3}.png,
which were 67-byte 1×1 placeholder PNGs carried over from the upstream
template, so a render of that scene showed blank laptop screens. Replace them
with three self-contained 1440×900 dashboard mockups (distinct Plan/Build/
Monitor accents) so the bundled source renders usable product surfaces, and
re-render the preview. All three are well under the 1 MiB blob limit.

* fix(plugins): give frame-logo-outro a motion preview like the rest

frame-logo-outro shipped as an image-only preview, so it was the one new
HyperFrames template without hover-autoplay / detail playback. Re-render it
from its (now self-contained) source as a short looping logo-reveal MP4 and
switch its manifest to previewType "video", matching the other 22. 72 KB,
under the 1 MiB blob limit. (frame-data-rollup remains a still poster — its
Remotion native render comes out blank; tracked as a follow-up.)

* fix(landing): keep plugin detail lead localized, SEO suffix meta-only

The keyword-rich English SEO suffix was appended to `description`, which is
both the <meta description> and the visible <p class="lead">, so non-English
plugin detail pages rendered mixed-language body copy. Split it: `description`
stays the fully-localized lead, and a separate `seoDescription` carries the
English brand/keyword suffix for <Layout description> + JSON-LD only.

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>
2026-06-11 09:17:17 +00:00
..