@oalacea/chaosui 0.1.0

package/components/effects/screen-distortion/screen-distortion.module.css

@@ -0,0 +1,127 @@
+.distortion {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9990;
+}
+
+/* WAVE */
+.wave {
+  background: transparent;
+}
+
+.wave::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  animation: wave-distort var(--duration, 3s) ease-in-out infinite;
+}
+
+@keyframes wave-distort {
+  0%, 100% { transform: scaleY(1) skewX(0); }
+  25% { transform: scaleY(1.002) skewX(0.5deg); }
+  50% { transform: scaleY(0.998) skewX(0); }
+  75% { transform: scaleY(1.001) skewX(-0.5deg); }
+}
+
+/* GLITCH */
+.glitch::before,
+.glitch::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  opacity: 0;
+}
+
+.glitch::before {
+  animation: glitch-distort-1 var(--duration, 4s) infinite;
+}
+
+.glitch::after {
+  animation: glitch-distort-2 var(--duration, 4s) infinite;
+}
+
+@keyframes glitch-distort-1 {
+  0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
+  86% { opacity: 1; clip-path: inset(20% 0 60% 0); transform: translateX(var(--shift, -5px)); background: rgba(255, 0, 64, 0.1); }
+  88% { opacity: 1; clip-path: inset(50% 0 30% 0); transform: translateX(var(--shift, 5px)); }
+  90% { opacity: 0; }
+}
+
+@keyframes glitch-distort-2 {
+  0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
+  87% { opacity: 1; clip-path: inset(40% 0 40% 0); transform: translateX(var(--shift, 3px)); background: rgba(0, 255, 255, 0.1); }
+  89% { opacity: 1; clip-path: inset(70% 0 10% 0); transform: translateX(var(--shift, -3px)); }
+  91% { opacity: 0; }
+}
+
+/* CHROMATIC */
+.chromatic::before,
+.chromatic::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  mix-blend-mode: screen;
+}
+
+.chromatic::before {
+  background: rgba(255, 0, 0, var(--opacity, 0.02));
+  animation: chromatic-r var(--duration, 5s) ease-in-out infinite;
+}
+
+.chromatic::after {
+  background: rgba(0, 255, 255, var(--opacity, 0.02));
+  animation: chromatic-c var(--duration, 5s) ease-in-out infinite reverse;
+}
+
+@keyframes chromatic-r {
+  0%, 100% { transform: translate(0); }
+  50% { transform: translate(var(--shift, 2px), var(--shift, -1px)); }
+}
+
+@keyframes chromatic-c {
+  0%, 100% { transform: translate(0); }
+  50% { transform: translate(calc(var(--shift, 2px) * -1), var(--shift, 1px)); }
+}
+
+/* NOISE */
+.noise {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: var(--opacity, 0.02);
+  animation: noise-animate var(--duration, 0.2s) steps(5) infinite;
+}
+
+@keyframes noise-animate {
+  0% { transform: translate(0, 0); }
+  25% { transform: translate(-1px, 1px); }
+  50% { transform: translate(1px, -1px); }
+  75% { transform: translate(-1px, -1px); }
+  100% { transform: translate(0, 0); }
+}
+
+/* INTENSITY */
+.subtle { --shift: 2px; --opacity: 0.01; }
+.medium { --shift: 5px; --opacity: 0.02; }
+.intense { --shift: 10px; --opacity: 0.04; }
+
+/* SPEED */
+.slow { --duration: 6s; }
+.normal { --duration: 4s; }
+.fast { --duration: 2s; }
+
+.noise.slow { --duration: 0.3s; }
+.noise.normal { --duration: 0.2s; }
+.noise.fast { --duration: 0.1s; }
+
+/* HOVER ONLY */
+.hoverOnly {
+  opacity: 0;
+}
+
+.hoverOnly:hover,
+*:hover > .hoverOnly {
+  opacity: 1;
+}

package/components/effects/warning-tape/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './warning-tape.module.css';
+
+export interface WarningTapeProps extends HTMLAttributes<HTMLDivElement> {
+  /** The text to scroll */
+  children: string;
+  /** Background color */
+  bgColor?: string;
+  /** Text color */
+  textColor?: string;
+  /** Scroll speed in seconds */
+  duration?: number;
+  /** Rotation angle in degrees */
+  rotation?: number;
+  /** Reverse scroll direction */
+  reverse?: boolean;
+}
+
+export const WarningTape = forwardRef<HTMLDivElement, WarningTapeProps>(
+  (
+    {
+      children,
+      bgColor = '#ff0040',
+      textColor = '#000000',
+      duration = 20,
+      rotation = -1,
+      reverse = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Repeat text for seamless scroll
+    const repeatedText = `${children} • `.repeat(20);
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.tape} ${className || ''}`}
+        style={{
+          backgroundColor: bgColor,
+          color: textColor,
+          transform: `rotate(${rotation}deg) scale(1.1)`,
+          ...style,
+        }}
+        {...props}
+      >
+        <span
+          className={`${styles.scroll} ${reverse ? styles.reverse : ''}`}
+          style={{ animationDuration: `${duration}s` }}
+        >
+          {repeatedText}
+        </span>
+      </div>
+    );
+  }
+);
+
+WarningTape.displayName = 'WarningTape';
+
+export default WarningTape;

package/components/effects/warning-tape/warning-tape.module.css

@@ -0,0 +1,29 @@
+.tape {
+  width: 100%;
+  padding: 0.75rem 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.scroll {
+  display: inline-block;
+  animation: scroll-left 20s linear infinite;
+}
+
+.reverse {
+  animation-name: scroll-right;
+}
+
+@keyframes scroll-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+@keyframes scroll-right {
+  from { transform: translateX(-50%); }
+  to { transform: translateX(0); }
+}

package/components/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/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/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/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/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/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/overlays/noise-overlay/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './noise-overlay.module.css';
+
+export interface NoiseOverlayProps extends HTMLAttributes<HTMLDivElement> {
+  /** Noise opacity (0-1) */
+  opacity?: number;
+  /** Noise frequency (higher = finer grain) */
+  frequency?: number;
+  /** Enable animation */
+  animated?: boolean;
+  /** Blend mode */
+  blendMode?: 'overlay' | 'multiply' | 'screen' | 'soft-light' | 'normal';
+  /** Fixed position (covers viewport) or absolute (covers parent) */
+  position?: 'fixed' | 'absolute';
+}
+
+export const NoiseOverlay = forwardRef<HTMLDivElement, NoiseOverlayProps>(
+  (
+    {
+      opacity = 0.05,
+      frequency = 0.8,
+      animated = false,
+      blendMode = 'overlay',
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate SVG noise inline
+    const noiseSvg = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${frequency}' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`;
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.noise} ${animated ? styles.animated : ''} ${className || ''}`}
+        style={{
+          position,
+          opacity,
+          mixBlendMode: blendMode,
+          backgroundImage: noiseSvg,
+          ...style,
+        }}
+        aria-hidden="true"
+        {...props}
+      />
+    );
+  }
+);
+
+NoiseOverlay.displayName = 'NoiseOverlay';
+
+export default NoiseOverlay;

package/components/overlays/noise-overlay/noise-overlay.module.css

@@ -0,0 +1,20 @@
+.noise {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.animated {
+  animation: noise-shift 0.2s steps(5) infinite;
+}
+
+@keyframes noise-shift {
+  0% { transform: translate(0, 0); }
+  20% { transform: translate(-2px, 1px); }
+  40% { transform: translate(1px, -1px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(-1px, -2px); }
+  100% { transform: translate(0, 0); }
+}