Auto-advancing Feature Tabs

Build a feature tabs section: left column of 3 tabs (title + one-line description), right a large media panel. Tabs auto-advance every 3s with a thin progress line filling under the active tab; clicking a tab jumps to it and restarts the timer. The media panel crossfades between states. Stack vertically on mobile.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#fff;color:#111;padding:22px;height:100vh;display:grid;grid-template-columns:1fr 1.3fr;gap:18px}.t{padding:12px;border-radius:12px;margin-bottom:8px;cursor:pointer;position:relative;overflow:hidden}.t.on{background:#f4f4f4}.t p{font-size:12px;color:#777}
.t.on::after{content:'';position:absolute;left:0;bottom:0;height:2px;background:#111;animation:l 3s linear}@keyframes l{from{width:0}to{width:100%}}.v{border-radius:16px;display:grid;place-items:center;font:800 28px system-ui;color:#fff;transition:background .4s}</style>
<div><div class="t on"><b>Write the prompt</b><p>Describe the video in plain words.</p></div><div class="t"><b>Render with code</b><p>Your agent builds it in HTML.</p></div><div class="t"><b>Ship it</b><p>Export MP4 for every channel.</p></div></div><div class="v" id="v" style="background:#7c5cff">1 · Prompt</div>
<script>let i=0,c=['#7c5cff','#ff4d1a','#111'],n=['1 · Prompt','2 · Render','3 · Ship'],t=[...document.querySelectorAll('.t')];function go(k){i=k;t.forEach((x,j)=>{x.classList.remove('on');void x.offsetWidth;x.classList.toggle('on',j==k)});v.style.background=c[k];v.textContent=n[k]}t.forEach((x,j)=>x.onclick=()=>go(j));setInterval(()=>go((i+1)%3),3000)</script>