Skip to content
SloplessTry the picker

Signature look · scroll

Smooth scroll

Inertial, eased wheel scrolling (Lenis in native mode) so the whole page glides; anchor links ease to their target. Keeps native scrollbar, find-in-page and keyboard scrolling.

Id
smooth-scroll
Cost
about 5 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • No skill needed: `npm install lenis` (the official Lenis package from darkroom.engineering; never a fork) and import "lenis/dist/lenis.css" once.
  • Initialise one Lenis instance in native mode (no transform wrapper) once per page, with lerp 0.08–0.12; never build a custom scroll-jack.
  • If GSAP ScrollTrigger is also on the page, drive Lenis from gsap.ticker (lenis.raf(time * 1000), gsap.ticker.lagSmoothing(0)) and call ScrollTrigger.update on Lenis scroll events; otherwise use autoRaf or one requestAnimationFrame loop.
  • Do not create Lenis at all when prefers-reduced-motion is reduce or the pointer is coarse (touch); native scrolling is the fallback.
  • Stop Lenis while modals or menus are open (lenis.stop() / lenis.start()) and destroy it on route change in SPA frameworks; keep keyboard, Page Down, find-in-page and anchor links working (lenis.scrollTo for in-page anchors).
  • Load Lenis as a deferred module after first paint; it must not block rendering.

Required skills (the agent asks before installing, per project)

Running demo, in Art Deco

The preview renderer's stand-in for this look on the hero of a Art Deco design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop, prefers-reduced-motion: reduce
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone, reduced motion

Styles it suits

Art DecoAthletic SportBroadsheet NewspaperClassical BookishEditorial MagazineFrosted GlassJapanese MinimalLuxury FashionNeo-grotesk MinimalOrganic EarthScandinavian Soft