Tinted Team Cards
Overview
Three tall saturated color cards: an original pebble character and a notebook sit on a diagonal-stripe glow, with a translucent tag top left and a short serif usage line at the bottom. The card lifts on hover and the character bobs gently.
Taken from the page template Moge Team AI Workspace Website. 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 Tinted Team Cards to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
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 tinted-team-cards
mcp › Use 8pt MCP to call get_component("tinted-team-cards")
Code
Source for Tinted Team Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ttc"><section class="mg-teams" id="teams"><div class="mg-wrap"><h2 class="mg-h2">每个团队，都有自己的用法。</h2><div class="mg-teams__g"><article class="mg-tc" style="--c:#E2553F"><div class="mg-tc__art"><div class="mg-tc__desk"><svg class="mg-peb " viewBox="0 0 92 92" width="108" height="108" aria-hidden="true" style="transform:rotate(0deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#FFC94D"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><path d="M41 58q5 4 10 0" fill="none" stroke="#191918" stroke-width="2.6" stroke-linecap="round"/><path d="M16 62 6 70" stroke="#FFC94D" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#FFC94D" stroke-width="7" stroke-linecap="round"/></svg><div class="mg-tc__lap"></div></div></div><span class="mg-tc__k">产品团队</span><p>需求、讨论和最后的决定，写在同一页上，谁都能追溯来龙去脉。</p><small>示意用法 · 虚构场景</small></article><article class="mg-tc" style="--c:#2F6FD1"><div class="mg-tc__art"><div class="mg-tc__desk"><svg class="mg-peb " viewBox="0 0 92 92" width="108" height="108" aria-hidden="true" style="transform:rotate(0deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#8FD3B6"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><circle cx="46" cy="59" r="3" fill="#191918"/><path d="M16 62 6 70" stroke="#8FD3B6" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#8FD3B6" stroke-width="7" stroke-linecap="round"/></svg><div class="mg-tc__lap"></div></div></div><span class="mg-tc__k">设计团队</span><p>评审意见直接挂在稿子旁边，智能体帮你把零散反馈归成清单。</p><small>示意用法 · 虚构场景</small></article><article class="mg-tc" style="--c:#E0A21A"><div class="mg-tc__art"><div class="mg-tc__desk"><svg class="mg-peb " viewBox="0 0 92 92" width="108" height="108" aria-hidden="true" style="transform:rotate(0deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#F59AA8"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><path d="M40 59h12" stroke="#191918" stroke-width="2.6" stroke-linecap="round"/><path d="M16 62 6 70" stroke="#F59AA8" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#F59AA8" stroke-width="7" stroke-linecap="round"/></svg><div class="mg-tc__lap"></div></div></div><span class="mg-tc__k">运营团队</span><p>活动排期、素材和复盘放在一个看板里，周报交给智能体起草。</p><small>示意用法 · 虚构场景</small></article></div></div></section></div>
.x-ttc{--bg:#FFFFFF;--ink:#191918;--acc:#0075DE;--accs:#E6F3FE;--soft:#F6F5F4;--card:#F9F9F8;--line:#E6E5E3;--mut:#787774;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-ttc *,.x-ttc *::before,.x-ttc *::after{box-sizing:border-box;margin:0;padding:0}.x-ttc{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-ttc a{color:inherit;text-decoration:none}.x-ttc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-ttc .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-ttc .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-ttc .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}.x-ttc .mg-btn:active{transform:scale(.97)}.x-ttc .mg-btn--pri{background:var(--acc);color:#fff}.x-ttc .mg-btn--pri:hover{background:#005BAB}.x-ttc .mg-btn--sec{background:var(--accs);color:#005BAB}.x-ttc .mg-btn--sec:hover{background:#D5EAFC}.x-ttc .mg-btn--white{background:#fff;color:#005BAB}.x-ttc .mg-btn--white:hover{background:#F0F7FE}.x-ttc .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-ttc .mg-logo__m{width:28px;height:28px}.x-ttc .mg-logo--big{font-size:26px;gap:10px}.x-ttc .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-ttc .mg-peb{display:block;overflow:visible}.x-ttc .mg-peb__eyes{animation:xttcBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xttcBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-ttc *,.x-ttc *::before,.x-ttc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-ttc .mg-teams{padding:20px 0 90px}.x-ttc .mg-teams__g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}.x-ttc .mg-tc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;padding:24px;border-radius:14px;background:var(--c);color:#fff;overflow:hidden;transition:transform .4s var(--ease)}.x-ttc .mg-tc:hover{transform:translateY(-5px)}.x-ttc .mg-tc__art{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:110px}.x-ttc .mg-tc__art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}.x-ttc .mg-tc__desk{position:relative;width:200px;height:150px}.x-ttc .mg-tc__desk .mg-peb{position:absolute;left:46px;top:0;animation:xttcBob 4.4s ease-in-out infinite}.x-ttc .mg-tc__lap{position:absolute;left:20px;right:20px;bottom:6px;height:58px;border-radius:8px 8px 3px 3px;background:#fff;box-shadow:0 10px 0 -4px rgba(0,0,0,.18)}.x-ttc .mg-tc__lap::before{content:"";position:absolute;left:14px;right:14px;top:12px;height:5px;border-radius:3px;background:var(--c);opacity:.6;box-shadow:0 11px 0 rgba(0,0,0,.08),0 22px 0 rgba(0,0,0,.08)}.x-ttc .mg-tc__k{position:absolute;left:24px;top:22px;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.2);font-size:13px;font-weight:600;backdrop-filter:blur(4px)}.x-ttc .mg-tc p{position:relative;font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:19px;line-height:1.6}.x-ttc .mg-tc small{position:relative;display:block;margin-top:10px;font-size:12.5px;opacity:.8}@media (max-width:860px){.x-ttc .mg-teams{padding:0 0 60px}.x-ttc .mg-teams__g{grid-template-columns:1fr;gap:14px}.x-ttc .mg-tc{min-height:360px}.x-ttc .mg-tc p{font-size:17px}}.x-ttc .mg-wrap{width:100%}.x-ttc .mg-teams{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}Subscribe to Builder to see the full source.See pricing