mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
James RussoandClaude Opus 4.7
4ae5c0340f
Move all preview mp4/png/gif assets under docs/images/ out of the repo and serve them from https://static.heygen.ai/hyperframes-oss/docs/images/ (backed by s3://heygen-public/hyperframes-oss/docs/images/, CloudFront). Drops ~49MB from the working tree and, more importantly, ~49MB from every future Mintlify build checkout. Combined with the (already-LFS-tracked) producer snapshots, the remaining bloat in 'npx skills add heygen-com/ hyperframes' (see #300) is LFS smudge during clone — separate fix needed in the skills CLI to pass GIT_LFS_SKIP_SMUDGE=1. Changes: - Delete docs/images/** (103 files, ~49MB). Files are uploaded to S3 already. - Rewrite /images/* references in 44 MDX files, TemplateCard.jsx, and catalog-index.json to absolute CDN URLs. - Update README.md img src to CDN URL (renders correctly on GitHub). - Add docs/images/ to .gitignore so regenerated previews aren't committed. - Add scripts/upload-docs-images.sh to sync docs/images/ → S3 after running the preview generators. - Wire up bun run upload:docs-images and bun run generate:catalog-previews scripts in package.json. - Update generator script docstrings to point at the upload step. External contributors can still regenerate previews locally (mintlify dev reads the CDN URLs, so broken previews appear only for newly added items pending a maintainer upload). Maintainers run: bun run generate:catalog-previews --only <name> bun run upload:docs-images Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
525 lines
16 KiB
JSON
525 lines
16 KiB
JSON
[
|
|
{
|
|
"name": "app-showcase",
|
|
"type": "block",
|
|
"title": "App Showcase",
|
|
"description": "Fitness app product showcase with three floating smartphone screens",
|
|
"tags": [
|
|
"showcase",
|
|
"app",
|
|
"3d"
|
|
],
|
|
"href": "/catalog/blocks/app-showcase",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
|
|
},
|
|
{
|
|
"name": "chromatic-radial-split",
|
|
"type": "block",
|
|
"title": "Chromatic Radial Split",
|
|
"description": "Shader transition with chromatic aberration radial split",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/chromatic-radial-split",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
|
|
},
|
|
{
|
|
"name": "cinematic-zoom",
|
|
"type": "block",
|
|
"title": "Cinematic Zoom",
|
|
"description": "Shader transition with dramatic zoom blur",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/cinematic-zoom",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
|
|
},
|
|
{
|
|
"name": "cross-warp-morph",
|
|
"type": "block",
|
|
"title": "Cross Warp Morph",
|
|
"description": "Shader transition with cross-warped morphing",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/cross-warp-morph",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
|
|
},
|
|
{
|
|
"name": "data-chart",
|
|
"type": "block",
|
|
"title": "Data Chart",
|
|
"description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
|
|
"tags": [
|
|
"data",
|
|
"chart",
|
|
"statistics"
|
|
],
|
|
"href": "/catalog/blocks/data-chart",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
|
|
},
|
|
{
|
|
"name": "domain-warp-dissolve",
|
|
"type": "block",
|
|
"title": "Domain Warp Dissolve",
|
|
"description": "Shader transition with fractal noise domain warping",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/domain-warp-dissolve",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
|
|
},
|
|
{
|
|
"name": "flash-through-white",
|
|
"type": "block",
|
|
"title": "Flash Through White",
|
|
"description": "Shader transition with white flash crossfade",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/flash-through-white",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
|
|
},
|
|
{
|
|
"name": "flowchart",
|
|
"type": "block",
|
|
"title": "Flowchart",
|
|
"description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
|
|
"tags": [
|
|
"diagram",
|
|
"flowchart",
|
|
"interactive"
|
|
],
|
|
"href": "/catalog/blocks/flowchart",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
|
|
},
|
|
{
|
|
"name": "glitch",
|
|
"type": "block",
|
|
"title": "Glitch",
|
|
"description": "Shader transition with digital glitch artifacts",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/glitch",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
|
|
},
|
|
{
|
|
"name": "grain-overlay",
|
|
"type": "component",
|
|
"title": "Grain Overlay",
|
|
"description": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
|
|
"tags": [
|
|
"texture",
|
|
"grain",
|
|
"overlay",
|
|
"film"
|
|
],
|
|
"href": "/catalog/components/grain-overlay",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
|
|
},
|
|
{
|
|
"name": "gravitational-lens",
|
|
"type": "block",
|
|
"title": "Gravitational Lens",
|
|
"description": "Shader transition with gravitational lensing distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/gravitational-lens",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
|
|
},
|
|
{
|
|
"name": "grid-pixelate-wipe",
|
|
"type": "component",
|
|
"title": "Grid Pixelate Wipe",
|
|
"description": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes",
|
|
"tags": [
|
|
"transition",
|
|
"wipe",
|
|
"grid",
|
|
"pixelate"
|
|
],
|
|
"href": "/catalog/components/grid-pixelate-wipe",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
|
|
},
|
|
{
|
|
"name": "instagram-follow",
|
|
"type": "block",
|
|
"title": "Instagram Follow",
|
|
"description": "Animated Instagram follow overlay with profile card and follow button",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"instagram"
|
|
],
|
|
"href": "/catalog/blocks/instagram-follow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
|
|
},
|
|
{
|
|
"name": "light-leak",
|
|
"type": "block",
|
|
"title": "Light Leak",
|
|
"description": "Shader transition with cinematic light leak overlay",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/light-leak",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
|
|
},
|
|
{
|
|
"name": "logo-outro",
|
|
"type": "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"
|
|
],
|
|
"href": "/catalog/blocks/logo-outro",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
|
|
},
|
|
{
|
|
"name": "macos-notification",
|
|
"type": "block",
|
|
"title": "macOS Notification",
|
|
"description": "Animated macOS-style notification banner with app icon and message",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"notification"
|
|
],
|
|
"href": "/catalog/blocks/macos-notification",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
|
|
},
|
|
{
|
|
"name": "reddit-post",
|
|
"type": "block",
|
|
"title": "Reddit Post Card",
|
|
"description": "Animated Reddit post card overlay with upvotes and comments",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"reddit"
|
|
],
|
|
"href": "/catalog/blocks/reddit-post",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
|
|
},
|
|
{
|
|
"name": "ridged-burn",
|
|
"type": "block",
|
|
"title": "Ridged Burn",
|
|
"description": "Shader transition with ridged turbulence burn effect",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/ridged-burn",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
|
|
},
|
|
{
|
|
"name": "ripple-waves",
|
|
"type": "block",
|
|
"title": "Ripple Waves",
|
|
"description": "Shader transition with concentric ripple wave distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/ripple-waves",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
|
|
},
|
|
{
|
|
"name": "sdf-iris",
|
|
"type": "block",
|
|
"title": "SDF Iris",
|
|
"description": "Shader transition with signed distance field iris reveal",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/sdf-iris",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
|
|
},
|
|
{
|
|
"name": "shimmer-sweep",
|
|
"type": "component",
|
|
"title": "Shimmer Sweep",
|
|
"description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
|
|
"tags": [
|
|
"text",
|
|
"shimmer",
|
|
"highlight",
|
|
"effect"
|
|
],
|
|
"href": "/catalog/components/shimmer-sweep",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
|
|
},
|
|
{
|
|
"name": "spotify-card",
|
|
"type": "block",
|
|
"title": "Spotify Now Playing",
|
|
"description": "Animated Spotify now-playing card with album art and progress bar",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"spotify"
|
|
],
|
|
"href": "/catalog/blocks/spotify-card",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
|
|
},
|
|
{
|
|
"name": "swirl-vortex",
|
|
"type": "block",
|
|
"title": "Swirl Vortex",
|
|
"description": "Shader transition with swirling vortex distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/swirl-vortex",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
|
|
},
|
|
{
|
|
"name": "thermal-distortion",
|
|
"type": "block",
|
|
"title": "Thermal Distortion",
|
|
"description": "Shader transition with heat haze thermal distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/thermal-distortion",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
|
|
},
|
|
{
|
|
"name": "tiktok-follow",
|
|
"type": "block",
|
|
"title": "TikTok Follow",
|
|
"description": "Animated TikTok follow overlay with profile card and follow button",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"tiktok"
|
|
],
|
|
"href": "/catalog/blocks/tiktok-follow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
|
|
},
|
|
{
|
|
"name": "transitions-3d",
|
|
"type": "block",
|
|
"title": "3D Transitions",
|
|
"description": "Showcase of 3D perspective flip and rotate transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-3d",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
|
|
},
|
|
{
|
|
"name": "transitions-blur",
|
|
"type": "block",
|
|
"title": "Blur Transitions",
|
|
"description": "Showcase of blur-based transitions between scenes",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-blur",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
|
|
},
|
|
{
|
|
"name": "transitions-cover",
|
|
"type": "block",
|
|
"title": "Cover Transitions",
|
|
"description": "Showcase of cover/uncover slide transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-cover",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
|
|
},
|
|
{
|
|
"name": "transitions-destruction",
|
|
"type": "block",
|
|
"title": "Destruction Transitions",
|
|
"description": "Showcase of destructive break-apart transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-destruction",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
|
|
},
|
|
{
|
|
"name": "transitions-dissolve",
|
|
"type": "block",
|
|
"title": "Dissolve Transitions",
|
|
"description": "Showcase of dissolve and fade transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-dissolve",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
|
|
},
|
|
{
|
|
"name": "transitions-distortion",
|
|
"type": "block",
|
|
"title": "Distortion Transitions",
|
|
"description": "Showcase of warp and distortion transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-distortion",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
|
|
},
|
|
{
|
|
"name": "transitions-grid",
|
|
"type": "block",
|
|
"title": "Grid Transitions",
|
|
"description": "Showcase of grid-based tile transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-grid",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
|
|
},
|
|
{
|
|
"name": "transitions-light",
|
|
"type": "block",
|
|
"title": "Light Transitions",
|
|
"description": "Showcase of light-based glow and flash transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-light",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
|
|
},
|
|
{
|
|
"name": "transitions-mechanical",
|
|
"type": "block",
|
|
"title": "Mechanical Transitions",
|
|
"description": "Showcase of mechanical shutter and iris transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-mechanical",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
|
|
},
|
|
{
|
|
"name": "transitions-other",
|
|
"type": "block",
|
|
"title": "Other Transitions",
|
|
"description": "Showcase of miscellaneous creative transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-other",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
|
|
},
|
|
{
|
|
"name": "transitions-push",
|
|
"type": "block",
|
|
"title": "Push Transitions",
|
|
"description": "Showcase of push and slide transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-push",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
|
|
},
|
|
{
|
|
"name": "transitions-radial",
|
|
"type": "block",
|
|
"title": "Radial Transitions",
|
|
"description": "Showcase of radial wipe and reveal transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-radial",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
|
|
},
|
|
{
|
|
"name": "transitions-scale",
|
|
"type": "block",
|
|
"title": "Scale Transitions",
|
|
"description": "Showcase of scale and zoom transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-scale",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
|
|
},
|
|
{
|
|
"name": "ui-3d-reveal",
|
|
"type": "block",
|
|
"title": "3D UI Reveal",
|
|
"description": "Perspective 3D reveal animation for UI elements",
|
|
"tags": [
|
|
"showcase",
|
|
"3d",
|
|
"reveal"
|
|
],
|
|
"href": "/catalog/blocks/ui-3d-reveal",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
|
|
},
|
|
{
|
|
"name": "whip-pan",
|
|
"type": "block",
|
|
"title": "Whip Pan",
|
|
"description": "Shader transition simulating a fast camera whip pan",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/whip-pan",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
|
|
},
|
|
{
|
|
"name": "x-post",
|
|
"type": "block",
|
|
"title": "X Post Card",
|
|
"description": "Animated X/Twitter post card overlay with engagement metrics",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"twitter"
|
|
],
|
|
"href": "/catalog/blocks/x-post",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
|
|
},
|
|
{
|
|
"name": "yt-lower-third",
|
|
"type": "block",
|
|
"title": "YouTube Lower Third",
|
|
"description": "Animated YouTube subscribe lower third with avatar and channel info",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"youtube"
|
|
],
|
|
"href": "/catalog/blocks/yt-lower-third",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
|
|
}
|
|
]
|