Prompt Hub Diagram
Overview
A glowing round badge in the center sends dashed curves to four tool pills on each side, with sparks flowing along the curves and an outer dashed ring turning slowly. Hovering a pill turns its connection solid. On narrow screens the badge sits on top with the pills in two columns.
Taken from the page template Lingye Design Prompt Library 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 Prompt Hub Diagram to your project in your colors.
Where to use it
Scroll, hover and entrance motion that gives a page rhythm; animation uses only transform and opacity.
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 prompt-hub-diagram
mcp › Use 8pt MCP to call get_component("prompt-hub-diagram")
Code
Source for Prompt Hub Diagram. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-hub"><div class="hub-box"><svg class="hub-svg" viewBox="0 0 1000 360" aria-hidden="true"><g class="hub-lines"><path d="M222 45 C 330 45 350 142 418 142"/><path d="M778 45 C 670 45 650 142 582 142"/><path d="M222 125 C 330 125 350 165 418 165"/><path d="M778 125 C 670 125 650 165 582 165"/><path d="M222 205 C 330 205 350 187 418 187"/><path d="M778 205 C 670 205 650 187 582 187"/><path d="M222 285 C 330 285 350 209 418 209"/><path d="M778 285 C 670 285 650 209 582 209"/></g><g class="hub-dots"><circle r="3.2"><animateMotion dur="2.6s" begin="0.0s" repeatCount="indefinite" path="M222 45 C 330 45 350 142 418 142"/></circle><circle r="3.2"><animateMotion dur="2.6s" begin="0.4s" repeatCount="indefinite" path="M778 45 C 670 45 650 142 582 142"/></circle><circle r="3.2"><animateMotion dur="2.9s" begin="0.4s" repeatCount="indefinite" path="M222 125 C 330 125 350 165 418 165"/></circle><circle r="3.2"><animateMotion dur="2.9s" begin="0.8s" repeatCount="indefinite" path="M778 125 C 670 125 650 165 582 165"/></circle><circle r="3.2"><animateMotion dur="3.2s" begin="0.8s" repeatCount="indefinite" path="M222 205 C 330 205 350 187 418 187"/></circle><circle r="3.2"><animateMotion dur="3.2s" begin="1.2s" repeatCount="indefinite" path="M778 205 C 670 205 650 187 582 187"/></circle><circle r="3.2"><animateMotion dur="3.5s" begin="1.2s" repeatCount="indefinite" path="M222 285 C 330 285 350 209 418 209"/></circle><circle r="3.2"><animateMotion dur="3.5s" begin="1.6s" repeatCount="indefinite" path="M778 285 C 670 285 650 209 582 209"/></circle></g></svg><span class="hub-p l" style="top:12.5%"><span class="tl-ic" style="background:#111"><svg viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6z" fill="#fff"/></svg></span><b>闪建</b></span><span class="hub-p r" style="top:12.5%"><span class="tl-ic" style="background:#10B981"><svg viewBox="0 0 24 24"><path d="M4 8l8-4 8 4-8 4zM4 12l8 4 8-4M4 16l8 4 8-4" stroke="#fff" stroke-width="1.6" fill="none"/></svg></span><b>栈工</b></span><span class="hub-p l" style="top:34.7%"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span><b>码舟</b></span><span class="hub-p r" style="top:34.7%"><span class="tl-ic" style="background:#6366F1"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 8v4l3 2" stroke="#fff" stroke-width="2" fill="none"/></svg></span><b>速搭</b></span><span class="hub-p l" style="top:56.9%"><span class="tl-ic" style="background:#EC4899"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="6" height="6" fill="#fff"/><rect x="13" y="13" width="6" height="6" fill="#fff"/></svg></span><b>拼页</b></span><span class="hub-p r" style="top:56.9%"><span class="tl-ic" style="background:#D946EF"><svg viewBox="0 0 24 24"><path d="M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z" fill="#fff"/></svg></span><b>灵绘</b></span><span class="hub-p l" style="top:79.2%"><span class="tl-ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24"><path d="M7 17a4 4 0 1 1 1-7.9A5 5 0 0 1 17.5 10 3.5 3.5 0 0 1 17 17z" fill="#fff"/></svg></span><b>云匠</b></span><span class="hub-p r" style="top:79.2%"><span class="tl-ic" style="background:#0B0B0F"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5zM5 10h14" stroke="#fff" stroke-width="1.8" fill="none"/></svg></span><b>页工坊</b></span><div class="hub-orb"><span class="hub-ring"></span><span class="hub-core"><span class="lg-mark"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l8 9-8 9-8-9z"/><path d="M12 3v18M4 12h16" opacity=".55"/></svg></span></span></div></div><p class="hub-note"><span><span class="lg-mark"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l8 9-8 9-8-9z"/><path d="M12 3v18M4 12h16" opacity=".55"/></svg></span></span>不止这些——任何 AI 建站工具都能用。</p></div>
.x-hub{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-hub,.x-hub *{box-sizing:border-box}.x-hub a{color:inherit;text-decoration:none}.x-hub button{font:inherit;cursor:pointer}.x-hub .lg-mark{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(124,58,237,.7);flex:none}.x-hub .lg-mark svg{width:60%;height:60%}.x-hub{width:100%;max-width:1040px;margin:0 auto;color:var(--ink)}.x-hub .hub-box{position:relative;aspect-ratio:1000/360}.x-hub .hub-svg{position:absolute;inset:0;width:100%;height:100%}.x-hub .hub-lines path{fill:none;stroke:#C4B5FD;stroke-width:1.4;stroke-dasharray:3 5}.x-hub .hub-dots circle{fill:#7C3AED}.x-hub .hub-p{position:absolute;width:22.2%;height:15%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1.5px solid #C4B5FD;border-radius:12px;box-shadow:0 6px 18px -10px rgba(124,58,237,.45);font-size:clamp(13px,1.6vw,18px);transition:transform .25s,box-shadow .25s,border-color .25s}.x-hub .hub-p:hover{transform:translateY(-50%) scale(1.04);border-color:#7C3AED;box-shadow:0 10px 24px -10px rgba(124,58,237,.6)}.x-hub .hub-p.l{left:0}.x-hub .hub-p.r{right:0}.x-hub .hub-p b{font-weight:700}.x-hub .tl-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center}.x-hub .tl-ic svg{width:16px;height:16px}.x-hub .hub-orb{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 55%,#F3EEFF 56%,#F3EEFF 70%,rgba(237,233,254,.4) 71%);display:grid;place-items:center}.x-hub .hub-ring{position:absolute;inset:-14%;border-radius:50%;border:1px dashed #DDD6FE;animation:hub-spin 30s linear infinite}.x-hub .hub-core{width:52%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 40px -8px rgba(124,58,237,.55);animation:hub-pulse 3s ease-in-out infinite}.x-hub .hub-core .lg-mark{border-radius:50%;width:78%;height:78%}.x-hub .hub-note{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:48px auto 0;font-size:13px;color:#52525B;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px}.x-hub .hub-note .lg-mark{width:20px;height:20px;border-radius:6px}@keyframes hub-spin{to{transform:rotate(360deg)}}@keyframes hub-pulse{50%{box-shadow:0 10px 60px -4px rgba(124,58,237,.8)}}@media (max-width:700px){.x-hub .hub-box{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:150px}.x-hub .hub-svg{display:none}.x-hub .hub-p{position:static;width:auto;height:48px;transform:none;font-size:14px}.x-hub .hub-p:hover{transform:scale(1.03)}.x-hub .hub-orb{top:64px;width:120px}.x-hub .hub-note{font-size:12px;margin-top:28px}}@media (prefers-reduced-motion:reduce){.x-hub *{animation:none!important;transition:none!important}.x-hub .hub-dots{display:none}}.x-hub{max-width:none;padding:60px 5%;background-image:radial-gradient(rgba(16,16,24,.12) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-hub{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const svg = root.querySelector('.hub-svg');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches && svg.pauseAnimations) svg.pauseAnimations();
const pills = [...root.querySelectorAll('.hub-p')];
const lines = [...root.querySelectorAll('.hub-lines path')];
const order = [0, 2, 4, 6, 1, 3, 5, 7];
const on = (e) => { const i = pills.indexOf(e.currentTarget); const p = lines[i]; if (p) { p.style.stroke = '#7C3AED'; p.style.strokeDasharray = 'none'; } };
const off = () => lines.forEach(p => { p.style.stroke = ''; p.style.strokeDasharray = ''; });
pills.forEach(p => { p.addEventListener('mouseenter', on); p.addEventListener('mouseleave', off); });
return () => pills.forEach(p => { p.removeEventListener('mouseenter', on); p.removeEventListener('mouseleave', off); });
}Subscribe to Builder to see the full source.See pricing