Dot Matrix Glow Hero
介绍
整块圆角橙色首屏：细密的点阵纹理缓慢闪烁，底部一团暖黄光晕呼吸起伏；居中两行白色大标题、两行副句和白色胶囊按钮，按钮悬停微微抬起。窄屏改为左对齐大字与通栏按钮。
拆自整页模板 燧云 全球网络平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Dot Matrix Glow Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add suiyun-glow-hero
mcp › 使用 8pt MCP 调用 get_component("suiyun-glow-hero")
代码
Dot Matrix Glow Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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}}订阅 Builder 查看完整源码。查看价格