A tour that moves the way the application does

One curve on the instance, slow at both ends, eases both the hole and the page on every trip down and back.

const story = {
  id: 'house-curve',
  onEnter: () => window.scrollTo({ top: 0, behavior: 'instant' }),
  steps: [
    {
      id: 'the-start',
      target: { elements: '[data-lever]', interactive: true },
      message:
        'Nothing has moved yet. The curve this tour was given is on the ' +
        'instance, so every movement from here follows it — the hole and ' +
        'the page both.',
    },
    {
      id: 'a-screen-away',
      target: '[data-second]',
      message:
        'The page eased away from the top and eased into this card, and ' +
        'the hole crossed the screen on the same curve at the same time. ' +
        "Leko's own curve leaves at once and settles slowly; this one is " +
        'slow at both ends, which is the whole difference and is the ' +
        "application's to decide.",
    },
    {
      id: 'further-still',
      target: '[data-third]',
      message:
        'Further, and the same shape stretched over it: a longer trip ' +
        'takes longer, and the pace it takes is the same rule. Scroll ' +
        'during it and the glide stops where you put the page, exactly as ' +
        'it does on the built-in curve.',
    },
    {
      id: 'and-back',
      target: { elements: '[data-first]' },
      message:
        'All the way back, so the trip is watched in the other direction ' +
        'too. The curve is symmetric, so this looks like the way down ' +
        'played backwards — which is what makes it obviously not the one ' +
        'Leko ships.',
    },
  ],
} satisfies LekoStory

const HOUSE = cubicBezier(0.83, 0, 0.17, 1)

const options = { scroll: true, easing: HOUSE, duration: 480 } satisfies LekoOptions