Idea Search Marquee
Overview
A pill search box with quick-term tags above a marquee of app cards that fades at both ends and pauses on hover. Clicking a tag fills the search box, highlights cards of that kind and dims the rest. Made for a Try it first block on a tool site home page.
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 Idea Search Marquee to your project in your colors.
Where to use it
Search boxes, AI chat inputs, form fields, file uploads, verification codes and anywhere else people type.
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 idea-search-marquee
mcp › Use 8pt MCP to call get_component("idea-search-marquee")
Code
Source for Idea Search Marquee. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ism"><form class="ism-form" action="#"><label class="ism-in"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg><input type="text" placeholder="例如：卡路里计算、冥想、健身" aria-label="应用点子"></label><button type="submit" class="ism-go">查看应用 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></form><div class="ism-chips"><button type="button">记账理财</button><button type="button">卡路里计算</button><button type="button">健身训练</button><button type="button">冥想助眠</button><button type="button">专注效率</button><button type="button">学英语</button><button type="button">识别植物</button><button type="button">修图</button></div><div class="ism-rail"><div class="ism-track"><div class="ism-card" data-c="营养"><div class="ism-top"><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><span><b>轻食记</b><small>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><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><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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><span><b>眠岛</b><small>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span><b>声浪口语</b><small>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div><div class="ism-card" data-c="营养"><div class="ism-top"><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><span><b>轻食记</b><small>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><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><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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><span><b>眠岛</b><small>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span><b>声浪口语</b><small>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div></div></div><div class="ism-rail"><div class="ism-track rev"><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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><span><b>眠岛</b><small>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><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><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="营养"><div class="ism-top"><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><span><b>轻食记</b><small>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span><b>声浪口语</b><small>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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><span><b>眠岛</b><small>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><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><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="营养"><div class="ism-top"><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><span><b>轻食记</b><small>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span><b>声浪口语</b><small>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div></div></div><p class="ism-note">示意数据</p></div>
.x-ism{--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-ism,.x-ism *{box-sizing:border-box}.x-ism a{color:inherit;text-decoration:none}.x-ism button{font:inherit;cursor:pointer}.x-ism{width:100%;max-width:1200px;margin:0 auto;text-align:center}.x-ism .ism-form{display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto;padding:6px 6px 6px 18px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 24px -10px rgba(16,24,40,.18)}.x-ism .ism-in{flex:1;display:flex;align-items:center;gap:10px;color:#98A2B3;min-width:0}.x-ism input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15px;color:var(--ink);background:transparent}.x-ism .ism-go{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--ink);color:#fff;font-size:14px;font-weight:500;height:44px;padding:0 20px;border-radius:999px;white-space:nowrap;transition:transform .2s}.x-ism .ism-go:hover{transform:translateY(-1px)}.x-ism .ism-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin:18px auto 34px}.x-ism .ism-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;font-size:13px;color:#475467;padding:6px 14px;transition:all .2s}.x-ism .ism-chips button:hover,.x-ism .ism-chips button.on{border-color:var(--ink);color:var(--ink)}.x-ism .ism-rail{position:relative;overflow:hidden;contain:inline-size;max-width:100%;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.x-ism .ism-track{display:flex;gap:14px;width:max-content;animation:ism-move 48s linear infinite}.x-ism .ism-rail:hover .ism-track{animation-play-state:paused}.x-ism .ism-card{width:236px;flex:none;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 1px 3px rgba(16,24,40,.05);transition:opacity .3s,transform .3s}.x-ism .ism-card.dim{opacity:.3}.x-ism .ism-card.hit{transform:translateY(-4px);border-color:#BFD2FB}.x-ism .ism-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}.x-ism .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}.x-ism .ic svg{width:19px;height:19px}.x-ism .ism-top>span:not(.ic){display:flex;flex-direction:column}.x-ism .ism-top b{font-size:15px;font-weight:600}.x-ism .ism-top small{font-size:12px;color:#98A2B3}.x-ism .ism-card p{margin:12px 0 0;display:flex;align-items:baseline;gap:4px}.x-ism .ism-card p b{font-size:16px;font-weight:600}.x-ism .ism-card p small{font-size:12px;color:#98A2B3}.x-ism .ism-note{margin:8px 0 0;font-size:11px;color:#98A2B3}.x-ism .ism-rail+.ism-rail{margin-top:8px}.x-ism .ism-track.rev{animation-direction:reverse;animation-duration:56s}@keyframes ism-move{to{transform:translateX(-50%)}}@media (max-width:640px){.x-ism .ism-go{padding:0 14px}.x-ism .ism-card{width:200px}}@media (prefers-reduced-motion:reduce){.x-ism .ism-track{animation:none}}.x-ism{max-width:none;padding:64px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-ism{width:1200px;max-width:100%}(root) => {
const input = root.querySelector('input');
const chips = [...root.querySelectorAll('.ism-chips button')];
const cards = [...root.querySelectorAll('.ism-card')];
const form = root.querySelector('form');
const map = { '记账理财': '理财', '卡路里计算': '营养', '健身训练': '健身', '冥想助眠': '冥想', '专注效率': '效率', '学英语': '语言', '识别植物': '植物', '修图': '修图' };
const apply = (q) => {
const c = map[q] || Object.values(map).find(v => q && q.includes(v)) || '';
cards.forEach(el => { el.classList.toggle('dim', !!c && el.dataset.c !== c); el.classList.toggle('hit', !!c && el.dataset.c === c); });
};
const onChip = (e) => { const b = e.currentTarget; chips.forEach(x => x.classList.toggle('on', x === b)); input.value = b.textContent; apply(b.textContent); };
const onSubmit = (e) => { e.preventDefault(); apply(input.value.trim()); };
…Subscribe to Builder to see the full source.See pricing