Integration Tile Grid
Overview
A 7×5 grid of service icon tiles in a dark card around a glowing gradient brand tile, fading out radially. Tiles near the center take turns glowing in color; hovering a tile lifts it and shows the service name.
Taken from the page template Niancheng AI App Builder 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 Integration Tile Grid 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 integration-tile-grid
mcp › Use 8pt MCP to call get_component("integration-tile-grid")
Code
Source for Integration Tile Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<section class="x-igd"><div class="igd-cap"><h3>你的应用栈，一键连通</h3><p>表格、邮件、收款、数据库……常用服务点一下就接上，悬停看看都有什么。</p></div><div class="ig-g"><span class="ig-t" style="--c:#1F9D55" data-n="表格"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 10v10"/></svg></span><span class="ig-t" style="--c:#E5484D" data-n="邮件"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span><span class="ig-t" style="--c:#635BFF" data-n="收款"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg></span><span class="ig-t" style="--c:#3ECF8E" data-n="数据库"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v12c0 1.7 3 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3 3 7 3s7-1.3 7-3"/></svg></span><span class="ig-t" style="--c:#7C66DC" data-n="群聊"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><span class="ig-t" style="--c:#2F80ED" data-n="日历"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span><span class="ig-t" style="--c:#38BDF8" data-n="云盘"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z"/></svg></span><span class="ig-t" style="--c:#F5A524" data-n="自动化"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3L5 14h6l-1 7 8-11h-6z"/></svg></span><span class="ig-t" style="--c:#F59E0B" data-n="文件"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h6l2 2h10v11H3z"/></svg></span><span class="ig-t" style="--c:#10B981" data-n="地图"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4l6 2 6-2v14l-6 2-6-2-6 2V6z"/><path d="M9 4v14M15 6v14"/></svg></span><span class="ig-t" style="--c:#95BF47" data-n="店铺"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2 11h11l2-8H6"/><circle cx="9" cy="19" r="1.4"/><circle cx="17" cy="19" r="1.4"/></svg></span><span class="ig-t" style="--c:#EF4444" data-n="通知"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"/><path d="M10 20h4"/></svg></span><span class="ig-t" style="--c:#111827" data-n="文档"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l4-1 11-11-3-3L5 16z"/></svg></span><span class="ig-t" style="--c:#EC4899" data-n="音频"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg></span><span class="ig-t" style="--c:#FF4D4F" data-n="视频"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3"/></svg></span><span class="ig-t" style="--c:#8B5CF6" data-n="仓储"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 11v10"/></svg></span><span class="ig-t" style="--c:#0EA5E9" data-n="分析"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M6 15l4-5 3 3 5-7"/></svg></span><span class="ig-t ig-c"><span class="lg"><svg viewBox="0 0 32 32"><defs><linearGradient id="lgG" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FF7A1A"/><stop offset=".5" stop-color="#FF3D8B"/><stop offset="1" stop-color="#7B61FF"/></linearGradient></defs><path d="M6 4h12a10 10 0 0 1 10 10v4a10 10 0 0 1-10 10H10a6 6 0 0 1-6-6V6a2 2 0 0 1 2-2z" fill="url(#lgG)"/><path d="M15.5 9l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z" fill="#fff"/></svg></span></span><span class="ig-t" style="--c:#2563EB" data-n="检索"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg></span><span class="ig-t" style="--c:#D97757" data-n="智能体"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4M9 13h.01M15 13h.01"/></svg></span><span class="ig-t" style="--c:#24292F" data-n="代码库"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></svg></span><span class="ig-t" style="--c:#64748B" data-n="登录"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span><span class="ig-t" style="--c:#F43F5E" data-n="会员"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="ig-t" style="--c:#22C55E" data-n="短信"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></span><span class="ig-t" style="--c:#A855F7" data-n="生成"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg></span><span class="ig-t" style="--c:#0EA5E9" data-n="网络钩子"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="7" r="2.3"/><circle cx="18" cy="17" r="2.3"/><circle cx="18" cy="6" r="2.3"/><path d="M8.2 7.5l7.6-1M8 8.6l8.4 6.8"/></svg></span><span class="ig-t" style="--c:#3B82F6" data-n="域名"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg></span><span class="ig-t" style="--c:#EAB308" data-n="密钥"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 12l8-8M16 7l2 2"/></svg></span><span class="ig-t" style="--c:#6366F1" data-n="设计稿"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></svg></span><span class="ig-t" style="--c:#94A3B8" data-n="表单"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/></svg></span><span class="ig-t" style="--c:#14B8A6" data-n="监控"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></span><span class="ig-t" style="--c:#06B6D4" data-n="客服"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><span class="ig-t" style="--c:#F97316" data-n="预约"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span><span class="ig-t" style="--c:#84CC16" data-n="报表"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 10v10"/></svg></span><span class="ig-t" style="--c:#A3A3A3" data-n="订阅"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span></div></section>
.x-igd{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-igd,.x-igd *{box-sizing:border-box}.x-igd a{color:inherit;text-decoration:none}.x-igd button{font:inherit;cursor:pointer;color:inherit}.x-igd img{display:block;max-width:100%}.x-igd .lg{display:inline-block;width:24px;height:24px;flex:none}.x-igd .lg svg{width:100%;height:100%;display:block}.x-igd .ig-g{display:grid;grid-template-columns:repeat(7,64px);gap:14px;justify-content:center;-webkit-mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 75%,transparent);mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 75%,transparent)}.x-igd .ig-t{position:relative;width:64px;height:64px;border-radius:16px;display:grid;place-items:center;color:var(--c);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .3s,background .3s,box-shadow .3s}.x-igd .ig-t:hover,.x-igd .ig-t.pulse{transform:translateY(-3px);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 30px -8px var(--c)}.x-igd .ig-t:hover::after{content:attr(data-n);position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#ddd;background:#2a2a2a;padding:2px 8px;border-radius:6px;z-index:2}.x-igd .ig-c{background:linear-gradient(160deg,#FF8A3D,#FF3D8B 55%,#7B61FF);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 50px -6px rgba(255,61,139,.8);transform:scale(1.12)}.x-igd .ig-c .lg{width:36px;height:36px}.x-igd .ig-c .lg path:first-child{fill:#fff}.x-igd .ig-c .lg path:last-child{fill:#FF3D8B}@media (max-width:640px){.x-igd .ig-g{grid-template-columns:repeat(7,40px);gap:8px}.x-igd .ig-t{width:40px;height:40px;border-radius:11px}.x-igd .ig-t svg{width:18px;height:18px}.x-igd .ig-c .lg{width:24px;height:24px}}.x-igd{position:relative;width:100%;max-width:1100px;margin:0 auto;padding:110px 30px 70px;border-radius:22px;background:radial-gradient(70% 60% at 50% 55%,#26272C,#17181B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:#fff;overflow:hidden}.x-igd .igd-cap{position:absolute;left:34px;top:30px;max-width:380px}.x-igd h3{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em}.x-igd .igd-cap p{margin:0;font-size:13.5px;line-height:1.6;color:#AFAFAA}@media (max-width:640px){.x-igd{padding:120px 12px 40px}.x-igd .igd-cap{left:18px;right:18px}}@media (prefers-reduced-motion:reduce){.x-igd *,.x-igd *::before,.x-igd *::after{animation:none!important;transition:none!important}}.x-igd{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px),radial-gradient(70% 60% at 50% 55%,#26272C,#17181B);background-size:16px 16px,100% 100%;padding:130px 30px 90px}.x-igd{width:1100px;max-width:100%;box-sizing:border-box}(root) => {const gridPulse=(g)=>{const ts=[...g.querySelectorAll('.ig-t:not(.ig-c)')];let k=0;const red=matchMedia('(prefers-reduced-motion: reduce)').matches;if(red)return ()=>{};const iv=setInterval(()=>{ts.forEach(t=>t.classList.remove('pulse'));const near=[9,10,11,16,18,23,24,25];const t=ts[near[k++%near.length]];if(t)t.classList.add('pulse')},1100);return ()=>clearInterval(iv)};return gridPulse(root.querySelector('.ig-g'))}Subscribe to Builder to see the full source.See pricing