Local Time Status
Overview
The header image changes with the time of day between a bamboo grove, sunset and night, showing the live time in the designer’s time zone: digits blur and drop in as they change, the colon blinks and a ring on the right completes each minute. The status line below changes with the time of day, and a dot on the day-night bar at the bottom marks today’s progress.
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 Local Time Status to your project in your colors.
Where to use it
Data highlights, growth metrics, counters and stat cards.
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 local-time-status
mcp › Use 8pt MCP to call get_component("local-time-status")
Code
Source for Local Time Status. Motion uses only transform and opacity and respects the Reduce motion setting.
<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);
…Subscribe to Builder to see the full source.See pricing