@oalacea/chaosui 0.4.0 → 0.5.1

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

package/text/char-glitch/css/index.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useCallback, useRef } from 'react';
+import styles from './char-glitch.module.css';
+
+export interface CharGlitchProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Text to display */
+  children: string;
+  /** Glitch intensity */
+  intensity?: 'subtle' | 'medium' | 'intense';
+  /** Visual variant */
+  variant?: 'blood' | 'cyber' | 'matrix' | 'corrupt';
+  /** Trigger mode */
+  mode?: 'random' | 'hover' | 'continuous' | 'wave';
+  /** Interval between random glitches in ms */
+  interval?: number;
+  /** Characters to use for scramble effect */
+  glitchChars?: string;
+  /** Enable scramble reveal effect */
+  scramble?: boolean;
+}
+
+const GLITCH_CHARS = '!@#$%^&*()_+-=[]{}|;:,.<>?/~`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+export const CharGlitch = forwardRef<HTMLSpanElement, CharGlitchProps>(
+  (
+    {
+      children,
+      intensity = 'medium',
+      variant = 'blood',
+      mode = 'random',
+      interval = 100,
+      glitchChars = GLITCH_CHARS,
+      scramble = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [glitchingIndices, setGlitchingIndices] = useState<Set<number>>(new Set());
+    const [scrambledChars, setScrambledChars] = useState<string[]>([]);
+    const [revealed, setRevealed] = useState<boolean[]>([]);
+    const intervalRef = useRef<NodeJS.Timeout>();
+
+    const triggerGlitch = useCallback((index: number) => {
+      setGlitchingIndices(prev => new Set(prev).add(index));
+      setTimeout(() => {
+        setGlitchingIndices(prev => {
+          const next = new Set(prev);
+          next.delete(index);
+          return next;
+        });
+      }, intensity === 'subtle' ? 300 : intensity === 'intense' ? 80 : 150);
+    }, [intensity]);
+
+    useEffect(() => {
+      if (scramble) {
+        setScrambledChars(children.split('').map(() => 
+          glitchChars[Math.floor(Math.random() * glitchChars.length)]
+        ));
+        setRevealed(new Array(children.length).fill(false));
+        
+        let index = 0;
+        const revealInterval = setInterval(() => {
+          if (index < children.length) {
+            setRevealed(prev => {
+              const next = [...prev];
+              next[index] = true;
+              return next;
+            });
+            index++;
+          } else {
+            clearInterval(revealInterval);
+          }
+        }, 50);
+        
+        return () => clearInterval(revealInterval);
+      }
+    }, [children, scramble, glitchChars]);
+
+    useEffect(() => {
+      if (mode === 'random' && !scramble) {
+        intervalRef.current = setInterval(() => {
+          const randomIndex = Math.floor(Math.random() * children.length);
+          triggerGlitch(randomIndex);
+        }, interval);
+
+        return () => {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+        };
+      }
+
+      if (mode === 'continuous' && !scramble) {
+        children.split('').forEach((_, i) => {
+          setTimeout(() => triggerGlitch(i), i * 50);
+        });
+        
+        intervalRef.current = setInterval(() => {
+          children.split('').forEach((_, i) => {
+            setTimeout(() => triggerGlitch(i), i * 50);
+          });
+        }, interval * children.length);
+
+        return () => {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+        };
+      }
+
+      if (mode === 'wave' && !scramble) {
+        let waveIndex = 0;
+        intervalRef.current = setInterval(() => {
+          triggerGlitch(waveIndex % children.length);
+          waveIndex++;
+        }, interval);
+
+        return () => {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+        };
+      }
+    }, [mode, interval, children, triggerGlitch, scramble]);
+
+    const containerClasses = [
+      styles.container,
+      styles[intensity],
+      styles[variant],
+      mode === 'hover' && styles.hover,
+      scramble && styles.scramble,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span ref={ref} className={containerClasses} {...props}>
+        {children.split('').map((char, i) => {
+          const isGlitching = glitchingIndices.has(i);
+          const displayChar = scramble && !revealed[i] ? scrambledChars[i] : char;
+          
+          return (
+            <span
+              key={i}
+              className={`${styles.char} ${isGlitching ? styles.glitching : ''} ${scramble && !revealed[i] ? styles.scrambling : ''}`}
+              data-char={displayChar}
+            >
+              {displayChar}
+            </span>
+          );
+        })}
+      </span>
+    );
+  }
+);
+
+CharGlitch.displayName = 'CharGlitch';
+export default CharGlitch;

package/text/char-glitch/tailwind/index.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useCallback, useRef } from 'react';
+
+export interface CharGlitchProps extends HTMLAttributes<HTMLSpanElement> {
+  children: string;
+  intensity?: 'subtle' | 'medium' | 'intense';
+  variant?: 'blood' | 'cyber' | 'matrix' | 'corrupt';
+  mode?: 'random' | 'hover' | 'continuous' | 'wave';
+  interval?: number;
+  glitchChars?: string;
+  scramble?: boolean;
+}
+
+const GLITCH_CHARS = '!@#$%^&*()_+-=[]{}|;:,.<>?/~`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+const variantColors = {
+  blood: { primary: 'text-rose-500', shadow: 'drop-shadow-[0_0_2px_#ff0040]' },
+  cyber: { primary: 'text-cyan-400', shadow: 'drop-shadow-[0_0_2px_#00ffff]' },
+  matrix: { primary: 'text-green-400', shadow: 'drop-shadow-[0_0_2px_#00ff00]' },
+  corrupt: { primary: 'text-white', shadow: 'drop-shadow-[0_0_2px_#ffffff]' },
+};
+
+export const CharGlitch = forwardRef<HTMLSpanElement, CharGlitchProps>(
+  (
+    {
+      children,
+      intensity = 'medium',
+      variant = 'blood',
+      mode = 'random',
+      interval = 100,
+      glitchChars = GLITCH_CHARS,
+      scramble = false,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [glitchingIndices, setGlitchingIndices] = useState<Set<number>>(new Set());
+    const [scrambledChars, setScrambledChars] = useState<string[]>([]);
+    const [revealed, setRevealed] = useState<boolean[]>([]);
+    const intervalRef = useRef<NodeJS.Timeout>();
+
+    const durations = { subtle: 300, medium: 150, intense: 80 };
+
+    const triggerGlitch = useCallback((index: number) => {
+      setGlitchingIndices(prev => new Set(prev).add(index));
+      setTimeout(() => {
+        setGlitchingIndices(prev => {
+          const next = new Set(prev);
+          next.delete(index);
+          return next;
+        });
+      }, durations[intensity]);
+    }, [intensity]);
+
+    useEffect(() => {
+      if (scramble) {
+        setScrambledChars(children.split('').map(() => 
+          glitchChars[Math.floor(Math.random() * glitchChars.length)]
+        ));
+        setRevealed(new Array(children.length).fill(false));
+        
+        let index = 0;
+        const revealInterval = setInterval(() => {
+          if (index < children.length) {
+            setRevealed(prev => {
+              const next = [...prev];
+              next[index] = true;
+              return next;
+            });
+            index++;
+          } else {
+            clearInterval(revealInterval);
+          }
+        }, 50);
+        
+        return () => clearInterval(revealInterval);
+      }
+    }, [children, scramble, glitchChars]);
+
+    useEffect(() => {
+      if (mode === 'random' && !scramble) {
+        intervalRef.current = setInterval(() => {
+          const randomIndex = Math.floor(Math.random() * children.length);
+          triggerGlitch(randomIndex);
+        }, interval);
+        return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+      }
+
+      if (mode === 'wave' && !scramble) {
+        let waveIndex = 0;
+        intervalRef.current = setInterval(() => {
+          triggerGlitch(waveIndex % children.length);
+          waveIndex++;
+        }, interval);
+        return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+      }
+    }, [mode, interval, children, triggerGlitch, scramble]);
+
+    return (
+      <span ref={ref} className={`inline-block ${className}`} {...props}>
+        {children.split('').map((char, i) => {
+          const isGlitching = glitchingIndices.has(i);
+          const displayChar = scramble && !revealed[i] ? scrambledChars[i] : char;
+          const { primary, shadow } = variantColors[variant];
+          
+          return (
+            <span
+              key={i}
+              className={`inline-block relative transition-transform duration-100 ${
+                isGlitching ? `${primary} ${shadow} animate-pulse scale-110` : ''
+              } ${mode === 'hover' ? 'hover:animate-pulse hover:scale-110' : ''}`}
+              data-char={displayChar}
+            >
+              {displayChar}
+            </span>
+          );
+        })}
+      </span>
+    );
+  }
+);
+
+CharGlitch.displayName = 'CharGlitch';
+export default CharGlitch;

package/text/countdown-display/css/countdown-display.module.css

@@ -0,0 +1,179 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  font-family: 'Syne', 'Inter', sans-serif;
+  font-weight: 800;
+}
+
+.block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.value {
+  font-size: clamp(3rem, 12vw, 8rem);
+  line-height: 1;
+  letter-spacing: -0.02em;
+  position: relative;
+  background: linear-gradient(180deg, #fafafa 0%, #888 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* 3D shadow effect */
+.value::before {
+  content: attr(data-value);
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  z-index: -1;
+  background: linear-gradient(180deg, var(--accent-color, #ff0040) 0%, transparent 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  opacity: 0.5;
+}
+
+.label {
+  font-size: 0.6rem;
+  letter-spacing: 0.3em;
+  color: #444;
+  margin-top: 0.5rem;
+  text-transform: uppercase;
+  font-weight: 400;
+}
+
+.separator {
+  font-size: clamp(2rem, 8vw, 5rem);
+  font-weight: 800;
+  color: #333;
+  animation: pulseSep 1s ease-in-out infinite;
+  align-self: flex-start;
+  margin-top: 0.5rem;
+}
+
+@keyframes pulseSep {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
+/* Size variants */
+.sm .value { font-size: clamp(1.5rem, 6vw, 3rem); }
+.sm .separator { font-size: clamp(1rem, 4vw, 2rem); }
+.sm .label { font-size: 0.5rem; }
+
+.lg .value { font-size: clamp(5rem, 18vw, 12rem); }
+.lg .separator { font-size: clamp(3rem, 10vw, 7rem); }
+.lg .label { font-size: 0.7rem; }
+
+/* Variant: minimal */
+.minimal .value {
+  background: none;
+  -webkit-text-fill-color: currentColor;
+  color: #fafafa;
+}
+
+.minimal .value::before {
+  display: none;
+}
+
+/* Variant: neon */
+.neon .value {
+  background: none;
+  -webkit-text-fill-color: currentColor;
+  color: var(--accent-color, #ff0040);
+  text-shadow: 
+    0 0 10px var(--accent-color, #ff0040),
+    0 0 20px var(--accent-color, #ff0040),
+    0 0 40px var(--accent-color, #ff0040);
+}
+
+.neon .value::before {
+  display: none;
+}
+
+.neon .separator {
+  color: var(--accent-color, #ff0040);
+  text-shadow: 0 0 10px var(--accent-color, #ff0040);
+}
+
+/* Variant: brutal */
+.brutal .value {
+  background: var(--accent-color, #ff0040);
+  -webkit-text-fill-color: #0a0a0a;
+  padding: 0 0.25em;
+}
+
+.brutal .value::before {
+  display: none;
+}
+
+/* Variant: glitch */
+.glitch .value::after {
+  content: attr(data-value);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -2;
+  background: linear-gradient(180deg, #00ffff 0%, transparent 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  opacity: 0;
+  animation: glitchOffset 3s infinite;
+}
+
+@keyframes glitchOffset {
+  0%, 90%, 100% { opacity: 0; transform: translate(0); }
+  92% { opacity: 0.8; transform: translate(-3px, 0); }
+  94% { opacity: 0.8; transform: translate(3px, 0); }
+}
+
+/* Flip animation on change */
+.flip .value {
+  perspective: 500px;
+}
+
+.flip .value.changing {
+  animation: flipValue 0.3s ease-in-out;
+}
+
+@keyframes flipValue {
+  0% { transform: rotateX(0deg); }
+  50% { transform: rotateX(-90deg); }
+  100% { transform: rotateX(0deg); }
+}
+
+/* Urgency states */
+.urgent .value {
+  animation: urgentPulse 0.5s ease-in-out infinite;
+}
+
+@keyframes urgentPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+
+.urgent .separator {
+  color: var(--accent-color, #ff0040);
+  animation: pulseSep 0.3s ease-in-out infinite;
+}
+
+/* Hide labels option */
+.hideLabels .label {
+  display: none;
+}
+
+/* Compact mode */
+.compact {
+  gap: 0.5rem;
+}
+
+.compact .separator {
+  margin: 0 0.25rem;
+}