동영상 제작자 마크업

<div class="vcreator"><div class="videobox"><div class="play">▶</div><b>FIELD NOTES</b><span>VideoObject</span></div><div class="join" id="join">→</div><div class="person"><span>CREATOR</span><div class="avatar"></div><b>Studio North</b><small>/about/studio</small></div></div>

.vcreator{width:min(88%,560px);display:flex;align-items:center;justify-content:center;gap:clamp(7px,2vmin,19px);font:800 clamp(10px,2vmin,15px)/1.2 var(--font-sans);color:var(--fg)}.videobox,.person{box-sizing:border-box;flex:1;min-width:0;min-height:clamp(112px,24vmin,165px);background:var(--surface);border:1px solid var(--line);padding:clamp(8px,2vmin,16px);display:grid;align-content:center;gap:6px}.videobox{border-top:5px solid var(--accent)}.videobox .play{height:clamp(28px,6vmin,50px);background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:1.4em}.videobox span,.person span,.person small{color:var(--muted)}.join{font-size:clamp(24px,5vmin,40px);color:var(--accent);opacity:.25;transition:opacity .4s,transform .4s}.vcreator.linked .join{opacity:1;transform:translateX(3px)}.person{border-top:5px solid var(--accent-2)}.avatar{width:clamp(21px,5vmin,36px);height:clamp(21px,5vmin,36px);border-radius:50%;background:var(--accent-2)}.person b{opacity:.45;transition:opacity .4s}.vcreator.linked .person b{opacity:1}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const box=document.querySelector('.vcreator');let linked=false;function show(){box.classList.toggle('linked',linked)}setTimeout(()=>{linked=true;show()},650);setInterval(()=>{linked=!linked;show()},3000);