@oalacea/chaosui 0.1.0 → 0.5.0

package/components/cyber/cyber-slider/tailwind/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface CyberSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  showValue?: boolean;
+}
+
+const variantStyles = {
+  cyan: { fill: 'bg-cyan-400 shadow-[0_0_10px_#00f0ff]', text: 'text-cyan-400' },
+  pink: { fill: 'bg-fuchsia-500 shadow-[0_0_10px_#ff00ff]', text: 'text-fuchsia-500' },
+  green: { fill: 'bg-emerald-400 shadow-[0_0_10px_#00ff88]', text: 'text-emerald-400' },
+  purple: { fill: 'bg-purple-500 shadow-[0_0_10px_#a855f7]', text: 'text-purple-500' },
+};
+
+export const CyberSlider = forwardRef<HTMLDivElement, CyberSliderProps>(
+  ({ value, onChange, min = 0, max = 100, step = 1, variant = 'cyan', showValue = false, className = '', ...props }, ref) => {
+    const percentage = ((value - min) / (max - min)) * 100;
+    const colors = variantStyles[variant];
+    return (
+      <div ref={ref} className={`flex items-center gap-3 ${className}`} {...props}>
+        <div className="relative flex-1 h-2 bg-white/10 border border-white/20">
+          <div className={`absolute top-0 left-0 h-full ${colors.fill}`} style={{ width: `${percentage}%` }} />
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          />
+          <div
+            className={`absolute top-1/2 w-4 h-4 ${colors.fill} border-2 border-[#0a0a0f] pointer-events-none`}
+            style={{ left: `${percentage}%`, transform: 'translate(-50%, -50%) rotate(45deg)' }}
+          />
+        </div>
+        {showValue && <span className={`min-w-[40px] font-['Orbitron',sans-serif] text-sm font-bold ${colors.text} text-right`}>{value}</span>}
+      </div>
+    );
+  }
+);
+
+CyberSlider.displayName = 'CyberSlider';
+export default CyberSlider;

package/components/cyber/cyber-tooltip/css/cyber-tooltip.module.css

@@ -0,0 +1,67 @@
+.tooltip {
+  --tooltip-color: #00f0ff;
+  position: relative;
+  display: inline-block;
+}
+
+.cyan { --tooltip-color: #00f0ff; }
+.pink { --tooltip-color: #ff00ff; }
+.green { --tooltip-color: #00ff88; }
+
+.content {
+  position: absolute;
+  z-index: 100;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  font-size: 0.75rem;
+  color: #fff;
+  background: rgba(10, 10, 15, 0.95);
+  border: 1px solid var(--tooltip-color);
+  box-shadow: 0 0 10px var(--tooltip-color);
+  white-space: nowrap;
+  animation: tooltip-appear 0.2s ease-out;
+}
+
+@keyframes tooltip-appear {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.top .content {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+.bottom .content {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+.arrow {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: rgba(10, 10, 15, 0.95);
+  border: 1px solid var(--tooltip-color);
+  transform: rotate(45deg);
+}
+
+.top .arrow {
+  bottom: -0.3rem;
+  left: 50%;
+  margin-left: -0.25rem;
+  border-top: none;
+  border-left: none;
+}
+
+.bottom .arrow {
+  top: -0.3rem;
+  left: 50%;
+  margin-left: -0.25rem;
+  border-bottom: none;
+  border-right: none;
+}

package/components/cyber/cyber-tooltip/css/index.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useState } from 'react';
+import styles from './cyber-tooltip.module.css';
+
+export interface CyberTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  content: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  variant?: 'cyan' | 'pink' | 'green';
+}
+
+export const CyberTooltip = forwardRef<HTMLDivElement, CyberTooltipProps>(
+  ({ children, content, position = 'top', variant = 'cyan', className, ...props }, ref) => {
+    const [visible, setVisible] = useState(false);
+    return (
+      <div
+        ref={ref}
+        className={`${styles.tooltip} ${styles[position]} ${styles[variant]} ${className || ''}`}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        {...props}
+      >
+        {children}
+        {visible && (
+          <div className={styles.content}>
+            <span className={styles.arrow} />
+            {content}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberTooltip.displayName = 'CyberTooltip';
+export default CyberTooltip;

package/components/cyber/cyber-tooltip/tailwind/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useState } from 'react';
+
+export interface CyberTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  content: React.ReactNode;
+  position?: 'top' | 'bottom';
+  variant?: 'cyan' | 'pink' | 'green';
+}
+
+const variantStyles = {
+  cyan: 'border-cyan-400 shadow-[0_0_10px_#00f0ff]',
+  pink: 'border-fuchsia-500 shadow-[0_0_10px_#ff00ff]',
+  green: 'border-emerald-400 shadow-[0_0_10px_#00ff88]',
+};
+
+export const CyberTooltip = forwardRef<HTMLDivElement, CyberTooltipProps>(
+  ({ children, content, position = 'top', variant = 'cyan', className = '', ...props }, ref) => {
+    const [visible, setVisible] = useState(false);
+    return (
+      <div
+        ref={ref}
+        className={`relative inline-block ${className}`}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        {...props}
+      >
+        {children}
+        {visible && (
+          <div
+            className={`
+              absolute z-50 px-3 py-2
+              font-['Share_Tech_Mono',monospace] text-xs text-white whitespace-nowrap
+              bg-[#0a0a0f]/95 border ${variantStyles[variant]}
+              animate-[fadeIn_0.2s_ease-out]
+              ${position === 'top' ? 'bottom-full left-1/2 -translate-x-1/2 mb-2' : 'top-full left-1/2 -translate-x-1/2 mt-2'}
+            `}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberTooltip.displayName = 'CyberTooltip';
+export default CyberTooltip;

package/components/decorative/coffee-stain/coffee-stain.module.css

@@ -0,0 +1,24 @@
+.container { position: relative; pointer-events: none; }
+.overlay { position: fixed; inset: 0; z-index: 1; }
+.inline { position: relative; width: 100%; height: 100%; }
+.stain { position: absolute; border-radius: 50%; pointer-events: none; }
+.stain1 { width: 150px; height: 140px; background: radial-gradient(ellipse at 40% 40%, rgba(61, 43, 31, 0.25) 0%, rgba(61, 43, 31, 0.12) 40%, transparent 70%); transform: rotate(15deg); }
+.stain2 { width: 100px; height: 90px; background: radial-gradient(ellipse at 60% 50%, rgba(45, 31, 21, 0.25) 0%, rgba(45, 31, 21, 0.12) 50%, transparent 75%); transform: rotate(-20deg); }
+.stain3 { width: 80px; height: 85px; background: radial-gradient(ellipse at 50% 50%, rgba(61, 43, 31, 0.18) 0%, transparent 60%); }
+.stain4 { width: 120px; height: 110px; background: radial-gradient(ellipse at 45% 55%, rgba(50, 35, 25, 0.2) 0%, rgba(50, 35, 25, 0.1) 45%, transparent 70%); transform: rotate(10deg); }
+.stain5 { width: 60px; height: 55px; background: radial-gradient(circle, rgba(61, 43, 31, 0.15) 0%, transparent 65%); }
+.ring { border-radius: 50%; background: transparent; box-shadow: inset 0 0 10px rgba(61, 43, 31, 0.2), 0 0 15px rgba(61, 43, 31, 0.15); border: 2px solid rgba(61, 43, 31, 0.15); }
+.ring1 { width: 80px; height: 80px; }
+.ring2 { width: 70px; height: 70px; }
+.agedPaper { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(139, 115, 85, 0.03) 25%, transparent 50%, rgba(139, 115, 85, 0.05) 75%, transparent 100%); pointer-events: none; }
+.paperTexture { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
+.burnEdges { position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); pointer-events: none; }
+.edgeLeft { position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, rgba(26, 21, 16, 0.8) 0%, transparent 100%); }
+.edgeRight { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(-90deg, rgba(26, 21, 16, 0.8) 0%, transparent 100%); }
+.light .stain { opacity: 0.5; }
+.medium .stain { opacity: 0.75; }
+.heavy .stain { opacity: 1; }
+.coffee { --stain-color: rgba(61, 43, 31, 1); }
+.tea { --stain-color: rgba(139, 115, 85, 1); }
+.wine { --stain-color: rgba(100, 30, 40, 1); }
+.ink { --stain-color: rgba(20, 20, 40, 1); }

package/components/decorative/coffee-stain/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useMemo } from 'react';
+import styles from './coffee-stain.module.css';
+
+export interface StainConfig {
+  type?: 'stain' | 'ring';
+  size?: 'sm' | 'md' | 'lg';
+  position: { top?: string; right?: string; bottom?: string; left?: string };
+  rotation?: number;
+}
+
+export interface CoffeeStainProps extends HTMLAttributes<HTMLDivElement> {
+  mode?: 'overlay' | 'inline';
+  intensity?: 'light' | 'medium' | 'heavy';
+  variant?: 'coffee' | 'tea' | 'wine' | 'ink';
+  count?: number;
+  stains?: StainConfig[];
+  agedPaper?: boolean;
+  paperTexture?: boolean;
+  burnEdges?: boolean;
+  edgeDarkening?: boolean;
+}
+
+const generateRandomStains = (count: number): StainConfig[] => {
+  return Array.from({ length: count }, () => ({
+    type: Math.random() > 0.7 ? 'ring' : 'stain',
+    size: ['sm', 'md', 'lg'][Math.floor(Math.random() * 3)] as 'sm' | 'md' | 'lg',
+    position: { top: `${Math.random() * 80 + 10}%`, left: `${Math.random() * 80 + 10}%` },
+    rotation: Math.random() * 360,
+  }));
+};
+
+export const CoffeeStain = forwardRef<HTMLDivElement, CoffeeStainProps>(
+  ({ mode = 'overlay', intensity = 'medium', variant = 'coffee', count = 3, stains: customStains, agedPaper = false, paperTexture = false, burnEdges = false, edgeDarkening = false, className, ...props }, ref) => {
+    const stains = useMemo(() => customStains || generateRandomStains(count), [customStains, count]);
+    const stainStyles = ['stain1', 'stain2', 'stain3', 'stain4', 'stain5'];
+
+    return (
+      <div ref={ref} className={`${styles.container} ${styles[mode]} ${styles[intensity]} ${styles[variant]} ${className || ''}`} {...props}>
+        {stains.map((stain, i) => {
+          const styleClass = stain.type === 'ring' ? `${styles.ring} ${stain.size === 'lg' ? styles.ring1 : styles.ring2}` : `${styles.stain} ${styles[stainStyles[i % stainStyles.length]]}`;
+          return <div key={i} className={styleClass} style={{ ...stain.position, transform: `rotate(${stain.rotation || 0}deg)` }} />;
+        })}
+        {agedPaper && <div className={styles.agedPaper} />}
+        {paperTexture && <div className={styles.paperTexture} />}
+        {burnEdges && <div className={styles.burnEdges} />}
+        {edgeDarkening && <><div className={styles.edgeLeft} /><div className={styles.edgeRight} /></>}
+      </div>
+    );
+  }
+);
+
+CoffeeStain.displayName = 'CoffeeStain';
+export default CoffeeStain;

package/components/decorative/ornaments/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './ornaments.module.css';
+
+export const ORNAMENT_SYMBOLS = {
+  cross: '✝', maltese: '✠', orthodox: '☦', fleurDeLis: '⚜', star: '✦',
+  diamond: '◆', heart: '❧', leaf: '❦', dagger: '†', doubleDagger: '‡',
+  asterisk: '✽', florette: '✿', skull: '☠', crown: '♔', swords: '⚔',
+};
+
+export interface OrnamentsProps extends HTMLAttributes<HTMLDivElement> {
+  type?: 'divider' | 'corner' | 'frame' | 'fleuron' | 'symbols';
+  symbol?: keyof typeof ORNAMENT_SYMBOLS | string;
+  symbols?: (keyof typeof ORNAMENT_SYMBOLS | string)[];
+  variant?: 'gold' | 'bone' | 'blood' | 'iron';
+  size?: 'sm' | 'md' | 'lg';
+  animated?: boolean;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'all';
+}
+
+const getSymbol = (s: keyof typeof ORNAMENT_SYMBOLS | string): string => ORNAMENT_SYMBOLS[s as keyof typeof ORNAMENT_SYMBOLS] || s;
+
+export const Ornaments = forwardRef<HTMLDivElement, OrnamentsProps>(
+  ({ type = 'divider', symbol = 'cross', symbols, variant = 'gold', size = 'md', animated = false, position = 'all', className, ...props }, ref) => {
+    const baseClasses = `${styles.ornament} ${styles[variant]} ${styles[size]} ${animated ? styles.animated : ''}`;
+    const sym = getSymbol(symbol);
+
+    if (type === 'divider') {
+      return (<div ref={ref} className={`${baseClasses} ${styles.divider} ${className || ''}`} {...props}><span className={styles.line} /><span className={styles.symbol}>{sym}</span><span className={styles.line} /></div>);
+    }
+    if (type === 'fleuron') {
+      return (<div ref={ref} className={`${baseClasses} ${className || ''}`} {...props}><span className={styles.fleuron}>{sym}</span></div>);
+    }
+    if (type === 'symbols') {
+      const syms = symbols || ['star', 'diamond', 'star'];
+      return (<div ref={ref} className={`${baseClasses} ${styles.symbols} ${className || ''}`} {...props}>{syms.map((s, i) => (<span key={i} className={styles.symbol}>{getSymbol(s)}</span>))}</div>);
+    }
+    if (type === 'corner') {
+      const corners = position === 'all' ? ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight'] : [position.split('-').map((p, i) => i === 0 ? p.charAt(0).toUpperCase() + p.slice(1) : p.charAt(0).toUpperCase() + p.slice(1)).join('')];
+      return (<>{corners.map((pos) => (<div key={pos} ref={pos === corners[0] ? ref : undefined} className={`${styles.corner} ${styles[`corner${pos}`]} ${styles[variant]} ${className || ''}`} {...props}><span className={styles.cornerInner}><span className={styles.cornerSymbol}>{sym}</span></span></div>))}</>);
+    }
+    if (type === 'frame') {
+      return (<div ref={ref} className={`${styles.frame} ${styles[variant]} ${className || ''}`} {...props}><div className={styles.frameTop}><span className={styles.frameLine} /><span className={styles.frameSymbol}>{sym}</span><span className={styles.frameLine} /></div><div className={styles.frameBottom}><span className={styles.frameLine} /><span className={styles.frameSymbol}>{sym}</span><span className={styles.frameLine} /></div></div>);
+    }
+    return null;
+  }
+);
+
+Ornaments.displayName = 'Ornaments';
+export default Ornaments;

package/components/decorative/ornaments/ornaments.module.css

@@ -0,0 +1,33 @@
+.ornament { --ornament-color: #c9a227; display: flex; align-items: center; justify-content: center; color: var(--ornament-color); }
+.divider { gap: 1rem; width: 100%; }
+.line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ornament-color), transparent); }
+.symbol { font-size: 1.25rem; opacity: 0.8; }
+.corner { position: absolute; width: 40px; height: 40px; }
+.cornerTopLeft { top: 0; left: 0; }
+.cornerTopRight { top: 0; right: 0; transform: scaleX(-1); }
+.cornerBottomLeft { bottom: 0; left: 0; transform: scaleY(-1); }
+.cornerBottomRight { bottom: 0; right: 0; transform: scale(-1); }
+.cornerInner { position: absolute; top: 0; left: 0; }
+.cornerInner::before { content: ''; position: absolute; top: 8px; left: 0; width: 30px; height: 1px; background: var(--ornament-color); }
+.cornerInner::after { content: ''; position: absolute; top: 0; left: 8px; width: 1px; height: 30px; background: var(--ornament-color); }
+.cornerSymbol { position: absolute; top: 4px; left: 4px; font-size: 0.75rem; }
+.fleuron { font-family: 'Times New Roman', serif; font-size: 2rem; opacity: 0.7; }
+.frame { position: absolute; inset: 0; pointer-events: none; }
+.frameTop, .frameBottom { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; }
+.frameTop { top: -0.5em; }
+.frameBottom { bottom: -0.5em; }
+.frameLine { width: 60px; height: 1px; background: var(--ornament-color); }
+.frameSymbol { font-size: 0.875rem; }
+.gold { --ornament-color: #c9a227; }
+.bone { --ornament-color: #d4c5a9; }
+.blood { --ornament-color: #8b1a1a; }
+.iron { --ornament-color: #4a4a4a; }
+.symbols { display: flex; gap: 0.5rem; opacity: 0.6; }
+.animated .symbol, .animated .fleuron { animation: ornamentPulse 3s ease-in-out infinite; }
+@keyframes ornamentPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
+.sm .symbol { font-size: 0.875rem; }
+.sm .fleuron { font-size: 1.25rem; }
+.md .symbol { font-size: 1.25rem; }
+.md .fleuron { font-size: 2rem; }
+.lg .symbol { font-size: 1.75rem; }
+.lg .fleuron { font-size: 3rem; }

package/components/decorative/rune-symbols/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './rune-symbols.module.css';
+
+export const RUNES = {
+  fehu: 'ᚠ', uruz: 'ᚢ', thurisaz: 'ᚦ', ansuz: 'ᚨ', raidho: 'ᚱ', kenaz: 'ᚲ',
+  gebo: 'ᚷ', wunjo: 'ᚹ', hagalaz: 'ᚺ', nauthiz: 'ᚾ', isaz: 'ᛁ', jera: 'ᛃ',
+  eihwaz: 'ᛇ', perthro: 'ᛈ', algiz: 'ᛉ', sowilo: 'ᛊ', tiwaz: 'ᛏ', berkano: 'ᛒ',
+  ehwaz: 'ᛖ', mannaz: 'ᛗ', laguz: 'ᛚ', ingwaz: 'ᛝ', dagaz: 'ᛞ', othala: 'ᛟ',
+};
+
+export interface RuneSymbolsProps extends HTMLAttributes<HTMLDivElement> {
+  runes?: (keyof typeof RUNES | string)[];
+  count?: number;
+  variant?: 'gold' | 'blood' | 'bone' | 'iron' | 'cyan';
+  animation?: 'glow' | 'floating' | 'pulsing' | 'flickering' | 'none';
+  direction?: 'horizontal' | 'vertical';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  scattered?: boolean;
+}
+
+const getRandomRunes = (count: number): string[] => {
+  const runeValues = Object.values(RUNES);
+  return Array.from({ length: count }, () => runeValues[Math.floor(Math.random() * runeValues.length)]);
+};
+
+export const RuneSymbols = forwardRef<HTMLDivElement, RuneSymbolsProps>(
+  ({ runes, count = 6, variant = 'gold', animation = 'glow', direction = 'horizontal', size = 'md', scattered = false, className, style, ...props }, ref) => {
+    const resolvedRunes = runes ? runes.map(r => RUNES[r as keyof typeof RUNES] || r) : getRandomRunes(count);
+    const animationClass = animation !== 'none' ? styles[animation] : '';
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.container} ${styles[variant]} ${styles[size]} ${direction === 'vertical' ? styles.vertical : ''} ${scattered ? styles.scattered : ''} ${animationClass} ${className || ''}`}
+        style={style}
+        {...props}
+      >
+        {resolvedRunes.map((rune, i) => (
+          <span
+            key={i}
+            className={styles.rune}
+            style={{ '--delay': `${i * 0.5}s`, ...(scattered ? { left: `${Math.random() * 80 + 10}%`, top: `${Math.random() * 80 + 10}%` } : {}) } as React.CSSProperties}
+          >
+            {rune}
+          </span>
+        ))}
+      </div>
+    );
+  }
+);
+
+RuneSymbols.displayName = 'RuneSymbols';
+export default RuneSymbols;

package/components/decorative/rune-symbols/rune-symbols.module.css

@@ -0,0 +1,22 @@
+.container { --rune-color: #c9a227; --rune-glow: rgba(201, 162, 39, 0.5); display: flex; gap: 1.5rem; font-size: 2rem; }
+.rune { color: var(--rune-color); opacity: 0.6; transition: all 0.4s ease; animation: runeGlow 4s ease-in-out infinite; animation-delay: var(--delay, 0s); }
+.rune:hover { opacity: 1; text-shadow: 0 0 20px var(--rune-glow); transform: scale(1.1); }
+@keyframes runeGlow { 0%, 100% { opacity: 0.4; text-shadow: none; } 50% { opacity: 0.8; text-shadow: 0 0 15px var(--rune-glow); } }
+.floating .rune { animation: runeFloat 6s ease-in-out infinite; }
+@keyframes runeFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; } 25% { transform: translateY(-10px) rotate(5deg); opacity: 0.7; } 50% { transform: translateY(0) rotate(0deg); opacity: 0.5; } 75% { transform: translateY(10px) rotate(-5deg); opacity: 0.7; } }
+.pulsing .rune { animation: runePulse 2s ease-in-out infinite; }
+@keyframes runePulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 25px var(--rune-glow); } }
+.flickering .rune { animation: runeFlicker 0.5s steps(2) infinite; }
+@keyframes runeFlicker { 0% { opacity: 0.3; } 25% { opacity: 0.8; } 50% { opacity: 0.5; } 75% { opacity: 0.9; } 100% { opacity: 0.3; } }
+.scattered { position: relative; width: 100%; height: 100%; }
+.scattered .rune { position: absolute; }
+.gold { --rune-color: #c9a227; --rune-glow: rgba(201, 162, 39, 0.5); }
+.blood { --rune-color: #8b1a1a; --rune-glow: rgba(139, 26, 26, 0.5); }
+.bone { --rune-color: #d4c5a9; --rune-glow: rgba(212, 197, 169, 0.5); }
+.iron { --rune-color: #4a4a4a; --rune-glow: rgba(74, 74, 74, 0.5); }
+.cyan { --rune-color: #00f0ff; --rune-glow: rgba(0, 240, 255, 0.5); }
+.vertical { flex-direction: column; }
+.sm { font-size: 1rem; gap: 0.75rem; }
+.md { font-size: 2rem; gap: 1.5rem; }
+.lg { font-size: 3rem; gap: 2rem; }
+.xl { font-size: 4rem; gap: 3rem; }

package/components/effects/glitch-image/css/glitch-image.module.css

@@ -0,0 +1,64 @@
+.container {
+  position: relative;
+  overflow: hidden;
+}
+
+.base {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  mix-blend-mode: screen;
+}
+
+.red { filter: hue-rotate(-50deg) saturate(200%); }
+.blue { filter: hue-rotate(50deg) saturate(200%); }
+
+.container:hover .red {
+  opacity: 0.8;
+  animation: glitch-r 0.3s steps(2) infinite;
+}
+
+.container:hover .blue {
+  opacity: 0.8;
+  animation: glitch-b 0.3s steps(2) infinite;
+}
+
+.continuous .red {
+  opacity: 0.5;
+  animation: glitch-r 2s steps(3) infinite;
+}
+
+.continuous .blue {
+  opacity: 0.5;
+  animation: glitch-b 2s steps(3) infinite;
+}
+
+.low .layer { opacity: 0.3 !important; }
+.high .layer { opacity: 0.9 !important; }
+.high:hover .red, .high:hover .blue { animation-duration: 0.1s; }
+
+@keyframes glitch-r {
+  0% { transform: translate(0); clip-path: inset(20% 0 40% 0); }
+  25% { transform: translate(-5px, 5px); clip-path: inset(50% 0 20% 0); }
+  50% { transform: translate(5px, -5px); clip-path: inset(10% 0 60% 0); }
+  75% { transform: translate(-3px, 3px); clip-path: inset(70% 0 10% 0); }
+  100% { transform: translate(0); clip-path: inset(20% 0 40% 0); }
+}
+
+@keyframes glitch-b {
+  0% { transform: translate(0); clip-path: inset(60% 0 10% 0); }
+  25% { transform: translate(5px, -5px); clip-path: inset(20% 0 50% 0); }
+  50% { transform: translate(-5px, 5px); clip-path: inset(80% 0 5% 0); }
+  75% { transform: translate(3px, -3px); clip-path: inset(5% 0 70% 0); }
+  100% { transform: translate(0); clip-path: inset(60% 0 10% 0); }
+}

package/components/effects/glitch-image/css/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes } from 'react';
+import styles from './glitch-image.module.css';
+
+export interface GlitchImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  intensity?: 'low' | 'medium' | 'high';
+  continuous?: boolean;
+}
+
+export const GlitchImage = forwardRef<HTMLDivElement, GlitchImageProps>(
+  ({ src, alt = 'Image', intensity = 'medium', continuous = false, className, ...props }, ref) => {
+    const classes = [styles.container, styles[intensity], continuous && styles.continuous, className].filter(Boolean).join(' ');
+    return (
+      <div ref={ref} className={classes}>
+        <img src={src} alt={alt} className={styles.base} {...props} />
+        <img src={src} alt="" className={`${styles.layer} ${styles.red}`} aria-hidden="true" />
+        <img src={src} alt="" className={`${styles.layer} ${styles.blue}`} aria-hidden="true" />
+      </div>
+    );
+  }
+);
+
+GlitchImage.displayName = 'GlitchImage';
+export default GlitchImage;

package/components/effects/glitch-image/tailwind/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes, useId } from 'react';
+
+export interface GlitchImageProps extends ImgHTMLAttributes<HTMLImageElement> {}
+
+export const GlitchImage = forwardRef<HTMLDivElement, GlitchImageProps>(
+  ({ src, alt = 'Image', className = '', ...props }, ref) => {
+    const id = useId();
+    return (
+      <>
+        <style>{`
+          @keyframes glitch-r-${id} {
+            0%, 100% { transform: translate(0); clip-path: inset(20% 0 40% 0); }
+            25% { transform: translate(-5px, 5px); clip-path: inset(50% 0 20% 0); }
+            50% { transform: translate(5px, -5px); clip-path: inset(10% 0 60% 0); }
+            75% { transform: translate(-3px, 3px); clip-path: inset(70% 0 10% 0); }
+          }
+          @keyframes glitch-b-${id} {
+            0%, 100% { transform: translate(0); clip-path: inset(60% 0 10% 0); }
+            25% { transform: translate(5px, -5px); clip-path: inset(20% 0 50% 0); }
+            50% { transform: translate(-5px, 5px); clip-path: inset(80% 0 5% 0); }
+            75% { transform: translate(3px, -3px); clip-path: inset(5% 0 70% 0); }
+          }
+        `}</style>
+        <div ref={ref} className={`relative overflow-hidden group ${className}`}>
+          <img src={src} alt={alt} className="block w-full h-auto" {...props} />
+          <img
+            src={src}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover opacity-0 mix-blend-screen group-hover:opacity-80"
+            style={{ filter: 'hue-rotate(-50deg) saturate(200%)', animation: `glitch-r-${id} 0.3s steps(2) infinite` }}
+            aria-hidden="true"
+          />
+          <img
+            src={src}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover opacity-0 mix-blend-screen group-hover:opacity-80"
+            style={{ filter: 'hue-rotate(50deg) saturate(200%)', animation: `glitch-b-${id} 0.3s steps(2) infinite` }}
+            aria-hidden="true"
+          />
+        </div>
+      </>
+    );
+  }
+);
+
+GlitchImage.displayName = 'GlitchImage';
+export default GlitchImage;

package/components/effects/glowing-border/css/glowing-border.module.css

@@ -0,0 +1,73 @@
+.container {
+  --glow-color: #00f0ff;
+  --glow-size: 10px;
+  
+  position: relative;
+  padding: 2px;
+  border-radius: 0.5rem;
+  background: var(--glow-color);
+}
+
+.cyan { --glow-color: #00f0ff; }
+.pink { --glow-color: #ff00ff; }
+.green { --glow-color: #00ff88; }
+.purple { --glow-color: #a855f7; }
+
+.rainbow {
+  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff88, #00f0ff);
+  background-size: 300% 100%;
+}
+
+.low { --glow-size: 5px; }
+.medium { --glow-size: 10px; }
+.high { --glow-size: 20px; }
+
+.content {
+  position: relative;
+  background: hsl(var(--background, 0 0% 4%));
+  border-radius: calc(0.5rem - 2px);
+  z-index: 1;
+}
+
+/* Glow effect */
+.container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  background: inherit;
+  filter: blur(var(--glow-size));
+  opacity: 0.7;
+  z-index: -1;
+}
+
+/* Animation */
+.animated {
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+
+.rainbow.animated {
+  animation: glow-pulse 2s ease-in-out infinite, rainbow-border 3s linear infinite;
+}
+
+@keyframes glow-pulse {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.3); }
+}
+
+@keyframes rainbow-border {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 300% 50%; }
+}
+
+.container:hover {
+  filter: brightness(1.2);
+}
+
+.container:hover::before {
+  filter: blur(calc(var(--glow-size) * 1.5));
+  opacity: 0.9;
+}