用途:在每张卡片之上持续铺一层薄薄的胶片颗粒叠加(建议不透明度 3–5%),为整套演示营造杂志或电影氛围,并为 brand、news、emotional 三种色调提供统一感。资料提示应避开 tech、minimalist,因为会干扰干净画面。
安装:运行 npx hyperframes add grain-overlay,会生成 compositions/components/grain-overlay.html。
使用方式:与 Shader transition 不同,本组件采用直接插入 HTML/CSS 片段的方式。复制 compositions/components/grain-overlay.html 文件内的片段,粘贴到每张卡片内部,或放在 #root 的直接子级。资料给出的示例结构为:<div class="grain-overlay" data-start="0" data-duration="20" data-track-index="2" style="position: absolute; inset: 0; z-index: 100; pointer-events: none; opacity: 0.04;">,并注明需复制 grain-overlay.html 中的 CSS keyframes 与 <div> 结构。
参数:可通过 opacity 调整强度,推荐 brand 0.03、news 0.05、emotional 0.04;动画速度与颗粒大小在 CSS keyframes 内部调整。
搭配与限制:适合与 light-leak、shimmer-sweep 及所有 shader transition 搭配;同一套演示中只应使用一个,禁止重复叠加。收费、价格、平台与效果等资料暂未提供。