【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesA HyperFrames video composition. Plain HTML GSAP; rendered to MP4 by thehyperframesCLI.RequirementsNode.js 22-- nodejs.orgFFmpeg--brew install ffmpeg(macOS) orsudo apt install ffmpeg(Debian/Ubuntu) or ffmpeg.org/download (Windows)Verify:npx hyperframes doctorPreviewnpx hyperframes previewOpens the HyperFrames Studio athttp://localhost:3002with frame-accurate scrubbing.Refine with Claude CodeThis project was drafted in Claude Design. To polish animations, timing, and pacing:npx skills add heygen-com/hyperframes # install HyperFrames skills (one-time) npx hyperframes lint # verify structure (should pass with zero errors) npx hyperframes preview # open the studio for live feedbackThen open in Claude Code and iterate:Make scene 3s entrance snappierAdd a counter animation to the stat in scene 5Tighten the pacing -- scenes 4 and 6 feel too longChange the shader on transition 3 to glitchRenderRun from the project directory (the folder containingindex.html). The positional argument is the project directory, not a file, so pass a specific composition with-crather than as a bare path.npx hyperframes render -o output.mp41920x1080 / 30fps by default. Use--fps 60or--resolution 4kto override.这里的命令用法在 CLI 源码中得到印证[packages/cli/src/commands/render.ts](https://link.gitcode.com/i/0a761c599dac365543dfa095fb1a3765) 中 composition 参数-c的说明明确指出位置参数是项目目录而非文件指定具体合成请用 -c 而非裸路径--resolution 4k通过 Chrome DPR 超采样、--fps 60 等都在该命令的示例列表中。预览端口 3002 对应 [packages/cli/src/commands/preview.ts](https://link.gitcode.com/i/b7ec2180d6d66686e3f45daee97969df) 的 Studio 服务npx hyperframes lint 对应 [packages/cli/src/commands/lint.ts](https://link.gitcode.com/i/e21d188f44ce4e8f9798ba56a8362e0a)它遍历项目的全部合成并输出 findings。 ### Skeleton A —— 社交 Reel1080x192015s6 场景 转场方案s1→s2 硬切、s2→s3 硬切、**s3→s4 SHADER**hero 揭示、s4→s5 硬切、s5→s6 硬切。中点处一个 shader。 html !doctype html html langen head meta charsetUTF-8 / meta nameviewport contentwidth1080, height1920 / script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script srchttps://cdn.jsdelivr.net/npm/hyperframes/core/dist/hyperframe.runtime.iife.js/script script srchttps://cdn.jsdelivr.net/npm/hyperframes/shader-transitions/dist/index.global.js/script link relpreconnect hrefhttps://fonts.googleapis.com / link relpreconnect hrefhttps://fonts.gstatic.com crossorigin / !-- FILL: Google Fonts link for your chosen typefaces -- link hrefhttps://fonts.googleapis.com/css2?familySpaceGrotesk:wght300;500;700familyJetBrainsMono:wght400displayswap relstylesheet / style :root { /* FILL: Your brand identity */ --bg: #0a0a0d; --ink: #f5f5f7; --accent: #7c6cff; --muted: #5a6270; --accent-dim: #3d3680; --font-display: Space Grotesk, sans-serif; --font-data: JetBrains Mono, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1080px; height: 1920px; overflow: hidden; background: var(--bg); color: var(--ink); } .scene { position: absolute; top: 0; left: 0; width: 1080px; height: 1920px; overflow: hidden; } .scene-content { width: 100%; height: 100%; padding: 120px 80px; display: flex; flex-direction: column; justify-content: center; gap: 24px; box-sizing: border-box; position: relative; z-index: 1; } .clip { } .display { font-family: var(--font-display); font-weight: 700; line-height: 1.1; } .body-text { font-family: var(--font-display); font-weight: 300; line-height: 1.4; color: var(--muted); } .data-text { font-family: var(--font-data); font-weight: 400; font-variant-numeric: tabular-nums; } .grain { position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: 0.18; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px), radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1.2px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; mix-blend-mode: overlay; } /* FILL: Per-scene styles below */ /style /head body div idmain contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
