Communitygithub.com

霜冻序列摄像机轨道

一个轨道摄像机跟随冰质标志碎裂、重组为两段文字并淡出的动画。HyperFrames 块,1920×1080,22.5 秒,216 个变量。

霜冻序列摄像机轨道 是什么?

这是一个针对 HyperFrames 平台的专业动画合成技能,创建了一个 22.5 秒的冰霜主题序列动画。动画包含一个标志、两段自定义文字、碎裂和淡出效果,摄像机以轨道方式围绕固定物体运动,在正面经过时减速以便阅读。整个过渡由同一粒子场驱动,用户可通过 216 个变量高度定制视觉效果,包括材质属性(如冰面粗糙度、折射率、霜冻、裂纹、散射等)、文字内容、标志 SVG 以及组装与摄像机时间轴。合成 ID 为 `frost-sequence-rig`,分辨率为 1920×1080,帧率 30fps。支持通过 `npx hyperframes add` 命令安装,并在 HTML 中挂载,也可通过 CLI 直接渲染并传递自定义变量。该技能适用于需要高质量、可编程的 3D 动态图形场景,特别适合品牌片头、产品演示或视觉特效制作。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/szeproka/hyperframes-registry/tree/HEAD/registry/blocks/frost-sequence-camera-orbit

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

霜冻序列摄像机轨道 是做什么的?

一个完整的 22.5 秒冰霜序列:标志、第一段文字、第二段文字、碎裂和淡出。摄像机围绕固定物体轨道运行,在正面经过时减速以便阅读。同一粒子场承载每个过渡。可自定义两段文字时刻和 SVG 标志;源文件包含可编辑的摄像机和组装时间轴。

合成 ID:frost-sequence-rig。时长 22.5 秒,30 fps,1920×1080。

文件

  • frost-sequence-camera-orbit.html(131 KB)
  • assets/example-logo.svg(1 KB)
  • assets/fonts/Geist-Bold.ttf(65 KB)
  • assets/fonts/Geist-OFL.txt(4 KB)
  • assets/fonts/Geist-Regular.ttf(65 KB)
  • assets/fonts/Geist-SemiBold.ttf(65 KB)
  • assets/frost.js(1.5 MB)
  • assets/Three-LICENSE.txt(1 KB)
  • assets/ThreeMeshBVH-LICENSE.txt(1 KB)
  • assets/OpentypeJS-LICENSE.txt(1 KB)
  • assets/Clipper-LICENSE.txt(3 KB)
  • assets/gsap-3.14.2.min.js(128 KB)
  • assets/GSAP-NOTICE.txt(1 KB)
  • assets/logo.svg(1 KB)
  • assets/shards-atlas.png(安装时从 CDN 获取)
  • assets/test-mark.svg(1 KB)
  • assets/textures/bluenoise64.png(12 KB)
  • assets/textures/ice-inclusions-generated.png(安装时从 CDN 获取)

安装

使用 npx hyperframes add frost-sequence-camera-orbit 安装;默认情况下,上述文件会放置在 compositions/frost-sequence-camera-orbit/ 目录下。然后在宿主 index.html 中挂载该块:

<div
  data-composition-id="frost-sequence-rig"
  data-composition-src="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
  data-start="0"
  data-duration="22.5"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

通过直接定位合成文件,使用自定义值渲染:

npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Hard to|break.","headline2":"Easy to|remember."}'

变量

运行时通过 window.__hyperframes.getVariables() 读取;在合成根元素上声明为 data-composition-variables(单引号属性,纯 JSON)。

id类型默认值标签 / 范围
headline1string`"Hard tobreak."`
headline2string`"Easy toremember."`
logoUrlstring"assets/logo.svg"标志 SVG 资源路径(在 Assets 中上传,然后粘贴路径)最多 200 个字符
assemblyModeenum"hybrid"组装响应(physical
materialBaseColorcolor"#ffffff"基础颜色
baseRoughnessnumber0.31基础粗糙度 0–0.5 步长 0.005
materialTransmissionbooleantrue透射
materialBacklightnumber0.27冰面背光 0–2 步长 0.01
iornumber1.675折射率 1–2 步长 0.005
thicknessScalenumber2.04厚度缩放 0.1–3 步长 0.01
materialAbsorptionbooleantrue吸收/色调
attenuationColorcolor"#d5f4ff"衰减颜色(白色 = 无吸收,透明玻璃)
attenuationDistancenumber6.54衰减距离 0.05–12 步长 0.01
materialDispersionbooleanfalse色散
dispersionnumber0.12色散(0 = 关闭;开启/关闭需要重新加载) 0–0.3 步长 0.005
materialReflectionsbooleantrue反射
envIntensitynumber2.04环境强度 0–3 步长 0.01
specularIntensitynumber1.44高光强度 0–2 步长 0.01
materialFrostbooleantrue霜冻
materialInteriorFrostnumber0均匀霜冻 0–1 步长 0.01
frostScalenumber0.7缩放 0.2–6 步长 0.05
frostThresholdnumber0.62阈值(1 = 无霜冻,透明玻璃) 0–1 步长 0.01
frostSoftnessnumber0.24柔和度 0.01–1 步长 0.01
frostRoughnessnumber0.73粗糙度 0–1 步长 0.01
frostDiffusenumber0.11漫反射(霜冻区域捕捉光线的程度) 0–1 步长 0.01
materialSurfaceBumpsbooleanfalse物体表面凹凸/裂纹缺口
materialCrystalsbooleantrue晶体凹凸
crystalBumpnumber0.01晶体凹凸 0–1 步长 0.01
crystalScalenumber4晶体缩放 4–80 步长 1
materialGrainbooleantrue颗粒凹凸
materialGrainAmountnumber0.47颗粒强度 0–2 步长 0.01
materialGrainScalenumber150颗粒缩放 1–150 步长 1
materialCutNormalsbooleantrue断裂法线
materialMicrobooleantrue微凹凸
microBumpnumber0.445微凹凸 0–1 步长 0.005
microScalenumber10微缩放 10–200 步长 1
microCoveragenumber0.25微覆盖 0–1 步长 0.01
bumpMaskScalenumber1.45遮罩缩放 0.1–6 步长 0.05
materialRipplesbooleantrue波纹
rippleBumpnumber0.22波纹凹凸 0–1 步长 0.01
rippleScalenumber23波纹缩放 2–30 步长 0.5
materialSmudgesbooleantrue污渍
smudgeAmountnumber0.78数量 0–1 步长 0.01
smudgeCoveragenumber0.58覆盖 0–1 步长 0.01
smudgeMaskScalenumber1.85遮罩缩放 0.1–6 步长 0.05
smudgeAnisotropynumber16.5各向异性 1–20 步长 0.5
smudgeRoughnessnumber0.75粗糙度 0–1 步长 0.01
smudgeWhitenessnumber0.035白度 0–0.5 步长 0.005
smudgeScalenumber1.3缩放 0.5–10 步长 0.1
materialCracksbooleantrue裂纹
crackLargeScalenumber2.45大尺度缩放 0.3–8 步长 0.05
crackWarpnumber0.22扭曲 0–1.5 步长 0.01
crackCoveragenumber0.19覆盖 0–1 步长 0.01
crackRegionScalenumber1.8区域缩放 0.1–4 步长 0.05
crackRegionCoveragenumber0.6区域覆盖 0–1 步长 0.01
veinScalenumber8脉纹缩放 1–20 步长 0.25
veinContrastnumber0.55脉纹对比度 0–1 步长 0.01
crackWidthnumber0.0025宽度 0.0005–0.02 步长 0.0005
crackBrightnessnumber0.65亮度 0–3 步长 0.01
crackDarknessnumber0.69暗度 0–1 步长 0.01
crackRefractionnumber0.076折射 0–0.1 步长 0.001
crackSurfaceStrengthnumber0.16表面强度 0–1 步长 0.01
fineScalenumber18.4精细缩放 2–20 步长 0.1
fineAmountnumber0.52精细量 0–1 步长 0.01
fineCoveragenumber1精细覆盖 0–1 步长 0.01
materialScatterbooleantrue内部散射
materialInclusionScalenumber0.05内含物缩放 0.05–3 步长 0.01
materialInclusionAmountnumber2摄影内含物 0–2 步长 0.01
interiorScatternumber0.09内部散射 0–1 步长 0.01
materialClearcoatbooleantrue清漆
clearcoatnumber0清漆 0–1 步长 0.01

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能