own-the-canvas 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.0] - 2026-05-17
+
+### Added
+
+Initial release with 26 canvas-based React components:
+
+- AudioVisualizer, Boids, ClothSimulation, Confetti, ConstellationMap
+- FireEffect, Fireworks, FlowField, FluidSimulation, GameOfLife
+- GlitchOverlay, Lightning, LiveChart, MagneticBlob, Mandala
+- MatrixRain, NoiseGradient, ParticleField, PixelDissolve, Rain
+- RippleEffect, Shockwave, Spotlight, Starfield, Wormhole

package/README.md

@@ -0,0 +1,355 @@
+# own-the-canvas
+
+> Beautiful, responsive, fully customizable HTML canvas–based React visual components. Zero dependencies. TypeScript. 60fps.
+
+![Demo](https://placehold.co/800x400/0a0a0a/00cfff?text=own-the-canvas+Demo+GIF)
+
+## Install
+
+```bash
+npm install own-the-canvas
+# or
+pnpm add own-the-canvas
+```
+
+> **Peer deps:** React 18+
+
+---
+
+## Quick Start
+
+```tsx
+import { MatrixRain, ParticleField, Starfield } from 'own-the-canvas';
+
+export default function App() {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <MatrixRain color="#00ff41" glowEffect />
+    </div>
+  );
+}
+```
+
+All components default to `width: "100%"` and `height: "100%"` so they fill their parent.
+
+---
+
+## Components
+
+### MatrixRain
+
+Classic falling character rain effect.
+
+![MatrixRain](https://placehold.co/600x200/000000/00ff41?text=MatrixRain+GIF)
+
+```tsx
+import { MatrixRain } from 'own-the-canvas';
+
+<MatrixRain
+  color="#00ff41"
+  fontSize={16}
+  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 |
+
+---
+
+### ParticleField
+
+Floating particles with optional connections and mouse repulsion.
+
+![ParticleField](https://placehold.co/600x200/0a0a0a/7eb8f7?text=ParticleField+GIF)
+
+```tsx
+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 |
+
+---
+
+### Starfield
+
+2D twinkle or 3D warp tunnel starfield.
+
+![Starfield](https://placehold.co/600x200/000010/ffffff?text=Starfield+GIF)
+
+```tsx
+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 |
+
+---
+
+### FireEffect
+
+Pixel-level fire simulation with multiple palettes.
+
+![FireEffect](https://placehold.co/600x200/000000/ff4400?text=FireEffect+GIF)
+
+```tsx
+import { FireEffect } from 'own-the-canvas';
+
+<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 |
+
+---
+
+### AudioVisualizer
+
+Web Audio API visualizer with 4 modes.
+
+![AudioVisualizer](https://placehold.co/600x200/050505/00cfff?text=AudioVisualizer+GIF)
+
+```tsx
+import { AudioVisualizer } from 'own-the-canvas';
+
+const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+<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 |
+
+---
+
+### Confetti
+
+Burst or continuous confetti cannon.
+
+![Confetti](https://placehold.co/600x200/0a0a0a/ffdd00?text=Confetti+GIF)
+
+```tsx
+import { Confetti } from 'own-the-canvas';
+const [fire, setFire] = useState(false);
+
+<Confetti trigger={fire} particleCount={150} />
+<button onClick={() => { setFire(false); setTimeout(() => setFire(true), 50); }}>
+  🎉
+</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 |
+
+---
+
+### RippleEffect
+
+Expanding ring ripples on click or auto.
+
+![RippleEffect](https://placehold.co/600x200/050510/00cfff?text=RippleEffect+GIF)
+
+```tsx
+import { RippleEffect } from 'own-the-canvas';
+
+<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 |
+
+---
+
+### NoiseGradient
+
+Animated Perlin noise–driven color gradient.
+
+![NoiseGradient](https://placehold.co/600x200/0d0221/38ef7d?text=NoiseGradient+GIF)
+
+```tsx
+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 |
+
+---
+
+### PixelDissolve
+
+Pixelated dissolve transition overlay for any React content.
+
+![PixelDissolve](https://placehold.co/600x200/667eea/ffffff?text=PixelDissolve+GIF)
+
+```tsx
+import { PixelDissolve } from 'own-the-canvas';
+
+<PixelDissolve trigger={show} direction="out" pixelSize={8}>
+  <YourComponent />
+</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 |
+
+---
+
+### ConstellationMap
+
+Draggable star constellation with animated connections.
+
+![ConstellationMap](https://placehold.co/600x200/050510/8888ff?text=ConstellationMap+GIF)
+
+```tsx
+import { ConstellationMap } from 'own-the-canvas';
+
+<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 |
+
+---
+
+## Base Props (all components)
+
+Every component accepts these:
+
+| 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.
+
+---
+
+## Tree-shaking
+
+Import only what you use:
+
+```tsx
+import { MatrixRain } from 'own-the-canvas';      // ✓ only MatrixRain bundled
+import { ParticleField } from 'own-the-canvas';   // ✓ only ParticleField bundled
+```
+
+---
+
+## License
+
+MIT

package/dist/components/AudioVisualizer/AudioVisualizer.d.ts

@@ -0,0 +1,48 @@
+import { BaseCanvasProps } from '../../types';
+import { VisualizerMode } from './useAudioVisualizer';
+
+type AudioVisualizerPreset = "default" | "neon" | "minimal" | "fire" | "ocean";
+export interface AudioVisualizerProps extends BaseCanvasProps {
+    /** MediaStream from getUserMedia (default: null — shows idle animation) */
+    audioSource?: MediaStream | null;
+    /** Number of frequency bars (default: 64) */
+    barCount?: number;
+    /** Bar fill color (default: "#00cfff") */
+    barColor?: string;
+    /** Wave stroke color (default: "#00cfff") */
+    waveColor?: string;
+    /** Visualization mode (default: "bars") */
+    mode?: VisualizerMode;
+    /** Amplitude sensitivity multiplier (default: 1) */
+    sensitivity?: number;
+    /** Gap between bars in px (default: 2) */
+    gapBetweenBars?: number;
+    /** Rounded bar caps (default: true) */
+    rounded?: boolean;
+    /** Color gradient on bars/wave (default: true) */
+    gradient?: boolean;
+    /** Gradient top/end color (default: "#ffffff") */
+    gradientEndColor?: string;
+    /** Canvas background color (default: "transparent") */
+    backgroundColor?: string;
+    /** Enable glow effect (default: true) */
+    glowEffect?: boolean;
+    /** Glow color — defaults to barColor */
+    glowColor?: string;
+    /** Glow blur radius in px (default: 12) */
+    glowBlur?: number;
+    /** Web Audio FFT size — must be power of 2 (default: 2048) */
+    fftSize?: number;
+    /** Analyser smoothing time constant 0–1 (default: 0.8) */
+    smoothingTimeConstant?: number;
+    /** Circular mode inner radius as fraction of min(w,h) (default: 0.25) */
+    circularRadiusRatio?: number;
+    /** Idle animation wave amplitude in px (default: 5) */
+    idleAmplitude?: number;
+    /** Idle animation speed multiplier (default: 1) */
+    idleAnimationSpeed?: number;
+    /** Named preset: "default" | "neon" | "minimal" | "fire" | "ocean" */
+    preset?: AudioVisualizerPreset | string;
+}
+export declare const AudioVisualizer: import('react').ForwardRefExoticComponent<AudioVisualizerProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/dist/components/AudioVisualizer/AudioVisualizer.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AudioVisualizer } from './AudioVisualizer';
+
+declare const meta: Meta<typeof AudioVisualizer>;
+export default meta;
+type Story = StoryObj<typeof AudioVisualizer>;
+export declare const Bars: Story;
+export declare const Wave: Story;
+export declare const Circular: Story;
+export declare const Mirror: Story;

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

@@ -0,0 +1,3 @@
+export { AudioVisualizer } from './AudioVisualizer';
+export type { AudioVisualizerProps } from './AudioVisualizer';
+export type { VisualizerMode } from './useAudioVisualizer';

package/dist/components/AudioVisualizer/useAudioVisualizer.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+
+export type VisualizerMode = "bars" | "wave" | "circular" | "mirror";
+export interface UseAudioVisualizerOptions {
+    audioSource: MediaStream | null;
+    barCount: number;
+    barColor: string;
+    waveColor: string;
+    mode: VisualizerMode;
+    sensitivity: number;
+    gapBetweenBars: number;
+    rounded: boolean;
+    gradient: boolean;
+    gradientEndColor: string;
+    backgroundColor: string;
+    glowEffect: boolean;
+    glowColor: string;
+    glowBlur: number;
+    fftSize: number;
+    smoothingTimeConstant: number;
+    circularRadiusRatio: number;
+    idleAmplitude: number;
+    idleAnimationSpeed: number;
+}
+export declare function useAudioVisualizer(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseAudioVisualizerOptions): void;

package/dist/components/Boids/Boids.d.ts

@@ -0,0 +1,43 @@
+import { BaseCanvasProps } from '../../types';
+
+type BoidsPreset = "default" | "birds" | "fish" | "swarm" | "neon";
+export interface BoidsProps extends BaseCanvasProps {
+    /** Number of boids. (default: 80) */
+    count?: number;
+    /** Maximum speed in px/frame. (default: 3) */
+    maxSpeed?: number;
+    /** Radius for separation rule in px. (default: 25) */
+    separationRadius?: number;
+    /** Radius for alignment rule in px. (default: 50) */
+    alignmentRadius?: number;
+    /** Radius for cohesion rule in px. (default: 60) */
+    cohesionRadius?: number;
+    /** Separation steering force. (default: 0.05) */
+    separationForce?: number;
+    /** Alignment steering force. (default: 0.05) */
+    alignmentForce?: number;
+    /** Cohesion steering force. (default: 0.03) */
+    cohesionForce?: number;
+    /** Boid and trail color. (default: "#7C3AED") */
+    color?: string;
+    /** Trail history length in frames. (default: 8) */
+    trailLength?: number;
+    /** Trail line opacity 0–1. (default: 0.4) */
+    trailOpacity?: number;
+    /** Boid triangle size in px. (default: 6) */
+    boidSize?: number;
+    /** Canvas background color. (default: "#050010") */
+    backgroundColor?: string;
+    /** Boids flee from mouse cursor. (default: true) */
+    interactive?: boolean;
+    /** Mouse avoidance radius in px. (default: 80) */
+    mouseRadius?: number;
+    /** Mouse avoidance force. (default: 0.2) */
+    mouseForce?: number;
+    /** Wrap boids at canvas edges. (default: true) */
+    wrapEdges?: boolean;
+    /** Named preset. */
+    preset?: BoidsPreset | string;
+}
+export declare const Boids: import('react').ForwardRefExoticComponent<BoidsProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

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

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

package/dist/components/Boids/useBoids.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+
+export interface UseBoidsOptions {
+    count: number;
+    maxSpeed: number;
+    separationRadius: number;
+    alignmentRadius: number;
+    cohesionRadius: number;
+    separationForce: number;
+    alignmentForce: number;
+    cohesionForce: number;
+    color: string;
+    trailLength: number;
+    trailOpacity: number;
+    boidSize: number;
+    backgroundColor: string;
+    interactive: boolean;
+    mouseRadius: number;
+    mouseForce: number;
+    wrapEdges: boolean;
+}
+export declare function useBoids(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseBoidsOptions): void;

package/dist/components/ClothSimulation/ClothSimulation.d.ts

@@ -0,0 +1,47 @@
+import { BaseCanvasProps } from '../../types';
+
+type ClothPreset = "default" | "silk" | "net" | "heavy" | "spider";
+export interface ClothSimulationProps extends BaseCanvasProps {
+    /** Grid columns (default: 25) */
+    cols?: number;
+    /** Grid rows (default: 20) */
+    rows?: number;
+    /** Point spacing in px (default: 18) */
+    spacing?: number;
+    /** Gravity per frame (default: 0.4) */
+    gravity?: number;
+    /** Velocity friction 0–1 (default: 0.99) */
+    friction?: number;
+    /** Constraint stiffness 0–1 (default: 1) */
+    stiffness?: number;
+    /** Relaxation iterations per frame (default: 3) */
+    iterations?: number;
+    /** Cloth mesh color (default: "#7C3AED") */
+    lineColor?: string;
+    /** Pin point color (default: "#ffffff") */
+    pinColor?: string;
+    /** Mesh stroke width (default: 1) */
+    lineWidth?: number;
+    /** Canvas background (default: "#050010") */
+    backgroundColor?: string;
+    /** Wind oscillation amplitude (default: 0.3) */
+    wind?: number;
+    /** Wind oscillation frequency (default: 0.5) */
+    windSpeed?: number;
+    /** Enable cloth tearing on drag (default: false) */
+    tearable?: boolean;
+    /** Tear multiplier — ratio above rest length that tears constraint (default: 3) */
+    tearDistance?: number;
+    /** Enable mouse interaction (default: true) */
+    interactive?: boolean;
+    /** Mouse influence radius in px (default: 30) */
+    mouseRadius?: number;
+    /** Mouse push force (default: 5) */
+    mouseForce?: number;
+    /** Show pin points at top (default: true) */
+    showPins?: boolean;
+    /** Named preset */
+    preset?: ClothPreset | string;
+}
+export declare const ClothSimulation: import('react').ForwardRefExoticComponent<ClothSimulationProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

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

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

package/dist/components/ClothSimulation/useClothSimulation.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+
+export interface UseClothSimulationOptions {
+    cols: number;
+    rows: number;
+    spacing: number;
+    gravity: number;
+    friction: number;
+    stiffness: number;
+    iterations: number;
+    lineColor: string;
+    pinColor: string;
+    lineWidth: number;
+    backgroundColor: string;
+    wind: number;
+    windSpeed: number;
+    tearable: boolean;
+    tearDistance: number;
+    interactive: boolean;
+    mouseRadius: number;
+    mouseForce: number;
+    showPins: boolean;
+}
+export declare function useClothSimulation(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseClothSimulationOptions): void;

package/dist/components/Confetti/Confetti.d.ts

@@ -0,0 +1,51 @@
+import { BaseCanvasProps } from '../../types';
+import { ConfettiShape } from './useConfetti';
+
+export type ConfettiPalette = "monochrome" | "colorful";
+type ConfettiPreset = "default" | "celebration" | "pastel" | "gold";
+export interface ConfettiProps extends BaseCanvasProps {
+    /** Color variant: "monochrome" (default) or "colorful" */
+    palette?: ConfettiPalette;
+    /** Rising edge fires a burst (default: false) */
+    trigger?: boolean;
+    /** Number of pieces per burst (default: 150) */
+    particleCount?: number;
+    /** Spread angle 0–1 where 1 = full hemisphere (default: 0.8) */
+    spread?: number;
+    /** Gravity strength (default: 0.5) */
+    gravity?: number;
+    /** Override confetti colors directly (overrides palette) */
+    colors?: string[];
+    /** Shapes to include (default: all) */
+    shapes?: ConfettiShape[];
+    /** Duration of each piece in ms (default: 4000) */
+    duration?: number;
+    /** Emit continuously while trigger is true (default: false) */
+    continuous?: boolean;
+    /** Horizontal wind force (default: 0.5) */
+    wind?: number;
+    /** Spawn X position as fraction of canvas width (default: 0.5) */
+    spawnX?: number;
+    /** Spawn Y position as fraction of canvas height (default: 0.4) */
+    spawnY?: number;
+    /** Spawn position random spread in px (default: 60) */
+    spawnSpread?: number;
+    /** Minimum piece launch speed (default: 4) */
+    speedMin?: number;
+    /** Maximum piece launch speed (default: 16) */
+    speedMax?: number;
+    /** Minimum piece size in px (default: 6) */
+    sizeMin?: number;
+    /** Maximum piece size in px (default: 14) */
+    sizeMax?: number;
+    /** Max angular velocity per frame (default: 0.3) */
+    angularVelocity?: number;
+    /** Pieces per second in continuous mode (default: 10) */
+    emissionRate?: number;
+    /** Called when animation finishes */
+    onComplete?: () => void;
+    /** Named preset: "default" | "celebration" | "pastel" | "gold" */
+    preset?: ConfettiPreset | string;
+}
+export declare const Confetti: import('react').ForwardRefExoticComponent<ConfettiProps & import('react').RefAttributes<HTMLCanvasElement>>;
+export {};

package/dist/components/Confetti/Confetti.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Confetti } from './Confetti';
+
+declare const meta: Meta<typeof Confetti>;
+export default meta;
+type Story = StoryObj<typeof Confetti>;
+export declare const Default: Story;
+export declare const Colorful: Story;
+export declare const Celebration: Story;
+export declare const Continuous: Story;

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

@@ -0,0 +1,3 @@
+export { Confetti } from './Confetti';
+export type { ConfettiProps, ConfettiPalette } from './Confetti';
+export type { ConfettiShape } from './useConfetti';