휘시 효과음

<div class="stage whoosh-demo">
  <div class="monitor">
    <div class="shot card-a"><i class="shape"></i><span>SHOT A</span></div>
    <div class="shot card-b"><i class="shape"></i><span>SHOT B</span></div>
    <div class="sweep"><i></i><i></i><i></i></div>
    <div class="cue">MOTION + SOUND ACCENT</div>
  </div>
  <div class="timeline">
    <div class="track-row"><b>PICTURE</b><div class="lane"><i class="clip video-a">A · WIDE</i><i class="clip video-b">B · CLOSE</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="track-row"><b>WHOOSH SFX</b><div class="lane audio-lane"><i class="transient"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="note"><i></i> SHORT AUDIO PEAK LANDS ON THE SWEEP</div>
  </div>
</div>

.whoosh-demo{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.monitor{position:absolute;inset:5% 6% 55%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.shot{position:absolute;inset:0;overflow:hidden;padding:8px;color:#fff;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.08em}
.card-a{background:linear-gradient(135deg,#31545a,#5c7e72 58%,#b58e65);animation:card-a 4s steps(1,end) infinite}
.card-b{background:linear-gradient(135deg,#40384e,#815b53 56%,#d0914b);opacity:0;animation:card-b 4s steps(1,end) infinite}
.shape{position:absolute;left:42%;top:24%;width:15%;aspect-ratio:1;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 12px #fff2}
.card-b .shape{left:68%;top:33%;width:20%;border-radius:3px;transform:rotate(45deg);background:#fff2}
.shot span{position:absolute;left:10px;bottom:8px;text-shadow:0 1px 4px #000}
.sweep{position:absolute;z-index:2;top:-30%;bottom:-30%;left:-48%;width:34%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,#fff9 45%,var(--accent) 50%,#fff9 55%,transparent);filter:blur(2px);opacity:0;animation:sweep 4s ease-in-out infinite}
.sweep i{position:absolute;left:24%;right:24%;height:1px;background:#fff;box-shadow:0 0 8px #fff}
.sweep i:nth-child(1){top:35%}.sweep i:nth-child(2){top:50%}.sweep i:nth-child(3){top:65%}
.cue{position:absolute;right:8px;top:8px;padding:4px 6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:700 clamp(7px,.9vw,11px) ui-monospace,monospace;letter-spacing:.04em;opacity:0;animation:cue 4s linear infinite}
.timeline{position:absolute;left:6%;right:6%;top:49%;bottom:6%;display:grid;grid-template-rows:repeat(2,minmax(0,1fr)) auto;gap:5px}
.track-row{display:grid;grid-template-columns:clamp(50px,8vw,96px) 1fr;gap:6px;align-items:stretch;min-height:0}
.track-row>b{display:flex;align-items:center;color:var(--muted);font:700 clamp(7px,1vw,11px) ui-monospace,monospace;letter-spacing:.05em}
.lane{position:relative;overflow:visible;min-width:0;border-bottom:1px solid var(--line)}
.clip{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;padding:0 5px;white-space:nowrap;color:var(--fg);font:700 clamp(7px,1vw,12px) ui-monospace,monospace;letter-spacing:.025em}
.video-a{left:0;width:51%;border:1px solid var(--line);background:var(--surface)}
.video-b{left:51%;width:49%;border:1px solid var(--line);background:var(--surface)}
.audio-lane:before{content:"";position:absolute;inset:20% 0;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--line) 9px 10px);opacity:.5}
.transient{position:absolute;z-index:1;left:42%;width:19%;top:0;bottom:0;display:flex;align-items:center;justify-content:space-around;padding:0 2px;border:1px solid var(--accent);background:var(--surface);animation:burst 4s linear infinite}
.transient i{width:3%;min-width:1px;border-radius:2px;background:var(--accent);height:var(--peak,35%);transform-origin:center;animation:peak 4s ease-in-out infinite}
.transient i:nth-child(1){--peak:20%}.transient i:nth-child(2){--peak:42%}.transient i:nth-child(3){--peak:65%}.transient i:nth-child(4){--peak:92%}.transient i:nth-child(5){--peak:68%}.transient i:nth-child(6){--peak:48%}.transient i:nth-child(7){--peak:31%}.transient i:nth-child(8){--peak:18%}.transient i:nth-child(9){--peak:10%}
.cut{position:absolute;z-index:2;left:51%;top:-2px;bottom:-2px;width:1px;background:var(--fg);opacity:.72}
.playhead{position:absolute;z-index:3;top:-3px;bottom:-3px;left:0;width:2px;background:var(--accent);animation:playhead 4s linear infinite}
.note{display:flex;align-items:center;gap:6px;color:var(--muted);font:700 clamp(7px,1vw,11px) ui-monospace,monospace;letter-spacing:.04em}
.note i{width:7px;aspect-ratio:1;border-radius:50%;background:var(--accent);animation:blink 4s linear infinite}
@keyframes card-a{0%,50.9%{opacity:1}51%,100%{opacity:0}}
@keyframes card-b{0%,50.9%{opacity:0}51%,100%{opacity:1}}
@keyframes sweep{0%,34%{left:-48%;opacity:0}40%{opacity:.9}59%{left:118%;opacity:.8}65%,100%{left:118%;opacity:0}}
@keyframes cue{0%,37%{opacity:0}42%,61%{opacity:1}67%,100%{opacity:0}}
@keyframes burst{0%,39%{opacity:.18}45%,57%{opacity:1}65%,100%{opacity:.18}}
@keyframes peak{0%,39%,65%,100%{transform:scaleY(.35)}46%,56%{transform:scaleY(1)}}
@keyframes playhead{from{left:0}to{left:100%}}
@keyframes blink{0%,39%,65%,100%{opacity:.35}46%,57%{opacity:1}}