jatui
Dark
  • Theme

SmoothScroll + scrollProgress

Lenis smooth scroll wrapper + scroll-progress CSS var binding for marketing pages

SmoothScroll component

⚠️ Marketing pages only

<SmoothScroll> wraps your page content with Lenis momentum scrolling. It is automatically disabled on:

  • Touch devices (mobile / tablet) — never hijack native scroll
  • Reduced-motion preference — respect the user's system setting
  • Product/app surfaces — use only on landing pages and marketing routes

+page.svelte (marketing route)

<script>

import SmoothScroll from '$lib/showcase/scroll/SmoothScroll.svelte';

</script>

<SmoothScroll>

<HeroSection />

<FeatureSection />

<PricingSection />

</SmoothScroll>

scrollProgress action — reading bar

Bind --scroll-progress (0–1) to any element and drive progress bars, parallax depth, or opacity fades. Uses native ScrollTimeline when available (compositor thread), falling back to motion scroll().

Paragraph 1 — scroll this container to drive the bar above.
Paragraph 2 — scroll this container to drive the bar above.
Paragraph 3 — scroll this container to drive the bar above.
Paragraph 4 — scroll this container to drive the bar above.
Paragraph 5 — scroll this container to drive the bar above.
Paragraph 6 — scroll this container to drive the bar above.
Paragraph 7 — scroll this container to drive the bar above.
Paragraph 8 — scroll this container to drive the bar above.

The blue bar at the top is driven by calc(var(--scroll-progress, 0) * 100%) — no JS in the style binding.

Reduced motion

scrollProgress is a no-op under prefers-reduced-motion: reduce — the CSS var stays at its initial value and no scroll listeners are attached.