own-the-canvas 1.0.1 → 1.0.3

package/README.md

@@ -1,10 +1,10 @@
-<p align="center">
+<p align="left">
   <img src="https://raw.githubusercontent.com/jabid-19/own-the-canvas/main/.github/assets/logo.png" alt="own-the-canvas logo" width="120" />
 </p>
 
 # own-the-canvas
 
-> Beautiful, responsive, fully customizable HTML canvas–based React visual components. Zero dependencies. TypeScript. 60fps.
+Beautiful, responsive, fully customizable HTML canvas–based React visual components. Zero dependencies. TypeScript.
 
 ![own-the-canvas cover](https://raw.githubusercontent.com/jabid-19/own-the-canvas/main/.github/assets/cover.png)
 
@@ -23,11 +23,11 @@ pnpm add own-the-canvas
 ## Quick Start
 
 ```tsx
-import { MatrixRain, ParticleField, Starfield } from 'own-the-canvas';
+import { MatrixRain, ParticleField, Starfield } from "own-the-canvas";
 
 export default function App() {
   return (
-    <div style={{ width: '100vw', height: '100vh' }}>
+    <div style={{ width: "100vw", height: "100vh" }}>
       <MatrixRain color="#00ff41" glowEffect />
     </div>
   );
@@ -44,9 +44,8 @@ All components default to `width: "100%"` and `height: "100%"` so they fill thei
 
 Classic falling character rain effect.
 
-
 ```tsx
-import { MatrixRain } from 'own-the-canvas';
+import { MatrixRain } from "own-the-canvas";
 
 <MatrixRain
   color="#00ff41"
@@ -54,19 +53,19 @@ import { MatrixRain } from 'own-the-canvas';
   speed={1}
   charset="katakana"
   glowEffect
-/>
+/>;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `color` | `string` | `"#00ff41"` | Character color |
-| `backgroundColor` | `string` | `"rgba(0,0,0,0.05)"` | Canvas background (use rgba for trail) |
-| `fontSize` | `number` | `16` | Character font size in px |
-| `speed` | `number` | `1` | Fall speed multiplier |
-| `charset` | `"katakana" \| "latin" \| "binary" \| string` | `"katakana"` | Character set |
-| `density` | `number` | `0.85` | Column density 0–1 |
-| `fadeStrength` | `number` | `0.05` | Trail fade 0–1 |
-| `glowEffect` | `boolean` | `true` | Neon glow |
+| Prop              | Type                                          | Default              | Description                            |
+| ----------------- | --------------------------------------------- | -------------------- | -------------------------------------- |
+| `color`           | `string`                                      | `"#00ff41"`          | Character color                        |
+| `backgroundColor` | `string`                                      | `"rgba(0,0,0,0.05)"` | Canvas background (use rgba for trail) |
+| `fontSize`        | `number`                                      | `16`                 | Character font size in px              |
+| `speed`           | `number`                                      | `1`                  | Fall speed multiplier                  |
+| `charset`         | `"katakana" \| "latin" \| "binary" \| string` | `"katakana"`         | Character set                          |
+| `density`         | `number`                                      | `0.85`               | Column density 0–1                     |
+| `fadeStrength`    | `number`                                      | `0.05`               | Trail fade 0–1                         |
+| `glowEffect`      | `boolean`                                     | `true`               | Neon glow                              |
 
 ---
 
@@ -74,29 +73,28 @@ import { MatrixRain } from 'own-the-canvas';
 
 Floating particles with optional connections and mouse repulsion.
 
-
 ```tsx
-import { ParticleField } from 'own-the-canvas';
+import { ParticleField } from "own-the-canvas";
 
 <ParticleField
   particleCount={120}
   particleColor="#7eb8f7"
   connectParticles
   interactive
-/>
+/>;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `particleCount` | `number` | `120` | Number of particles |
-| `particleColor` | `string` | `"#7eb8f7"` | Particle fill color |
-| `lineColor` | `string` | `"#7eb8f7"` | Connection line color |
-| `lineDistance` | `number` | `120` | Max distance for lines |
-| `particleSize` | `number` | `2.5` | Max particle radius |
-| `speed` | `number` | `0.8` | Movement speed |
-| `connectParticles` | `boolean` | `true` | Draw lines between close particles |
-| `interactive` | `boolean` | `true` | Repel on mouse move |
-| `backgroundColor` | `string` | `"transparent"` | Background color |
+| Prop               | Type      | Default         | Description                        |
+| ------------------ | --------- | --------------- | ---------------------------------- |
+| `particleCount`    | `number`  | `120`           | Number of particles                |
+| `particleColor`    | `string`  | `"#7eb8f7"`     | Particle fill color                |
+| `lineColor`        | `string`  | `"#7eb8f7"`     | Connection line color              |
+| `lineDistance`     | `number`  | `120`           | Max distance for lines             |
+| `particleSize`     | `number`  | `2.5`           | Max particle radius                |
+| `speed`            | `number`  | `0.8`           | Movement speed                     |
+| `connectParticles` | `boolean` | `true`          | Draw lines between close particles |
+| `interactive`      | `boolean` | `true`          | Repel on mouse move                |
+| `backgroundColor`  | `string`  | `"transparent"` | Background color                   |
 
 ---
 
@@ -104,28 +102,22 @@ import { ParticleField } from 'own-the-canvas';
 
 2D twinkle or 3D warp tunnel starfield.
 
-
 ```tsx
-import { Starfield } from 'own-the-canvas';
-
-<Starfield
-  starCount={200}
-  perspective="3D"
-  speed={2}
-  shootingStars
-/>
+import { Starfield } from "own-the-canvas";
+
+<Starfield starCount={200} perspective="3D" speed={2} shootingStars />;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `starCount` | `number` | `200` | Number of stars |
-| `starColor` | `string` | `"#ffffff"` | Star color |
-| `backgroundColor` | `string` | `"#000010"` | Background |
-| `speed` | `number` | `0.5` | Movement speed |
-| `twinkle` | `boolean` | `true` | Twinkle effect |
-| `shootingStars` | `boolean` | `true` | Shooting stars |
-| `shootingStarInterval` | `number` | `3000` | Ms between shooting stars |
-| `perspective` | `"2D" \| "3D"` | `"2D"` | Flat or warp tunnel |
+| Prop                   | Type           | Default     | Description               |
+| ---------------------- | -------------- | ----------- | ------------------------- |
+| `starCount`            | `number`       | `200`       | Number of stars           |
+| `starColor`            | `string`       | `"#ffffff"` | Star color                |
+| `backgroundColor`      | `string`       | `"#000010"` | Background                |
+| `speed`                | `number`       | `0.5`       | Movement speed            |
+| `twinkle`              | `boolean`      | `true`      | Twinkle effect            |
+| `shootingStars`        | `boolean`      | `true`      | Shooting stars            |
+| `shootingStarInterval` | `number`       | `3000`      | Ms between shooting stars |
+| `perspective`          | `"2D" \| "3D"` | `"2D"`      | Flat or warp tunnel       |
 
 ---
 
@@ -133,21 +125,20 @@ import { Starfield } from 'own-the-canvas';
 
 Pixel-level fire simulation with multiple palettes.
 
-
 ```tsx
-import { FireEffect } from 'own-the-canvas';
+import { FireEffect } from "own-the-canvas";
 
-<FireEffect palette="inferno" intensity={0.95} />
+<FireEffect palette="inferno" intensity={0.95} />;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `palette` | `"inferno" \| "toxic" \| "ice" \| "plasma"` | `"inferno"` | Color theme |
-| `intensity` | `number` | `0.95` | Flame intensity 0–1 |
-| `windStrength` | `number` | `0.3` | Horizontal wind 0–1 |
-| `windDirection` | `number` | `1` | 1 = right, -1 = left |
-| `spread` | `number` | `0.7` | Flame spread 0–1 |
-| `cooling` | `number` | `0.3` | Cooling rate 0–1 |
+| Prop            | Type                                        | Default     | Description          |
+| --------------- | ------------------------------------------- | ----------- | -------------------- |
+| `palette`       | `"inferno" \| "toxic" \| "ice" \| "plasma"` | `"inferno"` | Color theme          |
+| `intensity`     | `number`                                    | `0.95`      | Flame intensity 0–1  |
+| `windStrength`  | `number`                                    | `0.3`       | Horizontal wind 0–1  |
+| `windDirection` | `number`                                    | `1`         | 1 = right, -1 = left |
+| `spread`        | `number`                                    | `0.7`       | Flame spread 0–1     |
+| `cooling`       | `number`                                    | `0.3`       | Cooling rate 0–1     |
 
 ---
 
@@ -155,31 +146,25 @@ import { FireEffect } from 'own-the-canvas';
 
 Web Audio API visualizer with 4 modes.
 
-
 ```tsx
-import { AudioVisualizer } from 'own-the-canvas';
+import { AudioVisualizer } from "own-the-canvas";
 
 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 
-<AudioVisualizer
-  audioSource={stream}
-  mode="bars"
-  barCount={64}
-  gradient
-/>
+<AudioVisualizer audioSource={stream} mode="bars" barCount={64} gradient />;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `audioSource` | `MediaStream \| null` | `null` | Audio stream (shows idle anim when null) |
-| `barCount` | `number` | `64` | Number of frequency bars |
-| `barColor` | `string` | `"#00cfff"` | Bar fill color |
-| `waveColor` | `string` | `"#00cfff"` | Wave stroke color |
-| `mode` | `"bars" \| "wave" \| "circular" \| "mirror"` | `"bars"` | Visualization mode |
-| `sensitivity` | `number` | `1` | Amplitude multiplier |
-| `gapBetweenBars` | `number` | `2` | Gap between bars (px) |
-| `rounded` | `boolean` | `true` | Rounded bar caps |
-| `gradient` | `boolean` | `true` | Color gradient on bars |
+| Prop             | Type                                         | Default     | Description                              |
+| ---------------- | -------------------------------------------- | ----------- | ---------------------------------------- |
+| `audioSource`    | `MediaStream \| null`                        | `null`      | Audio stream (shows idle anim when null) |
+| `barCount`       | `number`                                     | `64`        | Number of frequency bars                 |
+| `barColor`       | `string`                                     | `"#00cfff"` | Bar fill color                           |
+| `waveColor`      | `string`                                     | `"#00cfff"` | Wave stroke color                        |
+| `mode`           | `"bars" \| "wave" \| "circular" \| "mirror"` | `"bars"`    | Visualization mode                       |
+| `sensitivity`    | `number`                                     | `1`         | Amplitude multiplier                     |
+| `gapBetweenBars` | `number`                                     | `2`         | Gap between bars (px)                    |
+| `rounded`        | `boolean`                                    | `true`      | Rounded bar caps                         |
+| `gradient`       | `boolean`                                    | `true`      | Color gradient on bars                   |
 
 ---
 
@@ -187,7 +172,6 @@ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 
 Burst or continuous confetti cannon.
 
-
 ```tsx
 import { Confetti } from 'own-the-canvas';
 const [fire, setFire] = useState(false);
@@ -198,17 +182,17 @@ const [fire, setFire] = useState(false);
 </button>
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `boolean` | `false` | Rising edge fires a burst |
-| `particleCount` | `number` | `150` | Pieces per burst |
-| `spread` | `number` | `0.8` | Spread angle 0–1 |
-| `gravity` | `number` | `0.5` | Gravity strength |
-| `colors` | `string[]` | multi-color | Confetti colors |
-| `shapes` | `ConfettiShape[]` | all shapes | Shapes to include |
-| `duration` | `number` | `4000` | Piece lifetime (ms) |
-| `continuous` | `boolean` | `false` | Trickle while trigger is true |
-| `wind` | `number` | `0.5` | Horizontal wind |
+| Prop            | Type              | Default     | Description                   |
+| --------------- | ----------------- | ----------- | ----------------------------- |
+| `trigger`       | `boolean`         | `false`     | Rising edge fires a burst     |
+| `particleCount` | `number`          | `150`       | Pieces per burst              |
+| `spread`        | `number`          | `0.8`       | Spread angle 0–1              |
+| `gravity`       | `number`          | `0.5`       | Gravity strength              |
+| `colors`        | `string[]`        | multi-color | Confetti colors               |
+| `shapes`        | `ConfettiShape[]` | all shapes  | Shapes to include             |
+| `duration`      | `number`          | `4000`      | Piece lifetime (ms)           |
+| `continuous`    | `boolean`         | `false`     | Trickle while trigger is true |
+| `wind`          | `number`          | `0.5`       | Horizontal wind               |
 
 ---
 
@@ -216,23 +200,22 @@ const [fire, setFire] = useState(false);
 
 Expanding ring ripples on click or auto.
 
-
 ```tsx
-import { RippleEffect } from 'own-the-canvas';
+import { RippleEffect } from "own-the-canvas";
 
-<RippleEffect color="#00cfff" maxRadius={150} interactive />
+<RippleEffect color="#00cfff" maxRadius={150} interactive />;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `color` | `string` | `"#00cfff"` | Ring stroke color |
-| `maxRadius` | `number` | `150` | Max ring radius |
-| `speed` | `number` | `2` | Expansion speed |
-| `lineWidth` | `number` | `1.5` | Stroke width |
-| `decay` | `number` | `0.8` | Opacity decay rate |
-| `multiRipple` | `boolean` | `true` | Allow multiple simultaneous ripples |
-| `backgroundColor` | `string` | `"transparent"` | Canvas background |
-| `interactive` | `boolean` | `true` | Spawn ripple on click |
+| Prop              | Type      | Default         | Description                         |
+| ----------------- | --------- | --------------- | ----------------------------------- |
+| `color`           | `string`  | `"#00cfff"`     | Ring stroke color                   |
+| `maxRadius`       | `number`  | `150`           | Max ring radius                     |
+| `speed`           | `number`  | `2`             | Expansion speed                     |
+| `lineWidth`       | `number`  | `1.5`           | Stroke width                        |
+| `decay`           | `number`  | `0.8`           | Opacity decay rate                  |
+| `multiRipple`     | `boolean` | `true`          | Allow multiple simultaneous ripples |
+| `backgroundColor` | `string`  | `"transparent"` | Canvas background                   |
+| `interactive`     | `boolean` | `true`          | Spawn ripple on click               |
 
 ---
 
@@ -240,26 +223,25 @@ import { RippleEffect } from 'own-the-canvas';
 
 Animated Perlin noise–driven color gradient.
 
-
 ```tsx
-import { NoiseGradient } from 'own-the-canvas';
+import { NoiseGradient } from "own-the-canvas";
 
 <NoiseGradient
   colors={["#0d0221", "#2d1b69", "#11998e", "#38ef7d"]}
   speed={0.3}
   octaves={3}
   animated
-/>
+/>;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `colors` | `string[]` | deep space | 2–5 hex gradient stops |
-| `speed` | `number` | `0.3` | Animation speed |
-| `scale` | `number` | `1` | Noise zoom level |
-| `octaves` | `number` | `3` | Fractal detail 1–6 |
-| `animated` | `boolean` | `true` | Enable animation |
-| `blendMode` | `string` | `"source-over"` | Canvas composite mode |
+| Prop        | Type       | Default         | Description            |
+| ----------- | ---------- | --------------- | ---------------------- |
+| `colors`    | `string[]` | deep space      | 2–5 hex gradient stops |
+| `speed`     | `number`   | `0.3`           | Animation speed        |
+| `scale`     | `number`   | `1`             | Noise zoom level       |
+| `octaves`   | `number`   | `3`             | Fractal detail 1–6     |
+| `animated`  | `boolean`  | `true`          | Enable animation       |
+| `blendMode` | `string`   | `"source-over"` | Canvas composite mode  |
 
 ---
 
@@ -267,24 +249,23 @@ import { NoiseGradient } from 'own-the-canvas';
 
 Pixelated dissolve transition overlay for any React content.
 
-
 ```tsx
-import { PixelDissolve } from 'own-the-canvas';
+import { PixelDissolve } from "own-the-canvas";
 
 <PixelDissolve trigger={show} direction="out" pixelSize={8}>
   <YourComponent />
-</PixelDissolve>
+</PixelDissolve>;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Content to dissolve over |
-| `pixelSize` | `number` | `8` | Block size in px |
-| `speed` | `number` | `0.5` | Animation speed 0–2 |
-| `direction` | `"in" \| "out" \| "both"` | `"out"` | Dissolve direction |
-| `trigger` | `boolean` | `false` | Rising edge triggers animation |
-| `color` | `string` | `"#0a0a0a"` | Pixel fill color |
-| `onComplete` | `() => void` | — | Called when animation finishes |
+| Prop         | Type                      | Default     | Description                    |
+| ------------ | ------------------------- | ----------- | ------------------------------ |
+| `children`   | `ReactNode`               | —           | Content to dissolve over       |
+| `pixelSize`  | `number`                  | `8`         | Block size in px               |
+| `speed`      | `number`                  | `0.5`       | Animation speed 0–2            |
+| `direction`  | `"in" \| "out" \| "both"` | `"out"`     | Dissolve direction             |
+| `trigger`    | `boolean`                 | `false`     | Rising edge triggers animation |
+| `color`      | `string`                  | `"#0a0a0a"` | Pixel fill color               |
+| `onComplete` | `() => void`              | —           | Called when animation finishes |
 
 ---
 
@@ -292,29 +273,23 @@ import { PixelDissolve } from 'own-the-canvas';
 
 Draggable star constellation with animated connections.
 
-
 ```tsx
-import { ConstellationMap } from 'own-the-canvas';
+import { ConstellationMap } from "own-the-canvas";
 
-<ConstellationMap
-  starCount={80}
-  lineColor="#8888ff"
-  interactive
-  glowStars
-/>
+<ConstellationMap starCount={80} lineColor="#8888ff" interactive glowStars />;
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `starCount` | `number` | `80` | Number of stars |
-| `starColor` | `string` | `"#ffffff"` | Star color |
-| `lineColor` | `string` | `"#8888ff"` | Connection line color |
-| `backgroundColor` | `string` | `"#050510"` | Background |
-| `speed` | `number` | `0.3` | Star drift speed |
-| `interactive` | `boolean` | `true` | Drag stars with mouse |
-| `lineStyle` | `"solid" \| "dashed"` | `"solid"` | Line style |
-| `glowStars` | `boolean` | `true` | Glow on stars |
-| `connectionDistance` | `number` | `100` | Max distance for lines |
+| Prop                 | Type                  | Default     | Description            |
+| -------------------- | --------------------- | ----------- | ---------------------- |
+| `starCount`          | `number`              | `80`        | Number of stars        |
+| `starColor`          | `string`              | `"#ffffff"` | Star color             |
+| `lineColor`          | `string`              | `"#8888ff"` | Connection line color  |
+| `backgroundColor`    | `string`              | `"#050510"` | Background             |
+| `speed`              | `number`              | `0.3`       | Star drift speed       |
+| `interactive`        | `boolean`             | `true`      | Drag stars with mouse  |
+| `lineStyle`          | `"solid" \| "dashed"` | `"solid"`   | Line style             |
+| `glowStars`          | `boolean`             | `true`      | Glow on stars          |
+| `connectionDistance` | `number`              | `100`       | Max distance for lines |
 
 ---
 
@@ -322,12 +297,12 @@ import { ConstellationMap } from 'own-the-canvas';
 
 Every component accepts these:
 
-| Prop | Type | Default |
-|------|------|---------|
-| `width` | `number \| string` | `"100%"` |
-| `height` | `number \| string` | `"100%"` |
-| `className` | `string` | — |
-| `style` | `React.CSSProperties` | — |
+| Prop        | Type                  | Default  |
+| ----------- | --------------------- | -------- |
+| `width`     | `number \| string`    | `"100%"` |
+| `height`    | `number \| string`    | `"100%"` |
+| `className` | `string`              | —        |
+| `style`     | `React.CSSProperties` | —        |
 
 All components use `forwardRef` — the ref is forwarded to the underlying `<canvas>` element.
 
@@ -338,8 +313,8 @@ All components use `forwardRef` — the ref is forwarded to the underlying `<can
 Import only what you use:
 
 ```tsx
-import { MatrixRain } from 'own-the-canvas';      // ✓ only MatrixRain bundled
-import { ParticleField } from 'own-the-canvas';   // ✓ only ParticleField bundled
+import { MatrixRain } from "own-the-canvas"; // ✓ only MatrixRain bundled
+import { ParticleField } from "own-the-canvas"; // ✓ only ParticleField bundled
 ```
 
 ---

package/dist/components/AuroraBorealis/AuroraBorealis.d.ts

@@ -0,0 +1,27 @@
+import { BaseCanvasProps } from '../../types';
+
+type AuroraBorealisPreset = "default" | "arctic" | "solar" | "tropical" | "neon" | "midnight";
+export interface AuroraBorealisProps extends BaseCanvasProps {
+    /** Aurora band colors (default: monochrome whites/grays) */
+    colors?: string[];
+    /** Animation speed multiplier (default: 1) */
+    speed?: number;
+    /** Band brightness/opacity 0–1 (default: 0.8) */
+    intensity?: number;
+    /** Number of aurora layers (default: 5) */
+    layers?: number;
+    /** Sky background color (default: "#111111") */
+    backgroundColor?: string;
+    /** Wave height as fraction of canvas height (default: 0.15) */
+    waveAmplitude?: number;
+    /** Wave oscillations across canvas width (default: 2) */
+    waveFrequency?: number;
+    /** Background star count (default: 80) */
+    starCount?: number;
+    /** Enable animation (default: true) */
+    animated?: boolean;
+    /** Named preset */
+    preset?: AuroraBorealisPreset | string;
+}
+export declare const AuroraBorealis: import('react').ForwardRefExoticComponent<AuroraBorealisProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/dist/components/AuroraBorealis/index.d.ts

@@ -0,0 +1,2 @@
+export { AuroraBorealis } from './AuroraBorealis';
+export type { AuroraBorealisProps } from './AuroraBorealis';

package/dist/components/AuroraBorealis/useAuroraBorealis.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+
+export interface UseAuroraBorealisOptions {
+    colors: string[];
+    speed: number;
+    intensity: number;
+    layers: number;
+    backgroundColor: string;
+    waveAmplitude: number;
+    waveFrequency: number;
+    starCount: number;
+    animated: boolean;
+}
+export declare function useAuroraBorealis(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseAuroraBorealisOptions): void;

package/dist/components/ReactionDiffusion/ReactionDiffusion.d.ts

@@ -0,0 +1,29 @@
+import { BaseCanvasProps } from '../../types';
+
+type ReactionDiffusionPreset = "default" | "coral" | "spots" | "maze" | "waves" | "neon";
+export interface ReactionDiffusionProps extends BaseCanvasProps {
+    /** Feed rate f — controls pattern type (default: 0.055) */
+    feedRate?: number;
+    /** Kill rate k — controls pattern density (default: 0.062) */
+    killRate?: number;
+    /** Diffusion rate for U chemical — keep dU/dV ratio at 2 (default: 0.2) */
+    diffusionU?: number;
+    /** Diffusion rate for V chemical — keep dU/dV ratio at 2 (default: 0.1) */
+    diffusionV?: number;
+    /** Render resolution fraction — lower = faster (default: 0.5) */
+    resolution?: number;
+    /** Simulation steps per frame (default: 8) */
+    speed?: number;
+    /** Color at low V concentration (default: "#111111") */
+    colorA?: string;
+    /** Color at high V concentration (default: "#ffffff") */
+    colorB?: string;
+    /** Canvas background color (default: "#111111") */
+    backgroundColor?: string;
+    /** Mouse disturbs the field (default: true) */
+    interactive?: boolean;
+    /** Named preset */
+    preset?: ReactionDiffusionPreset | string;
+}
+export declare const ReactionDiffusion: import('react').ForwardRefExoticComponent<ReactionDiffusionProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/dist/components/ReactionDiffusion/index.d.ts

@@ -0,0 +1,2 @@
+export { ReactionDiffusion } from './ReactionDiffusion';
+export type { ReactionDiffusionProps } from './ReactionDiffusion';

package/dist/components/ReactionDiffusion/useReactionDiffusion.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+
+export interface UseReactionDiffusionOptions {
+    feedRate: number;
+    killRate: number;
+    diffusionU: number;
+    diffusionV: number;
+    resolution: number;
+    speed: number;
+    colorA: string;
+    colorB: string;
+    backgroundColor: string;
+    interactive: boolean;
+}
+export declare function useReactionDiffusion(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseReactionDiffusionOptions): void;

package/dist/components/SandSimulation/SandSimulation.d.ts

@@ -0,0 +1,30 @@
+import { BaseCanvasProps } from '../../types';
+import { SandMaterial } from './useSandSimulation';
+
+type SandSimulationPreset = "default" | "desert" | "ocean" | "inferno" | "neon";
+export interface SandSimulationProps extends BaseCanvasProps {
+    /** Cell size in pixels (default: 4) */
+    cellSize?: number;
+    /** Paint brush radius in cells (default: 3) */
+    brushSize?: number;
+    /** Active material to paint (default: "sand") */
+    material?: SandMaterial;
+    /** Sand cell color (default: "#ffffff") */
+    sandColor?: string;
+    /** Water cell color (default: "#6b7280") */
+    waterColor?: string;
+    /** Fire cell color (default: "#ffffff") */
+    fireColor?: string;
+    /** Wall cell color (default: "#4b5563") */
+    wallColor?: string;
+    /** Empty cell / background color (default: "#111111") */
+    backgroundColor?: string;
+    /** Enable mouse painting (default: true) */
+    interactive?: boolean;
+    /** Gravity strength multiplier (default: 1) */
+    gravity?: number;
+    /** Named preset */
+    preset?: SandSimulationPreset | string;
+}
+export declare const SandSimulation: import('react').ForwardRefExoticComponent<SandSimulationProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/dist/components/SandSimulation/index.d.ts

@@ -0,0 +1,3 @@
+export { SandSimulation } from './SandSimulation';
+export type { SandSimulationProps } from './SandSimulation';
+export type { SandMaterial } from './useSandSimulation';

package/dist/components/SandSimulation/useSandSimulation.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+
+export type SandMaterial = "sand" | "water" | "fire" | "wall" | "erase";
+export interface UseSandSimulationOptions {
+    cellSize: number;
+    brushSize: number;
+    material: SandMaterial;
+    sandColor: string;
+    waterColor: string;
+    fireColor: string;
+    wallColor: string;
+    backgroundColor: string;
+    interactive: boolean;
+    gravity: number;
+}
+export declare function useSandSimulation(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseSandSimulationOptions): void;

package/dist/components/Spirograph/Spirograph.d.ts

@@ -0,0 +1,29 @@
+import { BaseCanvasProps } from '../../types';
+
+type SpirographPreset = "default" | "neon" | "minimal" | "cosmic" | "pastel";
+export interface SpirographProps extends BaseCanvasProps {
+    /** Outer circle R as fraction of min(w,h)/2 (default: 0.85) */
+    outerRadius?: number;
+    /** Inner circle r as fraction of outerRadius (default: 0.4) */
+    innerRadius?: number;
+    /** Pen arm d as fraction of innerRadius (default: 0.9) */
+    penDistance?: number;
+    /** Degrees drawn per frame (default: 2) */
+    speed?: number;
+    /** Curve stroke color (default: "#ffffff") */
+    color?: string;
+    /** Background fill color (default: "#111111") */
+    backgroundColor?: string;
+    /** Stroke line width (default: 1) */
+    lineWidth?: number;
+    /** Background fade opacity per frame — lower = longer trails (default: 0.003) */
+    trailFade?: number;
+    /** Enable animation (default: true) */
+    animated?: boolean;
+    /** Start new pattern after each full cycle (default: true) */
+    autoReset?: boolean;
+    /** Named preset */
+    preset?: SpirographPreset | string;
+}
+export declare const Spirograph: import('react').ForwardRefExoticComponent<SpirographProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/dist/components/Spirograph/index.d.ts

@@ -0,0 +1,2 @@
+export { Spirograph } from './Spirograph';
+export type { SpirographProps } from './Spirograph';