@oalacea/chaosui 0.1.0

package/components/buttons/chaos-button/chaos-button.module.css

@@ -0,0 +1,173 @@
+.button {
+  --accent: #ff0040;
+  position: relative;
+  padding: 1rem 2.5rem;
+  font-family: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  overflow: visible;
+  transition: transform 0.1s;
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+/* VARIANTS */
+.solid {
+  background: var(--accent);
+  color: #000;
+}
+
+.outline {
+  background: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+}
+
+.broken {
+  background: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  clip-path: polygon(0 0, 100% 0, 100% 30%, 95% 30%, 95% 70%, 100% 70%, 100% 100%, 0 100%);
+}
+
+/* DEBRIS */
+.debris1, .debris2, .debris3, .debris4 {
+  position: absolute;
+  background: var(--accent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.button:hover .debris1,
+.button:hover .debris2,
+.button:hover .debris3,
+.button:hover .debris4 {
+  opacity: 1;
+}
+
+.debris1 {
+  width: 20px; height: 2px;
+  top: -6px; left: 15%;
+  transform: rotate(-5deg);
+}
+
+.debris2 {
+  width: 2px; height: 15px;
+  bottom: -10px; right: 20%;
+}
+
+.debris3 {
+  width: 15px; height: 1px;
+  top: 40%; right: -12px;
+}
+
+.debris4 {
+  width: 8px; height: 8px;
+  bottom: -5px; left: -5px;
+  background: transparent;
+  border: 1px solid var(--accent);
+  transform: rotate(45deg);
+}
+
+/* SLICE */
+.slice {
+  position: absolute;
+  top: 50%;
+  left: -5%;
+  right: -5%;
+  height: 2px;
+  background: var(--accent);
+  opacity: 0;
+  transform: translateY(-50%);
+}
+
+.button:hover .slice {
+  animation: slice 0.3s steps(4) infinite;
+}
+
+@keyframes slice {
+  0% { opacity: 0.8; clip-path: inset(0 80% 0 0); }
+  25% { opacity: 0.6; clip-path: inset(0 30% 0 40%); }
+  50% { opacity: 0.8; clip-path: inset(0 0 0 70%); }
+  75% { opacity: 0.4; clip-path: inset(0 50% 0 20%); }
+  100% { opacity: 0; }
+}
+
+/* NOISE */
+.noise {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.button:hover .noise {
+  opacity: 0.15;
+}
+
+/* CONTENT */
+.content {
+  position: relative;
+  z-index: 2;
+}
+
+/* GHOST LAYERS */
+.ghost1, .ghost2 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.ghost1 { color: var(--accent); }
+.ghost2 { color: #00ffff; }
+
+.button:hover .ghost1 {
+  opacity: 0.6;
+  animation: ghost1 0.15s infinite;
+}
+
+.button:hover .ghost2 {
+  opacity: 0.4;
+  animation: ghost2 0.15s infinite;
+}
+
+@keyframes ghost1 {
+  0%, 100% { transform: translate(0); clip-path: inset(0 0 60% 0); }
+  50% { transform: translate(-3px, 2px); clip-path: inset(30% 0 30% 0); }
+}
+
+@keyframes ghost2 {
+  0%, 100% { transform: translate(0); clip-path: inset(60% 0 0 0); }
+  50% { transform: translate(3px, -2px); clip-path: inset(20% 0 50% 0); }
+}
+
+/* CHAOS LEVELS */
+.mild .debris1, .mild .debris2, .mild .debris3, .mild .debris4 { opacity: 0.3; }
+.mild:hover .ghost1, .mild:hover .ghost2 { animation-duration: 0.3s; }
+
+.extreme .debris1 { width: 30px; height: 3px; }
+.extreme .debris2 { width: 3px; height: 25px; }
+.extreme .debris3 { width: 25px; }
+.extreme .debris4 { width: 12px; height: 12px; }
+.extreme:hover .ghost1, .extreme:hover .ghost2 { animation-duration: 0.08s; }
+.extreme:hover { animation: shake 0.1s infinite; }
+
+@keyframes shake {
+  0%, 100% { transform: translate(0); }
+  25% { transform: translate(2px, 1px); }
+  50% { transform: translate(-1px, -2px); }
+  75% { transform: translate(1px, -1px); }
+}

package/components/buttons/chaos-button/index.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import styles from './chaos-button.module.css';
+
+export interface ChaosButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Chaos level */
+  chaos?: 'mild' | 'medium' | 'extreme';
+  /** Button variant */
+  variant?: 'solid' | 'outline' | 'broken';
+  /** Accent color */
+  accentColor?: string;
+}
+
+export const ChaosButton = forwardRef<HTMLButtonElement, ChaosButtonProps>(
+  (
+    {
+      children,
+      chaos = 'medium',
+      variant = 'solid',
+      accentColor = '#ff0040',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={`${styles.button} ${styles[chaos]} ${styles[variant]} ${className || ''}`}
+        style={{ '--accent': accentColor, ...style } as React.CSSProperties}
+        {...props}
+      >
+        {/* Debris */}
+        <span className={styles.debris1} />
+        <span className={styles.debris2} />
+        <span className={styles.debris3} />
+        <span className={styles.debris4} />
+        
+        {/* Glitch slice */}
+        <span className={styles.slice} />
+        
+        {/* Noise */}
+        <span className={styles.noise} />
+        
+        {/* Content */}
+        <span className={styles.content}>{children}</span>
+        
+        {/* Ghost layers */}
+        <span className={styles.ghost1}>{children}</span>
+        <span className={styles.ghost2}>{children}</span>
+      </button>
+    );
+  }
+);
+
+ChaosButton.displayName = 'ChaosButton';
+
+export default ChaosButton;

package/components/buttons/glitch-button/glitch-button.module.css

@@ -0,0 +1,197 @@
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.1s;
+  --glitch-color: #ff0040;
+  --glitch-color-alt: #00ffff;
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+/* Variants */
+.default {
+  background: #0a0a0a;
+  color: #fafafa;
+  border: 1px solid #333;
+}
+
+.outline {
+  background: transparent;
+  color: #fafafa;
+  border: 2px solid currentColor;
+}
+
+.ghost {
+  background: transparent;
+  color: #fafafa;
+  border: none;
+}
+
+/* Content layer */
+.content {
+  position: relative;
+  z-index: 3;
+}
+
+/* Glitch layers */
+.glitchLayer,
+.glitchLayerAlt {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.glitchLayer {
+  color: var(--glitch-color);
+  z-index: 1;
+}
+
+.glitchLayerAlt {
+  color: var(--glitch-color-alt);
+  z-index: 2;
+}
+
+/* Noise layer */
+.noiseLayer {
+  position: absolute;
+  inset: 0;
+  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: 0;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 4;
+}
+
+/* Hover states */
+.button:hover .noiseLayer {
+  opacity: 0.15;
+  animation: noise-shift 0.2s steps(5) infinite;
+}
+
+/* SUBTLE hover */
+.subtle:hover .glitchLayer {
+  opacity: 0.5;
+  animation: glitch-subtle 0.5s infinite;
+}
+
+.subtle:hover .glitchLayerAlt {
+  opacity: 0.3;
+  animation: glitch-subtle-alt 0.5s infinite;
+}
+
+@keyframes glitch-subtle {
+  0%, 100% { transform: translate(0); clip-path: inset(0 0 70% 0); }
+  25% { transform: translate(-1px, 1px); clip-path: inset(20% 0 50% 0); }
+  50% { transform: translate(1px, -1px); clip-path: inset(40% 0 30% 0); }
+  75% { transform: translate(-1px, -1px); clip-path: inset(60% 0 10% 0); }
+}
+
+@keyframes glitch-subtle-alt {
+  0%, 100% { transform: translate(0); clip-path: inset(70% 0 0 0); }
+  25% { transform: translate(1px, -1px); clip-path: inset(50% 0 20% 0); }
+  50% { transform: translate(-1px, 1px); clip-path: inset(30% 0 40% 0); }
+  75% { transform: translate(1px, 1px); clip-path: inset(10% 0 60% 0); }
+}
+
+/* MEDIUM hover */
+.medium:hover .glitchLayer {
+  opacity: 0.7;
+  animation: glitch-medium 0.2s infinite;
+}
+
+.medium:hover .glitchLayerAlt {
+  opacity: 0.5;
+  animation: glitch-medium-alt 0.2s infinite;
+}
+
+@keyframes glitch-medium {
+  0%, 100% { transform: translate(0); clip-path: inset(0 0 60% 0); }
+  20% { transform: translate(-2px, 2px); clip-path: inset(10% 0 50% 0); }
+  40% { transform: translate(2px, -2px); clip-path: inset(30% 0 30% 0); }
+  60% { transform: translate(-2px, -2px); clip-path: inset(50% 0 10% 0); }
+  80% { transform: translate(2px, 2px); clip-path: inset(70% 0 0 0); }
+}
+
+@keyframes glitch-medium-alt {
+  0%, 100% { transform: translate(0); clip-path: inset(60% 0 0 0); }
+  20% { transform: translate(2px, -2px); clip-path: inset(50% 0 10% 0); }
+  40% { transform: translate(-2px, 2px); clip-path: inset(30% 0 30% 0); }
+  60% { transform: translate(2px, 2px); clip-path: inset(10% 0 50% 0); }
+  80% { transform: translate(-2px, -2px); clip-path: inset(0 0 70% 0); }
+}
+
+/* INTENSE hover */
+.intense:hover .glitchLayer {
+  opacity: 0.9;
+  animation: glitch-intense 0.1s infinite;
+}
+
+.intense:hover .glitchLayerAlt {
+  opacity: 0.7;
+  animation: glitch-intense-alt 0.1s infinite;
+}
+
+.intense:hover {
+  animation: button-shake 0.1s infinite;
+}
+
+@keyframes glitch-intense {
+  0% { transform: translate(0); clip-path: inset(0 0 50% 0); }
+  10% { transform: translate(-3px, 3px); clip-path: inset(5% 0 45% 0); }
+  20% { transform: translate(3px, -3px); clip-path: inset(15% 0 35% 0); }
+  30% { transform: translate(-3px, -3px); clip-path: inset(25% 0 25% 0); }
+  40% { transform: translate(3px, 3px); clip-path: inset(35% 0 15% 0); }
+  50% { transform: translate(-3px, 0); clip-path: inset(45% 0 5% 0); }
+  60% { transform: translate(3px, 0); clip-path: inset(55% 0 0 0); }
+  70% { transform: translate(0, 3px); clip-path: inset(65% 0 0 0); }
+  80% { transform: translate(0, -3px); clip-path: inset(75% 0 0 0); }
+  90% { transform: translate(-3px, 3px); clip-path: inset(85% 0 0 0); }
+  100% { transform: translate(0); clip-path: inset(95% 0 0 0); }
+}
+
+@keyframes glitch-intense-alt {
+  0% { transform: translate(0); clip-path: inset(50% 0 0 0); }
+  10% { transform: translate(3px, -3px); clip-path: inset(45% 0 5% 0); }
+  20% { transform: translate(-3px, 3px); clip-path: inset(35% 0 15% 0); }
+  30% { transform: translate(3px, 3px); clip-path: inset(25% 0 25% 0); }
+  40% { transform: translate(-3px, -3px); clip-path: inset(15% 0 35% 0); }
+  50% { transform: translate(3px, 0); clip-path: inset(5% 0 45% 0); }
+  60% { transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); }
+  70% { transform: translate(0, -3px); clip-path: inset(0 0 65% 0); }
+  80% { transform: translate(0, 3px); clip-path: inset(0 0 75% 0); }
+  90% { transform: translate(3px, -3px); clip-path: inset(0 0 85% 0); }
+  100% { transform: translate(0); clip-path: inset(0 0 95% 0); }
+}
+
+@keyframes button-shake {
+  0%, 100% { transform: translate(0); }
+  25% { transform: translate(1px, 1px); }
+  50% { transform: translate(-1px, -1px); }
+  75% { transform: translate(1px, -1px); }
+}
+
+@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); }
+}

package/components/buttons/glitch-button/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import styles from './glitch-button.module.css';
+
+export interface GlitchButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Button variant */
+  variant?: 'default' | 'outline' | 'ghost';
+  /** Glitch intensity on hover */
+  intensity?: 'subtle' | 'medium' | 'intense';
+  /** Primary glitch color */
+  glitchColor?: string;
+  /** Secondary glitch color */
+  glitchColorAlt?: string;
+}
+
+export const GlitchButton = forwardRef<HTMLButtonElement, GlitchButtonProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      intensity = 'medium',
+      glitchColor = '#ff0040',
+      glitchColorAlt = '#00ffff',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={`${styles.button} ${styles[variant]} ${styles[intensity]} ${className || ''}`}
+        style={{
+          '--glitch-color': glitchColor,
+          '--glitch-color-alt': glitchColorAlt,
+          ...style,
+        } as React.CSSProperties}
+        {...props}
+      >
+        <span className={styles.content}>{children}</span>
+        <span className={styles.glitchLayer} aria-hidden="true">{children}</span>
+        <span className={styles.glitchLayerAlt} aria-hidden="true">{children}</span>
+        <span className={styles.noiseLayer} aria-hidden="true" />
+      </button>
+    );
+  }
+);
+
+GlitchButton.displayName = 'GlitchButton';
+
+export default GlitchButton;

package/components/effects/cursor-follower/cursor-follower.module.css

@@ -0,0 +1,50 @@
+.cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 99999;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.visible {
+  opacity: 1;
+}
+
+.ring {
+  border-radius: 50%;
+  border: 2px solid currentColor;
+}
+
+.dot {
+  border-radius: 50%;
+}
+
+.crosshair {
+  background: transparent;
+  position: relative;
+}
+
+.crosshair::before,
+.crosshair::after {
+  content: '';
+  position: absolute;
+  background: currentColor;
+}
+
+.crosshair::before {
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  transform: translateY(-50%);
+}
+
+.crosshair::after {
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  transform: translateX(-50%);
+}

package/components/effects/cursor-follower/index.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import styles from './cursor-follower.module.css';
+
+export interface CursorFollowerProps {
+  /** Cursor size in pixels */
+  size?: number;
+  /** Cursor color */
+  color?: string;
+  /** Follow delay (higher = smoother but slower) */
+  delay?: number;
+  /** Cursor style */
+  variant?: 'ring' | 'dot' | 'crosshair';
+  /** Mix blend mode */
+  blendMode?: 'difference' | 'exclusion' | 'normal';
+}
+
+export function CursorFollower({
+  size = 20,
+  color = '#ff0040',
+  delay = 0.1,
+  variant = 'ring',
+  blendMode = 'difference',
+}: CursorFollowerProps) {
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const position = useRef({ x: 0, y: 0 });
+  const target = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const cursor = cursorRef.current;
+    if (!cursor) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      target.current = { x: e.clientX, y: e.clientY };
+      if (!isVisible) setIsVisible(true);
+    };
+
+    const handleMouseLeave = () => setIsVisible(false);
+    const handleMouseEnter = () => setIsVisible(true);
+
+    let animationId: number;
+
+    const animate = () => {
+      position.current.x += (target.current.x - position.current.x) * (1 - delay);
+      position.current.y += (target.current.y - position.current.y) * (1 - delay);
+
+      cursor.style.transform = `translate(${position.current.x - size / 2}px, ${position.current.y - size / 2}px)`;
+
+      animationId = requestAnimationFrame(animate);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseleave', handleMouseLeave);
+    document.addEventListener('mouseenter', handleMouseEnter);
+    animationId = requestAnimationFrame(animate);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseleave', handleMouseLeave);
+      document.removeEventListener('mouseenter', handleMouseEnter);
+      cancelAnimationFrame(animationId);
+    };
+  }, [delay, size, isVisible]);
+
+  return (
+    <div
+      ref={cursorRef}
+      className={`${styles.cursor} ${styles[variant]} ${isVisible ? styles.visible : ''}`}
+      style={{
+        width: size,
+        height: size,
+        borderColor: color,
+        backgroundColor: variant === 'dot' ? color : 'transparent',
+        mixBlendMode: blendMode,
+      }}
+      aria-hidden="true"
+    />
+  );
+}
+
+export default CursorFollower;

package/components/effects/screen-distortion/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './screen-distortion.module.css';
+
+export interface ScreenDistortionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Distortion type */
+  type?: 'wave' | 'glitch' | 'chromatic' | 'noise';
+  /** Distortion intensity */
+  intensity?: 'subtle' | 'medium' | 'intense';
+  /** Animation speed */
+  speed?: 'slow' | 'normal' | 'fast';
+  /** Only show on hover (requires parent with :hover) */
+  hoverOnly?: boolean;
+  /** Fixed or absolute positioning */
+  position?: 'fixed' | 'absolute';
+}
+
+export const ScreenDistortion = forwardRef<HTMLDivElement, ScreenDistortionProps>(
+  (
+    {
+      type = 'glitch',
+      intensity = 'medium',
+      speed = 'normal',
+      hoverOnly = false,
+      position = 'fixed',
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${styles.distortion} 
+          ${styles[type]} 
+          ${styles[intensity]} 
+          ${styles[speed]}
+          ${hoverOnly ? styles.hoverOnly : ''}
+          ${className || ''}
+        `}
+        style={{ position, ...style }}
+        aria-hidden="true"
+        {...props}
+      />
+    );
+  }
+);
+
+ScreenDistortion.displayName = 'ScreenDistortion';
+
+export default ScreenDistortion;