Dot Matrix Glow Hero
A rounded orange hero block: a fine dot texture twinkles slowly while a warm yellow glow breathes at the bottom. Two lines of centered white headline, a two-line subhead and a white pill button that lifts on hover. On narrow screens it switches to left-aligned type and a full-width button.
Taken from the page template Suiyun Global Network Platform 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 Dot Matrix Glow Hero 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 Dot Matrix Glow Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-sgh"><svg class="x-sgh__dots" role="presentation" focusable="false" width="100%" height="100%"><defs><pattern id="x-sgh-dp" width="7" height="7" patternUnits="userSpaceOnUse"><circle cx="3.5" cy="3.5" r="1.25" fill="#FFF0DE" fill-opacity=".62"/></pattern></defs><rect width="100%" height="100%" fill="url(#x-sgh-dp)"/></svg><div class="x-sgh__glow" aria-hidden="true"></div><div class="x-sgh__in"><h1>把运行一张全球网络学到的一切，<br>默认交到你手上</h1><p>一个平台承载你的应用、智能体与团队。<br>构建、防护与扩展，无需亲自打理基础设施。</p><a class="x-sgh__btn" href="#">开始构建<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13.5 6.5 5.5 5.5-5.5 5.5"/></svg></a></div></div>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");.x-sgh{position:relative;width:100%;height:720px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center}.x-sgh__dots{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 60%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 60%);animation:x-sgh-shim 6s ease-in-out infinite}.x-sgh__glow{position:absolute;left:50%;bottom:-260px;z-index:-1;width:1100px;height:560px;border-radius:50%;background:radial-gradient(closest-side,#FFF8E4 0%,#FFE2A0 30%,rgba(255,176,92,.75) 58%,rgba(255,93,29,0) 100%);box-shadow:0 -2px 0 0 rgba(255,244,220,.9),0 -24px 60px -10px rgba(255,226,160,.7);transform:translateX(-50%);filter:blur(2px);animation:x-sgh-breathe 5.5s ease-in-out infinite}.x-sgh__in{display:flex;flex-direction:column;align-items:center;max-width:100%;padding:0 32px 60px;box-sizing:border-box;text-align:center}.x-sgh h1{margin:0;font-size:clamp(34px,4.1vw,56px);font-weight:500;line-height:1.14;letter-spacing:-.015em}.x-sgh p{margin:30px 0 0;font-size:18px;line-height:1.5;opacity:.95}.x-sgh__btn{display:inline-flex;align-items:center;gap:8px;margin-top:44px;height:50px;padding:0 24px;border-radius:999px;background:#fff;color:#1d1d1d;font-size:16px;font-weight:500;text-decoration:none;box-shadow:0 10px 30px -12px rgba(120,30,0,.55);transition:transform .25s,box-shadow .25s}.x-sgh__btn svg{width:16px;height:16px;transition:transform .25s}.x-sgh__btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(120,30,0,.6)}.x-sgh__btn:hover svg{transform:translateX(3px)}@keyframes x-sgh-shim{50%{opacity:.55}}@keyframes x-sgh-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-sgh{height:600px}.x-sgh__in{align-self:stretch;align-items:flex-start;text-align:left;padding:40px 24px 50px}.x-sgh h1{font-size:36px;font-weight:600;line-height:1.15}.x-sgh h1 br,.x-sgh p br{display:none}.x-sgh p{font-size:18px}.x-sgh__btn{align-self:stretch;justify-content:center;height:62px;border-radius:12px}.x-sgh__glow{width:520px;height:220px;bottom:-140px}}@media (prefers-reduced-motion:reduce){.x-sgh__dots,.x-sgh__glow{animation:none}.x-sgh__btn,.x-sgh__btn svg{transition:none}}