pleate.uiEffects
Effects

Scroll Effects

Motion driven by the page scroll: steps with a pinned visual, a row that moves sideways while you scroll down, media that opens to full width, and opt-in smooth wheel scrolling.
import { StickyScroll, HorizontalScroll, ScrollZoom, SmoothScroll } from "pleate/effects/scroll";

Sticky steps

Four steps of a trip plan. The visual for the step in the middle of the screen stays pinned beside it.

  1. Pick your dates

    Choose the nights you are away. Fares and stays update for that window.
    June 2027
    12131415161718

    14 to 17 June, 3 nights

  2. Set the route

    Add stops in order. Travel time between them is worked out for you.
    Route
    Lisbonstart
    Porto2 h 50 min
    Douro valley1 h 35 min

  3. Book the stays

    One place per stop, with the nights already matched to the route.
    Stays
    Casa do Rio, Porto2 nights · €286
    Quinta Nova, Pinhão1 night · €174

  4. Share the plan

    Send one link. Everyone sees the same dates, route and bookings.
    Trip total€1,840
    Travellers2
    Shared withmarta@ferreira.pt

Horizontal row

Scrolling down moves the destinations sideways. On phones it is a swipeable row.

Portugal
Lisbon3 nights from €412
Japan
Kyoto5 nights from €1,280
Mexico
Oaxaca4 nights from €960
Norway
Tromsø3 nights from €738
Morocco
Marrakesh4 nights from €544
Australia
Hobart6 nights from €1,690

Scroll zoom

The frame opens to full width and squares its corners as it reaches the middle.

Scroll down. The frame opens up as it reaches the middle of the screen.

Douro valley · 41.19° N, 7.54° W · June

Three nights, two stays, one river.

Smooth scrolling

Turn it on, then scroll this page with a mouse wheel.

Turn it on and scroll with a mouse wheel. Keyboard, touch screens, zoom and scrollable panels keep their native behaviour. It stays off with reduced motion.

Props

StickyScroll

Steps on the left, the active step's visual pinned on the right. Below md each visual sits under its step.

steps: { id, title, body, visual }[], offset, className

HorizontalScroll

Pins the section and moves its items sideways. Its height comes from the width of the row.

children, gap (16), offset, label, className

ScrollZoom

Scales and unclips the media from a rounded frame to full width. The caption fades in at the end.

children, caption, className

SmoothScroll

Eases mouse-wheel scrolling of the window while it is mounted.

lerp (0.1), wheelMultiplier (1), children

offset

Height of a sticky header above, so pinned content sits below it.

number (px)

Accessibility

  • The active step has aria-current="step". All step text stays in the reading order.
  • HorizontalScroll is a named region. Focusing an item that is off to the side scrolls the page to it. The swipeable row can be focused and scrolled with the arrow keys.
  • SmoothScroll handles only the mouse wheel. Keyboard, scrollbar dragging, zoom, touch and panels that can scroll themselves stay native.
  • Reduced motion: SmoothScroll is off, the sticky visuals swap without movement, the row becomes a native scrolling row and ScrollZoom shows the media at full size.