StringLerp Module

Expose real-time scroll velocity as a CSS variable. StringLerp samples the engine’s lerped scroll delta every frame, writes it to --lerp, and emits an event you can tap into for bespoke effects.

Module Snapshot

• Activation attribute: string="lerp"
• CSS variable populated: --lerp (signed float, positive when scrolling forward/down)
• Event channel: object:lerp:<id> → number
• Update cadence: every animation frame via onFrame, with automatic zeroing on onScrollStop
• Value source: mirrors StringData.scroll.lerped, which already smooths raw wheel/touch deltas

Basic Usage

import StringTune, { StringLerp } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringLerp);
stringTune.start(60);

<div class="velocity-card" string="lerp" string-id="hero-velocity">Scroll-reactive card</div>

.velocity-card {
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  transform: translateY(calc(var(--lerp, 0) * 28px));
  box-shadow: 0 calc(var(--lerp, 0) * 18px) 40px rgba(0, 0, 0, 0.22);
}

How It Works

• Frame sampling: on every animation frame StringLerp reads scroll.lerped, a smoothed velocity from the active scroll controller. Values typically hover between -1.5 and 1.5, but spikes are possible on rapid gestures.
• CSS sync: the module writes the current value to --lerp on each connected element (no mirrors). Because the value is signed, upward scrolls push negative numbers.
• Auto reset: when the engine’s scroll controller fires onScrollStop, --lerp is clamped to 0, so transforms gracefully settle.
• Event emit: each update emits object:lerp:<id> with the same float, allowing JavaScript consumers to orchestrate timelines or telemetry.

Event Signal

stringTune.on('object:lerp:hero-velocity', (velocity) => {
  const intensity = Math.min(1, Math.abs(velocity));
  heroLight.intensity = 0.3 + intensity * 0.7;
});

StringLerp is a lightweight bridge between scroll energy and your styling layer—perfect for recoil effects, dynamic shadows, or responsive parallax dampening with zero extra bookkeeping.