Integration Tile Grid
介绍
深色卡片中 7×5 的服务图标方块矩阵，中心是渐变发光的品牌方块，四周按径向渐隐；靠近中心的方块轮流亮起彩色光晕，悬停方块会上浮并显示服务名称提示。
拆自整页模板 念成 AI 应用构建器首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Integration Tile Grid 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add integration-tile-grid
mcp › 使用 8pt MCP 调用 get_component("integration-tile-grid")
代码
Integration Tile Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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'))}订阅 Builder 查看完整源码。查看价格