Glow Prompt Hero
介绍
深色首屏：顶部紫色光晕缓慢呼吸，背景用画布绘制下落的字符雨；左侧双色大标题、流程短句、渐变主按钮与工具名跑马灯，右侧是可暂停的视频播放器样机，进度条与时间实时走动。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Glow Prompt Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add glow-prompt-hero
mcp › 使用 8pt MCP 调用 get_component("glow-prompt-hero")
代码
Glow Prompt Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-gph"><canvas class="gph-rain" aria-hidden="true"></canvas><div class="gph-glow" aria-hidden="true"></div><div class="gph-in"><div class="gph-l"><span class="gph-badge"><b>精选</b>模板与组件 · 每周上新</span><h1><span class="d">用</span>设计提示词<span class="d">，</span><br>让 AI 建站<span class="d">更出彩</span></h1><p class="gph-flow">浏览 → 复制提示词 → 粘贴到 AI 建站工具 → 立即生成</p><div class="gph-cta"><a href="#" class="gph-b1">浏览设计提示词库 <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a href="#" class="gph-b2">解锁全部资源 <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div><p class="gph-cap">适配常用 AI 建站工具</p><div class="gph-mq"><div class="gph-track"><span class="gph-tool"><span class="tl-ic" style="background:#111"><svg viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6z" fill="#fff"/></svg></span><b>闪建</b></span><span class="gph-tool"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span><b>码舟</b></span><span class="gph-tool"><span class="tl-ic" style="background:#EC4899"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="6" height="6" fill="#fff"/><rect x="13" y="13" width="6" height="6" fill="#fff"/></svg></span><b>拼页</b></span><span class="gph-tool"><span class="tl-ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24"><path d="M7 17a4 4 0 1 1 1-7.9A5 5 0 0 1 17.5 10 3.5 3.5 0 0 1 17 17z" fill="#fff"/></svg></span><b>云匠</b></span><span class="gph-tool"><span class="tl-ic" style="background:#10B981"><svg viewBox="0 0 24 24"><path d="M4 8l8-4 8 4-8 4zM4 12l8 4 8-4M4 16l8 4 8-4" stroke="#fff" stroke-width="1.6" fill="none"/></svg></span><b>栈工</b></span><span class="gph-tool"><span class="tl-ic" style="background:#6366F1"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 8v4l3 2" stroke="#fff" stroke-width="2" fill="none"/></svg></span><b>速搭</b></span><span class="gph-tool"><span class="tl-ic" style="background:#D946EF"><svg viewBox="0 0 24 24"><path d="M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z" fill="#fff"/></svg></span><b>灵绘</b></span><span class="gph-tool"><span class="tl-ic" style="background:#0B0B0F"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5zM5 10h14" stroke="#fff" stroke-width="1.8" fill="none"/></svg></span><b>页工坊</b></span><span class="gph-tool"><span class="tl-ic" style="background:#111"><svg viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6z" fill="#fff"/></svg></span><b>闪建</b></span><span class="gph-tool"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span><b>码舟</b></span><span class="gph-tool"><span class="tl-ic" style="background:#EC4899"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="6" height="6" fill="#fff"/><rect x="13" y="13" width="6" height="6" fill="#fff"/></svg></span><b>拼页</b></span><span class="gph-tool"><span class="tl-ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24"><path d="M7 17a4 4 0 1 1 1-7.9A5 5 0 0 1 17.5 10 3.5 3.5 0 0 1 17 17z" fill="#fff"/></svg></span><b>云匠</b></span><span class="gph-tool"><span class="tl-ic" style="background:#10B981"><svg viewBox="0 0 24 24"><path d="M4 8l8-4 8 4-8 4zM4 12l8 4 8-4M4 16l8 4 8-4" stroke="#fff" stroke-width="1.6" fill="none"/></svg></span><b>栈工</b></span><span class="gph-tool"><span class="tl-ic" style="background:#6366F1"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 8v4l3 2" stroke="#fff" stroke-width="2" fill="none"/></svg></span><b>速搭</b></span><span class="gph-tool"><span class="tl-ic" style="background:#D946EF"><svg viewBox="0 0 24 24"><path d="M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z" fill="#fff"/></svg></span><b>灵绘</b></span><span class="gph-tool"><span class="tl-ic" style="background:#0B0B0F"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5zM5 10h14" stroke="#fff" stroke-width="1.8" fill="none"/></svg></span><b>页工坊</b></span></div></div></div><div class="gph-r"><div class="gph-player"><img src="https://8pt.dev/api/media/29ecb654acc47cf897e08513.webp" alt=""><div class="gph-shade"></div><button type="button" class="gph-big" aria-label="播放"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button><div class="gph-bar"><button type="button" class="gph-pp" aria-label="暂停"><svg class="i-pause" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg><svg class="i-play" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button><span class="gph-time">0:00 / 2:16</span><i class="gph-prog"><u></u></i><button type="button" class="gph-mute" aria-label="静音"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9v6h4l5 4V5L8 9z"/><path d="M17 9l4 6M21 9l-4 6"/></svg></button></div></div></div></div></div>
.x-gph{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-gph,.x-gph *{box-sizing:border-box}.x-gph a{color:inherit;text-decoration:none}.x-gph button{font:inherit;cursor:pointer}.x-gph .lg-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(124,58,237,.7);flex:none}.x-gph .lg-mark svg{width:60%;height:60%}.x-gph{position:relative;width:100%;overflow:hidden;background:#07060B;color:#fff;padding:72px 0 80px;isolation:isolate}.x-gph .gph-rain{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}.x-gph .gph-glow{position:absolute;z-index:-1;left:-10%;right:-10%;top:-40%;height:120%;background:radial-gradient(60% 55% at 40% 18%,rgba(167,139,250,.9),rgba(109,40,217,.55) 40%,transparent 74%);filter:blur(10px);animation:gph-breathe 8s ease-in-out infinite}.x-gph .gph-in{max-width:1200px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.x-gph .gph-badge{display:inline-flex;gap:6px;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:4px}.x-gph .gph-badge b{color:#fff;font-weight:600}.x-gph h1{margin:16px 0 14px;font-size:clamp(34px,3.6vw,50px);line-height:1.18;font-weight:600;letter-spacing:-.02em}.x-gph h1 .d{color:rgba(196,181,253,.72);font-weight:500}.x-gph .gph-flow{margin:0;font-size:15px;color:rgba(255,255,255,.82)}.x-gph .gph-cta{display:flex;gap:10px;margin:30px 0 34px;flex-wrap:wrap}.x-gph .gph-cta a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:10px;font-size:15px;font-weight:500;transition:transform .2s,box-shadow .2s,background .2s}.x-gph .gph-b1{background:linear-gradient(180deg,#8B5CF6,#6D28D9);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -10px rgba(139,92,246,.9);border:1px solid rgba(196,181,253,.5)}.x-gph .gph-b1:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 36px -10px rgba(139,92,246,1)}.x-gph .gph-b2{background:linear-gradient(180deg,#3A3A40,#232328);border:1px solid rgba(255,255,255,.14)}.x-gph .gph-b2:hover{background:linear-gradient(180deg,#45454c,#2a2a30)}.x-gph .gph-cap{margin:0 0 12px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75)}.x-gph .gph-mq{overflow:hidden;contain:inline-size;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.x-gph .gph-track{display:flex;gap:30px;width:max-content;animation:gph-mq 26s linear infinite}.x-gph .gph-tool{display:flex;align-items:center;gap:8px;font-size:16px;color:rgba(255,255,255,.62);white-space:nowrap}.x-gph .gph-tool b{font-weight:600}.x-gph .tl-ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;filter:grayscale(1) brightness(1.6);opacity:.7}.x-gph .tl-ic svg{width:15px;height:15px}.x-gph .gph-player{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -30px rgba(124,58,237,.8)}.x-gph .gph-player img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:gph-kb 18s ease-in-out infinite alternate}.x-gph .gph-player.paused img{animation-play-state:paused}.x-gph .gph-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,.1),rgba(7,6,11,.55))}.x-gph .gph-big{position:absolute;left:50%;top:45%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:all .3s}.x-gph .gph-player.paused .gph-big{opacity:1;transform:none}.x-gph .gph-bar{position:absolute;left:12px;right:12px;bottom:12px;height:46px;border-radius:12px;background:rgba(40,40,46,.82);backdrop-filter:blur(10px);display:flex;align-items:center;gap:12px;padding:0 12px;font-size:13px}.x-gph .gph-bar button{border:0;background:none;color:#fff;display:grid;place-items:center;padding:4px}.x-gph .gph-pp .i-play,.x-gph .paused .gph-pp .i-pause{display:none}.x-gph .paused .gph-pp .i-play{display:block}.x-gph .gph-time{font-variant-numeric:tabular-nums;white-space:nowrap}.x-gph .gph-prog{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}.x-gph .gph-prog u{display:block;height:100%;width:0;background:#fff;border-radius:3px}@keyframes gph-mq{to{transform:translateX(-50%)}}@keyframes gph-kb{to{transform:scale(1.14) translate(-2%,1%)}}@keyframes gph-breathe{50%{opacity:.75}}@media (max-width:900px){.x-gph .gph-in{grid-template-columns:1fr;gap:40px;padding:0 18px}.x-gph{padding:44px 0 50px}.x-gph .gph-cta a{flex:1 1 100%;justify-content:center;height:52px}.x-gph .gph-cap{text-align:center}.x-gph .gph-l{text-align:center}.x-gph h1{font-size:30px}}@media (prefers-reduced-motion:reduce){.x-gph *{animation:none!important;transition:none!important}}.x-gph{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const cv = root.querySelector('.gph-rain');
const ctx = cv.getContext('2d');
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const chars = '01<>/{}[]=+棱页#*';
let cols = [], raf = 0, w = 0, h = 0, last = 0;
const size = () => {
const r = root.getBoundingClientRect(); w = cv.width = Math.max(1, Math.round(r.width)); h = cv.height = Math.max(1, Math.round(r.height));
cols = Array.from({ length: Math.ceil(w / 18) }, () => Math.random() * h);
};
const draw = (t) => {
if (t - last > 70) {
…订阅 Builder 查看完整源码。查看价格