Ask AI Composer
Overview
An AI chat input that types, deletes and rotates example questions, with a branded data-source tag and a blue send key, four cards floating slowly behind it and a row of round integration icons below. Good for introducing an API or MCP integration.
Taken from the page template Chengbang App Market Intelligence 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 Ask AI Composer 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 ask-ai-composer
mcp › Use 8pt MCP to call get_component("ask-ai-composer")
Code
Source for Ask AI Composer. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-aac"><div class="aac-stack"><span><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><b>背词鸭</b><u></u><u></u><em>月收入 —</em></span><span><span class="ic" style="background:#22C55E"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l7-7"/></svg></span><b>轻食记</b><u></u><u></u><em>月收入 —</em></span><span><span class="ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z"/></svg></span><b>眠岛</b><u></u><u></u><em>月收入 —</em></span><span><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><b>光修</b><u></u><u></u><em>月收入 —</em></span></div><div class="aac-box"><p class="aac-text"><span class="aac-typed"></span><i class="aac-caret"></i></p><div class="aac-row"><span class="aac-chip"><svg viewBox="0 0 32 32" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M4 22l12-16 12 16z"/><path d="M10 22l6-8 6 8"/><path d="M4 22l12 6 12-6"/></svg>澄榜<b>×</b></span><button type="button" class="aac-send" aria-label="发送"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div></div><div class="aac-with"><small>可接入</small><div><i class="a1"></i><i class="a2"></i><i class="a3"></i><i class="a4"></i><i class="a5"></i></div></div></div>
.x-aac{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-aac,.x-aac *{box-sizing:border-box}.x-aac a{color:inherit;text-decoration:none}.x-aac button{font:inherit;cursor:pointer}.x-aac{position:relative;width:100%;max-width:820px;margin:0 auto;text-align:center;padding:56px 64px 48px;border-radius:28px;background:url(https://8pt.dev/api/media/f744d0e82fa44c4c60fdaea6.webp) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.x-aac .aac-stack{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 4%;margin-bottom:-28px}.x-aac .aac-stack>span{height:150px;padding:12px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#F3F5F9);animation:aac-bob 4s ease-in-out infinite}.x-aac .aac-stack>span:nth-child(2){animation-delay:.4s}.x-aac .aac-stack>span:nth-child(3){animation-delay:.8s}.x-aac .aac-stack>span:nth-child(4){animation-delay:1.2s}.x-aac .aac-box{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 24px 50px -24px rgba(16,24,40,.3)}.x-aac .aac-text{margin:0 0 18px;min-height:22px;font-size:15px;color:#1D2939}.x-aac .aac-caret{display:inline-block;width:1.5px;height:16px;vertical-align:-2px;margin-left:1px;background:var(--ink);animation:aac-blink 1s steps(1) infinite}.x-aac .aac-row{display:flex;justify-content:space-between;align-items:center}.x-aac .aac-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;background:#EEF4FF;color:#1D2939;padding:4px 10px;border-radius:8px}.x-aac .aac-chip svg{width:14px;height:14px}.x-aac .aac-chip b{font-weight:400;color:#98A2B3;margin-left:2px}.x-aac .aac-send{width:34px;height:34px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;transition:transform .2s}.x-aac .aac-send:hover{transform:scale(1.06)}.x-aac .aac-with{margin-top:36px}.x-aac .aac-with small{font-size:13px;color:rgba(255,255,255,.85)}.x-aac .aac-with div{display:flex;justify-content:center;gap:14px;margin-top:14px}.x-aac .aac-with i{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(16,24,40,.06);position:relative}.x-aac .aac-with i::after{content:"";position:absolute;inset:11px;border-radius:5px}.x-aac .a1::after{background:conic-gradient(#0E1116 0 25%,#98A2B3 0 50%,#0E1116 0 75%,#98A2B3 0);border-radius:50%!important}.x-aac .a2::after{background:#F97316;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}.x-aac .a3::after{background:linear-gradient(135deg,#8B5CF6,#EC4899);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}.x-aac .a4::after{background:#0E1116;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.x-aac .a5::after{border:2.5px solid #38BDF8;border-radius:50%!important}.x-aac .aac-stack .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center}.x-aac .aac-stack .ic svg{width:14px;height:14px}.x-aac .aac-stack b{font-size:12px;font-weight:600}.x-aac .aac-stack u{display:block;width:100%;height:5px;border-radius:3px;background:#E9ECF2}.x-aac .aac-stack u+u{width:70%}.x-aac .aac-stack em{font-style:normal;font-size:10px;color:#2F6BEA;font-weight:600}@media (max-width:640px){.x-aac{padding:32px 16px}.x-aac .aac-stack{gap:8px;padding:0}.x-aac .aac-stack em{display:none}}@keyframes aac-bob{50%{transform:translateY(-6px)}}@keyframes aac-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.x-aac *{animation:none!important}}.x-aac{max-width:none;width:100%;padding:72px 10% 64px;border-radius:0}.x-aac::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.28) 1.1px,transparent 1.4px);background-size:18px 18px;pointer-events:none}.x-aac>*{position:relative}.x-aac .aac-box,.x-aac .aac-stack{max-width:680px;margin-left:auto;margin-right:auto}.x-aac .aac-stack{margin-bottom:-28px}(root) => {
const out = root.querySelector('.aac-typed');
const qs = ['哪些订阅类应用现在收入最高？', '列出轻食记正在投放的广告', '轻食记的引导页和付费墙长什么样？', '搜「卡路里计算」时谁排在前面？'];
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let q = 0, c = 0, del = false, t;
if (reduce) { out.textContent = qs[0]; return () => {}; }
const tick = () => {
const s = qs[q];
if (!del) { c++; out.textContent = s.slice(0, c); if (c === s.length) { del = true; t = setTimeout(tick, 1600); return; } t = setTimeout(tick, 90); }
else { c--; out.textContent = s.slice(0, c); if (c === 0) { del = false; q = (q + 1) % qs.length; t = setTimeout(tick, 300); return; } t = setTimeout(tick, 30); }
};
tick();
…Subscribe to Builder to see the full source.See pricing