Portfolio Intro Hero
Overview
A profile column on the left with avatar, availability status, follow button, big headline and a light-streak primary button, with the live local time at the bottom; on the right two columns of work cards scroll slowly in opposite directions and pause on hover. Made for an independent designer portfolio hero.
Taken from the page template Yanbai Independent Designer Portfolio. 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 Portfolio Intro Hero to your project in your colors.
Where to use it
The hero of a product site, SaaS landing page or campaign page: where the headline, subhead and primary button make the first impression.
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 portfolio-intro-hero
mcp › Use 8pt MCP to call get_component("portfolio-intro-hero")
Code
Source for Portfolio Intro Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<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); };
}Subscribe to Builder to see the full source.See pricing