Portfolio Intro Hero
介绍
左侧名片栏放头像、接单状态、关注按钮、大标题与流光主按钮，底部显示实时当地时间；右侧两列作品卡片一上一下缓慢滚动，悬停暂停。适合独立设计师作品集首屏。
拆自整页模板 砚白 独立设计师作品集，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Portfolio Intro Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add portfolio-intro-hero
mcp › 使用 8pt MCP 调用 get_component("portfolio-intro-hero")
代码
Portfolio Intro Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-pih"><aside class="x-pih__side"><div class="x-pih__card"><span class="x-pih__ava"><img src="https://8pt.dev/api/media/309a1d118e62dd11f1e072d3.webp" alt="砚白头像"></span><span class="x-pih__who"><b>砚白</b><span>接项目中</span></span><button type="button" class="x-pih__follow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="8" r="3.5"/><path d="M3.5 19.5c.8-3.4 3.4-5.5 6.5-5.5s5.7 2.1 6.5 5.5"/><path d="M18.5 8v6"/><path d="M15.5 11h6"/></svg><em>关注</em></button></div><div class="x-pih__hero"><h2>把 AI 粗糙稿<br>打磨成可<em>信赖</em>的产品</h2><p>为初创团队与 SaaS 做后台、移动应用和落地页，从设计一路做到代码</p><div class="x-pih__ctas"><button type="button" class="x-pih__glow">发起项目<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg></button><button type="button" class="x-pih__ghost">查看报价</button></div></div><div class="x-pih__foot"><b>清晨咖啡，然后是像素</b><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg><time>当地时间 --:--（GMT+8）</time></span></div></aside><div class="x-pih__wall"><div class="x-pih__col"><div class="x-pih__track"><span class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/596ca18adba2d1c8eb2b5f28.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">灯屿</b><span class="s-nav"><i>夜读</i><i>札记</i><i>关于</i></span></span><span class="s-h">把夜晚<br>留给慢下来的人</span><span class="s-p">收藏值得读的文字，等夜深时再慢慢翻开</span><span class="s-btn">进入夜读</span></span></span></span><span class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/2a2e69f3d62322e9318bb4c6.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">沉舟</b><span class="s-nav"><i>返回</i></span></span><span class="s-404">404</span><span class="s-p s-c">这一页沉到海底了</span><span class="s-btn s-cb">浮回首页</span></span></span></span><span class="tile lt" style="--ar:1.3333"><span class="tin"><img src="https://8pt.dev/api/media/18decab4de8eda12bcd7ab66.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">雪屋</b><span class="s-nav"><i>小屋</i><i>手作</i><i>候补</i></span></span><span class="s-h">冬天的<br>小屋</span><span class="s-btn s-dk">加入候补</span></span></span></span><span class="tile lt" style="--ar:0.7500"><span class="tin"><img src="https://8pt.dev/api/media/b72329bcdf3f85eb9382a8ad.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">陶序</b><span class="s-nav"><i>器物</i><i>工坊</i></span></span><span class="s-h">器物<br>与留白</span><span class="s-p">手捏的形状，安静的颜色</span></span></span></span><span aria-hidden="true" class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/596ca18adba2d1c8eb2b5f28.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">灯屿</b><span class="s-nav"><i>夜读</i><i>札记</i><i>关于</i></span></span><span class="s-h">把夜晚<br>留给慢下来的人</span><span class="s-p">收藏值得读的文字，等夜深时再慢慢翻开</span><span class="s-btn">进入夜读</span></span></span></span><span aria-hidden="true" class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/2a2e69f3d62322e9318bb4c6.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">沉舟</b><span class="s-nav"><i>返回</i></span></span><span class="s-404">404</span><span class="s-p s-c">这一页沉到海底了</span><span class="s-btn s-cb">浮回首页</span></span></span></span><span aria-hidden="true" class="tile lt" style="--ar:1.3333"><span class="tin"><img src="https://8pt.dev/api/media/18decab4de8eda12bcd7ab66.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">雪屋</b><span class="s-nav"><i>小屋</i><i>手作</i><i>候补</i></span></span><span class="s-h">冬天的<br>小屋</span><span class="s-btn s-dk">加入候补</span></span></span></span><span aria-hidden="true" class="tile lt" style="--ar:0.7500"><span class="tin"><img src="https://8pt.dev/api/media/b72329bcdf3f85eb9382a8ad.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">陶序</b><span class="s-nav"><i>器物</i><i>工坊</i></span></span><span class="s-h">器物<br>与留白</span><span class="s-p">手捏的形状，安静的颜色</span></span></span></span></div></div><div class="x-pih__col"><div class="x-pih__track"><span class="tile lt" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/2a48eefd24317a44b0258c79.webp" alt="" draggable="false"><span class="site"><span class="s-top"><span class="s-h2">一处安静的<br>林间角落</span><span class="s-cols"><i>白噪音</i><i>专注</i><i>日志</i><i>花园</i><i>关于</i><i>联系</i></span></span><span class="s-big">竹息</span><span class="s-foot"><i>© 竹息</i><i>隐私 · 条款</i></span></span></span></span><span class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/1a24aa1e7d9544d8f8a6da70.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">沙门</b><span class="s-nav"><i>故事</i><i>出口</i></span></span><span class="s-h">走出<br>信息流</span><span class="s-p">推开门，世界会安静一点</span><span class="s-link">点击进入 →</span></span></span></span><span class="tile lt" style="--ar:1.3333"><span class="tin"><img src="https://8pt.dev/api/media/ec31ce9b0b61db0d2b2d1f92.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">云镜</b><span class="s-nav"><i>观测</i><i>星图</i><i>订阅</i></span></span><span class="s-h s-r">看得更远<br>一点点</span><span class="s-p s-r">把日落之后的天空装进口袋</span></span></span></span><span class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/6e610c02b7c385e2fd9b5975.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">星页</b><span class="s-nav"><i>书架</i><i>星图</i><i>我的</i></span></span><span class="s-h s-c s-up">每一页<br>都是一片星空</span><span class="s-btn s-cb">开始阅读</span></span></span></span><span class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/44f2c620b7b4377af63ad5b3.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">棱光</b><span class="s-pill">预约体验</span></span><span class="s-h">一束光，<br>万种颜色</span><span class="s-p">透过一块玻璃，看见光的全部</span><span class="s-hint">向下浏览</span></span></span></span><span aria-hidden="true" class="tile lt" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/2a48eefd24317a44b0258c79.webp" alt="" draggable="false"><span class="site"><span class="s-top"><span class="s-h2">一处安静的<br>林间角落</span><span class="s-cols"><i>白噪音</i><i>专注</i><i>日志</i><i>花园</i><i>关于</i><i>联系</i></span></span><span class="s-big">竹息</span><span class="s-foot"><i>© 竹息</i><i>隐私 · 条款</i></span></span></span></span><span aria-hidden="true" class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/1a24aa1e7d9544d8f8a6da70.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">沙门</b><span class="s-nav"><i>故事</i><i>出口</i></span></span><span class="s-h">走出<br>信息流</span><span class="s-p">推开门，世界会安静一点</span><span class="s-link">点击进入 →</span></span></span></span><span aria-hidden="true" class="tile lt" style="--ar:1.3333"><span class="tin"><img src="https://8pt.dev/api/media/ec31ce9b0b61db0d2b2d1f92.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">云镜</b><span class="s-nav"><i>观测</i><i>星图</i><i>订阅</i></span></span><span class="s-h s-r">看得更远<br>一点点</span><span class="s-p s-r">把日落之后的天空装进口袋</span></span></span></span><span aria-hidden="true" class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/6e610c02b7c385e2fd9b5975.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">星页</b><span class="s-nav"><i>书架</i><i>星图</i><i>我的</i></span></span><span class="s-h s-c s-up">每一页<br>都是一片星空</span><span class="s-btn s-cb">开始阅读</span></span></span></span><span aria-hidden="true" class="tile d" style="--ar:1.7778"><span class="tin"><img src="https://8pt.dev/api/media/44f2c620b7b4377af63ad5b3.webp" alt="" draggable="false"><span class="site"><span class="s-top"><b class="s-logo">棱光</b><span class="s-pill">预约体验</span></span><span class="s-h">一束光，<br>万种颜色</span><span class="s-p">透过一块玻璃，看见光的全部</span><span class="s-hint">向下浏览</span></span></span></span></div></div></div></div>
.x-pih{box-sizing:border-box;position:relative;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%;max-width:1160px;height:760px;margin:0 auto;border-radius:24px;overflow:hidden;background:#12100f;color:#efe9de;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif;box-shadow:0 0 0 1px rgba(239,233,222,.07)}.x-pih *,.x-pih *::before,.x-pih *::after{box-sizing:border-box}.x-pih svg{width:1em;height:1em;flex:none}.x-pih__side{position:relative;z-index:2;display:flex;flex-direction:column;background:#1c1a18;box-shadow:1px 0 0 rgba(239,233,222,.09),30px 0 60px -30px rgba(0,0,0,.6)}.x-pih__card{display:flex;align-items:center;gap:12px;padding:34px 34px 0}.x-pih__ava{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(239,233,222,.09)}.x-pih__ava img{width:100%;height:100%;object-fit:cover;transform:scale(1.35) translateY(4%)}.x-pih__who{flex:1;min-width:0;line-height:1.35}.x-pih__who b{display:block;font-size:14px;font-weight:600}.x-pih__who span{display:flex;align-items:center;gap:6px;font-size:13px;color:#8f877c}.x-pih__who span::before{content:"";width:6px;height:6px;border-radius:50%;background:#7fd18b;animation:x-pih-pulse 2s ease-in-out infinite}@keyframes x-pih-pulse{0%,100%{box-shadow:0 0 0 3px rgba(127,209,139,.16)}50%{box-shadow:0 0 0 6px rgba(127,209,139,0)}}.x-pih__follow{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:0;border-radius:99px;background:#262321;color:#efe9de;font:inherit;font-size:13px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09)}.x-pih__follow em{font-style:normal}.x-pih__follow.is-on{color:#f0b07a}.x-pih__hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 34px}.x-pih__hero h2{margin:0;font-size:32px;line-height:1.24;font-weight:600}.x-pih__hero h2 em{font-style:normal;background:linear-gradient(100deg,#f6c99b,#e6925a 60%,#f3c08f);-webkit-background-clip:text;background-clip:text;color:transparent}.x-pih__hero p{margin:16px 0 0;font-size:14px;line-height:1.7;color:#a39a8e}.x-pih__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.x-pih__foot{display:flex;flex-direction:column;gap:4px;padding:20px 34px 26px;border-top:1px solid rgba(239,233,222,.09);font-size:13px}.x-pih__foot b{font-weight:500}.x-pih__foot span{display:flex;align-items:center;gap:6px;color:#8f877c;font-variant-numeric:tabular-nums}.x-pih__wall{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 18px;margin-left:-60px;background:radial-gradient(120% 90% at 60% 40%,#1b1816,#100e0d 70%)}.x-pih__col{min-height:0;overflow:hidden}.x-pih__track{display:flex;flex-direction:column;gap:18px;animation:x-pih-up 48s linear infinite}.x-pih__col:nth-child(2) .x-pih__track{animation-duration:60s;animation-direction:reverse}.x-pih__wall:hover .x-pih__track{animation-play-state:paused}@keyframes x-pih-up{to{transform:translateY(calc(-50% - 9px))}}.x-pih .tile{display:block;flex:none;padding:5px;border-radius:19px;background:#2a2725;box-shadow:0 0 0 1px rgba(255,255,255,.04)}.x-pih .tin{position:relative;display:block;width:100%;aspect-ratio:var(--ar);border-radius:14px;overflow:hidden;container-type:inline-size;background:#0e0d0c}.x-pih .tin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.x-pih .d .tin::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 30%,transparent 55%,rgba(0,0,0,.45))}.x-pih .site{z-index:2}@media (max-width:760px){.x-pih{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;height:820px}.x-pih__side{order:2}.x-pih__hero{padding:18px 24px 24px}.x-pih__card{padding:22px 24px 0}.x-pih__foot{display:none}.x-pih__wall{margin:0}}@media (prefers-reduced-motion:reduce){.x-pih__track,.x-pih__who span::before,.x-pih .x-pih__glow::before{animation:none}}.x-pih .x-pih__glow{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:99px;color:#2a1d12;font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:linear-gradient(180deg,#fff7ec,#f3dcc2);box-shadow:0 0 0 1px rgba(255,214,170,.6),0 0 22px 2px rgba(240,160,90,.45),0 0 60px 6px rgba(240,140,70,.18),inset 0 -2px 6px rgba(200,120,60,.25);isolation:isolate;transition:transform .2s,box-shadow .3s}.x-pih .x-pih__glow::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0 60%,#ffd2a1 72%,#fff 76%,#f39a52 82%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;opacity:.9;animation:x-pih-shine 2.8s ease-in-out infinite}.x-pih .x-pih__glow:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,214,170,.8),0 0 28px 4px rgba(240,160,90,.55),0 0 80px 10px rgba(240,140,70,.22),inset 0 -2px 6px rgba(200,120,60,.25)}.x-pih .x-pih__glow svg{width:16px;height:16px;transition:transform .2s}.x-pih .x-pih__glow:hover svg{transform:translateX(3px)}@keyframes x-pih-shine{0%,100%{opacity:.35;filter:blur(0)}50%{opacity:1;filter:blur(.5px)}}.x-pih .x-pih__ghost{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 22px;border:0;border-radius:99px;background:#262321;color:#efe9de;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09),inset 0 1px 0 rgba(255,255,255,.05);transition:background .2s}.x-pih .x-pih__ghost:hover{background:#302c29}.x-pih .site{position:absolute;inset:0;padding:5.2cqw 5.6cqw;display:flex;flex-direction:column;color:#fff;font-size:1.7cqw;line-height:1.4;text-align:left;pointer-events:none}.x-pih .lt .site{color:#1f1b17}.x-pih .s-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw;font-size:1.8cqw}.x-pih .s-logo{font-weight:700;letter-spacing:.06em}.x-pih .s-nav{display:flex;gap:2.8cqw;opacity:.78}.x-pih .s-nav i,.x-pih .s-cols i,.x-pih .s-foot i{font-style:normal}.x-pih .s-h{margin-top:auto;font-size:5.6cqw;line-height:1.14;font-weight:650;letter-spacing:.01em;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.25)}.x-pih .lt .s-h{text-shadow:none}.x-pih .s-h2{font-size:3.4cqw;line-height:1.18;font-weight:650}.x-pih .s-cols{display:grid;grid-template-columns:repeat(3,auto);gap:.8cqw 4cqw;font-size:1.6cqw;opacity:.8}.x-pih .s-p{margin-top:1.4cqw;font-size:1.75cqw;opacity:.72;max-width:52%}.x-pih .s-btn{align-self:flex-start;margin-top:2.4cqw;padding:1.1cqw 2.5cqw;border-radius:99px;background:rgba(255,255,255,.94);color:#151311;font-size:1.65cqw;font-weight:600}.x-pih .s-dk{background:#1f1b17;color:#f4efe6}.x-pih .s-r{align-self:flex-end;text-align:right}.x-pih .s-c{align-self:center;text-align:center;max-width:none}.x-pih .s-cb{align-self:center}.x-pih .s-up{margin-top:6cqw;margin-bottom:auto}.x-pih .s-big{margin-top:auto;align-self:center;font-size:21cqw;font-weight:800;line-height:.9;color:#fff;letter-spacing:.04em;text-shadow:0 1cqw 4cqw rgba(30,60,20,.25)}.x-pih .s-foot{display:flex;justify-content:space-between;margin-top:2cqw;font-size:1.5cqw;opacity:.75;color:#fff}.x-pih .s-404{margin:auto auto 0;font-size:17cqw;font-weight:800;line-height:1;letter-spacing:.04em;color:rgba(255,255,255,.9);text-shadow:0 0 6cqw rgba(120,220,255,.35)}.x-pih .s-link{margin-top:2.4cqw;font-size:1.7cqw;opacity:.85}.x-pih .s-pill{padding:.8cqw 2cqw;border:1px solid rgba(255,255,255,.35);border-radius:99px;font-size:1.5cqw}.x-pih .s-hint{align-self:flex-end;margin-top:-2cqw;font-size:1.4cqw;opacity:.55}(root) => {
const t = root.querySelector('.x-pih__foot time');
const f = root.querySelector('.x-pih__follow');
const fmt = new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', hour12: false });
const tick = () => { t.textContent = '当地时间 ' + fmt.format(new Date()) + '（GMT+8）'; };
tick();
const id = setInterval(tick, 15000);
const onF = () => { const on = f.classList.toggle('is-on'); f.querySelector('em').textContent = on ? '已关注' : '关注'; };
f.addEventListener('click', onF);
return () => { clearInterval(id); f.removeEventListener('click', onF); };
}订阅 Builder 查看完整源码。查看价格