@oalacea/chaosui 0.4.0 → 0.5.0

package/components/text/ascii-art/tailwind/index.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
+
+export interface AsciiArtProps extends HTMLAttributes<HTMLPreElement> {
+  children: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'default' | 'blood' | 'cyber' | 'matrix' | 'amber' | 'ghost' | 'gradient';
+  animation?: 'none' | 'typing' | 'reveal' | 'glitch' | 'flicker' | 'pulse';
+  scanlines?: boolean;
+  bordered?: boolean;
+  title?: string;
+  revealDelay?: number;
+  color?: string;
+}
+
+const sizeClasses = {
+  xs: 'text-[0.5rem]',
+  sm: 'text-[0.65rem]',
+  md: 'text-[0.8rem]',
+  lg: 'text-base',
+  xl: 'text-xl',
+};
+
+const variantClasses = {
+  default: '',
+  blood: 'text-rose-500 drop-shadow-[0_0_5px_#ff004080]',
+  cyber: 'text-cyan-400 drop-shadow-[0_0_5px_#00ffff80]',
+  matrix: 'text-green-400 drop-shadow-[0_0_5px_#00ff0080]',
+  amber: 'text-amber-500 drop-shadow-[0_0_5px_#ffaa0080]',
+  ghost: 'text-gray-500 opacity-70',
+  gradient: 'bg-gradient-to-b from-rose-500 via-cyan-400 to-green-400 bg-clip-text text-transparent',
+};
+
+const animationClasses = {
+  none: '',
+  typing: 'overflow-hidden whitespace-nowrap animate-[typeIn_2s_steps(40,end)_forwards]',
+  reveal: '',
+  glitch: 'relative',
+  flicker: 'animate-pulse',
+  pulse: 'animate-[pulse_2s_ease-in-out_infinite]',
+};
+
+export const AsciiArt = forwardRef<HTMLPreElement, AsciiArtProps>(
+  (
+    {
+      children,
+      size = 'md',
+      variant = 'default',
+      animation = 'none',
+      scanlines = false,
+      bordered = false,
+      title,
+      revealDelay = 100,
+      color,
+      className = '',
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [revealedLines, setRevealedLines] = useState<number>(0);
+    const lines = children.split('\n');
+
+    useEffect(() => {
+      if (animation === 'reveal') {
+        setRevealedLines(0);
+        let lineIndex = 0;
+        
+        const interval = setInterval(() => {
+          if (lineIndex < lines.length) {
+            setRevealedLines(lineIndex + 1);
+            lineIndex++;
+          } else {
+            clearInterval(interval);
+          }
+        }, revealDelay);
+
+        return () => clearInterval(interval);
+      }
+    }, [animation, lines.length, revealDelay, children]);
+
+    const renderContent = () => {
+      if (animation === 'reveal') {
+        return lines.map((line, i) => (
+          <span
+            key={i}
+            className="block transition-all duration-300 ease-out"
+            style={{
+              opacity: i < revealedLines ? 1 : 0,
+              transform: i < revealedLines ? 'translateX(0)' : 'translateX(-10px)',
+            }}
+          >
+            {line}
+            {'\n'}
+          </span>
+        ));
+      }
+      return children;
+    };
+
+    return (
+      <pre
+        ref={ref}
+        className={`font-mono whitespace-pre leading-tight overflow-x-auto ${sizeClasses[size]} ${variantClasses[variant]} ${animationClasses[animation]} ${
+          bordered ? 'border border-current p-4 relative' : ''
+        } ${scanlines ? 'relative after:absolute after:inset-0 after:bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.1)_2px,rgba(0,0,0,0.1)_4px)] after:pointer-events-none' : ''
+        } ${className}`}
+        style={{ color, ...style }}
+        {...props}
+      >
+        {bordered && title && (
+          <span className="absolute -top-2.5 left-4 bg-inherit px-2 text-[0.8em]">
+            ┌{title}┐
+          </span>
+        )}
+        {renderContent()}
+      </pre>
+    );
+  }
+);
+
+AsciiArt.displayName = 'AsciiArt';
+export default AsciiArt;

package/components/text/blood-drip/css/blood-drip.module.css

@@ -0,0 +1,142 @@
+.container {
+  position: relative;
+  display: inline-block;
+  --drip-color: #ff0040;
+}
+
+.char {
+  display: inline-block;
+  position: relative;
+}
+
+/* Drip elements */
+.drip {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 0;
+  background: var(--drip-color);
+  border-radius: 0 0 50% 50%;
+  animation: drip var(--drip-duration, 2s) ease-in infinite;
+  animation-delay: var(--drip-delay, 0s);
+}
+
+.drip::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 8px;
+  height: 8px;
+  background: var(--drip-color);
+  border-radius: 50%;
+  opacity: 0;
+  animation: droplet var(--drip-duration, 2s) ease-in infinite;
+  animation-delay: var(--drip-delay, 0s);
+}
+
+@keyframes drip {
+  0% { height: 0; opacity: 1; }
+  20% { height: 20px; opacity: 1; }
+  80% { height: 60px; opacity: 1; }
+  100% { height: 80px; opacity: 0; }
+}
+
+@keyframes droplet {
+  0%, 70% { opacity: 0; transform: translateX(-50%) scale(1); }
+  75% { opacity: 1; transform: translateX(-50%) scale(1); }
+  100% { opacity: 0; transform: translateX(-50%) scale(0) translateY(20px); }
+}
+
+/* Multiple drips per character */
+.drip.secondary {
+  left: 30%;
+  animation-delay: calc(var(--drip-delay, 0s) + 0.5s);
+}
+
+.drip.tertiary {
+  left: 70%;
+  animation-delay: calc(var(--drip-delay, 0s) + 1s);
+}
+
+/* Intensity levels */
+.light .drip {
+  width: 2px;
+}
+
+.light .drip::after {
+  width: 4px;
+  height: 4px;
+}
+
+.heavy .drip {
+  width: 6px;
+}
+
+.heavy .drip::after {
+  width: 12px;
+  height: 12px;
+}
+
+/* Color variants */
+.blood { --drip-color: #ff0040; }
+.acid { --drip-color: #aaff00; }
+.cyber { --drip-color: #00ffff; }
+.void { --drip-color: #0a0a0a; }
+.chrome { --drip-color: linear-gradient(180deg, #888 0%, #fff 50%, #888 100%); }
+
+/* Text glow matching drip */
+.glowing .char {
+  text-shadow: 0 0 10px var(--drip-color), 0 0 20px var(--drip-color);
+}
+
+/* Melting effect */
+.melting .char {
+  animation: melt 3s ease-in-out infinite;
+  animation-delay: var(--char-delay, 0s);
+}
+
+@keyframes melt {
+  0%, 100% { transform: scaleY(1); transform-origin: top; }
+  50% { transform: scaleY(1.1); transform-origin: top; }
+}
+
+/* Pooling effect at bottom */
+.pool {
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  background: var(--drip-color);
+  border-radius: 50%;
+  opacity: 0.5;
+  filter: blur(5px);
+  animation: poolGrow 3s ease-out forwards;
+}
+
+@keyframes poolGrow {
+  0% { transform: scaleX(0); opacity: 0; }
+  100% { transform: scaleX(1); opacity: 0.5; }
+}
+
+/* Hover pause */
+.pauseOnHover:hover .drip {
+  animation-play-state: paused;
+}
+
+/* Static drip (no animation) */
+.static .drip {
+  animation: none;
+  height: 40px;
+  opacity: 1;
+}
+
+.static .drip::after {
+  animation: none;
+  opacity: 1;
+  bottom: -4px;
+}

package/components/text/blood-drip/css/index.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useMemo } from 'react';
+import styles from './blood-drip.module.css';
+
+export interface BloodDripProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Text to display */
+  children: string;
+  /** Drip color variant */
+  variant?: 'blood' | 'acid' | 'cyber' | 'void' | 'chrome';
+  /** Drip intensity */
+  intensity?: 'light' | 'medium' | 'heavy';
+  /** Number of drips per character (1-3) */
+  dripsPerChar?: 1 | 2 | 3;
+  /** Base drip duration in seconds */
+  duration?: number;
+  /** Add text glow effect */
+  glowing?: boolean;
+  /** Add melting animation */
+  melting?: boolean;
+  /** Show pool at bottom */
+  showPool?: boolean;
+  /** Pause animation on hover */
+  pauseOnHover?: boolean;
+  /** Static drips (no animation) */
+  static?: boolean;
+  /** Custom drip color */
+  dripColor?: string;
+  /** Probability of drip per character (0-1) */
+  dripProbability?: number;
+}
+
+export const BloodDrip = forwardRef<HTMLSpanElement, BloodDripProps>(
+  (
+    {
+      children,
+      variant = 'blood',
+      intensity = 'medium',
+      dripsPerChar = 1,
+      duration = 2,
+      glowing = false,
+      melting = false,
+      showPool = false,
+      pauseOnHover = false,
+      static: isStatic = false,
+      dripColor,
+      dripProbability = 0.7,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const chars = children.split('');
+    
+    const dripMap = useMemo(() => {
+      return chars.map(() => Math.random() < dripProbability);
+    }, [chars.length, dripProbability]);
+
+    const containerClasses = [
+      styles.container,
+      styles[variant],
+      styles[intensity],
+      glowing && styles.glowing,
+      melting && styles.melting,
+      pauseOnHover && styles.pauseOnHover,
+      isStatic && styles.static,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span
+        ref={ref}
+        className={containerClasses}
+        style={{ 
+          '--drip-color': dripColor,
+          ...style 
+        } as React.CSSProperties}
+        {...props}
+      >
+        {chars.map((char, i) => {
+          const hasDrip = dripMap[i] && char !== ' ';
+          const delay = Math.random() * 2;
+          
+          return (
+            <span
+              key={i}
+              className={styles.char}
+              style={{ 
+                '--char-delay': `${i * 0.1}s`,
+                '--drip-delay': `${delay}s`,
+                '--drip-duration': `${duration}s`
+              } as React.CSSProperties}
+            >
+              {char === ' ' ? '\u00A0' : char}
+              {hasDrip && (
+                <>
+                  <span className={styles.drip} />
+                  {dripsPerChar >= 2 && <span className={`${styles.drip} ${styles.secondary}`} />}
+                  {dripsPerChar >= 3 && <span className={`${styles.drip} ${styles.tertiary}`} />}
+                </>
+              )}
+            </span>
+          );
+        })}
+        {showPool && <span className={styles.pool} />}
+      </span>
+    );
+  }
+);
+
+BloodDrip.displayName = 'BloodDrip';
+export default BloodDrip;

package/components/text/blood-drip/tailwind/index.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useMemo } from 'react';
+
+export interface BloodDripProps extends HTMLAttributes<HTMLSpanElement> {
+  children: string;
+  variant?: 'blood' | 'acid' | 'cyber' | 'void' | 'chrome';
+  intensity?: 'light' | 'medium' | 'heavy';
+  dripsPerChar?: 1 | 2 | 3;
+  duration?: number;
+  glowing?: boolean;
+  melting?: boolean;
+  showPool?: boolean;
+  pauseOnHover?: boolean;
+  static?: boolean;
+  dripColor?: string;
+  dripProbability?: number;
+}
+
+const variantColors = {
+  blood: '#ff0040',
+  acid: '#aaff00',
+  cyber: '#00ffff',
+  void: '#0a0a0a',
+  chrome: '#888888',
+};
+
+const dripWidths = { light: 2, medium: 4, heavy: 6 };
+const dropletSizes = { light: 4, medium: 8, heavy: 12 };
+
+export const BloodDrip = forwardRef<HTMLSpanElement, BloodDripProps>(
+  (
+    {
+      children,
+      variant = 'blood',
+      intensity = 'medium',
+      dripsPerChar = 1,
+      duration = 2,
+      glowing = false,
+      melting = false,
+      showPool = false,
+      pauseOnHover = false,
+      static: isStatic = false,
+      dripColor,
+      dripProbability = 0.7,
+      className = '',
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const chars = children.split('');
+    const color = dripColor || variantColors[variant];
+    const dripWidth = dripWidths[intensity];
+    const dropletSize = dropletSizes[intensity];
+    
+    const dripMap = useMemo(() => {
+      return chars.map(() => Math.random() < dripProbability);
+    }, [chars.length, dripProbability]);
+
+    const glowStyle = glowing ? { textShadow: `0 0 10px ${color}, 0 0 20px ${color}` } : {};
+
+    return (
+      <span
+        ref={ref}
+        className={`relative inline-block ${pauseOnHover ? 'hover:[&_.drip]:pause' : ''} ${className}`}
+        style={{ ...glowStyle, ...style }}
+        {...props}
+      >
+        {chars.map((char, i) => {
+          const hasDrip = dripMap[i] && char !== ' ';
+          const delay = Math.random() * 2;
+          
+          return (
+            <span
+              key={i}
+              className={`inline-block relative ${melting ? 'animate-pulse' : ''}`}
+            >
+              {char === ' ' ? '\u00A0' : char}
+              {hasDrip && (
+                <span
+                  className="drip absolute left-1/2 top-full -translate-x-1/2"
+                  style={{
+                    width: dripWidth,
+                    height: isStatic ? 40 : 0,
+                    background: color,
+                    borderRadius: '0 0 50% 50%',
+                    animation: isStatic ? 'none' : `drip ${duration}s ease-in infinite`,
+                    animationDelay: `${delay}s`,
+                  }}
+                >
+                  <span
+                    className="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-full"
+                    style={{
+                      width: dropletSize,
+                      height: dropletSize,
+                      background: color,
+                      opacity: isStatic ? 1 : 0,
+                      animation: isStatic ? 'none' : `droplet ${duration}s ease-in infinite`,
+                      animationDelay: `${delay}s`,
+                    }}
+                  />
+                </span>
+              )}
+            </span>
+          );
+        })}
+        {showPool && (
+          <span
+            className="absolute -bottom-5 left-0 right-0 h-2.5 rounded-full opacity-50 blur-sm"
+            style={{ background: color }}
+          />
+        )}
+        <style>{`
+          @keyframes drip {
+            0% { height: 0; opacity: 1; }
+            20% { height: 20px; opacity: 1; }
+            80% { height: 60px; opacity: 1; }
+            100% { height: 80px; opacity: 0; }
+          }
+          @keyframes droplet {
+            0%, 70% { opacity: 0; transform: translateX(-50%) scale(1); }
+            75% { opacity: 1; transform: translateX(-50%) scale(1); }
+            100% { opacity: 0; transform: translateX(-50%) scale(0) translateY(20px); }
+          }
+        `}</style>
+      </span>
+    );
+  }
+);
+
+BloodDrip.displayName = 'BloodDrip';
+export default BloodDrip;

package/components/text/char-glitch/css/char-glitch.module.css

@@ -0,0 +1,124 @@
+.container {
+  display: inline-block;
+  position: relative;
+}
+
+.char {
+  display: inline-block;
+  position: relative;
+  transition: transform 0.1s ease-out;
+}
+
+.char.glitching {
+  animation: charGlitch 0.15s ease-in-out;
+}
+
+.char::before,
+.char::after {
+  content: attr(data-char);
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.char::before {
+  color: #ff0040;
+  z-index: -1;
+}
+
+.char::after {
+  color: #00ffff;
+  z-index: -2;
+}
+
+.char.glitching::before {
+  animation: charLayer1 0.15s ease-in-out;
+  opacity: 0.8;
+}
+
+.char.glitching::after {
+  animation: charLayer2 0.15s ease-in-out;
+  opacity: 0.8;
+}
+
+/* Intensity levels */
+.subtle .char.glitching {
+  animation-duration: 0.3s;
+}
+
+.intense .char.glitching {
+  animation-duration: 0.08s;
+}
+
+/* Variants */
+.blood .char::before { color: #ff0040; }
+.blood .char::after { color: #880020; }
+
+.cyber .char::before { color: #00ffff; }
+.cyber .char::after { color: #ff00ff; }
+
+.matrix .char::before { color: #00ff00; }
+.matrix .char::after { color: #008800; }
+
+.corrupt .char::before { color: #ffffff; }
+.corrupt .char::after { color: #000000; }
+
+/* Hover mode */
+.hover .char:hover {
+  animation: charGlitch 0.15s ease-in-out infinite;
+}
+
+.hover .char:hover::before,
+.hover .char:hover::after {
+  opacity: 0.8;
+}
+
+.hover .char:hover::before {
+  animation: charLayer1 0.15s ease-in-out infinite;
+}
+
+.hover .char:hover::after {
+  animation: charLayer2 0.15s ease-in-out infinite;
+}
+
+@keyframes charGlitch {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 1px); }
+  40% { transform: translate(2px, -1px); }
+  60% { transform: translate(-1px, -1px); }
+  80% { transform: translate(1px, 1px); }
+}
+
+@keyframes charLayer1 {
+  0%, 100% { transform: translate(0); opacity: 0; }
+  20% { transform: translate(-3px, 0); opacity: 0.8; }
+  40% { transform: translate(3px, 0); opacity: 0.6; }
+  60% { transform: translate(-2px, 0); opacity: 0.8; }
+  80% { transform: translate(2px, 0); opacity: 0.6; }
+}
+
+@keyframes charLayer2 {
+  0%, 100% { transform: translate(0); opacity: 0; }
+  20% { transform: translate(3px, 0); opacity: 0.6; }
+  40% { transform: translate(-3px, 0); opacity: 0.8; }
+  60% { transform: translate(2px, 0); opacity: 0.6; }
+  80% { transform: translate(-2px, 0); opacity: 0.8; }
+}
+
+/* Scramble effect */
+.scramble .char {
+  font-family: monospace;
+}
+
+.scramble .char.scrambling {
+  color: transparent;
+}
+
+.scramble .char.scrambling::before {
+  color: inherit;
+  opacity: 1;
+  animation: none;
+  transform: none;
+}