@oalacea/chaosui 0.1.0 → 0.5.0

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

@@ -1,31 +0,0 @@
-.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/glow-orbs/index.tsx

@@ -1,87 +0,0 @@
-'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/light-beams/index.tsx

@@ -1,80 +0,0 @@
-'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/light-beams/light-beams.module.css

@@ -1,27 +0,0 @@
-.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/noise-canvas/index.tsx

@@ -1,113 +0,0 @@
-'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/noise-canvas/noise-canvas.module.css

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

package/components/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@chaos/components",
-  "version": "0.1.0",
-  "description": "Glitch, noise, and distortion UI components",
-  "type": "module",
-  "exports": {
-    "./text/*": "./text/*/index.tsx",
-    "./overlays/*": "./overlays/*/index.tsx",
-    "./buttons/*": "./buttons/*/index.tsx",
-    "./effects/*": "./effects/*/index.tsx",
-    "./backgrounds/*": "./backgrounds/*/index.tsx"
-  }
-}

package/components/particle-field/index.tsx

@@ -1,81 +0,0 @@
-'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/particle-field/particle-field.module.css

@@ -1,31 +0,0 @@
-.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;
-  }
-}