@oalacea/chaosui 0.1.0

package/components/overlays/scanlines/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './scanlines.module.css';
+
+export interface ScanlinesProps extends HTMLAttributes<HTMLDivElement> {
+  /** Line opacity (0-1) */
+  opacity?: number;
+  /** Line thickness in pixels */
+  lineWidth?: number;
+  /** Gap between lines in pixels */
+  gap?: number;
+  /** Line color */
+  color?: string;
+  /** Enable flicker animation */
+  flicker?: boolean;
+  /** Fixed position (covers viewport) or absolute (covers parent) */
+  position?: 'fixed' | 'absolute';
+}
+
+export const Scanlines = forwardRef<HTMLDivElement, ScanlinesProps>(
+  (
+    {
+      opacity = 0.1,
+      lineWidth = 1,
+      gap = 2,
+      color = '#000000',
+      flicker = false,
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`${styles.scanlines} ${flicker ? styles.flicker : ''} ${className || ''}`}
+        style={{
+          position,
+          opacity,
+          background: `repeating-linear-gradient(
+            0deg,
+            ${color},
+            ${color} ${lineWidth}px,
+            transparent ${lineWidth}px,
+            transparent ${lineWidth + gap}px
+          )`,
+          ...style,
+        }}
+        aria-hidden="true"
+        {...props}
+      />
+    );
+  }
+);
+
+Scanlines.displayName = 'Scanlines';
+
+export default Scanlines;

package/components/overlays/scanlines/scanlines.module.css

@@ -0,0 +1,16 @@
+.scanlines {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9998;
+}
+
+.flicker {
+  animation: scanline-flicker 0.1s infinite;
+}
+
+@keyframes scanline-flicker {
+  0%, 100% { opacity: 0.1; }
+  50% { opacity: 0.15; }
+}

package/components/overlays/static-flicker/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './static-flicker.module.css';
+
+export interface StaticFlickerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Noise opacity (0-1) */
+  opacity?: number;
+  /** Flicker speed: slow, normal, fast */
+  speed?: 'slow' | 'normal' | 'fast';
+  /** Noise frequency */
+  frequency?: number;
+  /** Fixed or absolute positioning */
+  position?: 'fixed' | 'absolute';
+}
+
+export const StaticFlicker = forwardRef<HTMLDivElement, StaticFlickerProps>(
+  (
+    {
+      opacity = 0.03,
+      speed = 'normal',
+      frequency = 0.9,
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const noiseSvg = `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${frequency}' numOctaves='3' 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.static} ${styles[speed]} ${className || ''}`}
+        style={{
+          position,
+          opacity,
+          backgroundImage: noiseSvg,
+          ...style,
+        }}
+        aria-hidden="true"
+        {...props}
+      />
+    );
+  }
+);
+
+StaticFlicker.displayName = 'StaticFlicker';
+
+export default StaticFlicker;

package/components/overlays/static-flicker/static-flicker.module.css

@@ -0,0 +1,27 @@
+.static {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.slow {
+  animation: flicker 0.2s steps(8) infinite;
+}
+
+.normal {
+  animation: flicker 0.1s steps(5) infinite;
+}
+
+.fast {
+  animation: flicker 0.05s steps(3) infinite;
+}
+
+@keyframes flicker {
+  0%, 100% { opacity: 0.02; }
+  20% { opacity: 0.04; }
+  40% { opacity: 0.02; }
+  60% { opacity: 0.03; }
+  80% { opacity: 0.025; }
+}

package/components/overlays/vignette/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './vignette.module.css';
+
+export interface VignetteProps extends HTMLAttributes<HTMLDivElement> {
+  /** Vignette intensity (0-1) */
+  intensity?: number;
+  /** Vignette color */
+  color?: string;
+  /** Vignette spread (0-1, how far the effect extends) */
+  spread?: number;
+  /** Fixed position (covers viewport) or absolute (covers parent) */
+  position?: 'fixed' | 'absolute';
+}
+
+export const Vignette = forwardRef<HTMLDivElement, VignetteProps>(
+  (
+    {
+      intensity = 0.8,
+      color = '#000000',
+      spread = 0.5,
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Convert hex to rgba for gradient
+    const hexToRgba = (hex: string, alpha: number) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+
+    const innerStop = Math.max(0, (1 - spread) * 100);
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.vignette} ${className || ''}`}
+        style={{
+          position,
+          background: `radial-gradient(ellipse at center, transparent ${innerStop}%, ${hexToRgba(color, intensity)} 100%)`,
+          ...style,
+        }}
+        aria-hidden="true"
+        {...props}
+      />
+    );
+  }
+);
+
+Vignette.displayName = 'Vignette';
+
+export default Vignette;

package/components/overlays/vignette/vignette.module.css

@@ -0,0 +1,7 @@
+.vignette {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9997;
+}

package/components/package.json

@@ -0,0 +1,13 @@
+{
+  "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

@@ -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/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;
+  }
+}

package/components/text/distortion-text/distortion-text.module.css

@@ -0,0 +1,100 @@
+.distortion {
+  display: inline-block;
+}
+
+/* WAVE */
+.wave {
+  animation: wave var(--duration, 2s) ease-in-out infinite;
+}
+
+.wave.subtle { --wave-amount: 2px; }
+.wave.medium { --wave-amount: 5px; }
+.wave.intense { --wave-amount: 10px; }
+
+@keyframes wave {
+  0%, 100% { 
+    transform: translateY(0) skewX(0); 
+  }
+  25% { 
+    transform: translateY(calc(var(--wave-amount) * -1)) skewX(-2deg); 
+  }
+  50% { 
+    transform: translateY(0) skewX(0); 
+  }
+  75% { 
+    transform: translateY(var(--wave-amount)) skewX(2deg); 
+  }
+}
+
+/* SHAKE */
+.shake {
+  animation: shake var(--duration, 0.5s) linear infinite;
+}
+
+.shake.subtle { --shake-amount: 1px; }
+.shake.medium { --shake-amount: 3px; }
+.shake.intense { --shake-amount: 6px; }
+
+@keyframes shake {
+  0%, 100% { transform: translate(0); }
+  10% { transform: translate(calc(var(--shake-amount) * -1), var(--shake-amount)); }
+  20% { transform: translate(var(--shake-amount), calc(var(--shake-amount) * -1)); }
+  30% { transform: translate(calc(var(--shake-amount) * -1), calc(var(--shake-amount) * -1)); }
+  40% { transform: translate(var(--shake-amount), var(--shake-amount)); }
+  50% { transform: translate(calc(var(--shake-amount) * -1), 0); }
+  60% { transform: translate(var(--shake-amount), 0); }
+  70% { transform: translate(0, var(--shake-amount)); }
+  80% { transform: translate(0, calc(var(--shake-amount) * -1)); }
+  90% { transform: translate(var(--shake-amount), var(--shake-amount)); }
+}
+
+/* SKEW */
+.skew {
+  animation: skew var(--duration, 3s) ease-in-out infinite;
+}
+
+.skew.subtle { --skew-amount: 3deg; }
+.skew.medium { --skew-amount: 8deg; }
+.skew.intense { --skew-amount: 15deg; }
+
+@keyframes skew {
+  0%, 100% { transform: skewX(0) skewY(0); }
+  25% { transform: skewX(var(--skew-amount)) skewY(calc(var(--skew-amount) * 0.5)); }
+  50% { transform: skewX(0) skewY(0); }
+  75% { transform: skewX(calc(var(--skew-amount) * -1)) skewY(calc(var(--skew-amount) * -0.5)); }
+}
+
+/* BLUR */
+.blur {
+  animation: blur var(--duration, 2s) ease-in-out infinite;
+}
+
+.blur.subtle { --blur-amount: 1px; }
+.blur.medium { --blur-amount: 3px; }
+.blur.intense { --blur-amount: 6px; }
+
+@keyframes blur {
+  0%, 100% { filter: blur(0); }
+  50% { filter: blur(var(--blur-amount)); }
+}
+
+/* SPEEDS */
+.slow { --duration: 4s; }
+.normal { --duration: 2s; }
+.fast { --duration: 0.8s; }
+
+.shake.slow { --duration: 1s; }
+.shake.normal { --duration: 0.5s; }
+.shake.fast { --duration: 0.2s; }
+
+/* HOVER ONLY */
+.hoverOnly {
+  animation: none;
+  transform: none;
+  filter: none;
+}
+
+.hoverOnly.wave:hover { animation: wave var(--duration, 2s) ease-in-out infinite; }
+.hoverOnly.shake:hover { animation: shake var(--duration, 0.5s) linear infinite; }
+.hoverOnly.skew:hover { animation: skew var(--duration, 3s) ease-in-out infinite; }
+.hoverOnly.blur:hover { animation: blur var(--duration, 2s) ease-in-out infinite; }

package/components/text/distortion-text/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './distortion-text.module.css';
+
+export interface DistortionTextProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The text to display */
+  children: string;
+  /** Distortion type */
+  type?: 'wave' | 'shake' | 'skew' | 'blur';
+  /** Animation speed: slow, normal, fast */
+  speed?: 'slow' | 'normal' | 'fast';
+  /** Distortion intensity */
+  intensity?: 'subtle' | 'medium' | 'intense';
+  /** Only animate on hover */
+  hoverOnly?: boolean;
+}
+
+export const DistortionText = forwardRef<HTMLSpanElement, DistortionTextProps>(
+  (
+    {
+      children,
+      type = 'wave',
+      speed = 'normal',
+      intensity = 'medium',
+      hoverOnly = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={`
+          ${styles.distortion} 
+          ${styles[type]} 
+          ${styles[speed]} 
+          ${styles[intensity]}
+          ${hoverOnly ? styles.hoverOnly : ''}
+          ${className || ''}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+DistortionText.displayName = 'DistortionText';
+
+export default DistortionText;

package/components/text/falling-text/falling-text.module.css

@@ -0,0 +1,57 @@
+.container {
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.letter {
+  display: inline-block;
+  opacity: 0;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.down {
+  animation-name: fall-down;
+}
+
+.up {
+  animation-name: fall-up;
+}
+
+.loop {
+  animation-iteration-count: infinite;
+}
+
+@keyframes fall-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%) rotate(-10deg);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100%) rotate(10deg);
+  }
+}
+
+@keyframes fall-up {
+  0% {
+    opacity: 0;
+    transform: translateY(100%) rotate(10deg);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100%) rotate(-10deg);
+  }
+}

package/components/text/falling-text/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './falling-text.module.css';
+
+export interface FallingTextProps extends HTMLAttributes<HTMLDivElement> {
+  /** Text to display falling */
+  children: string;
+  /** Fall duration in seconds */
+  duration?: number;
+  /** Stagger delay between letters in ms */
+  stagger?: number;
+  /** Loop the animation */
+  loop?: boolean;
+  /** Fall direction */
+  direction?: 'down' | 'up';
+}
+
+export const FallingText = forwardRef<HTMLDivElement, FallingTextProps>(
+  (
+    {
+      children,
+      duration = 2,
+      stagger = 100,
+      loop = true,
+      direction = 'down',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const letters = children.split('');
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.container} ${className || ''}`}
+        style={style}
+        {...props}
+      >
+        {letters.map((letter, i) => (
+          <span
+            key={i}
+            className={`${styles.letter} ${styles[direction]} ${loop ? styles.loop : ''}`}
+            style={{
+              animationDuration: `${duration}s`,
+              animationDelay: `${i * stagger}ms`,
+            }}
+          >
+            {letter === ' ' ? '\u00A0' : letter}
+          </span>
+        ))}
+      </div>
+    );
+  }
+);
+
+FallingText.displayName = 'FallingText';
+
+export default FallingText;