diff --git a/registry/blocks/ai-answer-rank/TEMPLATE.md b/registry/blocks/ai-answer-rank/TEMPLATE.md new file mode 100644 index 0000000000..8075e52921 --- /dev/null +++ b/registry/blocks/ai-answer-rank/TEMPLATE.md @@ -0,0 +1,24 @@ +# AI Answer Rank editing contract + +## Surface ownership + +This is a generic assistant answer card, not any real AI product. The website brand is the subject of the ranking: the `brand` slot carries its real name, and the re-rank moves it into the answer with the one accent highlight. The other picks are competitors, never the brand itself. The chat card and motion remain template-owned. + +## Editable slots + +Only defaults declared in `data-composition-variables` are editable: + +- `prompt` and `lead` +- `rowA`, `rowB`, and `rowC`, the original picks +- `brand` and `brandRank`, the slot the brand lands in +- `accent`, `ink`, and `ground` + +Typed copy is length-locked to within 20% of the original. Pick and brand names stay short enough to fit one row. + +## Safe editing mechanics + +Call `set_template_variable_defaults` once with the existing variable ids and their new defaults. Do not directly edit or rewrite `index.html` or its `data-composition-variables` attribute; the imported declaration is HTML-entity-encoded JSON and the setter preserves that encoding. Never edit `__template_baseline__.html` or a duplicate composition file. Validate after the setter succeeds. + +## Protected + +Do not change the card chrome, monogram tiles, skeleton rules, layout, fonts, scene order, duration, timing, easing, typing cadence, or re-rank logic. Website colors may only reach the declared `accent`, `ink`, and `ground` slots; keep `ink` legible on `ground`. If a requested value has no declared variable, leave it unchanged. diff --git a/registry/blocks/ai-answer-rank/ai-answer-rank.html b/registry/blocks/ai-answer-rank/ai-answer-rank.html new file mode 100644 index 0000000000..c3b56fc076 --- /dev/null +++ b/registry/blocks/ai-answer-rank/ai-answer-rank.html @@ -0,0 +1,559 @@ + + + + + + + AI Answer Rank + + + + +
+
+
+
+ What's the best CRM for a small team? +
+
+ +
+
+
+
+
+
+
+ + Here are the top picks: +
+ +
+
1
+
2
+
3
+ +
+
BA
+
+
Brand A
+
+
+
+
+
BB
+
+
Brand B
+
+
+
+
+
BC
+
+
Brand C
+
+
+
+ +
+
+
+
+ YB +
+
+
Your brand
+
+
+ +
+
+
+
+
+
+ + + + diff --git a/registry/blocks/ai-answer-rank/registry-item.json b/registry/blocks/ai-answer-rank/registry-item.json new file mode 100644 index 0000000000..f2847f71d3 --- /dev/null +++ b/registry/blocks/ai-answer-rank/registry-item.json @@ -0,0 +1,127 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "ai-answer-rank", + "type": "hyperframes:block", + "title": "AI Answer Rank", + "description": "Is your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three picks, then re-ranks: the promoted brand slides into its slot, the picks below step down, and the brand row lands with the one accent highlight and a check. For answer-engine and AI-visibility marketing", + "tags": ["mock-ui", "ai", "chat", "ranking", "list", "marketing", "ad-template", "square"], + "author": "Tugra Avci", + "dimensions": { + "width": 1080, + "height": 1080 + }, + "duration": 9, + "variables": [ + { + "id": "prompt", + "type": "string", + "role": "content", + "label": "Prompt", + "description": "The question typed into the user bubble. Up to about 60 characters keeps it on one or two lines.", + "default": "What's the best CRM for a small team?" + }, + { + "id": "lead", + "type": "string", + "role": "content", + "label": "Answer lead-in", + "description": "The assistant line above the ranked list.", + "default": "Here are the top picks:" + }, + { + "id": "rowA", + "type": "string", + "role": "content", + "label": "Pick 1", + "description": "First pick in the original answer: a product other than the brand this video promotes.", + "portrays": ["competitor_name"], + "default": "Brand A" + }, + { + "id": "rowB", + "type": "string", + "role": "content", + "label": "Pick 2", + "description": "Second pick in the original answer: a product other than the brand this video promotes.", + "portrays": ["competitor_name"], + "default": "Brand B" + }, + { + "id": "rowC", + "type": "string", + "role": "content", + "label": "Pick 3", + "description": "Third pick in the original answer. It drops out of the top three when the brand lands.", + "portrays": ["competitor_name"], + "default": "Brand C" + }, + { + "id": "brand", + "type": "string", + "role": "content", + "label": "Brand", + "description": "The brand this video promotes, by its real name. It slides into the answer and takes the highlight.", + "portrays": ["subject_name"], + "default": "Your brand" + }, + { + "id": "brandRank", + "type": "enum", + "role": "content", + "label": "Brand rank", + "description": "The slot the brand lands in. Picks at and below it step down one place.", + "portrays": ["recommended_position"], + "default": "1", + "options": [ + { + "value": "1", + "label": "1st" + }, + { + "value": "2", + "label": "2nd" + }, + { + "value": "3", + "label": "3rd" + } + ] + }, + { + "id": "accent", + "type": "color", + "role": "style", + "label": "Accent", + "description": "Highlight, monogram and check on the brand row, the one accent element.", + "default": "#16a34a" + }, + { + "id": "ink", + "type": "color", + "role": "style", + "label": "Ink", + "description": "Text colour; every placeholder surface is this ink at an alpha step.", + "default": "#18181b" + }, + { + "id": "ground", + "type": "color", + "role": "style", + "label": "Ground", + "description": "Chat card surface; the page around it is the ground tinted toward the ink.", + "default": "#fcfcfb" + } + ], + "files": [ + { + "path": "ai-answer-rank.html", + "target": "compositions/ai-answer-rank.html", + "type": "hyperframes:composition" + }, + { + "path": "TEMPLATE.md", + "target": "TEMPLATE.md", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/blocks/cinemagraph/cinemagraph.html b/registry/blocks/cinemagraph/cinemagraph.html new file mode 100644 index 0000000000..7c806933ba --- /dev/null +++ b/registry/blocks/cinemagraph/cinemagraph.html @@ -0,0 +1,298 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + diff --git a/registry/blocks/cinemagraph/registry-item.json b/registry/blocks/cinemagraph/registry-item.json new file mode 100644 index 0000000000..caf4c00dfe --- /dev/null +++ b/registry/blocks/cinemagraph/registry-item.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "cinemagraph", + "type": "hyperframes:block", + "title": "Cinemagraph", + "description": "A still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, steam rising over a cup - drawn from the seek time alone with a period that divides the duration, so the render loops seamlessly. Swap the placeholder scene for a freeze-frame still masked over a looping video to cinemagraph real footage.", + "dimensions": { "width": 1920, "height": 1080 }, + "duration": 10, + "tags": ["effect", "cinemagraph", "photo", "loop", "freeze-frame"], + "files": [ + { + "path": "cinemagraph.html", + "target": "compositions/cinemagraph.html", + "type": "hyperframes:composition" + } + ] +} diff --git a/registry/components/caret-swap/Geist-Latin.woff2 b/registry/components/caret-swap/Geist-Latin.woff2 new file mode 100644 index 0000000000..991445d78a Binary files /dev/null and b/registry/components/caret-swap/Geist-Latin.woff2 differ diff --git a/registry/components/caret-swap/Geist-OFL.txt b/registry/components/caret-swap/Geist-OFL.txt new file mode 100644 index 0000000000..61f6f4b785 --- /dev/null +++ b/registry/components/caret-swap/Geist-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file diff --git a/registry/components/caret-swap/caret-swap.html b/registry/components/caret-swap/caret-swap.html new file mode 100644 index 0000000000..251d1b4f8f --- /dev/null +++ b/registry/components/caret-swap/caret-swap.html @@ -0,0 +1,355 @@ + + + + + + Caret Swap + + + + + diff --git a/registry/components/caret-swap/demo.html b/registry/components/caret-swap/demo.html new file mode 100644 index 0000000000..634bf5225b --- /dev/null +++ b/registry/components/caret-swap/demo.html @@ -0,0 +1,71 @@ + + + + + + + Caret Swap Demo + + + +
+
+
+
+ + + + diff --git a/registry/components/caret-swap/registry-item.json b/registry/components/caret-swap/registry-item.json new file mode 100644 index 0000000000..112078f43d --- /dev/null +++ b/registry/components/caret-swap/registry-item.json @@ -0,0 +1,119 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "caret-swap", + "type": "hyperframes:component", + "title": "Caret Swap", + "description": "A gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret.", + "tags": ["motion-primitive", "text-effects", "typography", "swap", "typewriter", "remocn-port"], + "jobs": ["emphasize"], + "family": "text-effects", + "profile": "caret-swap", + "author": "Remocn", + "authorUrl": "https://github.com/Remocn/remocn", + "license": "MIT AND OFL-1.1", + "syncPoints": [ + { + "id": "wipe-start", + "phase": "in", + "offset": 0.6666666666666666, + "description": "The caret starts covering the first phrase in the default 100-frame demo. Shorter hosts compress the phases together." + } + ], + "files": [ + { + "path": "caret-swap.html", + "target": "compositions/components/caret-swap/caret-swap.html", + "type": "hyperframes:snippet" + }, + { + "path": "Geist-Latin.woff2", + "target": "compositions/components/caret-swap/Geist-Latin.woff2", + "type": "hyperframes:asset" + }, + { + "path": "Geist-OFL.txt", + "target": "compositions/components/caret-swap/Geist-OFL.txt", + "type": "hyperframes:asset" + } + ], + "variables": [ + { + "id": "from_text", + "type": "string", + "role": "content", + "label": "From text", + "description": "The phrase covered by the expanding caret.", + "default": "Executing it?" + }, + { + "id": "to_text", + "type": "string", + "role": "content", + "label": "To text", + "description": "The replacement phrase, typed one character at a time.", + "default": "That's where everyone quits" + }, + { + "id": "font_size", + "type": "number", + "role": "style", + "label": "Font size", + "description": "Maximum size in pixels. Both phrases shrink together to fit the host.", + "default": 72, + "min": 36, + "max": 160, + "step": 2, + "unit": "px" + }, + { + "id": "font_weight", + "type": "enum", + "role": "style", + "label": "Font weight", + "description": "Weight used by both phrases. Every option is included in the bundled Geist font.", + "default": "400", + "options": [ + { + "value": "400", + "label": "Regular" + }, + { + "value": "500", + "label": "Medium" + }, + { + "value": "600", + "label": "Semibold" + }, + { + "value": "700", + "label": "Bold" + } + ] + }, + { + "id": "color", + "type": "color", + "role": "style", + "label": "Text color", + "description": "Color of both phrases.", + "default": "#171717" + }, + { + "id": "caret_color", + "type": "color", + "role": "style", + "label": "Caret top", + "description": "Top color of the caret gradient.", + "default": "#FF4DAA" + }, + { + "id": "caret_color_end", + "type": "color", + "role": "style", + "label": "Caret bottom", + "description": "Bottom color of the caret gradient.", + "default": "#8A5CF6" + } + ] +} diff --git a/registry/components/pendulum-swing/demo.html b/registry/components/pendulum-swing/demo.html new file mode 100644 index 0000000000..6373b8a08b --- /dev/null +++ b/registry/components/pendulum-swing/demo.html @@ -0,0 +1,181 @@ + + + + + + Pendulum Swing - Demo + + + + +
+
Pendulum Swing
+
+
+
+
+ Hanging Sign +
+
+
+ + +
+ + diff --git a/registry/components/pendulum-swing/pendulum-swing.html b/registry/components/pendulum-swing/pendulum-swing.html new file mode 100644 index 0000000000..0592076326 --- /dev/null +++ b/registry/components/pendulum-swing/pendulum-swing.html @@ -0,0 +1,130 @@ + + +
+ Hanging Sign +
+ + + + + + diff --git a/registry/components/pendulum-swing/registry-item.json b/registry/components/pendulum-swing/registry-item.json new file mode 100644 index 0000000000..508c0de2f4 --- /dev/null +++ b/registry/components/pendulum-swing/registry-item.json @@ -0,0 +1,71 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "pendulum-swing", + "type": "hyperframes:component", + "title": "Pendulum Swing", + "description": "Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook.", + "tags": ["motion-primitive", "physics", "swing", "settle", "reveal"], + "files": [ + { + "path": "pendulum-swing.html", + "target": "compositions/components/pendulum-swing.html", + "type": "hyperframes:snippet" + } + ], + "variables": [ + { + "id": "pivot", + "type": "enum", + "role": "layout", + "label": "Pivot", + "description": "Where the content hangs from. The swing rotates about this point, so the top edge stays pinned.", + "default": "top-center", + "options": [ + { "value": "top-center", "label": "Top center" }, + { "value": "top-left", "label": "Top left" }, + { "value": "top-right", "label": "Top right" } + ] + }, + { + "id": "amplitude", + "type": "enum", + "role": "motion", + "label": "Amplitude", + "description": "How far the first swing reaches before it settles. Every later swing scales with it, so the pendulum still comes to rest upright.", + "default": "standard", + "options": [ + { "value": "gentle", "label": "Gentle" }, + { "value": "standard", "label": "Standard" }, + { "value": "wide", "label": "Wide" } + ] + }, + { + "id": "direction", + "type": "enum", + "role": "motion", + "label": "Direction", + "description": "Which side the pendulum swings in from: right lifts the first swing clockwise, left mirrors it.", + "default": "right", + "options": [ + { "value": "right", "label": "Right" }, + { "value": "left", "label": "Left" } + ] + }, + { + "id": "tone", + "type": "enum", + "role": "style", + "label": "Tone", + "description": "Content colour: ink for light frames, paper for dark ones, accent rides --brand.", + "default": "ink", + "options": [ + { "value": "ink", "label": "Ink" }, + { "value": "paper", "label": "Paper" }, + { "value": "accent", "label": "Accent" } + ] + } + ], + "preview": { + "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pendulum-swing.png" + } +} diff --git a/scripts/catalog/component-variables.ts b/scripts/catalog/component-variables.ts index a444e9ae53..7908fa721c 100644 --- a/scripts/catalog/component-variables.ts +++ b/scripts/catalog/component-variables.ts @@ -72,17 +72,14 @@ export function snippetOwnsItsMotion(snippetHtml: string): boolean { return live.includes("__timelines") && live.includes("gsap.timeline"); } -/** - * Components that register a timeline but still render a still frame when the - * preview is built from their snippet. - * - * Both were measured, not guessed: their previews moved before this change and - * were static after, while every other self-contained component kept moving. - * The cause is in the pieces themselves rather than in the rule, so they keep - * the preview they had. That leaves their panel inert, which is the state they - * were already in, rather than trading an inert panel for a frozen preview. - */ -export const SNIPPET_PREVIEW_RENDERS_STILL = new Set(["ascii-render-pass", "star-rating-fill"]); +/** Components whose authored stage is needed for a working preview. */ +export const PREFER_AUTHORED_DEMO = new Set([ + // Their snippets render still frames; keep the demos that supply their motion. + "ascii-render-pass", + "star-rating-fill", + // Dark text needs the demo's light canvas and its 1280 × 720 framing. + "caret-swap", +]); /** The classes the snippet hangs its declaration on, which its script targets. */ function declaringClasses(snippetHtml: string): string[] { diff --git a/scripts/generate-catalog-payloads.ts b/scripts/generate-catalog-payloads.ts index 38f6224848..690d05f3f8 100644 --- a/scripts/generate-catalog-payloads.ts +++ b/scripts/generate-catalog-payloads.ts @@ -37,10 +37,7 @@ import { import { isLocalAsset } from "./registry-hosted-assets.ts"; import { componentFiles } from "./catalog/component-files.ts"; import { runAsCommand } from "./entrypoint.ts"; -import { - snippetOwnsItsMotion, - SNIPPET_PREVIEW_RENDERS_STILL, -} from "./catalog/component-variables.ts"; +import { snippetOwnsItsMotion, PREFER_AUTHORED_DEMO } from "./catalog/component-variables.ts"; import { clearPinnedVariableValues, externalizeDataUris, @@ -164,8 +161,7 @@ function snippetFileFor(item: CatalogItem): string | null { function buildsFromSnippet(item: CatalogItem, snippetFile: string): boolean { return ( - snippetOwnsItsMotion(readFileSync(snippetFile, "utf-8")) && - !SNIPPET_PREVIEW_RENDERS_STILL.has(item.name) + snippetOwnsItsMotion(readFileSync(snippetFile, "utf-8")) && !PREFER_AUTHORED_DEMO.has(item.name) ); }