@vysmo/scroll 0.1.0

package/src/__tests__/types-check.ts

@@ -0,0 +1,86 @@
+import {
+  createScrollEffect,
+  createScrollProgress,
+  createScrollTransition,
+  sharedScrollObserver,
+  type Handle,
+} from "../index.js";
+import type { Runner as TransitionRunner, Transition, TextureSource } from "@vysmo/transitions";
+import type { Runner as EffectRunner, Effect } from "@vysmo/effects";
+
+declare const el: HTMLElement;
+declare const section: HTMLElement;
+declare const img1: TextureSource;
+declare const img2: TextureSource;
+declare const tRunner: TransitionRunner;
+declare const eRunner: EffectRunner;
+declare const myTransition: Transition<{ amount: number }>;
+declare const myEffect: Effect<{ radius: number }>;
+
+const _progress: Handle = createScrollProgress({
+  element: el,
+  onProgress: (p) => void p,
+});
+
+const _progressEased: Handle = createScrollProgress({
+  element: el,
+  ease: (t) => t * t,
+  onProgress: () => {},
+});
+
+const _scrollTrans: Handle = createScrollTransition({
+  section,
+  runner: tRunner,
+  transition: myTransition,
+  from: img1,
+  to: img2,
+});
+
+const _scrollTransFull: Handle = createScrollTransition({
+  section,
+  runner: tRunner,
+  transition: myTransition,
+  from: img1,
+  to: img2,
+  params: { amount: 0.5 },
+  ease: (t) => t * t,
+});
+
+const _scrollEffect: Handle = createScrollEffect({
+  section,
+  runner: eRunner,
+  effect: myEffect,
+  source: img1,
+  paramsAt: (p) => ({ radius: p * 20 }),
+});
+
+const _scrollEffectEased: Handle = createScrollEffect({
+  section,
+  runner: eRunner,
+  effect: myEffect,
+  source: img1,
+  ease: (t) => 1 - (1 - t) * (1 - t),
+  paramsAt: (p) => ({ radius: p * 20 }),
+});
+
+const _obs = sharedScrollObserver();
+
+void [_progress, _progressEased, _scrollTrans, _scrollTransFull, _scrollEffect, _scrollEffectEased, _obs];
+
+// --- Negative assertions ------------------------------------------------
+
+// @ts-expect-error — onProgress is required
+createScrollProgress({ element: el });
+
+// @ts-expect-error — paramsAt is required
+createScrollEffect({ section, runner: eRunner, effect: myEffect, source: img1 });
+
+createScrollTransition({
+  section,
+  runner: tRunner,
+  transition: myTransition,
+  from: img1,
+  to: img2,
+  // @ts-expect-error — params shape must match the transition's param type
+  params: { wrongKey: 1 },
+});

package/src/__tests__/zones.test.ts

@@ -0,0 +1,175 @@
+import { describe, expect, it } from "vitest";
+import {
+  scrollPlateau,
+  scrollRange,
+  scrollZones,
+  smoothstep,
+} from "../zones.js";
+
+const linear = (t: number) => t;
+
+describe("smoothstep", () => {
+  it("matches linear at 0, 0.5, 1 (useful for tests that assert endpoints)", () => {
+    expect(smoothstep(0)).toBe(0);
+    expect(smoothstep(0.5)).toBeCloseTo(0.5, 5);
+    expect(smoothstep(1)).toBe(1);
+  });
+
+  it("eases in and out — below linear near 0, above near 1", () => {
+    expect(smoothstep(0.25)).toBeCloseTo(0.15625, 5); // 0.25² · (3 − 0.5)
+    expect(smoothstep(0.75)).toBeCloseTo(0.84375, 5); // symmetric complement
+  });
+});
+
+describe("scrollRange", () => {
+  it("returns 0 before start, 1 after end, smoothstep in between", () => {
+    const r = scrollRange(0.1, 0.5);
+    expect(r(0)).toBe(0);
+    expect(r(0.1)).toBe(0);
+    expect(r(0.3)).toBeCloseTo(0.5, 5); // smoothstep(0.5) = 0.5
+    expect(r(0.5)).toBe(1);
+    expect(r(0.9)).toBe(1);
+  });
+
+  it("start == end collapses to a step", () => {
+    const r = scrollRange(0.5, 0.5);
+    expect(r(0.49)).toBe(0);
+    expect(r(0.5)).toBe(1);
+    expect(r(0.6)).toBe(1);
+  });
+
+  it("end < start is treated as a step", () => {
+    const r = scrollRange(0.8, 0.2);
+    expect(r(0.5)).toBe(0);
+    expect(r(0.9)).toBe(1);
+  });
+
+  it("linear ease yields the identity over [0, 1]", () => {
+    const r = scrollRange(0, 1, linear);
+    expect(r(0)).toBe(0);
+    expect(r(0.25)).toBeCloseTo(0.25, 5);
+    expect(r(0.5)).toBeCloseTo(0.5, 5);
+    expect(r(1)).toBe(1);
+  });
+
+  it("accepts a custom ease to shape the ramp", () => {
+    const r = scrollRange(0, 1, (t) => t * t);
+    expect(r(0.5)).toBeCloseTo(0.25, 5);
+  });
+});
+
+describe("scrollZones", () => {
+  it("returns 0 inside the clear zone", () => {
+    const z = scrollZones(0.25, 0.85);
+    expect(z(0.25)).toBe(0);
+    expect(z(0.5)).toBe(0);
+    expect(z(0.85)).toBe(0);
+  });
+
+  it("ramps from 1 to 0 through the entry zone", () => {
+    const z = scrollZones(0.2, 0.8);
+    expect(z(0)).toBe(1);
+    expect(z(0.1)).toBeCloseTo(0.5, 5);
+    expect(z(0.2)).toBe(0);
+  });
+
+  it("ramps from 0 to 1 through the exit zone", () => {
+    const z = scrollZones(0.2, 0.8);
+    expect(z(0.8)).toBe(0);
+    expect(z(0.9)).toBeCloseTo(0.5, 5);
+    expect(z(1)).toBe(1);
+  });
+
+  it("is symmetric around the midpoint when the clear zone is centered", () => {
+    const z = scrollZones(0.3, 0.7);
+    for (const p of [0, 0.1, 0.15, 0.3, 0.7, 0.85, 0.9, 1]) {
+      expect(z(p)).toBeCloseTo(z(1 - p), 5);
+    }
+  });
+
+  it("clear zone spanning the whole range yields zero everywhere", () => {
+    const z = scrollZones(0, 1);
+    for (const p of [0, 0.25, 0.5, 0.75, 1]) {
+      expect(z(p)).toBe(0);
+    }
+  });
+
+  it("clearStart at 0 collapses the entry ramp to a step at the zone edge", () => {
+    const z = scrollZones(0, 0.5);
+    expect(z(0)).toBe(0);
+    expect(z(0.3)).toBe(0);
+  });
+
+  it("clearEnd at 1 collapses the exit ramp to a step at the zone edge", () => {
+    const z = scrollZones(0.5, 1);
+    expect(z(0.75)).toBe(0);
+    expect(z(1)).toBe(0);
+  });
+
+  it("default ramp uses smoothstep — softer than linear near boundaries", () => {
+    const z = scrollZones(0.2, 0.8);
+    // At local_t = 0.25 of the entry ramp (p = 0.05), smoothstep yields
+    // 0.15625, so the output (1 − smoothstep) ≈ 0.844, vs linear's 0.75.
+    expect(z(0.05)).toBeCloseTo(0.84375, 5);
+  });
+
+  it("accepts a custom ease to override the default smoothstep", () => {
+    const z = scrollZones(0.2, 0.8, linear);
+    expect(z(0.1)).toBeCloseTo(0.5, 5); // linear midpoint of ramp
+    expect(z(0.05)).toBeCloseTo(0.75, 5); // linear at local_t = 0.25
+  });
+});
+
+describe("scrollPlateau", () => {
+  it("returns 1 inside the clear zone", () => {
+    const z = scrollPlateau(0.3, 0.7);
+    expect(z(0.3)).toBe(1);
+    expect(z(0.5)).toBe(1);
+    expect(z(0.7)).toBe(1);
+  });
+
+  it("ramps from 0 to 1 through the entry zone", () => {
+    const z = scrollPlateau(0.2, 0.8);
+    expect(z(0)).toBe(0);
+    expect(z(0.1)).toBeCloseTo(0.5, 5);
+    expect(z(0.2)).toBe(1);
+  });
+
+  it("ramps from 1 to 0 through the exit zone", () => {
+    const z = scrollPlateau(0.2, 0.8);
+    expect(z(0.8)).toBe(1);
+    expect(z(0.9)).toBeCloseTo(0.5, 5);
+    expect(z(1)).toBe(0);
+  });
+
+  it("is symmetric around the midpoint when the clear zone is centered", () => {
+    const z = scrollPlateau(0.3, 0.7);
+    for (const p of [0, 0.1, 0.15, 0.3, 0.7, 0.85, 0.9, 1]) {
+      expect(z(p)).toBeCloseTo(z(1 - p), 5);
+    }
+  });
+
+  it("is 1 − scrollZones at every sample point (by construction)", () => {
+    const a = scrollPlateau(0.3, 0.7);
+    const b = scrollZones(0.3, 0.7);
+    for (let i = 0; i <= 10; i++) {
+      const p = i / 10;
+      expect(a(p) + b(p)).toBeCloseTo(1, 5);
+    }
+  });
+
+  it("default smoothstep produces a C1 approach to the plateau — no harsh snap", () => {
+    const z = scrollPlateau(0.2, 0.8);
+    // Just before the plateau starts: the output should have eased close
+    // to 1 rather than still climbing linearly. At p = 0.18, local_t = 0.9.
+    // smoothstep(0.9) = 0.972; linear would give 0.9.
+    expect(z(0.18)).toBeCloseTo(0.972, 3);
+    expect(z(0.82)).toBeCloseTo(0.972, 3); // symmetric on the exit side
+  });
+
+  it("accepts a custom ease to override the default smoothstep", () => {
+    const z = scrollPlateau(0.2, 0.8, linear);
+    expect(z(0.1)).toBeCloseTo(0.5, 5);
+    expect(z(0.18)).toBeCloseTo(0.9, 5);
+  });
+});

package/src/index.ts

@@ -0,0 +1,9 @@
+export { createScrollProgress } from "./progress.js";
+export { createScrollTransition } from "./scroll-transition.js";
+export type { ScrollTransitionOptions } from "./scroll-transition.js";
+export { createScrollEffect } from "./scroll-effect.js";
+export type { ScrollEffectOptions } from "./scroll-effect.js";
+export { sharedScrollObserver, ScrollObserver } from "./observer.js";
+export type { ScrollSubscriber } from "./observer.js";
+export { scrollPlateau, scrollRange, scrollZones, smoothstep } from "./zones.js";
+export type { EaseFn, Handle, ScrollProgressOptions } from "./types.js";

package/src/observer.ts

@@ -0,0 +1,89 @@
+/**
+ * Shared rAF-throttled scroll / resize observer. Every primitive in this
+ * package (progress, parallax, sticky-pin, horizontal-section) registers
+ * its element here; the observer keeps one passive `scroll` listener on
+ * `window` for the lifetime of any subscription and tears it down once
+ * the last subscriber unsubscribes.
+ *
+ * Safe to import at module load: no window access happens until
+ * `subscribe()` is called.
+ */
+
+export interface ScrollSubscriber {
+  onScroll(
+    rect: DOMRect,
+    viewport: { readonly width: number; readonly height: number },
+  ): void;
+}
+
+export class ScrollObserver {
+  private subs = new Map<HTMLElement, ScrollSubscriber>();
+  private listening = false;
+  private rafId: number | null = null;
+  private readonly scheduler: () => void;
+
+  constructor() {
+    this.scheduler = (): void => this.scheduleUpdate();
+  }
+
+  subscribe(element: HTMLElement, subscriber: ScrollSubscriber): () => void {
+    this.subs.set(element, subscriber);
+    if (!this.listening) this.start();
+    this.scheduleUpdate();
+    return () => {
+      this.subs.delete(element);
+      if (this.subs.size === 0) this.stop();
+    };
+  }
+
+  private start(): void {
+    if (typeof window === "undefined") return;
+    window.addEventListener("scroll", this.scheduler, { passive: true });
+    window.addEventListener("resize", this.scheduler, { passive: true });
+    this.listening = true;
+  }
+
+  private stop(): void {
+    if (typeof window === "undefined") return;
+    window.removeEventListener("scroll", this.scheduler);
+    window.removeEventListener("resize", this.scheduler);
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.listening = false;
+  }
+
+  private scheduleUpdate(): void {
+    if (this.rafId !== null) return;
+    if (typeof requestAnimationFrame === "undefined") return;
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      this.flush();
+    });
+  }
+
+  /**
+   * Run every subscriber's callback with the current viewport + element
+   * rect. Exposed for tests that need deterministic flushes without
+   * waiting on rAF.
+   */
+  flush(): void {
+    if (typeof window === "undefined") return;
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    } as const;
+    for (const [el, sub] of this.subs) {
+      sub.onScroll(el.getBoundingClientRect(), viewport);
+    }
+  }
+}
+
+let _shared: ScrollObserver | null = null;
+
+/** Lazy singleton — first call creates the observer. SSR-safe. */
+export function sharedScrollObserver(): ScrollObserver {
+  if (!_shared) _shared = new ScrollObserver();
+  return _shared;
+}

package/src/progress.ts

@@ -0,0 +1,39 @@
+import { sharedScrollObserver } from "./observer.js";
+import type { Handle, ScrollProgressOptions } from "./types.js";
+
+/**
+ * Emits a continuous [0, 1] value as `element` sweeps across the viewport.
+ *
+ *   progress = 0  → element's top edge is at the viewport's bottom edge
+ *                   (element has just entered from below)
+ *   progress = 1  → element's bottom edge is at the viewport's top edge
+ *                   (element has just exited through the top)
+ *
+ * The curve is linear by default; pass `ease: (t) => ...` to remap —
+ * any easing from `@vysmo/easings` works without importing it here.
+ */
+export function createScrollProgress(
+  options: ScrollProgressOptions,
+): Handle {
+  const observer = sharedScrollObserver();
+  let lastProgress = Number.NaN;
+
+  const unsubscribe = observer.subscribe(options.element, {
+    onScroll(rect, viewport) {
+      const span = viewport.height + rect.height;
+      if (span <= 0) return;
+      const raw = (viewport.height - rect.top) / span;
+      const clamped = raw < 0 ? 0 : raw > 1 ? 1 : raw;
+      const mapped = options.ease ? options.ease(clamped) : clamped;
+      if (mapped === lastProgress) return;
+      lastProgress = mapped;
+      options.onProgress(mapped);
+    },
+  });
+
+  return {
+    destroy(): void {
+      unsubscribe();
+    },
+  };
+}

package/src/scroll-effect.ts

@@ -0,0 +1,72 @@
+import type {
+  Effect,
+  Runner,
+  TextureSource,
+  UniformParams,
+} from "@vysmo/effects";
+import { sharedScrollObserver } from "./observer.js";
+import type { EaseFn, Handle } from "./types.js";
+
+export interface ScrollEffectOptions<P extends UniformParams> {
+  /**
+   * Section whose scroll-past drives the effect. Progress spans the
+   * full viewport sweep, same as `createScrollProgress`.
+   */
+  section: HTMLElement;
+  /** Effects runner; caller owns the canvas + WebGL context. */
+  runner: Runner;
+  /** Effect to render on every scroll frame. */
+  effect: Effect<P>;
+  /** Source texture to filter — image, video, canvas. */
+  source: TextureSource;
+  /**
+   * Maps the scroll progress [0, 1] to the effect's uniform params.
+   * Keeps the scroll package free of effect-specific knowledge — the
+   * caller decides which param to animate and how.
+   *
+   *   paramsAt: (p) => ({ radius: p * 20 })
+   */
+  paramsAt: (progress: number) => Partial<P>;
+  /** Remap the raw [0, 1] progress before it reaches `paramsAt`. */
+  ease?: EaseFn;
+}
+
+/**
+ * Bind the scroll position through `section` to a continuous render of
+ * `effect` on `runner`, where the effect's params are a function of
+ * progress. Typical use: blur / chromatic-aberration / colour-grade
+ * intensity ramps up as the user scrolls into a section and back down
+ * as they scroll out.
+ *
+ * Same ownership model as `createScrollTransition`: you pass a Runner,
+ * scroll drives its `render()`. No re-render when progress is unchanged.
+ */
+export function createScrollEffect<P extends UniformParams>(
+  options: ScrollEffectOptions<P>,
+): Handle {
+  const observer = sharedScrollObserver();
+  let lastProgress = Number.NaN;
+
+  const unsubscribe = observer.subscribe(options.section, {
+    onScroll(rect, viewport) {
+      const span = viewport.height + rect.height;
+      if (span <= 0) return;
+      const raw = (viewport.height - rect.top) / span;
+      const clamped = raw < 0 ? 0 : raw > 1 ? 1 : raw;
+      const mapped = options.ease ? options.ease(clamped) : clamped;
+      if (mapped === lastProgress) return;
+      lastProgress = mapped;
+      const params = options.paramsAt(mapped);
+      options.runner.render(options.effect, {
+        source: options.source,
+        params,
+      });
+    },
+  });
+
+  return {
+    destroy(): void {
+      unsubscribe();
+    },
+  };
+}

package/src/scroll-transition.ts

@@ -0,0 +1,80 @@
+import type {
+  Runner,
+  TextureSource,
+  Transition,
+  UniformParams,
+} from "@vysmo/transitions";
+import { sharedScrollObserver } from "./observer.js";
+import type { EaseFn, Handle } from "./types.js";
+
+export interface ScrollTransitionOptions<P extends UniformParams> {
+  /**
+   * Section whose scroll-past drives the transition. Progress is 0 when
+   * the section's top enters the viewport bottom and 1 when its bottom
+   * exits the viewport top — same curve as `createScrollProgress`.
+   */
+  section: HTMLElement;
+  /**
+   * Transitions runner. The caller owns the WebGL context and its
+   * canvas — that keeps this primitive composable (multiple
+   * scroll-transitions can share one runner) and decouples lifecycle.
+   */
+  runner: Runner;
+  /** Transition to render across the scroll range. */
+  transition: Transition<P>;
+  /** Starting source — shown at progress 0. */
+  from: TextureSource;
+  /** Ending source — shown at progress 1. */
+  to: TextureSource;
+  /** Overrides for the transition's uniform params. */
+  params?: Partial<P>;
+  /** Remap the raw [0, 1] progress. Default: linear. */
+  ease?: EaseFn;
+}
+
+/**
+ * Bind the vertical scroll position through `section` to a full transition
+ * run on `runner`. As the section sweeps past the viewport, `from` morphs
+ * into `to` via the chosen transition. One rAF per scroll frame, no
+ * re-render when the clamped progress hasn't changed.
+ *
+ * The scroll package does not import the transitions runtime — only its
+ * types. You pass in your own `Runner`, so the transitions library only
+ * lands in bundles that actually call this primitive.
+ */
+export function createScrollTransition<P extends UniformParams>(
+  options: ScrollTransitionOptions<P>,
+): Handle {
+  const observer = sharedScrollObserver();
+  let lastProgress = Number.NaN;
+
+  const unsubscribe = observer.subscribe(options.section, {
+    onScroll(rect, viewport) {
+      const span = viewport.height + rect.height;
+      if (span <= 0) return;
+      const raw = (viewport.height - rect.top) / span;
+      const clamped = raw < 0 ? 0 : raw > 1 ? 1 : raw;
+      const mapped = options.ease ? options.ease(clamped) : clamped;
+      if (mapped === lastProgress) return;
+      lastProgress = mapped;
+      const args: {
+        from: TextureSource;
+        to: TextureSource;
+        progress: number;
+        params?: Partial<P>;
+      } = {
+        from: options.from,
+        to: options.to,
+        progress: mapped,
+      };
+      if (options.params !== undefined) args.params = options.params;
+      options.runner.render(options.transition, args);
+    },
+  });
+
+  return {
+    destroy(): void {
+      unsubscribe();
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,19 @@
+/** Signature compatible with `@vysmo/easings.EasingFn`, kept local so this package has zero runtime coupling to the easings lib. */
+export type EaseFn = (t: number) => number;
+
+export interface Handle {
+  destroy(): void;
+}
+
+export interface ScrollProgressOptions {
+  /**
+   * Element whose bounding box is tracked. Progress is 0 when its top is
+   * at the viewport bottom and 1 when its bottom is at the viewport top
+   * — i.e. a full sweep across the viewport.
+   */
+  element: HTMLElement;
+  /** Remap the raw [0, 1] progress. Default: linear. */
+  ease?: EaseFn;
+  /** Invoked on every frame the element's position changes. */
+  onProgress: (progress: number) => void;
+}

package/src/zones.ts

@@ -0,0 +1,103 @@
+import type { EaseFn } from "./types.js";
+
+/**
+ * Smoothstep — `t² · (3 − 2t)`. C1-continuous S-curve that matches
+ * linear at 0, 0.5, and 1 but eases in and out near the boundaries.
+ * Used as the default ramp shape for every zone helper so transitions
+ * and effects decelerate smoothly into their plateaus instead of
+ * snapping on the derivative discontinuity of a pure linear ramp.
+ *
+ * Exported so callers can reach for it explicitly, or compose it.
+ */
+export const smoothstep: EaseFn = (t) => t * t * (3 - 2 * t);
+
+/**
+ * Clamp progress to a sub-range. Outside the range, the output stays flat
+ * (0 before `start`, 1 after `end`). Inside, progress is remapped from
+ * `[start, end]` to `[0, 1]` through the supplied ease (default:
+ * {@link smoothstep}).
+ *
+ *   scrollRange(0.1, 0.5) — transition plays between 10% and 50% of the
+ *   full viewport sweep; does nothing before, stays at its final state
+ *   after. Pass `ease: (t) => t` for a linear clamp.
+ *
+ * Designed for `createScrollTransition` so the transition completes at a
+ * point the author chooses — typically well before the section exits the
+ * viewport — and then holds its final state while the user keeps scrolling.
+ */
+export function scrollRange(
+  start: number,
+  end: number,
+  ease: EaseFn = smoothstep,
+): EaseFn {
+  if (end <= start) return (p) => (p < start ? 0 : 1);
+  const span = end - start;
+  return (p) => {
+    if (p <= start) return 0;
+    if (p >= end) return 1;
+    return ease((p - start) / span);
+  };
+}
+
+/**
+ * Three-zone bathtub envelope for effects.
+ *
+ *   scrollZones(0.25, 0.85) — effect ramps from max at `p = 0` down to
+ *   zero at `p = 0.25` (smoothly by default), stays at zero through the
+ *   clear zone (`0.25 ≤ p ≤ 0.85`), then ramps back up to max by
+ *   `p = 1`.
+ *
+ * Designed for `createScrollEffect` where "identity" is zero intensity —
+ * so the image reads cleanly while the section is visible and the effect
+ * only appears as it enters and exits the viewport. Pass `ease: (t) => t`
+ * for a linear ramp; default is {@link smoothstep}.
+ */
+export function scrollZones(
+  clearStart: number,
+  clearEnd: number,
+  ease: EaseFn = smoothstep,
+): EaseFn {
+  return (p) => {
+    if (p < clearStart) {
+      if (clearStart <= 0) return 0;
+      return 1 - ease(p / clearStart);
+    }
+    if (p > clearEnd) {
+      if (clearEnd >= 1) return 0;
+      return ease((p - clearEnd) / (1 - clearEnd));
+    }
+    return 0;
+  };
+}
+
+/**
+ * Three-zone plateau envelope — the inverse of {@link scrollZones}.
+ *
+ *   scrollPlateau(0.3, 0.7) — rises from 0 at `p = 0` up to 1 at
+ *   `p = 0.3` (smoothly by default), holds at 1 across the clear zone
+ *   (`0.3 ≤ p ≤ 0.7`), then falls back to 0 by `p = 1`.
+ *
+ * Designed for `createScrollTransition` where "identity" is the fully
+ * transitioned state (progress 1). The transition plays in as the
+ * section enters, holds its final frame across the clear zone, then
+ * plays back out (reverse) as the section exits. Smoothstep default
+ * prevents the harsh snap that a linear ramp produces at the plateau
+ * boundaries.
+ */
+export function scrollPlateau(
+  clearStart: number,
+  clearEnd: number,
+  ease: EaseFn = smoothstep,
+): EaseFn {
+  return (p) => {
+    if (p < clearStart) {
+      if (clearStart <= 0) return 1;
+      return ease(p / clearStart);
+    }
+    if (p > clearEnd) {
+      if (clearEnd >= 1) return 1;
+      return 1 - ease((p - clearEnd) / (1 - clearEnd));
+    }
+    return 1;
+  };
+}