Text Shimmer
A band of light sweeps across the text itself — the 'AI is generating' cue
Live preview (drag the parameters, watch it change)
Code
<span class="shimmer-text">正在为你生成…</span>
<style>
.shimmer-text {
font-weight: 800;
background: linear-gradient(100deg, #6d6b64 40%, #f5f3ee 50%, #6d6b64 60%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: text-shimmer 2.6s linear infinite;
}
@keyframes text-shimmer { to { background-position: -220% 0; } }
</style><span class="animate-[text-shimmer_2.6s_linear_infinite] bg-[linear-gradient(100deg,#6d6b64_40%,#f5f3ee_50%,#6d6b64_60%)] bg-[length:220%_100%] bg-clip-text font-extrabold text-transparent">正在为你生成…</span>
<!-- tailwind.config 补 keyframes: text-shimmer: { to: { backgroundPosition: '-220% 0' } } -->export function ShimmerText({ children }) {
return (<span className="shimmer-text">{children}
<style>{`.shimmer-text{font-weight:800;background:linear-gradient(100deg,#6d6b64 40%,#f5f3ee 50%,#6d6b64 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ts 2.6s linear infinite}@keyframes ts{to{background-position:-220% 0}}`}</style></span>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
还是 background-clip: text 那套：一段三站渐变（暗—亮—暗）铺在文字上，background-size 放大到 220%，动画滚动 background-position，亮带就扫过去了。它是「状态文字」的效果，别用在标题或正文上——会读不清，也显得廉价。
How it works (English)
Same background-clip: text trick: a three-stop gradient (dim—bright—dim) sized to 220%, with background-position animated so the bright band sweeps through. It's a status-text effect — never for headings or body copy, where it hurts readability and looks cheap.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。