Menu

Modules Overview

Modular Design Philosophy

StringTune's modular architecture is at the heart of its flexibility and performance. Each feature is encapsulated in its own module, allowing developers to include only what they need. This ensures a lean and efficient integration, tailored to your project's specific requirements.

Available Modules

Scroll

  • StringProgress – converts element travel into a deterministic 0 → 1 value for CSS and events.
  • StringProgressPart – slices an existing progress timeline and remaps a sub-range into its own 0 → 1 output.
  • StringParallax – pushes layers along the Y-axis using the progress engine and viewport-aware offsets.
  • StringGlide – damps scroll velocity into smooth displacement for parallax-style drifting.
  • StringLerp – exposes current scroll velocity (--lerp) so you can react to momentum in CSS or JavaScript.
  • StringScroller – proxies wheel events from custom containers back into the core scroll controller.

Cursor & Interaction

  • StringCursor – normalises pointer coordinates, feeds CSS variables, and drives a shared cursor element.
  • StringMagnetic – pulls elements toward the pointer within a configurable radius.
  • StringImpulse – translates cursor velocity into springy movement and tilt on hover targets.
  • StringSpotlight – turns cursor direction and distance into lighting-friendly CSS variables.

Layout

  • StringAnchor – writes precise transform-origin values from human-friendly anchor strings.
  • StringSplit – rebuilds text into line/word/character wrappers with index variables for choreography.
  • StringResponsive – toggles DOM fragments and emits events based on viewport breakpoints.

Media & Loading

  • StringLoading – adds the global -loaded class after a configurable timeout once the app boots.
  • StringLazy – streams image bytes, locks in aspect ratio, and swaps sources only when in view.
  • StringVideoAutoplay – auto-plays/pause inline videos as they enter or leave the viewport.

Forms

  • StringForm – offers declarative validation rules, error mirroring, and submit events for forms.

Tooling

  • StringFPSTracker – renders an on-screen FPS counter so you can monitor performance cost.
  • StringPositionTracker – surfaces the current scroll position for debugging or telemetry.

Key Advantages of Modularity

  • Selective Usage: Import only the modules you need.
  • Enhanced Performance: Avoid unnecessary overhead by excluding unused features.
  • Custom Configurations: Each module comes with flexible options to meet specific needs.

Example Initialization

import StringTune, { StringCursor, StringProgress, StringParallax } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringCursor, { lerp: 0.4 });
stringTune.use(StringProgress);
stringTune.use(StringParallax);
stringTune.start(60);

Each module is designed to work harmoniously within the StringTune ecosystem, ensuring seamless integration and consistent performance across your projects.