Aurora Prompt Hero
介绍
米白底上由蓝、粉、红三层模糊光斑缓慢漂移形成的极光渐变首屏，居中大标题与副标题下是一个大圆角输入框：占位文字自动打字轮播，带附件按钮、模式下拉、语音按钮与发送键。
拆自整页模板 念成 AI 应用构建器首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Aurora Prompt Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add aurora-prompt-hero
mcp › 使用 8pt MCP 调用 get_component("aurora-prompt-hero")
代码
Aurora Prompt Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<section class="x-hrp"><div class="hrp-bg" aria-hidden="true"><i class="hb1"></i><i class="hb2"></i><i class="hb3"></i><i class="hb4"></i></div><div class="hrp-in"><h1>做点让人心动的东西</h1><p>把新产品、内部工具，甚至一整家公司，带到现实里。</p><form class="hrp-box cmp" action="#"><div class="cmp-f"><textarea rows="2" aria-label="描述你的想法"></textarea><span class="cmp-ph">让念成帮我做<b class="cmp-t"></b><i class="cmp-c"></i></span></div><div class="cmp-bar"><button type="button" class="cmp-add" aria-label="添加附件"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></button><span class="cmp-sp"></span><div class="cmp-mode"><button type="button" class="cmp-mb" aria-haspopup="true"><span>构建</span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></button><div class="cmp-menu"><button type="button" class="on">构建</button><button type="button">规划</button><button type="button">问答</button></div></div><button type="button" class="cmp-mic" aria-label="语音输入"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.7" 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></button><button type="submit" class="cmp-go" aria-label="发送"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div></form></div></section>
.x-hrp{--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-hrp,.x-hrp *{box-sizing:border-box}.x-hrp a{color:inherit;text-decoration:none}.x-hrp button{font:inherit;cursor:pointer;color:inherit}.x-hrp img{display:block;max-width:100%}.x-hrp .cmp{position:relative;width:100%;max-width:720px;margin:0 auto;background:rgba(255,255,255,.96);border-radius:28px;padding:16px 14px 12px 20px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 60px -24px rgba(40,20,80,.35),0 0 0 1px rgba(20,20,20,.05);text-align:left;transition:box-shadow .3s}.x-hrp .cmp:focus-within{box-shadow:0 0 0 4px rgba(76,125,255,.18),0 24px 60px -24px rgba(40,20,80,.35)}.x-hrp .cmp-f{position:relative}.x-hrp .cmp textarea{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);padding:0;min-height:48px}.x-hrp .cmp-ph{position:absolute;left:0;top:0;font-size:16px;line-height:1.5;color:#8A8A85;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%}.x-hrp .cmp-ph b{font-weight:400}.x-hrp .cmp-c{display:inline-block;width:1.5px;height:17px;background:#8A8A85;vertical-align:-3px;margin-left:1px;animation:cmpB 1s steps(1) infinite}.x-hrp .cmp.has .cmp-ph{opacity:0}@keyframes cmpB{50%{opacity:0}}.x-hrp .cmp-bar{display:flex;align-items:center;gap:6px;margin-top:4px}.x-hrp .cmp-sp{flex:1}.x-hrp .cmp-add{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#6B6B66;transition:background .2s}.x-hrp .cmp-add:hover{background:var(--card)}.x-hrp .cmp-mode{position:relative}.x-hrp .cmp-mb{display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;border:0;background:transparent;border-radius:10px;font-size:13px;color:#5F5F5B}.x-hrp .cmp-mb:hover{background:var(--card)}.x-hrp .cmp-mb svg{transition:transform .2s}.x-hrp .cmp-mode.open .cmp-mb svg{transform:rotate(180deg)}.x-hrp .cmp-menu{position:absolute;right:0;top:36px;z-index:5;min-width:120px;background:#fff;border-radius:12px;padding:6px;box-shadow:0 12px 32px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(-4px);pointer-events:none;transition:.18s}.x-hrp .cmp-mode.open .cmp-menu{opacity:1;transform:none;pointer-events:auto}.x-hrp .cmp-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:8px;font-size:13px}.x-hrp .cmp-menu button:hover{background:var(--card)}.x-hrp .cmp-menu button.on{font-weight:600}.x-hrp .cmp-mic{width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:#6B6B66}.x-hrp .cmp-mic:hover{background:var(--card)}.x-hrp .cmp-mic.rec{color:var(--red);animation:cmpP 1.2s infinite}@keyframes cmpP{50%{box-shadow:0 0 0 6px rgba(255,46,99,.15)}}.x-hrp .cmp-go{width:30px;height:30px;border:0;border-radius:50%;background:#1C1C1A;color:#fff;display:grid;place-items:center;opacity:.25;transition:opacity .2s,transform .2s}.x-hrp .cmp.has .cmp-go{opacity:1}.x-hrp .cmp.sent .cmp-go{transform:translateY(-3px)}.x-hrp{position:relative;overflow:hidden;min-height:760px;display:flex;align-items:center;justify-content:center;padding:120px 24px 220px;background:var(--cream);isolation:isolate}.x-hrp .hrp-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}.x-hrp .hrp-bg i{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}.x-hrp .hb1{left:-20%;right:-20%;top:30%;height:70%;background:#4C7DFF;opacity:.95;animation:hrpA 14s ease-in-out infinite alternate}.x-hrp .hb2{left:-10%;right:-10%;top:52%;height:70%;background:#FF66CC;animation:hrpB 16s ease-in-out infinite alternate}.x-hrp .hb3{left:-15%;right:-15%;top:78%;height:60%;background:#FF2E63;animation:hrpA 18s ease-in-out infinite alternate-reverse}.x-hrp .hb4{left:28%;right:28%;top:24%;height:46%;background:#FCFBF8;filter:blur(50px);animation:hrpC 12s ease-in-out infinite alternate}@keyframes hrpA{to{transform:translate3d(4%,-3%,0) scale(1.05)}}@keyframes hrpB{to{transform:translate3d(-5%,2%,0) scale(1.08)}}@keyframes hrpC{to{transform:translate3d(0,4%,0) scale(1.1)}}.x-hrp .hrp-in{position:relative;width:100%;max-width:760px;text-align:center}.x-hrp h1{margin:0 0 12px;font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.1}.x-hrp .hrp-in>p{text-wrap:balance;margin:0 auto 34px;max-width:520px;font-size:clamp(16px,1.6vw,19px);color:#4A4A46;line-height:1.5}@media (max-width:640px){.x-hrp{padding:110px 18px 200px;min-height:640px}.x-hrp .cmp{border-radius:24px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px)}.x-hrp .cmp textarea{min-height:64px}}@media (prefers-reduced-motion:reduce){.x-hrp *,.x-hrp *::before,.x-hrp *::after{animation:none!important;transition:none!important}}.x-hrp{min-height:820px}.x-hrp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {const cl=[];const cmpInit=(f,list,cl)=>{if(!f)return;const ta=f.querySelector('textarea'),t=f.querySelector('.cmp-t'),md=f.querySelector('.cmp-mode'),mb=f.querySelector('.cmp-mb'),mic=f.querySelector('.cmp-mic');let li=0,ci=list[0].length,del=false,tm;
const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const tick=()=>{const w=list[li];if(red){t.textContent=w;return}if(!del){if(ci>=w.length){t.textContent=w;del=true;tm=setTimeout(tick,2200);return}ci++;t.textContent=w.slice(0,ci);if(ci>=w.length){del=true;tm=setTimeout(tick,1600);return}}else{ci--;t.textContent=w.slice(0,ci);if(ci<=0){del=false;li=(li+1)%list.length}}tm=setTimeout(tick,del?35:85)};tick();
const upd=()=>f.classList.toggle('has',ta.value.trim().length>0);ta.addEventListener('input',upd);
const tog=e=>{e.stopPropagation();md.classList.toggle('open')};mb.addEventListener('click',tog);
const pick=e=>{const b=e.target.closest('.cmp-menu button');if(!b)return;md.querySelectorAll('.cmp-menu button').forEach(x=>x.classList.toggle('on',x===b));mb.querySelector('span').textContent=b.textContent;md.classList.remove('open')};md.addEventListener('click',pick);
const out=()=>md.classList.remove('open');document.addEventListener('click',out);
const mc=()=>mic.classList.toggle('rec');mic.addEventListener('click',mc);
const sub=e=>{e.preventDefault();f.classList.add('sent');setTimeout(()=>{f.classList.remove('sent');ta.value='';upd()},500)};f.addEventListener('submit',sub);
cl.push(()=>{clearTimeout(tm);document.removeEventListener('click',out)})};cmpInit(root.querySelector('.cmp'),["一家手作陶器网店…","团队内部的报销工具…","宠物医院的预约页面…","周末市集的活动报名页…"],cl);return ()=>cl.forEach(f=>f())}订阅 Builder 查看完整源码。查看价格