@oalacea/chaosui 0.1.0

package/bin/cli.js

@@ -0,0 +1,216 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import pc from 'picocolors';
+import prompts from 'prompts';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const COMPONENTS_DIR = path.join(__dirname, '..', 'components');
+
+// Component registry
+const COMPONENTS = {
+  // Overlays
+  'noise-overlay': { category: 'overlays', description: 'SVG fractal noise texture overlay', status: 'ready' },
+  'scanlines': { category: 'overlays', description: 'CRT-style horizontal scanlines', status: 'ready' },
+  'vignette': { category: 'overlays', description: 'Dark edges radial gradient', status: 'ready' },
+  'static-flicker': { category: 'overlays', description: 'Animated noise with flicker effect', status: 'ready' },
+  
+  // Text effects
+  'glitch-text': { category: 'text', description: 'RGB split glitch text effect', status: 'ready' },
+  'flicker-text': { category: 'text', description: 'Text that flickers randomly', status: 'ready' },
+  'distortion-text': { category: 'text', description: 'Wave/shake/skew/blur text effects', status: 'ready' },
+  'falling-text': { category: 'text', description: 'Letters falling in cascade', status: 'ready' },
+  
+  // Buttons
+  'glitch-button': { category: 'buttons', description: 'Button with glitch hover effect', status: 'ready' },
+  'chaos-button': { category: 'buttons', description: 'Chaotic animated button with debris', status: 'ready' },
+  
+  // Backgrounds
+  'noise-canvas': { category: 'backgrounds', description: 'Animated noise canvas background', status: 'ready' },
+  'light-beams': { category: 'backgrounds', description: 'Vertical colored light beams', status: 'ready' },
+  'glow-orbs': { category: 'backgrounds', description: 'Floating blurred orbs', status: 'ready' },
+  'particle-field': { category: 'backgrounds', description: 'Drifting particle background', status: 'ready' },
+  
+  // Effects
+  'warning-tape': { category: 'effects', description: 'Scrolling warning tape banner', status: 'ready' },
+  'cursor-follower': { category: 'effects', description: 'Custom cursor with trail', status: 'ready' },
+  'screen-distortion': { category: 'effects', description: 'Full screen distortion effect', status: 'ready' },
+};
+
+const program = new Command();
+
+program
+  .name('chaos-ui')
+  .description('Add glitch & noise components to your project')
+  .version('0.1.0');
+
+// LIST command
+program
+  .command('list')
+  .description('List all available components')
+  .action(() => {
+    console.log(pc.bold('\n🗡️  Chaos UI Components\n'));
+    
+    const categories = {};
+    for (const [name, info] of Object.entries(COMPONENTS)) {
+      if (!categories[info.category]) categories[info.category] = [];
+      categories[info.category].push({ name, ...info });
+    }
+    
+    for (const [category, components] of Object.entries(categories)) {
+      console.log(pc.cyan(`  ${category}/`));
+      for (const comp of components) {
+        console.log(`    ${pc.white(comp.name.padEnd(20))} ${pc.dim(comp.description)}`);
+      }
+      console.log();
+    }
+  });
+
+// ADD command
+program
+  .command('add [component]')
+  .description('Add a component to your project')
+  .option('-d, --dir <path>', 'Target directory', './components/chaos')
+  .option('-y, --yes', 'Skip confirmation')
+  .action(async (componentName, options) => {
+    // If no component specified, show interactive picker
+    if (!componentName) {
+      const choices = Object.entries(COMPONENTS).map(([name, info]) => ({
+        title: name,
+        description: info.description,
+        value: name,
+      }));
+      
+      const response = await prompts({
+        type: 'autocomplete',
+        name: 'component',
+        message: 'Which component?',
+        choices,
+        suggest: (input, choices) => 
+          choices.filter(c => c.title.includes(input) || c.description.toLowerCase().includes(input.toLowerCase()))
+      });
+      
+      if (!response.component) {
+        console.log(pc.dim('Cancelled.'));
+        return;
+      }
+      componentName = response.component;
+    }
+    
+    // Validate component exists
+    if (!COMPONENTS[componentName]) {
+      console.log(pc.red(`\n✗ Component "${componentName}" not found.`));
+      console.log(pc.dim(`  Run ${pc.white('chaos-ui list')} to see available components.\n`));
+      return;
+    }
+    
+    const info = COMPONENTS[componentName];
+    const sourceDir = path.join(COMPONENTS_DIR, info.category, componentName);
+    const targetDir = path.resolve(options.dir, info.category);
+    
+    // Check source exists
+    if (!fs.existsSync(sourceDir)) {
+      console.log(pc.yellow(`\n⚠ Component "${componentName}" is not yet implemented.`));
+      console.log(pc.dim('  Coming soon!\n'));
+      return;
+    }
+    
+    // Confirm
+    if (!options.yes) {
+      const confirm = await prompts({
+        type: 'confirm',
+        name: 'value',
+        message: `Add ${pc.cyan(componentName)} to ${pc.dim(targetDir)}?`,
+        initial: true,
+      });
+      
+      if (!confirm.value) {
+        console.log(pc.dim('Cancelled.'));
+        return;
+      }
+    }
+    
+    // Copy files
+    try {
+      await fs.ensureDir(targetDir);
+      await fs.copy(sourceDir, path.join(targetDir, componentName));
+      
+      console.log(pc.green(`\n✓ Added ${componentName}`));
+      console.log(pc.dim(`  → ${path.join(targetDir, componentName)}\n`));
+      
+      // Show usage hint
+      const pascalName = componentName
+        .split('-')
+        .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+        .join('');
+      
+      console.log(pc.dim('  Import:'));
+      console.log(pc.white(`  import { ${pascalName} } from './components/chaos/${info.category}/${componentName}';\n`));
+      
+    } catch (err) {
+      console.log(pc.red(`\n✗ Failed to add component: ${err.message}\n`));
+    }
+  });
+
+// INIT command
+program
+  .command('init')
+  .description('Initialize chaos-ui in your project')
+  .action(async () => {
+    console.log(pc.bold('\n🗡️  Initializing Chaos UI...\n'));
+    
+    const response = await prompts([
+      {
+        type: 'select',
+        name: 'framework',
+        message: 'Framework?',
+        choices: [
+          { title: 'React', value: 'react' },
+          { title: 'Vue', value: 'vue' },
+          { title: 'Vanilla (HTML/CSS/JS)', value: 'vanilla' },
+        ],
+      },
+      {
+        type: 'select',
+        name: 'styling',
+        message: 'Styling?',
+        choices: [
+          { title: 'CSS Modules', value: 'css-modules' },
+          { title: 'Plain CSS', value: 'css' },
+          { title: 'Tailwind (with CSS vars)', value: 'tailwind' },
+        ],
+      },
+      {
+        type: 'text',
+        name: 'dir',
+        message: 'Components directory?',
+        initial: './components/chaos',
+      },
+    ]);
+    
+    if (!response.framework) {
+      console.log(pc.dim('Cancelled.'));
+      return;
+    }
+    
+    // Create config file
+    const config = {
+      framework: response.framework,
+      styling: response.styling,
+      componentsDir: response.dir,
+    };
+    
+    await fs.writeJson('./chaos-ui.json', config, { spaces: 2 });
+    await fs.ensureDir(response.dir);
+    
+    console.log(pc.green('\n✓ Initialized!'));
+    console.log(pc.dim(`  Config: ${pc.white('./chaos-ui.json')}`));
+    console.log(pc.dim(`  Components: ${pc.white(response.dir)}\n`));
+    console.log(pc.dim(`  Run ${pc.white('chaos-ui add <component>')} to add components.\n`));
+  });
+
+program.parse();

package/components/backgrounds/glow-orbs/glow-orbs.module.css

@@ -0,0 +1,31 @@
+.container {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.3;
+  transform: translate(-50%, -50%);
+  animation: float 20s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(-50%, -50%) translate(0, 0);
+  }
+  25% {
+    transform: translate(-50%, -50%) translate(30px, -40px);
+  }
+  50% {
+    transform: translate(-50%, -50%) translate(-20px, 20px);
+  }
+  75% {
+    transform: translate(-50%, -50%) translate(40px, 30px);
+  }
+}

package/components/backgrounds/glow-orbs/index.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './glow-orbs.module.css';
+
+export interface GlowOrbsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Array of orb colors (will cycle through) */
+  colors?: string[];
+  /** Number of orbs */
+  count?: number;
+  /** Orb size range [min, max] in pixels */
+  sizeRange?: [number, number];
+  /** Blur amount in pixels */
+  blur?: number;
+  /** Animation duration range [min, max] in seconds */
+  durationRange?: [number, number];
+  /** Fixed or absolute positioning */
+  position?: 'fixed' | 'absolute';
+}
+
+export const GlowOrbs = forwardRef<HTMLDivElement, GlowOrbsProps>(
+  (
+    {
+      colors = ['#7c3aed', '#06b6d4', '#ec4899', '#10b981'],
+      count = 5,
+      sizeRange = [100, 300],
+      blur = 80,
+      durationRange = [15, 25],
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate random orbs
+    const orbs = Array.from({ length: count }, (_, i) => {
+      const size = sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]);
+      const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
+      const delay = Math.random() * -duration;
+      const color = colors[i % colors.length];
+      const startX = Math.random() * 100;
+      const startY = Math.random() * 100;
+
+      return {
+        id: i,
+        size,
+        duration,
+        delay,
+        color,
+        startX,
+        startY,
+      };
+    });
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.container} ${className || ''}`}
+        style={{ position, ...style }}
+        aria-hidden="true"
+        {...props}
+      >
+        {orbs.map((orb) => (
+          <div
+            key={orb.id}
+            className={styles.orb}
+            style={{
+              width: orb.size,
+              height: orb.size,
+              background: orb.color,
+              filter: `blur(${blur}px)`,
+              left: `${orb.startX}%`,
+              top: `${orb.startY}%`,
+              animationDuration: `${orb.duration}s`,
+              animationDelay: `${orb.delay}s`,
+            }}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+
+GlowOrbs.displayName = 'GlowOrbs';
+
+export default GlowOrbs;

package/components/backgrounds/light-beams/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './light-beams.module.css';
+
+export interface LightBeamsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Array of beam colors */
+  colors?: string[];
+  /** Number of beams */
+  count?: number;
+  /** Beam width in pixels */
+  beamWidth?: number;
+  /** Beam opacity (0-1) */
+  opacity?: number;
+  /** Animation duration range [min, max] in seconds */
+  durationRange?: [number, number];
+  /** Fixed or absolute positioning */
+  position?: 'fixed' | 'absolute';
+}
+
+export const LightBeams = forwardRef<HTMLDivElement, LightBeamsProps>(
+  (
+    {
+      colors = ['#7c3aed', '#06b6d4', '#ec4899', '#10b981', '#f59e0b'],
+      count = 5,
+      beamWidth = 2,
+      opacity = 0.15,
+      durationRange = [15, 25],
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const beams = Array.from({ length: count }, (_, i) => {
+      const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
+      const delay = Math.random() * -duration;
+      const color = colors[i % colors.length];
+      const positionX = ((i + 1) / (count + 1)) * 100;
+
+      return {
+        id: i,
+        duration,
+        delay,
+        color,
+        positionX,
+      };
+    });
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.container} ${className || ''}`}
+        style={{ position, ...style }}
+        aria-hidden="true"
+        {...props}
+      >
+        {beams.map((beam) => (
+          <div
+            key={beam.id}
+            className={styles.beam}
+            style={{
+              left: `${beam.positionX}%`,
+              width: beamWidth,
+              background: `linear-gradient(180deg, transparent, ${beam.color}, transparent)`,
+              opacity,
+              animationDuration: `${beam.duration}s`,
+              animationDelay: `${beam.delay}s`,
+            }}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+
+LightBeams.displayName = 'LightBeams';
+
+export default LightBeams;

package/components/backgrounds/light-beams/light-beams.module.css

@@ -0,0 +1,27 @@
+.container {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.beam {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  filter: blur(1px);
+  animation: beam-move 20s ease-in-out infinite;
+}
+
+@keyframes beam-move {
+  0%, 100% {
+    transform: translateX(-50px) skewX(-5deg);
+    opacity: 0.1;
+  }
+  50% {
+    transform: translateX(50px) skewX(5deg);
+    opacity: 0.2;
+  }
+}

package/components/backgrounds/noise-canvas/index.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useRef, forwardRef, HTMLAttributes } from 'react';
+import styles from './noise-canvas.module.css';
+
+export interface NoiseCanvasProps extends HTMLAttributes<HTMLCanvasElement> {
+  /** Noise opacity (0-1) */
+  opacity?: number;
+  /** Animation speed (fps) */
+  fps?: number;
+  /** Noise intensity (0-255) */
+  intensity?: number;
+  /** Monochrome or colored noise */
+  monochrome?: boolean;
+  /** Fixed or absolute positioning */
+  position?: 'fixed' | 'absolute';
+}
+
+export const NoiseCanvas = forwardRef<HTMLCanvasElement, NoiseCanvasProps>(
+  (
+    {
+      opacity = 0.05,
+      fps = 24,
+      intensity = 50,
+      monochrome = true,
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const animationRef = useRef<number>();
+
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      const resize = () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      };
+
+      resize();
+      window.addEventListener('resize', resize);
+
+      let lastFrame = 0;
+      const frameInterval = 1000 / fps;
+
+      const render = (timestamp: number) => {
+        if (timestamp - lastFrame >= frameInterval) {
+          const imageData = ctx.createImageData(canvas.width, canvas.height);
+          const data = imageData.data;
+
+          for (let i = 0; i < data.length; i += 4) {
+            const value = Math.random() * intensity;
+            
+            if (monochrome) {
+              data[i] = value;
+              data[i + 1] = value;
+              data[i + 2] = value;
+            } else {
+              data[i] = Math.random() * intensity;
+              data[i + 1] = Math.random() * intensity;
+              data[i + 2] = Math.random() * intensity;
+            }
+            data[i + 3] = 255;
+          }
+
+          ctx.putImageData(imageData, 0, 0);
+          lastFrame = timestamp;
+        }
+
+        animationRef.current = requestAnimationFrame(render);
+      };
+
+      animationRef.current = requestAnimationFrame(render);
+
+      return () => {
+        window.removeEventListener('resize', resize);
+        if (animationRef.current) {
+          cancelAnimationFrame(animationRef.current);
+        }
+      };
+    }, [fps, intensity, monochrome]);
+
+    return (
+      <canvas
+        ref={(node) => {
+          (canvasRef as React.MutableRefObject<HTMLCanvasElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={`${styles.canvas} ${className || ''}`}
+        style={{
+          position,
+          opacity,
+          ...style,
+        }}
+        aria-hidden="true"
+        {...props}
+      />
+    );
+  }
+);
+
+NoiseCanvas.displayName = 'NoiseCanvas';
+
+export default NoiseCanvas;

package/components/backgrounds/noise-canvas/noise-canvas.module.css

@@ -0,0 +1,8 @@
+.canvas {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  mix-blend-mode: overlay;
+}

package/components/backgrounds/particle-field/index.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useMemo } from 'react';
+import styles from './particle-field.module.css';
+
+export interface ParticleFieldProps extends HTMLAttributes<HTMLDivElement> {
+  /** Number of particles */
+  count?: number;
+  /** Particle color */
+  color?: string;
+  /** Particle size range [min, max] in pixels */
+  sizeRange?: [number, number];
+  /** Animation duration range [min, max] in seconds */
+  durationRange?: [number, number];
+  /** Particle opacity */
+  opacity?: number;
+  /** Fixed or absolute positioning */
+  position?: 'fixed' | 'absolute';
+}
+
+export const ParticleField = forwardRef<HTMLDivElement, ParticleFieldProps>(
+  (
+    {
+      count = 50,
+      color = '#ffffff',
+      sizeRange = [1, 3],
+      durationRange = [10, 20],
+      opacity = 0.5,
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const particles = useMemo(() => {
+      return Array.from({ length: count }, (_, i) => {
+        const size = sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]);
+        const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
+        const delay = Math.random() * -duration;
+        const startX = Math.random() * 100;
+        const startY = Math.random() * 100;
+        const drift = (Math.random() - 0.5) * 100;
+
+        return { id: i, size, duration, delay, startX, startY, drift };
+      });
+    }, [count, sizeRange, durationRange]);
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.container} ${className || ''}`}
+        style={{ position, ...style }}
+        aria-hidden="true"
+        {...props}
+      >
+        {particles.map((p) => (
+          <div
+            key={p.id}
+            className={styles.particle}
+            style={{
+              width: p.size,
+              height: p.size,
+              backgroundColor: color,
+              opacity,
+              left: `${p.startX}%`,
+              top: `${p.startY}%`,
+              animationDuration: `${p.duration}s`,
+              animationDelay: `${p.delay}s`,
+              '--drift': `${p.drift}px`,
+            } as React.CSSProperties}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+
+ParticleField.displayName = 'ParticleField';
+
+export default ParticleField;

package/components/backgrounds/particle-field/particle-field.module.css

@@ -0,0 +1,31 @@
+.container {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.particle {
+  position: absolute;
+  border-radius: 50%;
+  animation: drift linear infinite;
+}
+
+@keyframes drift {
+  0% {
+    transform: translate(0, 0);
+    opacity: 0;
+  }
+  10% {
+    opacity: var(--opacity, 0.5);
+  }
+  90% {
+    opacity: var(--opacity, 0.5);
+  }
+  100% {
+    transform: translate(var(--drift, 50px), -100vh);
+    opacity: 0;
+  }
+}