用途:Shimmer Sweep 是一个持续型的视觉组件,让光线从文字或元素表面扫过,用于强调重点、营造高级感。可应用于 question 卡片的 em 强调词、stat 卡片的大数字上做一次性闪光,或叠加在 AI、高级、强调类元素上引导视线。适用语气为 brand、news、emotional。
主要能力:基于 CSS gradient mask 的扫光动画,扫光的颜色、速度、宽度通过 CSS custom properties 调整;可与 GSAP 时间线配合控制出现时机。
安装与使用:执行 npx hyperframes add shimmer-sweep,会生成 compositions/components/shimmer-sweep.html。组件方式接入:引入 components/shimmer-sweep.html 中的 CSS,对目标元素套用类名或片段,例如 <div class="q-text">정말 <em class="shimmer-sweep">그것</em>이 답일까?</div>。在 GSAP 时间线中控制出现时机,可将 .shimmer-sweep 从 --shimmer-x: -100% 过渡到 100%,duration 1.0,ease power2.out。
搭配与限制:适合与 grain-overlay、light-leak 搭配营造电影感;避免在同一张卡片上对多个元素同时应用,且每张卡片建议只使用一次,过度使用会削弱效果。官方资料未提供更多平台、收费或效果保证信息。