A repeatable cycle where current users help bring in the next users.
<div class="loop"><div class="ring"></div><div class="node n1"><b>1</b><span>USE</span></div><div class="node n2"><b>2</b><span>SHARE</span></div><div class="node n3"><b>3</b><span>VISIT</span></div><div class="center">↻<small>REPEAT</small></div></div>.loop{position:relative;width:clamp(155px,80vh,350px);aspect-ratio:1;font:900 clamp(10px,max(3.4vmin,1vw),16px)/1 sans-serif}.ring{position:absolute;inset:18%;border:clamp(3px,.8vmin,7px) dashed var(--line);border-radius:50%;animation:spin 12s linear infinite}.node{position:absolute;display:flex;align-items:center;gap:clamp(4px,1vmin,10px);padding:clamp(6px,1.4vmin,13px);border:2px solid var(--fg);background:var(--surface);box-shadow:4px 4px 0 var(--accent);animation:pulse 3s ease-in-out infinite}.node b{display:grid;place-items:center;background:var(--accent);color:white;width:clamp(18px,4vmin,32px);aspect-ratio:1}.n1{top:0;left:37%}.n2{right:0;bottom:19%;animation-delay:1s}.n3{left:0;bottom:19%;animation-delay:2s}.center{position:absolute;inset:35%;display:grid;place-items:center;color:var(--accent);font-size:clamp(30px,9vmin,70px)}.center small{display:none;position:absolute;bottom:0;font-size:clamp(10px,max(3.4vmin,1vw),13px);color:var(--muted);letter-spacing:.08em}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,33%,100%{transform:scale(1);box-shadow:4px 4px 0 var(--line)}15%{transform:scale(1.12);box-shadow:6px 6px 0 var(--accent)}}A growth loop turns an output into the next cycle's input. It differs from a one-off campaign that needs fresh spend for every new cohort.
The demo cycles through use, share, and new visit. Measure the conversion at each link and how long a full cycle takes.
A share button alone does not create a loop. The product must give people a real reason to share.
Use it when exploring whether product use can naturally create distribution.