Break a predictable visual rhythm to regain attention.
<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}}A pattern interrupt inserts a deliberate change into a predictable visual, audio, or verbal rhythm. A new angle or question can reset attention.
In the demo, repeating cards give way to a contrasting question. The change should lead into the core message.
Too many interruptions can tire viewers. Place them where retention data suggests a need.
Use it when revising a video section with a marked mid-video drop.