Make the last frame lead naturally into the first.
<div class="s-demo"><div class="le"><div class="le-ring"><div class="le-a">OPEN</div><div class="le-b">PAYOFF</div><div class="le-dot"></div></div><div class="le-note">LAST FRAME <b>↻</b> FIRST FRAME</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)}}.le{text-align:center}.le-ring{position:relative;width:clamp(105px,32vmin,215px);aspect-ratio:1}.le-ring:before{content:"";position:absolute;inset:0;border:clamp(7px,2vmin,14px) solid var(--line);border-top-color:var(--accent);border-right-color:var(--accent-2);border-radius:50%;animation:lering 5s linear infinite}.le-a,.le-b{position:absolute;inset:27%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-weight:900;font-size:clamp(10px,max(2.6vmin,1vw),16px);animation:lelabel 5s steps(1) infinite}.le-b{opacity:0;animation-delay:2.5s}.le-dot{position:absolute;top:-14px;left:50%;width:clamp(12px,3vmin,20px);aspect-ratio:1;border-radius:50%;background:var(--fg)}.le-note{margin-top:clamp(5px,2vmin,14px);font-size:clamp(10px,max(2.3vmin,1vw),14px);font-weight:900}.le-note b{color:var(--accent);font-size:1.5em}@keyframes lering{to{transform:rotate(360deg)}}@keyframes lelabel{0%,49%{opacity:1}50%,100%{opacity:0}}A loopable ending joins the final moment to the opening so the replay feels continuous. A motion or sentence can bridge the seam.
The demo returns the last arrow to the opening shot. Edit the last visual and the first frame as a pair.
A clever loop should not hide the payoff. The main idea must land on the first viewing.
Use it for short motion demonstrations or repeating sequences.