Orbit Sphere Marquee
A white hero where a row of rendered spheres in alternating sizes drifts slowly left, each bobbing gently with its surface rotating; the row pauses on hover. Two lines of intro text sit bottom left, a gray greeting and a black main line, with plenty of whitespace.
Taken from the page template Houtu Creative Studio Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Orbit Sphere Marquee to your project in your colors.
Where to use it
The hero of a product site, SaaS landing page or campaign page: where the headline, subhead and primary button make the first impression.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Orbit Sphere Marquee. Motion uses only transform and opacity and respects the Reduce motion setting.
<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}}