타임랩스

<div class="frame">
  <div class="heading"><span>12 HOURS</span><b>→</b><span>3.6 SECONDS</span><strong class="clock">06:00</strong></div>
  <div class="scene">
    <div class="sun"></div>
    <div class="skyline"><i></i><i></i><i></i><i></i><i></i></div>
    <div class="ground"></div>
    <span class="morning">06:00</span><span class="noon">12:00</span><span class="evening">18:00</span>
  </div>
  <div class="caption">SAME CHANGE · FASTER PLAYBACK</div>
  <div class="timeline"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg);padding:6% 7%}
.heading{height:15%;display:flex;align-items:center;gap:clamp(5px,1.4vw,17px);font:700 clamp(10px,1.35vw,16px) ui-monospace,monospace;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.heading b{color:var(--accent)}.heading strong{margin-left:auto;color:var(--fg);font-size:clamp(13px,1.7vw,20px)}
.scene{position:absolute;left:7%;right:7%;top:22%;bottom:24%;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,var(--accent-2),var(--surface) 78%)}
.sun{position:absolute;left:5%;top:66%;width:clamp(24px,8vmin,48px);aspect-ratio:1;border-radius:50%;background:var(--accent);animation:day 3.6s linear infinite}
.skyline{position:absolute;left:0;right:0;bottom:0;height:37%;display:flex;align-items:flex-end;justify-content:space-around;gap:2%;padding:0 4%;z-index:1}
.skyline i{display:block;width:13%;height:48%;background:var(--fg);opacity:.78}.skyline i:nth-child(2){height:75%}.skyline i:nth-child(3){height:58%}.skyline i:nth-child(4){height:90%}.skyline i:nth-child(5){height:64%}
.ground{position:absolute;left:0;right:0;bottom:0;height:10%;background:var(--fg)}
.scene>span{position:absolute;bottom:5%;z-index:2;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;color:var(--surface)}
.morning{left:4%}.noon{left:46%;transform:translateX(-50%)}.evening{right:4%}
.caption{position:absolute;left:7%;bottom:13%;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.07em;color:var(--muted)}
.timeline{position:absolute;left:7%;right:7%;bottom:7%;height:2px;background:var(--line)}.timeline i{position:absolute;top:-3px;width:2px;height:8px;background:var(--accent)}.timeline i:nth-child(1){left:0}.timeline i:nth-child(2){left:16.6%}.timeline i:nth-child(3){left:33.2%}.timeline i:nth-child(4){left:49.8%}.timeline i:nth-child(5){left:66.4%}.timeline i:nth-child(6){left:83%}.timeline i:nth-child(7){right:0}
@keyframes day{0%,100%{left:5%;top:66%}25%{left:25%;top:26%}50%{left:48%;top:9%}75%{left:70%;top:26%}}

const clock=document.querySelector('.clock');
const cycle=3600;
const started=performance.now();
function updateClock(now){
  const progress=((now-started)%cycle)/cycle;
  const totalMinutes=Math.floor(progress*12*60);
  const hour=6+Math.floor(totalMinutes/60);
  const minute=totalMinutes%60;
  clock.textContent=String(hour).padStart(2,'0')+':'+String(minute).padStart(2,'0');
  requestAnimationFrame(updateClock);
}
requestAnimationFrame(updateClock);