Dotted Globe Features
Overview
Under a centered headline and subhead, a slowly rotating dotted globe: orange dots form fictional continents, faint graticule lines show through from the back, set in a cream frame. Below, a three-part feature strip with line icons, short titles and descriptions; hovered cells warm up.
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 Dotted Globe Features to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add suiyun-dot-globe
mcp › Use 8pt MCP to call get_component("suiyun-dot-globe")
Code
Source for Dotted Globe Features. Motion uses only transform and opacity and respects the Reduce motion setting.
<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 = () => {
…Subscribe to Builder to see the full source.See pricing