SOCIAL PROOF
Logo 跑马灯Logo Marquee
Logo 云的动态版——一排 Logo 匀速循环滚过，两端渐隐。
效果预览
◆ Nova● Orbit▲ Summit✦ Lumen■ Forge✺ Piko◆ Nova● Orbit▲ Summit✦ Lumen■ Forge✺ Piko
适合用在哪
Logo 数量多（8 个以上）放不下一行时；页面需要一点"活"的感觉时。
容易踩的坑
- 没有响应 prefers-reduced-motion，前庭敏感用户无法停止持续滚动的内容。
- 复制的第二份 Logo 没加 aria-hidden，读屏会把每个品牌念两遍。
- 用 left 或 margin 做位移而非 transform，每帧触发重排，低端手机明显掉帧。
设计提示词 · Prompt
Logo 跑马灯（Logo Marquee）：内容复制两份实现无缝循环，translateX 0→-50%、20-30s linear infinite，两端 mask 渐隐 12-15%，悬停暂停。Logo 间距 48-64px、灰度统一。可以上下两排反向滚动增强密度，但一排足够——两排容易显得嘈杂。移动端速度减慢 30%（快速移动的小字在手机上难以辨认）。加载时 Logo 懒显示，避免首屏抖动。
Logo Marquee: duplicate the content twice for a seamless loop, translateX 0→-50%, 20-30s linear infinite, with a 12-15% mask fade on both ends, pausing on hover. Logo spacing 48-64px, uniformly grayscale. You can add two rows scrolling in opposite directions for more density, but one row is enough — two rows easily look noisy. Slow the speed by 30% on mobile (fast-moving small text is hard to read on phones). Lazy-reveal logos on load to avoid first-screen jank.
常见搭配
同一页面里经常和「Logo 跑马灯」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-logomq">
<div class="d-logomq__track">
<span class="d-logomq__logo">◆ Nova</span><span class="d-logomq__logo">● Orbit</span><span class="d-logomq__logo">▲ Summit</span><span class="d-logomq__logo">✦ Lumen</span><span class="d-logomq__logo">■ Forge</span><span class="d-logomq__logo">✺ Piko</span><span class="d-logomq__logo">◆ Nova</span><span class="d-logomq__logo">● Orbit</span><span class="d-logomq__logo">▲ Summit</span><span class="d-logomq__logo">✦ Lumen</span><span class="d-logomq__logo">■ Forge</span><span class="d-logomq__logo">✺ Piko</span>
</div>
</div>