Dotted Globe Features
介绍
居中标题与副句下方是一颗缓慢自转的点阵地球：橙色圆点拼出虚构大陆，背面经纬线淡淡透出，置于奶白底框里；底部一条三格特性带，每格线性图标、短标题和说明，悬停格子泛起暖色。
拆自整页模板 燧云 全球网络平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Dotted Globe Features 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add suiyun-dot-globe
mcp › 使用 8pt MCP 调用 get_component("suiyun-dot-globe")
代码
Dotted Globe Features 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-dgl"><h2>区域：地球</h2><p class="x-dgl__sub">一张智能网络，同时承载工作负载与安全——离用户近，离数据也近。</p><div class="x-dgl__stage"><canvas class="x-dgl__cv" aria-label="缓慢自转的点阵地球"></canvas></div><div class="x-dgl__feat"><div class="x-dgl__cell"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg><h3>处处运行</h3><p>安全、连接与代码运行在遍布各地的节点上，离大多数用户只差一眨眼。</p></div><div class="x-dgl__cell"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5s-6-5.2-6-10.2a6 6 0 0 1 12 0c0 5-6 10.2-6 10.2z"/><circle cx="12" cy="10.2" r="2.2"/><path d="M8 20.5h8"/></svg><h3>随处就近</h3><p>网络贴近你的用户、应用与站点，从源到终点全程优化流量，压低延迟。</p></div><div class="x-dgl__cell"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9"/><path d="M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9"/><path d="M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15"/><path d="M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg><h3>海量承载</h3><p>不再做容量规划。</p></div></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-dgl{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dgl h2{margin:0;font-size:clamp(32px,3.3vw,46px);font-weight:400;letter-spacing:-.015em}.x-dgl__sub{margin:16px 0 0;font-size:17px;color:#555}.x-dgl__stage{position:relative;width:82%;margin:14px auto 0;height:500px;background:#FFFCF2;overflow:hidden}.x-dgl__cv{display:block;width:100%;height:100%}.x-dgl__feat{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #EBEBEB;background:#fff;text-align:left}.x-dgl__cell{padding:30px 32px 34px;border-left:1px solid #EBEBEB;transition:background .3s}.x-dgl__cell:first-child{border-left:0}.x-dgl__cell:hover{background:#FFF8F1}.x-dgl__cell svg{width:24px;height:24px;color:#262626}.x-dgl__cell h3{margin:16px 0 6px;font-size:16.5px;font-weight:500}.x-dgl__cell p{margin:0;font-size:14.5px;line-height:1.5;color:#666}@media (max-width:640px){.x-dgl__stage{width:100%;height:320px}.x-dgl__feat{grid-template-columns:1fr}.x-dgl__cell{border-left:0;border-top:1px solid #EBEBEB}.x-dgl__cell:first-child{border-top:0}.x-dgl__sub{padding:0 12px}}@media (prefers-reduced-motion:reduce){.x-dgl__cell{transition:none}}(root) => {
const box = root.classList && root.classList.contains("x-dgl") ? root : root.querySelector(".x-dgl");
const cv = box && box.querySelector(".x-dgl__cv");
if (!cv) return;
const ctx = cv.getContext("2d");
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const land = (la, lo) => { const v = Math.sin(lo * 1.3 + Math.sin(la * 2.1) * 1.4) * Math.cos(la * 1.6) + 0.6 * Math.sin(lo * 2.7 - la * 1.2) + 0.35 * Math.sin(lo * 5.1 + la * 3.7); return v > 0.12 && Math.abs(la) < 1.32; };
const pts = [];
for (let la = -1.45; la <= 1.45; la += 0.038) { const n = Math.max(8, Math.round(165 * Math.cos(la))); for (let k = 0; k < n; k++) { const lo = (k / n) * Math.PI * 2; if (land(la, lo)) pts.push([la, lo]); } }
let W = 0, H = 0, raf = 0, rot = 0.6;
const size = () => { const r = cv.getBoundingClientRect(); const d = Math.min(2, window.devicePixelRatio || 1); W = r.width; H = r.height; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
const draw = () => {
…订阅 Builder 查看完整源码。查看价格