Orbit Sphere Marquee
介绍
白底首屏里一排大小交替的渲染球体缓慢向左漂移，每颗球轻轻上下浮动、内部画面自转，悬停整排暂停；左下角两行引言，灰色问候加黑色主句，留白撑起气场。
拆自整页模板 厚土 创意工作室首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Orbit Sphere Marquee 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add houtu-sphere-marquee
mcp › 使用 8pt MCP 调用 get_component("houtu-sphere-marquee")
代码
Orbit Sphere Marquee 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-osm"><div class="x-osm__orbit"><div class="x-osm__track"><div class="x-osm__ball"><img src="https://8pt.dev/api/media/5fe88aa10a5229460c7869d9.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/a695326afba0de37a7a74362.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/c898edd905a4ef57de63da91.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/e67b23536cd0fb650dc36fc7.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/a667b074c090c0ac26c13937.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/5fe88aa10a5229460c7869d9.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/a695326afba0de37a7a74362.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/c898edd905a4ef57de63da91.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/e67b23536cd0fb650dc36fc7.webp" alt=""></div><div class="x-osm__ball"><img src="https://8pt.dev/api/media/a667b074c090c0ac26c13937.webp" alt=""></div></div></div><p class="x-osm__intro"><span>欢迎来到厚土宇宙。</span>为真实世界品牌搭建的创意生态。</p></div>
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap");.x-osm{position:relative;width:100%;height:760px;background:#FFFFFF;color:#000;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;overflow:hidden}.x-osm__orbit{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);height:360px;overflow:hidden}.x-osm__track{display:flex;align-items:center;gap:52px;padding-right:52px;height:100%;width:max-content;animation:x-osm-drift 46s linear infinite}.x-osm__orbit:hover .x-osm__track{animation-play-state:paused}.x-osm__ball{flex:none;border-radius:50%;overflow:hidden;animation:x-osm-bob 7s ease-in-out infinite}.x-osm__ball img{display:block;width:100%;height:100%;object-fit:cover;animation:x-osm-spin 28s linear infinite}.x-osm__ball:nth-child(5n+1),.x-osm__ball:nth-child(5n){width:310px;height:310px}.x-osm__ball:nth-child(5n+2),.x-osm__ball:nth-child(5n+4){width:222px;height:222px;animation-delay:-2s}.x-osm__ball:nth-child(5n+3){width:200px;height:200px;animation-delay:-4s}.x-osm__ball:nth-child(2n) img{animation-direction:reverse}.x-osm__intro{position:absolute;left:28px;bottom:34px;margin:0;font-size:17px;font-weight:600;line-height:1.45}.x-osm__intro span{display:block;color:#9A9A9A}@keyframes x-osm-drift{to{transform:translateX(-50%)}}@keyframes x-osm-bob{50%{transform:translateY(-14px)}}@keyframes x-osm-spin{to{transform:rotate(360deg) scale(1.04)}}@media (prefers-reduced-motion:reduce){.x-osm__track,.x-osm__ball,.x-osm__ball img{animation:none}}订阅 Builder 查看完整源码。查看价格