Mobile Onboarding Screens — Free App Intro UI Snippet

<div class="ob-phone">
  <div class="ob-screen">
    <div class="ob-top"><span>9:41</span><button type="button" class="ob-skip" id="obSkip">Skip</button></div>
    <div class="ob-track" id="obTrack">
      <div class="ob-slide">
        <div class="ob-art a1"><span class="ob-blob"></span><span class="ob-glyph">📊</span></div>
        <h2>Track everything</h2>
        <p>See all your accounts and spending in one clean dashboard.</p>
      </div>
      <div class="ob-slide">
        <div class="ob-art a2"><span class="ob-blob"></span><span class="ob-glyph">⚡</span></div>
        <h2>Move money fast</h2>
        <p>Send, request, and split payments in just a couple of taps.</p>
      </div>
      <div class="ob-slide">
        <div class="ob-art a3"><span class="ob-blob"></span><span class="ob-glyph">🔒</span></div>
        <h2>Bank-grade security</h2>
        <p>Your data is encrypted end-to-end and protected with Face ID.</p>
      </div>
    </div>
    <div class="ob-foot">
      <div class="ob-dots" id="obDots"><span class="on"></span><span></span><span></span></div>
      <button type="button" class="ob-next" id="obNext">Next</button>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body{font-family:system-ui,-apple-system,sans-serif;background:#1e293b;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;scrollbar-width:none;-ms-overflow-style:none}
body::-webkit-scrollbar{display:none}

.ob-phone{width:288px;height:600px;background:#0b1220;border-radius:46px;padding:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 2px #1e293b}
.ob-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:#fff;color:#0f172a;display:flex;flex-direction:column}
.ob-top{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 0;font-size:13px;font-weight:700}
.ob-skip{background:none;border:none;font-size:13px;font-weight:700;color:#94a3b8;cursor:pointer;font-family:inherit}

.ob-track{flex:1;display:flex;overflow:hidden;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.ob-slide{min-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 30px}
.ob-art{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.ob-blob{position:absolute;inset:0;border-radius:42% 58% 63% 37%/45% 38% 62% 55%;animation:obMorph 8s ease-in-out infinite}
.a1 .ob-blob{background:linear-gradient(135deg,#a5b4fc,#6366f1)}
.a2 .ob-blob{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.a3 .ob-blob{background:linear-gradient(135deg,#6ee7b7,#10b981)}
.ob-glyph{position:relative;font-size:52px;z-index:2}
@keyframes obMorph{50%{border-radius:58% 42% 38% 62%/55% 62% 38% 45%}}
.ob-slide h2{font-size:23px;font-weight:800;margin-bottom:10px}
.ob-slide p{font-size:14px;color:#64748b;line-height:1.55;max-width:230px}

.ob-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 26px 26px}
.ob-dots{display:flex;gap:7px}
.ob-dots span{width:7px;height:7px;border-radius:99px;background:#e2e8f0;transition:width .3s,background .3s}
.ob-dots span.on{width:22px;background:#6366f1}
.ob-next{background:#6366f1;color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.ob-next:hover{background:#4f46e5}

var track = document.getElementById('obTrack');
var dots = document.getElementById('obDots').children;
var nextBtn = document.getElementById('obNext');
var skip = document.getElementById('obSkip');
var total = track.children.length;
var index = 0;

function go(i) {
  index = Math.max(0, Math.min(total - 1, i));
  track.style.transform = 'translateX(' + (-index * 100) + '%)';
  for (var d = 0; d < dots.length; d++) dots[d].classList.toggle('on', d === index);
  nextBtn.textContent = index === total - 1 ? 'Get started' : 'Next';
  skip.style.visibility = index === total - 1 ? 'hidden' : 'visible';
}

nextBtn.addEventListener('click', function () {
  if (index === total - 1) { nextBtn.textContent = 'Welcome! 🎉'; return; }
  go(index + 1);
});
skip.addEventListener('click', function () { go(total - 1); });

// Allow swiping between slides.
var startX = null;
track.addEventListener('pointerdown', function (e) { startX = e.clientX; });
window.addEventListener('pointerup', function (e) {
  if (startX === null) return;
  var dx = e.clientX - startX;
  if (dx < -45) go(index + 1); else if (dx > 45) go(index - 1);
  startX = null;
});

go(0);