CSS Grid과 WebVTT로 TV의 '스퀴즈백' 효과를 웹에서 재현하다

The broadcast squeezeback, rebuilt with CSS Grid and WebVTT

Mux 블로그에서 TV 중계에서 흔히 볼 수 있는 '스퀴즈백' 효과를 CSS Grid와 WebVTT로 구현하는 방법을 소개합니다. 비디오를 3x3 그리드 중앙에 배치하고, 트랙 크기를 애니메이션하여 화면 일부를 축소하고 주변에 패널을 표시합니다. WebVTT 큐를 이용해 타임라인을 텍스트 파일로 관리하며, cuechange 이벤트로 레이아웃을 전환합니다. 또한 캔버스로 주변 조명 효과를 만들고, 색상 추출 시 평균 대신 각도 기반 계산을 사용하는 팁과 CSS 그리드 및 @property 관련 주의사항을 다룹니다.