@firecms/neat 0.6.0 → 0.7.1

package/README.md

@@ -1,6 +1,8 @@
 # Neat gradients
 
-Create awesome 3D gradients with this library based on three.js.
+Create awesome 3D gradients with this WebGL-based library.
+
+> **⚠️ Breaking change (v0.7):** Neat no longer depends on three.js. The rendering engine has been rewritten to use raw WebGL. You can safely `npm uninstall three @types/three`. The mouse interaction properties (`mouseDistortionStrength`, `mouseDistortionRadius`, `mouseDecayRate`, `mouseDarken`) have also been removed. All other config properties remain unchanged.
 
 Check the demo and gradients editor to find your perfect config here:
 [https://neat.firecms.co/](https://neat.firecms.co/)
@@ -13,13 +15,13 @@ the license and the credits.
 ## Installation
 
 ```bash
-yarn add @firecms/neat three
+yarn add @firecms/neat
 ```
 
 or
 
 ```bash
-npm install @firecms/neat three
+npm install @firecms/neat
 ```
 
 ## Usage
@@ -345,31 +347,6 @@ export const MyComponent: React.FC = () => {
 - **Default:** 0.0
 - **Description:** Blend between original and flow-distorted state
 
-### Mouse Interaction Parameters
-
-#### `mouseDistortionStrength`
-- **Type:** `number`
-- **Range:** 0 to 2.0
-- **Default:** 0.0
-- **Description:** Strength of mouse-driven distortion. Set to 0 to disable.
-
-#### `mouseDistortionRadius`
-- **Type:** `number`
-- **Range:** 0.05 to 2.0
-- **Default:** 0.25
-- **Description:** Radius/area of mouse distortion effect
-
-#### `mouseDecayRate`
-- **Type:** `number`
-- **Range:** 0.90 to 0.99
-- **Default:** 0.96
-- **Description:** How quickly mouse trails fade (0.9 = slow/wobbly, 0.99 = fast/sharp)
-
-#### `mouseDarken`
-- **Type:** `number`
-- **Range:** 0 to 1
-- **Default:** 0.0
-- **Description:** Darkening effect at mouse interaction points
 
 ### Procedural Texture Parameters
 *Note: When enabled, replaces color pressure controls*
@@ -458,7 +435,6 @@ export const MyComponent: React.FC = () => {
 - Combine `yOffset` with scroll position for scroll-based gradient effects
 - Enable `wireframe: true` during development to understand the 3D mesh structure
 - Procedural textures work best with `textureEase` values between 0.3 and 0.7
-- For subtle effects, keep `mouseDistortionStrength` below 0.5
 
 ## NEAT Link
 

package/dist/NeatGradient.d.ts

@@ -1,11 +1,23 @@
-import * as THREE from "three";
-type SceneState = {
-    renderer: THREE.WebGLRenderer;
-    camera: THREE.Camera;
-    scene: THREE.Scene;
-    meshes: THREE.Mesh[];
-    resolution: number;
-};
+import { OrthographicCamera } from "./math";
+export interface WebGLState {
+    gl: WebGLRenderingContext | WebGL2RenderingContext;
+    program: WebGLProgram;
+    buffers: {
+        position: WebGLBuffer;
+        normal: WebGLBuffer;
+        uv: WebGLBuffer;
+        index: WebGLBuffer;
+        wireframeIndex: WebGLBuffer;
+    };
+    locations: {
+        attributes: Record<string, number>;
+        uniforms: Record<string, WebGLUniformLocation | null>;
+    };
+    camera: OrthographicCamera;
+    indexCount: number;
+    wireframeIndexCount: number;
+    indexType: number;
+}
 export type NeatConfig = {
     resolution?: number;
     speed?: number;
@@ -36,13 +48,6 @@ export type NeatConfig = {
     flowScale?: number;
     flowEase?: number;
     flowEnabled?: boolean;
-    /** Strength of mouse-driven distortion */
-    mouseDistortionStrength?: number;
-    /** Radius / area of mouse-driven distortion in UV space (0–1-ish) */
-    mouseDistortionRadius?: number;
-    /** How quickly mouse trails decay/fade (0.9=slow/wobbly, 0.99=fast/sharp) */
-    mouseDecayRate?: number;
-    mouseDarken?: number;
     enableProceduralTexture?: boolean;
     textureVoidLikelihood?: number;
     textureVoidWidthMin?: number;
@@ -88,23 +93,14 @@ export declare class NeatGradient implements NeatController {
     private _colors;
     private _wireframe;
     private _backgroundColor;
+    private _backgroundColorRgb;
     private _backgroundAlpha;
     private _flowDistortionA;
     private _flowDistortionB;
     private _flowScale;
     private _flowEase;
     private _flowEnabled;
-    private _mouseDistortionStrength;
-    private _mouseDistortionRadius;
-    private _mouseDecayRate;
-    private _mouseDarken;
-    private _mouse;
-    private _mouseFBO;
-    private _sceneMouse;
-    private _cameraMouse;
-    private _mouseObjects;
-    private _currentBrush;
-    private _mouseBrushBaseScale;
+    private glState;
     private _enableProceduralTexture;
     private _textureVoidLikelihood;
     private _textureVoidWidthMin;
@@ -121,21 +117,19 @@ export declare class NeatGradient implements NeatController {
     private _textureShapeSquiggles;
     private requestRef;
     private sizeObserver;
-    private sceneState;
-    private _cachedUniforms;
+    private _initialized;
     private _linkElement;
+    private _cachedColorRgb;
     private _yOffset;
     private _yOffsetWaveMultiplier;
     private _yOffsetColorMultiplier;
     private _yOffsetFlowMultiplier;
-    private _tempClearColor;
     private _resizeTimeoutId;
     private _textureNeedsUpdate;
-    private _lastColorUpdate;
     private _linkCheckCounter;
-    private _mouseUpdateScheduled;
-    private _pendingMousePosition;
     private _colorsChanged;
+    private _uniformsDirty;
+    private _textureDirty;
     constructor(config: NeatConfig & {
         ref: HTMLCanvasElement;
         resolution?: number;
@@ -176,11 +170,6 @@ export declare class NeatGradient implements NeatController {
     set flowEase(value: number);
     set flowEnabled(value: boolean);
     get flowEnabled(): boolean;
-    set mouseDistortionStrength(value: number);
-    set mouseDistortionRadius(value: number);
-    _updateBrushScale(): void;
-    set mouseDecayRate(value: number);
-    set mouseDarken(value: number);
     set enableProceduralTexture(value: boolean);
     set textureVoidLikelihood(value: number);
     set textureVoidWidthMin(value: number);
@@ -195,10 +184,7 @@ export declare class NeatGradient implements NeatController {
     set textureShapeCircles(value: number);
     set textureShapeBars(value: number);
     set textureShapeSquiggles(value: number);
-    _initScene(resolution: number): SceneState;
-    _buildMaterial(width: number, height: number): THREE.ShaderMaterial;
-    _setupMouseInteraction(): void;
-    _onMouseMove(e: MouseEvent): void;
-    _createProceduralTexture(): THREE.Texture;
+    _hexToRgb(hex: string): [number, number, number];
+    _initScene(resolution: number): WebGLState;
+    _createProceduralTexture(gl: WebGLRenderingContext | WebGL2RenderingContext): WebGLTexture | null;
 }
-export {};