@zakkster/lite-tools

The standard library for high-performance web presentation.

Stop installing 500KB of frameworks just to make your website feel alive. LiteTools gives you GSAP-level scroll reveals, Framer-level magnetic physics, Three.js-level particle engines, and Tailwind-level color generation in a single, tree-shakeable, zero-GC toolkit.

→ Live Recipes Gallery Demo

Why LiteTools?

| Feature | LiteTools | lodash | GSAP | Framer Motion | p5.js | |---|---|---|---|---|---| | Tree-Shakeable | Yes | Partial | No | No | No | | Zero-GC Hot Path | Yes | No | No | No | No | | Deterministic | Yes | N/A | No | No | No | | OKLCH Color | Yes | No | No | No | No | | SoA Particles | Yes | No | No | No | No | | Scroll Reveals | Yes | No | Plugin | Yes | No | | Spring Physics | Yes | No | No | Yes | No | | Theme Generation | Yes | No | No | No | No | | Bundle Size | Tiny | Large | Large | Large | Large |

Installation

npm install @zakkster/lite-tools

Import Patterns

// Full bundle
import { Recipes, FXSystem, GenEngine, lerp } from '@zakkster/lite-tools';

// Tree-shaking — only pulls what you use
import { lerp, clamp, easeOut } from '@zakkster/lite-tools';
import { Recipes } from '@zakkster/lite-tools';

Performance

Math & Color (1,000,000 operations)

| Operation | LiteTools | lodash | anime.js | three.js | |---|---|---|---|---| | lerp | Fastest | Medium | Medium | Medium | | clamp | Fastest | Medium | Medium | Medium | | smoothstep | Fastest | N/A | Slow | Medium | | OKLCH interpolation | Fastest | N/A | N/A | N/A |

Particle Engine (10,000 particles)

| Engine | Allocs/Frame | Frame Time (ms) | Deterministic | |---|---|---|---| | LiteTools (SoA) | 0 | 1.2 | Yes | | pixi-particles | ~3,000 | 4.8 | No | | tsparticles | ~5,000 | 7.2 | No | | Vanilla OOP | ~100,000 | 12–20 | No |

UI Micro-Interactions

| Feature | LiteTools | GSAP | Framer Motion | anime.js | |---|---|---|---|---| | Scroll Reveal | Fastest | Medium | High | Medium | | Parallax | Fastest | Medium | N/A | Medium | | Magnetic Hover | Fastest | Medium | High | Medium | | 3D Tilt | Fastest | N/A | High | Medium | | OKLCH ColorShift | Fastest | N/A | N/A | Medium |

Generative Art

| Feature | LiteTools | p5.js | Processing.js | regl | |---|---|---|---|---| | Deterministic | Yes | No | No | Yes | | Zero-GC | Yes | No | No | Yes | | OKLCH Colors | Yes | No | No | No | | Canvas2D Optimized | Excellent | Medium | Medium | N/A |

Recipes

Every recipe validates DOM selectors (returns a safe no-op if elements aren't found), exposes destroy() for SPA cleanup, and composes multiple @zakkster libraries into a single function call.

Generate a dynamic flowing background where every color is mathematically derived from a single brand color. Guaranteed to never clash.

import { Recipes } from '@zakkster/lite-tools';

const { gen, theme, destroy } = Recipes.brandedBackground(canvas, { l: 0.6, c: 0.2, h: 250 }, {
    seed: 12345,
    animate: true,  // false for static poster
});

// Later: destroy() stops the animation and cleans up

Composes: generateTheme() → createGradient() → FlowField → Pattern.flowTrace()

Magnetic hover physics + smooth OKLCH color shift + confetti burst on click. The trifecta that makes users go "how did they do that?"

import { Recipes } from '@zakkster/lite-tools';

const { destroy } = Recipes.premiumButton('#buy-now', overlayCanvas, {
    brandColor: { l: 0.6, c: 0.25, h: 280 },
    hoverColor: { l: 0.7, c: 0.2, h: 300 },
    magneticStrength: 0.4,
});

// React: useEffect(() => () => destroy(), []);

Composes: Magnetic + ColorShift + ConfettiBurst

Spawn fiery explosions that get sucked into a gravitational vortex. 60fps on mobile with 15,000 SoA particles.

import { Recipes } from '@zakkster/lite-tools';

const hole = Recipes.blackHole(ctx, canvas.width / 2, canvas.height / 2, {
    maxParticles: 15000,
    seed: 9999,
});

canvas.addEventListener('click', (e) => hole.explode(e.offsetX, e.offsetY));

// Move the black hole in real time
hole.moveTo(newX, newY);

Composes: FXSystem + GravityWell + Vortex + DragField + Presets.explosion/sparks/fire

One config object sets up an entire scroll-driven page. Hero parallax, staggered cards, slide-in images, scroll progress bar.

import { Recipes } from '@zakkster/lite-tools';

const { destroy } = Recipes.scrollStory({
    heroSelector: '.hero-bg',
    heroSpeed: 0.3,
    cardSelector: '.card',
    imageSelector: '.feature-img',
    titleSelector: '.section-title',
    progressBar: document.querySelector('.progress-fill'),
});

Composes: Parallax + ScrollReveal.cascade/fadeUp/fadeIn + ScrollProgress

OKLCH-colored particle trail that follows mouse, touch, or pen input.

import { Recipes } from '@zakkster/lite-tools';

const { destroy } = Recipes.particleCursor(overlayCanvas, {
    trailColor: { l: 0.9, c: 0.15, h: 50 },
    fadeColor: { l: 0.5, c: 0.2, h: 30 },
    spawnRate: 3,
});

Composes: Emitter + PointerTracker + Ticker + lerpOklch()

Deterministic twinkling starfield. Same seed = same stars on any screen size. DPR-aware via Viewport auto-resize.

import { Recipes } from '@zakkster/lite-tools';

const { stars, destroy } = Recipes.starfield(canvas, {
    seed: 42,
    starCount: 500,
    twinkleSpeed: 2,
});

Composes: Viewport (DPR + resize) + Random + Ticker + toCssOklch()

A mobile hamburger menu driven by spring physics and a state machine. Natural overshoot, not a CSS transition.

import { Recipes } from '@zakkster/lite-tools';

const menu = Recipes.springMenu('#mobile-nav', '#hamburger', {
    stiffness: 200,
    damping: 22,
    openColor: { l: 0.15, c: 0.03, h: 260 },
});

menu.open();   // animate open
menu.close();  // animate closed
menu.toggle(); // toggle state

Composes: Spring + FSM + lerpOklch() + toCssOklch()

FBM noise heatmap with a 6-stop OKLCH terrain gradient. Click to reseed for completely different landscapes.

import { Recipes } from '@zakkster/lite-tools';

const map = Recipes.noiseHeatmap(canvas, {
    seed: 42,
    cellSize: 6,
    animate: true,
    gradient: [
        { l: 0.15, c: 0.08, h: 260 },  // deep ocean
        { l: 0.55, c: 0.2, h: 130 },   // lowland
        { l: 0.95, c: 0.02, h: 0 },    // snow peak
    ],
});

map.reseed();       // new terrain
map.reseed(12345);  // specific seed

Composes: GenEngine + SimplexNoise.fbm() + createGradient()

Automated firework sequence with 7 color-coordinated burst recipes. Interactive + automatic modes.

import { Recipes } from '@zakkster/lite-tools';

const show = Recipes.fireworkShow(ctx, canvas.width, canvas.height, {
    burstInterval: 800,
});

show.manualBurst(x, y);  // interactive
show.stop();              // pause the auto-show
show.resume();            // resume

Composes: FXSystem + Ticker.setInterval + createGradient() + EmitterShape.circle + DragField

Continuous snowfall with wind and turbulence force fields. Change wind direction in real time.

import { Recipes } from '@zakkster/lite-tools';

const snow = Recipes.snowfall(ctx, canvas.width, canvas.height, {
    windStrength: 30,
    turbulenceStrength: 60,
});

snow.setWind(-50);  // blow left
snow.setWind(80);   // blow right hard

Composes: FXSystem + Wind + Turbulence + Ticker.setInterval + EmitterShape.line

Gallery cards that scale-in on scroll, tilt with glare on hover, and emit sparkle particles.

import { Recipes } from '@zakkster/lite-tools';

const { destroy } = Recipes.tiltGallery('.gallery-card', overlayCanvas, {
    maxAngle: 12,
    sparkleColor: { l: 0.95, c: 0.1, h: 50 },
});

Composes: ScrollReveal.scaleIn + Tilt (with glare) + SparkleHover

Record VFX events, replay them identically. Same seed + same inputs = same visual output. Perfect for replays, testing, and bug reports.

import { Recipes, Presets } from '@zakkster/lite-tools';

const replay = Recipes.replaySystem(ctx, { seed: 42 });
replay.registerRecipe('explosion', Presets.explosion);

replay.startRecording();
replay.recordEvent(400, 300, 'explosion');
const events = replay.stopRecording();

replay.replay(); // plays back frame-perfect

Composes: FXSystem + FSM (idle/recording/replaying) + Random.reset()

Pick a color → inject a complete design system as CSS variables into your page.

import { Recipes } from '@zakkster/lite-tools';

const theme = Recipes.themePlayground({
    initialBrand: { l: 0.6, c: 0.2, h: 260 },
    mode: 'light',
    prefix: 'app',
    onThemeChange: (palette, css) => console.log(css),
});

theme.setBrand({ l: 0.5, c: 0.3, h: 30 });  // new brand → new palette
theme.toggleMode();                            // light ↔ dark

Composes: generateTheme() + toCssVariables() → injects <style> into <head>

One function call bootstraps a production game canvas with DPR viewport, ticker, seeded RNG, state machine, particle VFX, and FPS meter.

import { Recipes } from '@zakkster/lite-tools';

const game = Recipes.gameCanvas(canvas, {
    fps: true,
    seed: 42,
    maxParticles: 5000,
});

game.onUpdate((dt) => {
    // Your game loop — dt is in milliseconds
    game.ctx.clearRect(0, 0, game.width, game.height);
});

game.start(); // transitions: loading → ready → playing
game.setState('paused'); // auto-pauses ticker + VFX

Composes: Viewport + Ticker + Random + FSM + FXSystem + FPSMeter

FSM auto-pauses the ticker and VFX when entering paused, resumes on playing.

The @zakkster Ecosystem

lite-lerp ─────────────────┬──── lite-color ──── lite-theme-gen
                           │         │
lite-random ───────────────┤         ├──── lite-fx (VFX engine)
                           │         │
lite-object-pool ── lite-particles ──┤
                           │         ├──── lite-gen (generative art)
lite-soa-particle-engine ──┤         │
           └── lite-vfx    │         ├──── lite-ui (micro-interactions)
                           │         │
lite-smart-observer ───────┘         │
lite-ticker ─────────────────────────┤
lite-viewport ───────────────────────┤
lite-fsm ────────────────────────────┤
lite-fps-meter ──────────────────────┤
lite-pointer-tracker ────────────────┘

All composed into → @zakkster/lite-tools (this package)

TypeScript

Full type definitions included. Every recipe return type is precisely typed.

import { Recipes, type BlackHoleResult } from '@zakkster/lite-tools';

const hole: BlackHoleResult = Recipes.blackHole(ctx, 400, 300);
hole.explode(200, 200); // ← fully typed

SPA Cleanup

Every recipe returns destroy(). Use the destroyAll() helper for batch cleanup:

import { Recipes, destroyAll } from '@zakkster/lite-tools';

// React
useEffect(() => {
    const effects = [
        Recipes.starfield(bgCanvas),
        Recipes.premiumButton('#cta', overlayCanvas),
        Recipes.scrollStory({ cardSelector: '.card' }),
    ];
    return () => destroyAll(effects);
}, []);

License

MIT