own-the-canvas 1.0.5 → 1.0.7

package/README.md

@@ -4,7 +4,7 @@
 
 # own-the-canvas
 
-**52 canvas-based React visual components. Zero dependencies. TypeScript.**
+**50+ canvas-based React visual components. Zero dependencies. TypeScript.**
 
 [![npm version](https://img.shields.io/npm/v/own-the-canvas?style=flat-square&color=555555)](https://www.npmjs.com/package/own-the-canvas)
 [![license](https://img.shields.io/npm/l/own-the-canvas?style=flat-square&color=555555)](LICENSE)
@@ -190,6 +190,7 @@ import { GlitchOverlay } from "own-the-canvas";
 | --- | --- | --- | --- |
 | `intensity` | `number` | `0.6` | Glitch probability 0–1 |
 | `rgbShift` | `number` | `8` | RGB color shift in px |
+| `rgbShiftColor` | `string` | `"#ff0000"` | RGB split primary color — complement used for opposing channel |
 | `scanlines` | `boolean` | `true` | CRT scanline overlay |
 | `blockGlitch` | `boolean` | `true` | Block-slice glitch artifacts |
 | `flickerRate` | `number` | `0.02` | Screen flicker rate 0–1 |
@@ -255,6 +256,7 @@ import { FireEffect } from "own-the-canvas";
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `palette` | `"smoke" \| "inferno" \| "toxic" \| "ice" \| "plasma"` | `"smoke"` | Color theme |
+| `customColors` | `string[]` | `undefined` | Custom gradient — overrides palette when ≥2 colors |
 | `intensity` | `number` | `0.95` | Flame intensity 0–1 |
 | `windStrength` | `number` | `0.3` | Horizontal wind -1 to 1 |
 | `cooling` | `number` | `0.3` | Cooling rate — higher = shorter flames |

package/lib/components/BlackHole/BlackHole.d.ts

@@ -0,0 +1,31 @@
+import { BaseCanvasProps } from '../../types';
+
+type BlackHolePreset = "default" | "cosmic" | "inferno" | "neon" | "void";
+export interface BlackHoleProps extends BaseCanvasProps {
+    /** Accretion disk particle color (default: "#ffffff") */
+    diskColor?: string;
+    /** Canvas background (default: "#111111") */
+    backgroundColor?: string;
+    /** Number of disk particles (default: 300) */
+    particleCount?: number;
+    /** Gravitational pull strength (default: 200) */
+    gravity?: number;
+    /** Event horizon radius in px (default: 30) */
+    eventHorizonRadius?: number;
+    /** Accretion disk radial extent in px (default: 120) */
+    diskWidth?: number;
+    /** Polar jet stream color (default: "#6b7280") */
+    jetColor?: string;
+    /** Show polar particle jets (default: true) */
+    showJets?: boolean;
+    /** Background grid lensing distortion (default: true) */
+    lensing?: boolean;
+    /** Animation speed multiplier (default: 1) */
+    speed?: number;
+    /** Cursor shifts the singularity position (default: true) */
+    interactive?: boolean;
+    /** Named preset */
+    preset?: BlackHolePreset | string;
+}
+export declare const BlackHole: import('react').ForwardRefExoticComponent<BlackHoleProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/BlackHole/index.d.ts

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

package/lib/components/BlackHole/useBlackHole.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+
+export interface UseBlackHoleOptions {
+    diskColor: string;
+    backgroundColor: string;
+    particleCount: number;
+    gravity: number;
+    eventHorizonRadius: number;
+    diskWidth: number;
+    jetColor: string;
+    showJets: boolean;
+    lensing: boolean;
+    speed: number;
+    interactive: boolean;
+}
+export declare function useBlackHole(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseBlackHoleOptions): void;

package/lib/components/BubbleUniverse/BubbleUniverse.d.ts

@@ -0,0 +1,31 @@
+import { BaseCanvasProps } from '../../types';
+
+type BubbleUniversePreset = "default" | "soap" | "neon" | "deep" | "minimal";
+export interface BubbleUniverseProps extends BaseCanvasProps {
+    /** Number of simultaneous bubbles (default: 15) */
+    bubbleCount?: number;
+    /** Minimum bubble radius in px (default: 20) */
+    minRadius?: number;
+    /** Maximum bubble radius in px (default: 50) */
+    maxRadius?: number;
+    /** Canvas background (default: "#111111") */
+    backgroundColor?: string;
+    /** Specular highlight color (default: "#ffffff") */
+    shimmerColor?: string;
+    /** Click to pop bubbles with particle burst (default: true) */
+    popEffect?: boolean;
+    /** Downward gravity force (default: 0.02) */
+    gravity?: number;
+    /** Velocity friction per frame (default: 0.995) */
+    friction?: number;
+    /** Hover pushes bubbles; click to pop (default: true) */
+    interactive?: boolean;
+    /** Bubbles merge when overlapping significantly (default: true) */
+    mergeOnCollide?: boolean;
+    /** Iridescent glow on bubbles (default: true) */
+    glowEffect?: boolean;
+    /** Named preset */
+    preset?: BubbleUniversePreset | string;
+}
+export declare const BubbleUniverse: import('react').ForwardRefExoticComponent<BubbleUniverseProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/BubbleUniverse/index.d.ts

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

package/lib/components/BubbleUniverse/useBubbleUniverse.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+
+export interface UseBubbleUniverseOptions {
+    bubbleCount: number;
+    minRadius: number;
+    maxRadius: number;
+    backgroundColor: string;
+    shimmerColor: string;
+    popEffect: boolean;
+    gravity: number;
+    friction: number;
+    interactive: boolean;
+    mergeOnCollide: boolean;
+    glowEffect: boolean;
+}
+export declare function useBubbleUniverse(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseBubbleUniverseOptions): void;

package/lib/components/DragonCursor/DragonCursor.d.ts

@@ -0,0 +1,29 @@
+import { BaseCanvasProps } from '../../types';
+
+type DragonCursorPreset = "default" | "emerald" | "inferno" | "void" | "ice";
+export interface DragonCursorProps extends BaseCanvasProps {
+    /** Body joint count (default: 20) */
+    segmentCount?: number;
+    /** Head radius in px (default: 18) */
+    segmentSize?: number;
+    /** Dragon body color (default: "#ffffff") */
+    bodyColor?: string;
+    /** Eye pupil color (default: "#111111") */
+    eyeColor?: string;
+    /** Fire breath color (default: "#ffffff") */
+    fireColor?: string;
+    /** Canvas background (default: "transparent") */
+    backgroundColor?: string;
+    /** Cursor follow lerp speed 0–1 (default: 0.15) */
+    followSpeed?: number;
+    /** Wing length in px (default: 60) */
+    wingSpan?: number;
+    /** Show fire breath particles (default: true) */
+    showFire?: boolean;
+    /** Dragon follows cursor (default: true) */
+    interactive?: boolean;
+    /** Named preset */
+    preset?: DragonCursorPreset | string;
+}
+export declare const DragonCursor: import('react').ForwardRefExoticComponent<DragonCursorProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/DragonCursor/index.d.ts

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

package/lib/components/DragonCursor/useDragonCursor.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+
+export interface UseDragonCursorOptions {
+    segmentCount: number;
+    segmentSize: number;
+    bodyColor: string;
+    eyeColor: string;
+    fireColor: string;
+    backgroundColor: string;
+    followSpeed: number;
+    wingSpan: number;
+    showFire: boolean;
+    interactive: boolean;
+}
+export declare function useDragonCursor(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseDragonCursorOptions): void;

package/{dist → lib}/components/FireEffect/FireEffect.d.ts

@@ -5,6 +5,8 @@ type FirePreset = "default" | "inferno" | "toxic" | "ice" | "plasma";
 export interface FireEffectProps extends BaseCanvasProps {
     /** Color theme (default: "smoke") */
     palette?: FirePalette;
+    /** Custom gradient colors — overrides palette when ≥2 colors provided (default: undefined) */
+    customColors?: string[];
     /** Flame intensity 0–1 (default: 0.95) */
     intensity?: number;
     /** Wind horizontal strength -1 to 1 (default: 0.3) */

package/{dist → lib}/components/FireEffect/useFireEffect.d.ts

@@ -3,6 +3,7 @@ import { RefObject } from 'react';
 export type FirePalette = "inferno" | "toxic" | "ice" | "plasma" | "smoke";
 export interface UseFireEffectOptions {
     palette: FirePalette;
+    customColors?: string[];
     intensity: number;
     windStrength: number;
     windDirection: number;

package/{dist → lib}/components/FlowField/FlowField.d.ts

@@ -1,6 +1,15 @@
 import { BaseCanvasProps } from '../../types';
 
 type FlowFieldPreset = "default" | "neon" | "ocean" | "lava" | "forest" | "monochrome";
+interface FlowFieldPresetValues {
+    particleCount?: number;
+    colors?: string[];
+    backgroundColor?: string;
+    noiseScale?: number;
+    speed?: number;
+    curl?: boolean;
+}
+export declare const PRESETS: Record<FlowFieldPreset, FlowFieldPresetValues>;
 export interface FlowFieldProps extends BaseCanvasProps {
     /** Number of flow particles (default: 800) */
     particleCount?: number;

package/{dist → lib}/components/FlowField/index.d.ts

@@ -1,2 +1,2 @@
-export { FlowField } from './FlowField';
+export { FlowField, PRESETS } from './FlowField';
 export type { FlowFieldProps } from './FlowField';

package/{dist → lib}/components/FluidSimulation/FluidSimulation.d.ts

@@ -1,6 +1,21 @@
 import { BaseCanvasProps } from '../../types';
 
 type FluidPreset = "default" | "ink" | "neon" | "lava" | "ocean" | "smoke";
+interface FluidPresetValues {
+    resolution?: number;
+    viscosity?: number;
+    diffusion?: number;
+    dissipation?: number;
+    inkColors?: string[];
+    glowEffect?: boolean;
+    glowBlur?: number;
+    backgroundColor?: string;
+    autoInk?: boolean;
+    autoInkInterval?: number;
+    mouseForce?: number;
+    inkRadius?: number;
+}
+export declare const PRESETS: Record<FluidPreset, FluidPresetValues>;
 export interface FluidSimulationProps extends BaseCanvasProps {
     /** Grid resolution (32–128) — lower is faster (default: 80) */
     resolution?: number;

package/{dist → lib}/components/FluidSimulation/index.d.ts

@@ -1,2 +1,2 @@
-export { FluidSimulation } from './FluidSimulation';
+export { FluidSimulation, PRESETS } from './FluidSimulation';
 export type { FluidSimulationProps } from './FluidSimulation';

package/lib/components/GalaxySpiral/GalaxySpiral.d.ts

@@ -0,0 +1,31 @@
+import { BaseCanvasProps } from '../../types';
+
+type GalaxySpiralPreset = "default" | "andromeda" | "neon" | "void" | "golden";
+export interface GalaxySpiralProps extends BaseCanvasProps {
+    /** Total star particle count (default: 3000) */
+    starCount?: number;
+    /** Number of spiral arms (default: 2) */
+    armCount?: number;
+    /** Arm winding tightness (default: 0.5) */
+    armTightness?: number;
+    /** Galactic core color (default: "#ffffff") */
+    coreColor?: string;
+    /** Outer disk star color (default: "#6b7280") */
+    diskColor?: string;
+    /** Canvas background (default: "#111111") */
+    backgroundColor?: string;
+    /** Rotation speed in radians/frame (default: 0.0003) */
+    rotationSpeed?: number;
+    /** Initial viewing tilt in radians (default: 0.3) */
+    tiltX?: number;
+    /** Cursor tilts viewing angle (default: true) */
+    interactive?: boolean;
+    /** Core radial glow overlay (default: true) */
+    coreGlow?: boolean;
+    /** Core glow shadow blur (default: 30) */
+    glowBlur?: number;
+    /** Named preset */
+    preset?: GalaxySpiralPreset | string;
+}
+export declare const GalaxySpiral: import('react').ForwardRefExoticComponent<GalaxySpiralProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/GalaxySpiral/index.d.ts

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

package/lib/components/GalaxySpiral/useGalaxySpiral.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+
+export interface UseGalaxySpiralOptions {
+    starCount: number;
+    armCount: number;
+    armTightness: number;
+    coreColor: string;
+    diskColor: string;
+    backgroundColor: string;
+    rotationSpeed: number;
+    tiltX: number;
+    interactive: boolean;
+    coreGlow: boolean;
+    glowBlur: number;
+}
+export declare function useGalaxySpiral(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseGalaxySpiralOptions): void;

package/{dist → lib}/components/GlitchOverlay/GlitchOverlay.d.ts

@@ -22,8 +22,10 @@ export interface GlitchOverlayProps extends BaseCanvasProps {
     noiseOpacity?: number;
     /** Screen flicker rate 0–1 (default: 0.02) */
     flickerRate?: number;
-    /** Glitch bar color (default: "#7C3AED") */
+    /** Glitch bar color (default: "#ffffff") */
     color?: string;
+    /** RGB channel split color — complement is used for the opposing channel (default: "#ff0000") */
+    rgbShiftColor?: string;
     /** Enable animation (default: true) */
     animated?: boolean;
     /** Canvas background (default: "transparent") */

package/{dist → lib}/components/GlitchOverlay/useGlitchOverlay.d.ts

@@ -12,6 +12,7 @@ export interface UseGlitchOverlayOptions {
     noiseOpacity: number;
     flickerRate: number;
     color: string;
+    rgbShiftColor: string;
     animated: boolean;
     backgroundColor: string;
 }

package/lib/components/KoiPond/KoiPond.d.ts

@@ -0,0 +1,29 @@
+import { BaseCanvasProps } from '../../types';
+
+type KoiPondPreset = "default" | "koi" | "night" | "lotus" | "neon";
+export interface KoiPondProps extends BaseCanvasProps {
+    /** Number of koi fish (default: 6) */
+    fishCount?: number;
+    /** Primary fish body color (default: "#ffffff") */
+    fishColor?: string;
+    /** Scale accent color (default: "#6b7280") */
+    scaleColor?: string;
+    /** Water background color (default: "#111111") */
+    waterColor?: string;
+    /** Ripple ring color (default: "#6b7280") */
+    rippleColor?: string;
+    /** Lily pad color (default: "#ffffff") */
+    lilyColor?: string;
+    /** Fish movement speed multiplier (default: 1) */
+    speed?: number;
+    /** Cursor causes ripples (default: true) */
+    interactive?: boolean;
+    /** Show lily pads (default: true) */
+    showLilies?: boolean;
+    /** Animated caustic light patterns (default: true) */
+    caustics?: boolean;
+    /** Named preset */
+    preset?: KoiPondPreset | string;
+}
+export declare const KoiPond: import('react').ForwardRefExoticComponent<KoiPondProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/KoiPond/index.d.ts

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

package/lib/components/KoiPond/useKoiPond.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+
+export interface UseKoiPondOptions {
+    fishCount: number;
+    fishColor: string;
+    scaleColor: string;
+    waterColor: string;
+    rippleColor: string;
+    lilyColor: string;
+    speed: number;
+    interactive: boolean;
+    showLilies: boolean;
+    caustics: boolean;
+}
+export declare function useKoiPond(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseKoiPondOptions): void;

package/{dist → lib}/components/MagneticBlob/MagneticBlob.d.ts

@@ -1,6 +1,22 @@
 import { BaseCanvasProps } from '../../types';
 
 type MagneticBlobPreset = "default" | "neon" | "plasma" | "ocean" | "lava" | "minimal";
+interface MagneticBlobPresetValues {
+    count?: number;
+    colors?: string[];
+    radius?: number;
+    speed?: number;
+    magnetStrength?: number;
+    magnetRadius?: number;
+    threshold?: number;
+    glowEffect?: boolean;
+    glowBlur?: number;
+    backgroundColor?: string;
+    animated?: boolean;
+    followMouse?: boolean;
+    wanderStrength?: number;
+}
+export declare const PRESETS: Record<MagneticBlobPreset, MagneticBlobPresetValues>;
 export interface MagneticBlobProps extends BaseCanvasProps {
     /** Number of blobs (default: 5) */
     count?: number;

package/{dist → lib}/components/MagneticBlob/index.d.ts

@@ -1,2 +1,2 @@
-export { MagneticBlob } from './MagneticBlob';
+export { MagneticBlob, PRESETS } from './MagneticBlob';
 export type { MagneticBlobProps } from './MagneticBlob';

package/{dist → lib}/components/ParticleField/ParticleField.d.ts

@@ -1,12 +1,13 @@
 import { BaseCanvasProps } from '../../types';
 
-type ParticlePreset = "default" | "galaxy" | "snow" | "minimal" | "ocean";
+export type ParticleLineStyle = "solid" | "dashed";
+type ParticlePreset = "default" | "galaxy" | "snow" | "minimal" | "ocean" | "cosmos" | "aurora" | "gold";
 export interface ParticleFieldProps extends BaseCanvasProps {
     /** Number of particles (default: 120) */
     particleCount?: number;
-    /** Particle fill color (default: "#7eb8f7") */
+    /** Particle fill color (default: "#ffffff") */
     particleColor?: string;
-    /** Connection line color (default: "#7eb8f7") */
+    /** Connection line color (default: "#6b7280") */
     lineColor?: string;
     /** Max distance for drawing lines (default: 120) */
     lineDistance?: number;
@@ -32,7 +33,27 @@ export interface ParticleFieldProps extends BaseCanvasProps {
     lineWidth?: number;
     /** Connection line max opacity (default: 0.6) */
     lineOpacity?: number;
-    /** Named preset: "default" | "galaxy" | "snow" | "minimal" | "ocean" */
+    /** Wrap particles around edges instead of bouncing (default: false) */
+    wrapEdges?: boolean;
+    /** Enable twinkling opacity animation (default: false) */
+    twinkle?: boolean;
+    /** Twinkling animation speed (default: 0.03) */
+    twinkleSpeed?: number;
+    /** Twinkling opacity amplitude 0–1 (default: 0.4) */
+    twinkleAmplitude?: number;
+    /** Enable glow shadow on particles (default: false) */
+    glowParticles?: boolean;
+    /** Glow shadow blur in px (default: 15) */
+    glowBlur?: number;
+    /** Connection line stroke style (default: "solid") */
+    lineStyle?: ParticleLineStyle;
+    /** Enable drag-to-reposition individual particles (default: false) */
+    dragParticles?: boolean;
+    /** Drag detection radius in px (default: 20) */
+    dragRadius?: number;
+    /** Initial velocity multiplier — scales vx/vy at spawn (default: 2) */
+    velocityMultiplier?: number;
+    /** Named preset: "default" | "galaxy" | "snow" | "minimal" | "ocean" | "cosmos" | "aurora" | "gold" */
     preset?: ParticlePreset | string;
 }
 export declare const ParticleField: import('react').ForwardRefExoticComponent<ParticleFieldProps & import('react').RefAttributes<HTMLCanvasElement>>;

package/lib/components/ParticleField/index.d.ts

@@ -0,0 +1,2 @@
+export { ParticleField } from './ParticleField';
+export type { ParticleFieldProps, ParticleLineStyle } from './ParticleField';

package/{dist → lib}/components/ParticleField/useParticleField.d.ts

@@ -16,5 +16,15 @@ export interface UseParticleFieldOptions {
     maxVelocityMultiplier: number;
     lineWidth: number;
     lineOpacity: number;
+    wrapEdges: boolean;
+    twinkle: boolean;
+    twinkleSpeed: number;
+    twinkleAmplitude: number;
+    glowParticles: boolean;
+    glowBlur: number;
+    lineStyle: "solid" | "dashed";
+    dragParticles: boolean;
+    dragRadius: number;
+    velocityMultiplier: number;
 }
 export declare function useParticleField(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseParticleFieldOptions): void;

package/lib/components/SakuraBlossom/SakuraBlossom.d.ts

@@ -0,0 +1,27 @@
+import { BaseCanvasProps } from '../../types';
+
+type SakuraBlossomPreset = "default" | "sakura" | "autumn" | "snow" | "neon";
+export interface SakuraBlossomProps extends BaseCanvasProps {
+    /** Number of petals (default: 80) */
+    petalCount?: number;
+    /** Petal color (default: "#ffffff") */
+    petalColor?: string;
+    /** Petal size in px (default: 8) */
+    petalSize?: number;
+    /** Canvas background (default: "#111111") */
+    backgroundColor?: string;
+    /** Downward gravity force (default: 0.06) */
+    gravity?: number;
+    /** Base horizontal wind strength (default: 0.8) */
+    windStrength?: number;
+    /** Random wind gusts (default: true) */
+    windGusts?: boolean;
+    /** Petals accumulate at bottom (default: true) */
+    showAccumulation?: boolean;
+    /** Max accumulation height in px (default: 40) */
+    maxAccumulation?: number;
+    /** Named preset */
+    preset?: SakuraBlossomPreset | string;
+}
+export declare const SakuraBlossom: import('react').ForwardRefExoticComponent<SakuraBlossomProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/SakuraBlossom/index.d.ts

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

package/lib/components/SakuraBlossom/useSakuraBlossom.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+
+export interface UseSakuraBlossomOptions {
+    petalCount: number;
+    petalColor: string;
+    backgroundColor: string;
+    gravity: number;
+    windStrength: number;
+    windGusts: boolean;
+    showAccumulation: boolean;
+    maxAccumulation: number;
+    petalSize: number;
+}
+export declare function useSakuraBlossom(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseSakuraBlossomOptions): void;

package/lib/components/SolarFlare/SolarFlare.d.ts

@@ -0,0 +1,35 @@
+import { BaseCanvasProps } from '../../types';
+
+type SolarFlarePreset = "default" | "inferno" | "plasma" | "neon" | "white-dwarf";
+export interface SolarFlareProps extends BaseCanvasProps {
+    /** Photosphere color (default: "#ffffff") */
+    sunColor?: string;
+    /** Corona glow color (default: "#6b7280") */
+    coronaColor?: string;
+    /** Eruption/flare color (default: "#ffffff") */
+    flareColor?: string;
+    /** Canvas background (default: "#111111") */
+    backgroundColor?: string;
+    /** Sun radius as fraction of min(w,h)/2 (default: 0.35) */
+    sunRadius?: number;
+    /** Number of convection cells on surface (default: 20) */
+    convectionCells?: number;
+    /** Simultaneous active flares (default: 3) */
+    flareCount?: number;
+    /** Auto-spawn flares (default: true) */
+    autoFlare?: boolean;
+    /** Interval between auto-flares in ms (default: 3000) */
+    autoFlareInterval?: number;
+    /** Click to trigger flare at cursor angle (default: true) */
+    interactive?: boolean;
+    /** Iridescent glow (default: true) */
+    glowEffect?: boolean;
+    /** Glow blur radius in px (default: 40) */
+    glowBlur?: number;
+    /** Animation speed multiplier (default: 1) */
+    speed?: number;
+    /** Named preset */
+    preset?: SolarFlarePreset | string;
+}
+export declare const SolarFlare: import('react').ForwardRefExoticComponent<SolarFlareProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/lib/components/SolarFlare/index.d.ts

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

package/lib/components/SolarFlare/useSolarFlare.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+
+export interface UseSolarFlareOptions {
+    sunColor: string;
+    coronaColor: string;
+    flareColor: string;
+    backgroundColor: string;
+    sunRadius: number;
+    convectionCells: number;
+    flareCount: number;
+    autoFlare: boolean;
+    autoFlareInterval: number;
+    interactive: boolean;
+    glowEffect: boolean;
+    glowBlur: number;
+    speed: number;
+}
+export declare function useSolarFlare(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseSolarFlareOptions): void;

package/{dist → lib}/components/Spirograph/Spirograph.d.ts

@@ -1,5 +1,4 @@
 import { BaseCanvasProps } from '../../types';
-import { SpirographColorMode } from './useSpirograph';
 
 type SpirographPreset = "default" | "neon" | "prismatic" | "mandala" | "cosmic" | "minimal";
 export interface SpirographProps extends BaseCanvasProps {
@@ -11,10 +10,8 @@ export interface SpirographProps extends BaseCanvasProps {
     penDistance?: number;
     /** Degrees drawn per frame (default: 2) */
     speed?: number;
-    /** Primary curve color (default: "#ffffff") */
-    color?: string;
-    /** Secondary color for gradient colorMode (default: "#6b7280") */
-    color2?: string;
+    /** Stroke colors — each layer picks cyclically (default: ["#ffffff"]) */
+    colors?: string[];
     /** Background fill color (default: "#111111") */
     backgroundColor?: string;
     /** Stroke line width (default: 1) */
@@ -27,8 +24,6 @@ export interface SpirographProps extends BaseCanvasProps {
     autoReset?: boolean;
     /** Number of overlapping curve layers with slight radius offsets (default: 1) */
     layerCount?: number;
-    /** Color mode: "solid" | "cycle" | "gradient" (default: "solid") */
-    colorMode?: SpirographColorMode;
     /** Rotational symmetry — draw N copies around center (default: 1) */
     symmetry?: number;
     /** Enable glow/shadow effect (default: false) */

package/{dist → lib}/components/Spirograph/index.d.ts

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

package/{dist → lib}/components/Spirograph/useSpirograph.d.ts

@@ -1,20 +1,17 @@
 import { RefObject } from 'react';
 
-export type SpirographColorMode = "solid" | "cycle" | "gradient";
 export interface UseSpirographOptions {
     outerRadius: number;
     innerRadius: number;
     penDistance: number;
     speed: number;
-    color: string;
-    color2: string;
+    colors: string[];
     backgroundColor: string;
     lineWidth: number;
     trailFade: number;
     animated: boolean;
     autoReset: boolean;
     layerCount: number;
-    colorMode: SpirographColorMode;
     symmetry: number;
     glowEffect: boolean;
     glowBlur: number;