Tailwind UI Pattern Registry for humans and agents

scroll snap sections fullpage viewport full-page scroll snapping between sections presentation-style page navigation landing page with snapping sections sections partially visible between scroll stops need full-viewport section-based scroll want fullpage.js behavior without JS

Snap Sections

Fetch snippet JSON: curl https://webspire.de/snippets/scroll/snap-sections.json
Format
Snap sections 100dvh frames
Frame 01 Hero section locks to the viewport
Frame 02 Features waits until the next snap point
Frame 03 Final CTA becomes the following viewport

Each section becomes a full-screen stop instead of free-scrolling past.

Stage Background
Customize

Quick Start

<div class="snap-container">
  <section class="snap-section">Page 1</section>
  <section class="snap-section">Page 2</section>
</div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
366 bytes · 22 lines
Custom Properties
--snap-type
Classes
.snap-container.snap-section.snap-section-center
scroll snap sections fullpage viewport

Full-viewport scroll snapping using CSS scroll-snap-type. Sections lock into place as the user scrolls. Uses 100dvh for correct sizing on mobile browsers with dynamic toolbars.

Landing page sections

<div class="snap-container">
  <section class="snap-section flex items-center justify-center bg-gradient-to-br from-purple-950 to-indigo-950">
    <h1 class="text-5xl font-bold text-white">Welcome</h1>
  </section>
  <section class="snap-section flex items-center justify-center bg-gradient-to-br from-indigo-950 to-slate-950">
    <h2 class="text-4xl font-bold text-white">Features</h2>
  </section>
  <section class="snap-section flex items-center justify-center bg-gradient-to-br from-slate-950 to-purple-950">
    <h2 class="text-4xl font-bold text-white">Get Started</h2>
  </section>
</div>