Glowing Search Bar
介绍
旋转的锥形渐变只露出 1.5 像素描边，聚焦时外发光增强，带 ⌘K 快捷键。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Glowing Search Bar 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add glowing-search-bar
mcp › 使用 8pt MCP 调用 get_component("glowing-search-bar")
代码
Glowing Search Bar 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<label class="x-gs">
<span class="x-gs__glow" aria-hidden="true"><i></i></span>
<span class="x-gs__field">
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<input type="search" placeholder="搜索组件、模板、Skill">
<kbd>⌘K</kbd>
</span>
</label>.x-gs{position:relative;display:block;width:min(420px,100%);border-radius:16px;padding:1.5px;overflow:hidden;isolation:isolate}
.x-gs__glow{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;opacity:.55;transition:opacity .3s}
.x-gs__glow i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;background:conic-gradient(#4D74FF,#00c2ff,#ff4fd8,#c7ff5e,#4D74FF);transform:translate(-50%,-50%) rotate(0);animation:x-gs 4s linear infinite}
.x-gs:focus-within .x-gs__glow{opacity:1}
.x-gs::after{content:"";position:absolute;inset:-30px;z-index:-2;background:radial-gradient(60% 80% at 50% 50%,color-mix(in srgb,var(--d-accent,#4D74FF) 40%,transparent),transparent 70%);opacity:0;transition:opacity .4s}
.x-gs:focus-within::after{opacity:1}
.x-gs__field{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:15px;background:var(--d-card,#0d0d14);color:var(--d-muted,#a0a0ab)}
.x-gs__field svg{width:18px;height:18px;flex:none}
.x-gs input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--d-fg,#fff);font:15px/1 var(--d-font,system-ui,sans-serif)}
.x-gs input::placeholder{color:var(--d-muted,#8a8a95)}
.x-gs kbd{padding:4px 7px;border-radius:6px;border:1px solid var(--d-line,rgba(255,255,255,.14));font:600 11px/1 ui-monospace,monospace}
@keyframes x-gs{to{transform:translate(-50%,-50%) rotate(1turn)}}const init = (root) => {
const input = root.querySelector('input');
const onKey = e => { if (e.key === 'k' && (e.metaKey || e.ctrlKey) && root.closest('[data-own-k]')) { e.preventDefault(); input.focus(); } };
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
};订阅 Builder 查看完整源码。查看价格