Local Time Status
介绍
顶部配图随早晚切换竹林、晚霞与夜色，显示设计师所在时区的实时时间：数字变化时模糊下落翻入，冒号闪烁，右侧圆环走完一分钟；下方状态语随时段自动切换，底部昼夜色条上的光点标出当天进度。
拆自整页模板 砚白 独立设计师作品集，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Local Time Status 加进你的项目并换成你的配色。
适用场景
数据亮点、增长指标、计数器和统计卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add local-time-status
mcp › 使用 8pt MCP 调用 get_component("local-time-status")
代码
Local Time Status 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-lts"><div class="x-lts__scene" aria-hidden="true"><img src="https://8pt.dev/api/media/ec31ce9b0b61db0d2b2d1f92.webp" alt=""></div><div class="x-lts__top"><span class="x-lts__ava"><img src="https://8pt.dev/api/media/309a1d118e62dd11f1e072d3.webp" alt="砚白头像"></span><span class="x-lts__who"><b>砚白</b><span>接项目中</span></span><span class="x-lts__tz"><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>GMT+8</span></div><div class="x-lts__clock" aria-label="当地时间"><span class="x-lts__d" data-k="0">0</span><span class="x-lts__d" data-k="1">0</span><span class="x-lts__colon">:</span><span class="x-lts__d" data-k="2">0</span><span class="x-lts__d" data-k="3">0</span><svg class="x-lts__ring" viewBox="0 0 44 44" aria-hidden="true"><circle cx="22" cy="22" r="19"/><circle class="x-lts__arc" cx="22" cy="22" r="19" pathLength="60"/></svg></div><div class="x-lts__line"><span class="x-lts__msg">清晨咖啡，然后是像素</span></div><div class="x-lts__day" aria-hidden="true"><i></i></div></div>
.x-lts{box-sizing:border-box;position:relative;overflow:hidden;width:100%;max-width:560px;margin:0 auto;padding:30px 32px 28px;border-radius:26px;background:linear-gradient(180deg,#1f1c1a,#191715);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,.09),0 40px 100px -30px rgba(0,0,0,.8)}.x-lts *,.x-lts *::before,.x-lts *::after{box-sizing:border-box}.x-lts svg{width:1em;height:1em;flex:none}.x-lts__scene{position:relative;height:250px;margin:-30px -32px 0;overflow:hidden}.x-lts__scene img{width:100%;height:100%;object-fit:cover;transition:opacity .6s}.x-lts__scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,26,0) 35%,#1f1c1a 100%)}.x-lts__top{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:-34px}.x-lts__ava{width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(239,233,222,.09)}.x-lts__ava img{width:100%;height:100%;object-fit:cover;transform:scale(1.35) translateY(4%)}.x-lts__who{flex:1;line-height:1.35}.x-lts__who b{display:block;font-size:14px;font-weight:600}.x-lts__who span{display:flex;align-items:center;gap:6px;font-size:13px;color:#8f877c}.x-lts__who span::before{content:"";width:6px;height:6px;border-radius:50%;background:#7fd18b;animation:x-lts-pulse 2s ease-in-out infinite}@keyframes x-lts-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-lts__tz{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;background:#272421;font-size:12px;color:#b9b0a4;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09)}.x-lts__clock{position:relative;display:flex;align-items:center;margin:34px 0 10px;font-size:clamp(64px,14vw,104px);font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.x-lts__d{display:inline-block;width:.62em;text-align:center}.x-lts__d.is-flip{animation:x-lts-flip .5s cubic-bezier(.2,.8,.2,1)}@keyframes x-lts-flip{from{opacity:0;transform:translateY(-.25em);filter:blur(4px)}}.x-lts__colon{width:.32em;text-align:center;color:#f0b07a;animation:x-lts-blink 1s steps(1) infinite}@keyframes x-lts-blink{50%{opacity:.25}}.x-lts__ring{width:44px;height:44px;margin-left:auto;transform:rotate(-90deg)}.x-lts__ring circle{fill:none;stroke:rgba(239,233,222,.1);stroke-width:3}.x-lts__ring .x-lts__arc{stroke:#f0b07a;stroke-linecap:round;stroke-dasharray:0 60;transition:stroke-dasharray .9s linear}.x-lts__line{font-size:15px;color:#cfc6ba;min-height:22px}.x-lts__msg{display:inline-block}.x-lts__msg.is-swap{animation:x-lts-flip .6s cubic-bezier(.2,.8,.2,1)}.x-lts__day{position:relative;height:4px;margin-top:22px;border-radius:4px;background:linear-gradient(90deg,#2b3550,#e9a46a 30%,#f6d9a8 50%,#e9a46a 70%,#2b3550)}.x-lts__day i{position:absolute;top:50%;left:var(--p,50%);width:12px;height:12px;border-radius:50%;background:#fff3e2;box-shadow:0 0 12px #f0b07a;transform:translate(-50%,-50%);transition:left 1s}@media (prefers-reduced-motion:reduce){.x-lts__colon,.x-lts__d.is-flip,.x-lts__msg.is-swap,.x-lts__who span::before{animation:none}.x-lts__ring .x-lts__arc,.x-lts__day i{transition:none}}(root) => {
const ds = [...root.querySelectorAll('.x-lts__d')];
const arc = root.querySelector('.x-lts__arc');
const msg = root.querySelector('.x-lts__msg');
const dot = root.querySelector('.x-lts__day i');
const scene = root.querySelector('.x-lts__scene img');
const SC = {"day": "https://8pt.dev/api/media/2a48eefd24317a44b0258c79.webp", "dusk": "https://8pt.dev/api/media/ec31ce9b0b61db0d2b2d1f92.webp", "night": "https://8pt.dev/api/media/596ca18adba2d1c8eb2b5f28.webp"};
const fmt = new Intl.DateTimeFormat('en-GB', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
const lines = [[5, '清晨咖啡，然后是像素'], [11, '午饭前把稿子推一版'], [14, '下午专心写代码'], [18, '傍晚整理今天的交付'], [22, '夜里只回复急事']];
function lineFor(h) { let m = '夜里只回复急事'; lines.forEach(([s, t]) => { if (h >= s) m = t; }); return h < 5 ? '夜里只回复急事' : m; }
function tick() {
const [h, mi, s] = fmt.format(new Date()).split(':').map(Number);
…订阅 Builder 查看完整源码。查看价格