패턴 인터럽트는 반복되는 화면·소리·문장 리듬 사이에 다른 자극을 넣는 편집 장치입니다. 단조로운 구간에서 질문이나 시점 변화를 넣을 수 있습니다.
데모의 같은 색 카드들이 지나가다가 대비가 큰 질문 카드로 바뀝니다. 변화가 핵심 메시지로 이어질 때 효과를 해석할 수 있습니다.
잦은 반전은 피로를 줄 수 있습니다. 이탈 지점을 보고 필요한 곳에만 넣으세요.
언제 쓰나
중간 이탈이 큰 영상의 컷 구성이나 자막 리듬을 바꿀 때 씁니다.
패턴 인터럽트
Pattern interrupt
예상 가능한 화면 리듬을 깨 시선을 다시 붙잡습니다.
···
<div class="s-demo"><div class="pi"><div class="pi-strip"><span>SAME</span><span>SAME</span><span>SAME</span><strong>WAIT, WHY?</strong><span>NEXT</span></div><div class="pi-pointer">ATTENTION <b>↑</b></div></div></div>.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.pi{width:min(90vw,570px);overflow:hidden}.pi-strip{display:flex;gap:clamp(5px,2vmin,13px);width:max-content;animation:pislide 5s ease-in-out infinite}.pi-strip>*{display:grid;place-items:center;width:clamp(65px,20vmin,115px);height:clamp(76px,24vmin,140px);background:var(--line);color:var(--muted);font-weight:900;flex:none}.pi-strip strong{background:var(--accent);color:white;transform:rotate(-5deg);box-shadow:5px 5px 0 var(--fg)}.pi-pointer{margin-top:clamp(8px,2.5vmin,18px);font-size:clamp(11px,max(3vmin,1vw),19px);font-weight:900;color:var(--accent);text-align:center;animation:piflash 5s infinite}.pi-pointer b{font-size:1.6em}@keyframes pislide{0%,15%{transform:translateX(0)}40%,75%{transform:translateX(calc(-2 * clamp(70px,22vmin,128px)))}100%{transform:translateX(0)}}@keyframes piflash{0%,18%{opacity:.5}28%,80%{opacity:1}100%{opacity:.5}}