Coach Marks

<div class="screen">
  <div class="el e1"></div>
  <div class="el e2"></div>
  <div class="el e3"></div>
  <div class="spot" id="spot"></div>
  <div class="bub" id="bub">Step</div>
  <div class="dots"><span id="d0"></span><span id="d1"></span><span id="d2"></span></div>
</div>

.screen{position:relative;width:90%;height:88%;border-radius:12px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.el{position:absolute;border-radius:8px;background:var(--line)}
.e1{left:6%;top:10%;width:22%;height:14%}
.e2{right:6%;top:10%;width:16%;height:14%}
.e3{left:6%;bottom:10%;width:88%;height:16%}
.spot{position:absolute;border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.55);border:2px solid var(--accent);transition:all .6s cubic-bezier(.4,0,.2,1)}
.bub{position:absolute;padding:5px 10px;border-radius:8px;background:var(--accent);color:#fff;font:700 10.5px/1 sans-serif;transition:all .6s cubic-bezier(.4,0,.2,1)}
.dots{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots span.on{background:var(--accent)}

const spot = document.getElementById('spot');
const bub = document.getElementById('bub');
const dots = [document.getElementById('d0'), document.getElementById('d1'), document.getElementById('d2')];
const steps = [
  { x: '6%', y: '10%', w: '22%', h: '14%', bx: '6%', by: '26%', label: '1. Search' },
  { x: '76%', y: '10%', w: '18%', h: '14%', bx: '58%', by: '26%', label: '2. Profile' },
  { x: '6%', y: '68%', w: '88%', h: '20%', bx: '6%', by: '58%', label: '3. Compose' },
];
let i = 0;
function apply() {
  const s = steps[i];
  spot.style.left = s.x; spot.style.top = s.y; spot.style.width = s.w; spot.style.height = s.h;
  bub.style.left = s.bx; bub.style.top = s.by; bub.textContent = s.label;
  dots.forEach((d, k) => d.classList.toggle('on', k === i));
}
apply();
setInterval(() => { i = (i + 1) % steps.length; apply(); }, 1800);