ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-15 22:08:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
feat/registry-loop-blocks
hyperframes/registry/blocks/loop-stack-2/registry-item.json
T
Miao YangandClaude Fable 5.1 44c43fd99f feat(registry): add 249 seamless image-loop blocks (95 motion families, 1:1) 
One block per loop variant (loop-<family>[-<n>], 1080x1080), one hand-written engine per family,
driven by a single paused GSAP timeline that recomputes every card transform from t. Every engine
parameter is exposed through data-composition-variables, grouped like a template editor's panel
(Media / Background / Appearance / Animation / Template options), plus image1..N content slots
that default to monochrome SVG placeholders. No third-party media ships.

Validation: scripts/lint-registry-items.mjs 249/249, oxfmt clean, hyperframes check on one variant
per family (95/95), registry.json + docs/catalog pages regenerated by the repo scripts. Previews are
rendered locally (720^2) and need the docs-images upload.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-09 18:40:32 +08:00

375 lines
15 KiB
JSON
Raw Permalink Blame History

{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "loop-stack-2",
"type": "hyperframes:block",
"title": "Loop Stack 2",
"description": "Image cards deal onto a receding stack. 8 image slots, 11s seamless loop, 1:1.",
"tags": ["loop", "images", "showcase", "gallery", "stack", "3d"],
"author": "Miao Yang",
"license": "Apache-2.0",
"dimensions": {
"width": 1080,
"height": 1080
},
"duration": 11,
"variables": [
{
"id": "mediaFit",
"type": "enum",
"role": "style",
"label": "Media · Fit",
"description": "Natural keeps each image's own ratio; Crop fills the card box at the media aspect below.",
"default": "natural",
"options": [
{
"value": "natural",
"label": "Natural (original ratio)"
},
{
"value": "crop",
"label": "Crop"
}
]
},
{
"id": "cropAspectRatio",
"type": "enum",
"role": "style",
"label": "Media · Aspect",
"description": "Card aspect used when Fit is Crop.",
"default": "1:1",
"options": [
{
"value": "16:9",
"label": "16:9"
},
{
"value": "9:16",
"label": "9:16"
},
{
"value": "1:1",
"label": "1:1"
},
{
"value": "4:5",
"label": "4:5"
},
{
"value": "3:2",
"label": "3:2"
},
{
"value": "3:4",
"label": "3:4"
},
{
"value": "2:3",
"label": "2:3"
}
]
},
{
"id": "backgroundType",
"type": "enum",
"role": "style",
"label": "Background · Type",
"description": "Gradient (start → end colours), flat Colour, or your own Image.",
"default": "gradient",
"options": [
{
"value": "gradient",
"label": "Gradient"
},
{
"value": "color",
"label": "Color"
},
{
"value": "image",
"label": "Image"
}
]
},
{
"id": "backgroundGradientStart",
"type": "color",
"role": "style",
"label": "Background · Gradient start",
"description": "Top colour of the gradient.",
"default": "#111111"
},
{
"id": "backgroundGradientEnd",
"type": "color",
"role": "style",
"label": "Background · Gradient end",
"description": "Bottom colour of the gradient.",
"default": "#444444"
},
{
"id": "backgroundColor",
"type": "color",
"role": "style",
"label": "Background · Color",
"description": "Flat colour when Type is Color; also the ground under an Image.",
"default": "#0b0b0f"
},
{
"id": "backgroundImage",
"type": "image",
"role": "style",
"label": "Background · Image",
"description": "Cover-fitted background when Type is Image.",
"portrays": ["background_image"],
"default": ""
},
{
"id": "blurAmount",
"type": "number",
"role": "style",
"label": "Background · Blur",
"description": "Blur on the background image, px.",
"default": 0,
"min": 0,
"max": 60,
"step": 1,
"unit": "px"
},
{
"id": "backgroundGradientNoise",
"type": "number",
"role": "style",
"label": "Background · Grain",
"description": "Film-grain overlay strength.",
"default": 0,
"min": 0,
"max": 100,
"step": 1,
"unit": "%"
},
{
"id": "backgroundOpacity",
"type": "number",
"role": "style",
"label": "Background · Opacity",
"description": "Opacity of the whole background layer (0 = transparent ground).",
"default": 1,
"min": 0,
"max": 1,
"step": 0.05
},
{
"id": "borderRadius",
"type": "number",
"role": "style",
"label": "Appearance · Border radius",
"description": "Card corner radius in px at 1080.",
"default": 0,
"min": 0,
"max": 200,
"step": 1,
"unit": "px"
},
{
"id": "cycles",
"type": "number",
"role": "style",
"label": "Animation · Cycles",
"description": "Number of motion cycles per loop.",
"default": 1,
"min": 0,
"max": 10,
"step": 0.1
},
{
"id": "stagger",
"type": "number",
"role": "style",
"label": "Animation · Stagger",
"description": "Stagger (engine parameter; see the block header comment).",
"default": 0.06666666666666667,
"min": 0,
"max": 2,
"step": 0.01
},
{
"id": "delay",
"type": "number",
"role": "style",
"label": "Animation · Delay",
"description": "Hold time between steps, seconds.",
"default": 0,
"min": 0,
"max": 2,
"step": 0.01,
"unit": "s"
},
{
"id": "direction",
"type": "enum",
"role": "style",
"label": "Animation · Direction",
"description": "Direction of travel.",
"default": "up",
"options": [
{
"value": "down",
"label": "Down"
},
{
"value": "up",
"label": "Up"
}
]
},
{
"id": "planeSize",
"type": "number",
"role": "style",
"label": "Template options · Media size",
"description": "Card size in scene units.",
"default": 38,
"min": 0,
"max": 76,
"step": 1
},
{
"id": "visible",
"type": "number",
"role": "style",
"label": "Template options · Visible",
"description": "Visible (engine parameter; see the block header comment).",
"default": 3,
"min": 0,
"max": 12,
"step": 0.1
},
{
"id": "perspective",
"type": "number",
"role": "style",
"label": "Template options · Perspective",
"description": "Camera focal length: smaller = stronger perspective.",
"default": 73,
"min": 0,
"max": 246,
"step": 10
},
{
"id": "zoom",
"type": "number",
"role": "style",
"label": "Template options · Zoom",
"description": "Zoom (engine parameter; see the block header comment).",
"default": 150,
"min": 0,
"max": 534,
"step": 10
},
{
"id": "offsetX",
"type": "number",
"role": "style",
"label": "Template options · Offset X",
"description": "Horizontal offset of the formation, % of width.",
"default": 0,
"min": -100,
"max": 100,
"step": 1,
"unit": "%"
},
{
"id": "offsetY",
"type": "number",
"role": "style",
"label": "Template options · Offset Y",
"description": "Vertical offset of the formation, % of height.",
"default": 2.5,
"min": -100,
"max": 100,
"step": 1,
"unit": "%"
},
{
"id": "image1",
"type": "image",
"role": "content",
"label": "Media · Image 1",
"description": "Image on card 1 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1400' height%3D'1050' viewBox%3D'0 0 1400 1050'%3E%3Crect width%3D'1400' height%3D'1050' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1400' height%3D'1050' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1396' height%3D'1046' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M252 778.05H621.6' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'16.5' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M286.65 778.05L379.05 662.55L471.45 778.05Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'552.3' cy%3D'674.1' r%3D'34.65' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image2",
"type": "image",
"role": "content",
"label": "Media · Image 2",
"description": "Image on card 2 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1400' height%3D'788' viewBox%3D'0 0 1400 788'%3E%3Crect width%3D'1400' height%3D'788' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1400' height%3D'788' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1396' height%3D'784' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M252 583.908H529.376' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'12.382857142857144' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M278.004 583.908L347.348 497.228L416.692 583.908Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'477.36800000000005' cy%3D'505.896' r%3D'26.004' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image3",
"type": "image",
"role": "content",
"label": "Media · Image 3",
"description": "Image on card 3 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1050' height%3D'1400' viewBox%3D'0 0 1050 1400'%3E%3Crect width%3D'1050' height%3D'1400' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1050' height%3D'1400' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1046' height%3D'1396' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M189 995.05H558.6' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'16.5' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M223.65 995.05L316.05 879.55L408.45 995.05Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'489.3' cy%3D'891.1' r%3D'34.65' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image4",
"type": "image",
"role": "content",
"label": "Media · Image 4",
"description": "Image on card 4 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1400' height%3D'1400' viewBox%3D'0 0 1400 1400'%3E%3Crect width%3D'1400' height%3D'1400' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1400' height%3D'1400' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1396' height%3D'1396' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M252 1037.4H744.8' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'22' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M298.2 1037.4L421.4 883.4L544.5999999999999 1037.4Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'652.4000000000001' cy%3D'898.8' r%3D'46.199999999999996' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image5",
"type": "image",
"role": "content",
"label": "Media · Image 5",
"description": "Image on card 5 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1400' height%3D'1050' viewBox%3D'0 0 1400 1050'%3E%3Crect width%3D'1400' height%3D'1050' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1400' height%3D'1050' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1396' height%3D'1046' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M252 778.05H621.6' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'16.5' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M286.65 778.05L379.05 662.55L471.45 778.05Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'552.3' cy%3D'674.1' r%3D'34.65' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image6",
"type": "image",
"role": "content",
"label": "Media · Image 6",
"description": "Image on card 6 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1400' height%3D'788' viewBox%3D'0 0 1400 788'%3E%3Crect width%3D'1400' height%3D'788' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1400' height%3D'788' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1396' height%3D'784' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M252 583.908H529.376' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'12.382857142857144' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M278.004 583.908L347.348 497.228L416.692 583.908Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'477.36800000000005' cy%3D'505.896' r%3D'26.004' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image7",
"type": "image",
"role": "content",
"label": "Media · Image 7",
"description": "Image on card 7 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1050' height%3D'1400' viewBox%3D'0 0 1050 1400'%3E%3Crect width%3D'1050' height%3D'1400' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1050' height%3D'1400' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1046' height%3D'1396' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M189 995.05H558.6' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'16.5' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M223.65 995.05L316.05 879.55L408.45 995.05Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'489.3' cy%3D'891.1' r%3D'34.65' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
},
{
"id": "image8",
"type": "image",
"role": "content",
"label": "Media · Image 8",
"description": "Image on card 8 of 8. Any aspect; fitted per mediaFit.",
"portrays": ["subject_image"],
"default": "data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1400' height%3D'1400' viewBox%3D'0 0 1400 1400'%3E%3Crect width%3D'1400' height%3D'1400' fill%3D'%230b0b0f'%2F%3E%3Crect width%3D'1400' height%3D'1400' fill%3D'rgba(255%2C255%2C255%2C0.18)'%2F%3E%3Crect x%3D'2' y%3D'2' width%3D'1396' height%3D'1396' fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.14)' stroke-width%3D'4'%2F%3E%3Cpath d%3D'M252 1037.4H744.8' stroke%3D'rgba(255%2C255%2C255%2C0.45)' stroke-width%3D'22' stroke-linecap%3D'round'%2F%3E%3Cpath d%3D'M298.2 1037.4L421.4 883.4L544.5999999999999 1037.4Z' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3Ccircle cx%3D'652.4000000000001' cy%3D'898.8' r%3D'46.199999999999996' fill%3D'rgba(255%2C255%2C255%2C0.45)'%2F%3E%3C%2Fsvg%3E"
}
],
"files": [
{
"path": "loop-stack-2.html",
"target": "compositions/loop-stack-2.html",
"type": "hyperframes:composition"
}
]
}
Reference in New Issue View Git Blame Copy Permalink