ripple-text 0.1.0 → 0.2.0

package/dist/core/engine.d.ts

@@ -0,0 +1,39 @@
+import type { FieldEffect, LetterInput, RippleSource, RippleTextSettings, SettingsInput } from "./types";
+export declare class RippleTextEngine {
+    private canvas;
+    private ctx;
+    private field;
+    private ripple;
+    settings: RippleTextSettings;
+    private letters;
+    private colors;
+    private rafId;
+    private lastFrameTime;
+    private running;
+    private fpsFrames;
+    private fpsLastTime;
+    private fpsDisplay;
+    private pointerDown;
+    private pointerX;
+    private pointerY;
+    private prevPointerX;
+    private prevPointerY;
+    private pointerSpeed;
+    private lastRippleTime;
+    private _onDown;
+    private _onMove;
+    private _onUp;
+    private _onTouchStart;
+    private _onTouchMove;
+    private _onTouchEnd;
+    constructor(canvas: HTMLCanvasElement, field: FieldEffect, ripple: RippleSource, settings?: SettingsInput);
+    setLetters(letters: LetterInput[]): void;
+    updateSettings(patch: SettingsInput): void;
+    resize(w: number, h: number): void;
+    start(): void;
+    stop(): void;
+    private emitRipples;
+    private updatePhysics;
+    private render;
+}
+//# sourceMappingURL=engine.d.ts.map

package/dist/core/engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../src/core/engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACd,MAAM,SAAS,CAAC;AA0BjB,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAe;IAC7B,QAAQ,EAAE,kBAAkB,CAAC;IAE7B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,UAAU,CAAK;IAGvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAG3B,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,WAAW,CAAa;gBAG9B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,QAAQ,CAAC,EAAE,aAAa;IA2E1B,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE;IAajC,cAAc,CAAC,KAAK,EAAE,aAAa;IAOnC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAS3B,KAAK;IAkCL,IAAI;IAiBJ,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,aAAa;IA0DrB,OAAO,CAAC,MAAM;CAqCf"}

package/dist/core/types.d.ts

@@ -0,0 +1,78 @@
+/** A single character with physics state */
+export interface Letter {
+    char: string;
+    ox: number;
+    oy: number;
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    font: string;
+}
+/** Input letter before physics initialization */
+export interface LetterInput {
+    char: string;
+    x: number;
+    y: number;
+    font: string;
+}
+/** Sampled field value at a point */
+export interface FieldSample {
+    brightness: number;
+    gradX: number;
+    gradY: number;
+}
+/**
+ * A FieldEffect produces a continuous animated field that drives letter physics.
+ * Replace this to swap the underlying algorithm (water caustics, perlin noise, etc.)
+ */
+export interface FieldEffect {
+    /** Initialize or resize the field to cover the given dimensions */
+    resize(width: number, height: number): void;
+    /** Advance the field simulation by one frame */
+    update(time: number): void;
+    /** Sample field brightness and gradient at a point */
+    sample(x: number, y: number): FieldSample;
+}
+/**
+ * A RippleSource creates expanding interactive disturbances in the field.
+ * Replace this to change how click/touch interactions propagate.
+ */
+export interface RippleSource {
+    /** Initialize or resize to match field dimensions */
+    resize(width: number, height: number): void;
+    /** Create a new ripple at the given screen coordinates */
+    addRipple(x: number, y: number, time: number): void;
+    /** Advance ripple simulation */
+    update(time: number): void;
+    /** Remove dead ripples */
+    prune(time: number): void;
+    /**
+     * Compute the force a ripple exerts on a letter.
+     * Returns [forceX, forceY, influence] where influence is 0..1
+     * indicating how much the letter is currently affected.
+     */
+    computeForce(letterX: number, letterY: number, time: number): [fx: number, fy: number, influence: number];
+    /** Number of active ripples (for debug display) */
+    activeCount(): number;
+}
+/** All tunable physics and rendering settings */
+export interface RippleTextSettings {
+    gradientForce: number;
+    springForce: number;
+    darkSpringBoost: number;
+    damping: number;
+    maxDisplacement: number;
+    fieldScale: number;
+    rippleInterval: number;
+    colorBuckets: number;
+    bgColor: string;
+    showFps: boolean;
+    /** Build an array of CSS color strings for each displacement bucket */
+    buildColors(bucketCount: number): string[];
+}
+/** Deep partial — all fields optional */
+export type SettingsInput = {
+    [K in keyof RippleTextSettings]?: RippleTextSettings[K];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,iDAAiD;AACjD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qCAAqC;AACrC,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,mEAAmE;IACnE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,gDAAgD;IAChD,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,sDAAsD;IACtD,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC3C;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,0DAA0D;IAC1D,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpD,gCAAgC;IAChC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,0BAA0B;IAC1B,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CACV,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,GACX,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAC/C,mDAAmD;IACnD,WAAW,IAAI,MAAM,CAAC;CACvB;AAED,iDAAiD;AACjD,MAAM,WAAW,kBAAkB;IAEjC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IAGxB,UAAU,EAAE,MAAM,CAAC;IAGnB,cAAc,EAAE,MAAM,CAAC;IAGvB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IAEjB,uEAAuE;IACvE,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC5C;AAED,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG;KACzB,CAAC,IAAI,MAAM,kBAAkB,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC;CACxD,CAAC"}

package/dist/effects/waterField.d.ts

@@ -0,0 +1,21 @@
+import type { FieldEffect, FieldSample } from "../core/types";
+export interface WaterFieldSettings {
+    noiseScale: number;
+    timeSpeed: number;
+    sharpness: number;
+}
+export declare class WaterField implements FieldEffect {
+    settings: WaterFieldSettings;
+    private w;
+    private h;
+    private brightness;
+    private gradXBuf;
+    private gradYBuf;
+    private frameCount;
+    constructor(settings?: Partial<WaterFieldSettings>);
+    resize(width: number, height: number): void;
+    update(time: number): void;
+    sample(x: number, y: number): FieldSample;
+    private computeGradients;
+}
+//# sourceMappingURL=waterField.d.ts.map

package/dist/effects/waterField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waterField.d.ts","sourceRoot":"","sources":["../../src/effects/waterField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA4D9D,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AASD,qBAAa,UAAW,YAAW,WAAW;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,CAAC,CAAK;IACd,OAAO,CAAC,CAAC,CAAK;IACd,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,UAAU,CAAK;gBAEX,QAAQ,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC;IAIlD,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IASpC,MAAM,CAAC,IAAI,EAAE,MAAM;IAsCnB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW;IA2BzC,OAAO,CAAC,gBAAgB;CAgBzB"}

package/dist/effects/waveRipple.d.ts

@@ -0,0 +1,21 @@
+import type { RippleSource } from "../core/types";
+export interface WaveRippleSettings {
+    amplitude: number;
+    wavelength: number;
+    decay: number;
+    force: number;
+    waveCenterY: number;
+    waveAmpMul: number;
+}
+export declare class WaveRipple implements RippleSource {
+    settings: WaveRippleSettings;
+    private ripples;
+    constructor(settings?: Partial<WaveRippleSettings>);
+    resize(_w: number, _h: number): void;
+    addRipple(x: number, y: number, time: number): void;
+    update(time: number): void;
+    prune(_time: number): void;
+    computeForce(lx: number, ly: number, _time: number): [number, number, number];
+    activeCount(): number;
+}
+//# sourceMappingURL=waveRipple.d.ts.map

package/dist/effects/waveRipple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveRipple.d.ts","sourceRoot":"","sources":["../../src/effects/waveRipple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAelD,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAWD,qBAAa,UAAW,YAAW,YAAY;IAC7C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,OAAO,CAAgB;gBAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC;IAIlD,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM;IAI7B,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAgB5C,MAAM,CAAC,IAAI,EAAE,MAAM;IAgBnB,KAAK,CAAC,KAAK,EAAE,MAAM;IAQnB,YAAY,CACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,GACZ,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;IAqC3B,WAAW;CAGZ"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { RippleTextEngine } from "./core/engine";
+export type { FieldEffect, FieldSample, Letter, LetterInput, RippleSource, RippleTextSettings, SettingsInput, } from "./core/types";
+export { WaterField } from "./effects/waterField";
+export type { WaterFieldSettings } from "./effects/waterField";
+export { WaveRipple } from "./effects/waveRipple";
+export type { WaveRippleSettings } from "./effects/waveRipple";
+export { extractTextFromDOM, layoutText } from "./utils/extractText";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EACV,WAAW,EACX,WAAW,EACX,MAAM,EACN,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/utils/extractText.d.ts

@@ -0,0 +1,18 @@
+import type { LetterInput } from "../core/types";
+/**
+ * Walk the DOM under `root`, extract every visible character with its
+ * screen position and computed font using Range.getBoundingClientRect().
+ */
+export declare function extractTextFromDOM(root: HTMLElement, maxChars?: number): LetterInput[];
+/**
+ * Create letter inputs from a plain text string, laid out on a canvas context.
+ */
+export declare function layoutText(ctx: CanvasRenderingContext2D, text: string, options?: {
+    font?: string;
+    fontSize?: number;
+    margin?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    lineHeight?: number;
+}): LetterInput[];
+//# sourceMappingURL=extractText.d.ts.map

package/dist/utils/extractText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.d.ts","sourceRoot":"","sources":["../../src/utils/extractText.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,WAAW,EACjB,QAAQ,SAAO,GACd,WAAW,EAAE,CAqDf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE;IACP,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CAChB,GACL,WAAW,EAAE,CA+Bf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripple-text",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Physics-driven text effect with pluggable field and ripple algorithms",
   "main": "dist/index.js",
@@ -10,7 +10,7 @@
   ],
   "scripts": {
     "dev": "vite demo",
-    "build": "tsc && vite build",
+    "build": "vite build && tsc --emitDeclarationOnly",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",