@oalacea/chaosui 0.4.0 → 0.5.1

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+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 variantStyles = {
+  gold: 'text-amber-600',
+  blood: 'text-red-800',
+  bone: 'text-stone-400',
+  iron: 'text-zinc-500',
+  cyan: 'text-cyan-400',
+};
+
+const sizeClasses = {
+  sm: 'text-base gap-3',
+  md: 'text-3xl gap-6',
+  lg: 'text-5xl gap-8',
+  xl: 'text-6xl gap-12',
+};
+
+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 = {
+      glow: 'animate-[runeGlow_4s_ease-in-out_infinite]',
+      floating: 'animate-[runeFloat_6s_ease-in-out_infinite]',
+      pulsing: 'animate-[runePulse_2s_ease-in-out_infinite]',
+      flickering: 'animate-[runeFlicker_0.5s_steps(2)_infinite]',
+      none: '',
+    }[animation];
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          flex ${sizeClasses[size]}
+          ${direction === 'vertical' ? 'flex-col' : ''}
+          ${scattered ? 'relative w-full h-full' : ''}
+          ${className}
+        `}
+        style={style}
+        {...props}
+      >
+        <style>{`
+          @keyframes runeGlow {
+            0%, 100% { opacity: 0.4; text-shadow: none; }
+            50% { opacity: 0.8; text-shadow: 0 0 15px currentColor; }
+          }
+          @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; }
+          }
+          @keyframes runePulse {
+            0%, 100% { transform: scale(1); opacity: 0.5; }
+            50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 25px currentColor; }
+          }
+          @keyframes runeFlicker {
+            0% { opacity: 0.3; } 25% { opacity: 0.8; } 50% { opacity: 0.5; } 75% { opacity: 0.9; } 100% { opacity: 0.3; }
+          }
+        `}</style>
+        {resolvedRunes.map((rune, i) => (
+          <span
+            key={i}
+            className={`
+              ${variantStyles[variant]} opacity-60 transition-all duration-400
+              hover:opacity-100 hover:scale-110 hover:[text-shadow:0_0_20px_currentColor]
+              ${animationClass}
+              ${scattered ? 'absolute' : ''}
+            `}
+            style={{
+              animationDelay: `${i * 0.5}s`,
+              ...(scattered ? { left: `${Math.random() * 80 + 10}%`, top: `${Math.random() * 80 + 10}%` } : {}),
+            }}
+          >
+            {rune}
+          </span>
+        ))}
+      </div>
+    );
+  }
+);
+
+RuneSymbols.displayName = 'RuneSymbols';
+export default RuneSymbols;

package/decorative/sheet-music/css/index.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useMemo } from 'react';
+import styles from './sheet-music.module.css';
+
+export const MUSIC_SYMBOLS = {
+  quarterNote: '♩',
+  eighthNote: '♪',
+  beamedNotes: '♫',
+  sixteenthNotes: '♬',
+  trebleClef: '𝄞',
+  bassClef: '𝄢',
+  sharp: '♯',
+  flat: '♭',
+  natural: '♮',
+  fermata: '𝄐',
+  coda: '𝄌',
+  segno: '𝄋',
+};
+
+export interface NoteConfig {
+  symbol: keyof typeof MUSIC_SYMBOLS | string;
+  position: { top: string; left: string };
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  delay?: number;
+}
+
+export interface SheetMusicProps extends HTMLAttributes<HTMLDivElement> {
+  /** Positioning mode */
+  mode?: 'overlay' | 'inline';
+  /** Animation style */
+  animation?: 'drift' | 'falling' | 'swirling' | 'rising' | 'none';
+  /** Color variant */
+  variant?: 'ash' | 'silver' | 'gold' | 'blood' | 'ivory';
+  /** Note density */
+  density?: 'sparse' | 'normal' | 'dense';
+  /** Number of random notes */
+  count?: number;
+  /** Custom note configurations */
+  notes?: NoteConfig[];
+  /** Show decorative staff lines */
+  showStaff?: boolean;
+  /** Symbols to use for random generation */
+  symbols?: (keyof typeof MUSIC_SYMBOLS)[];
+}
+
+const generateRandomNotes = (
+  count: number, 
+  symbols: (keyof typeof MUSIC_SYMBOLS)[]
+): NoteConfig[] => {
+  const sizes: ('sm' | 'md' | 'lg' | 'xl')[] = ['sm', 'md', 'lg', 'xl'];
+  return Array.from({ length: count }, (_, i) => ({
+    symbol: symbols[Math.floor(Math.random() * symbols.length)],
+    position: {
+      top: `${Math.random() * 80 + 10}%`,
+      left: `${Math.random() * 90 + 5}%`,
+    },
+    size: sizes[Math.floor(Math.random() * sizes.length)],
+    delay: i * (Math.random() * 3 + 1),
+  }));
+};
+
+const sizeClasses = {
+  sm: styles.note4,
+  md: styles.note1,
+  lg: styles.note2,
+  xl: styles.note5,
+};
+
+export const SheetMusic = forwardRef<HTMLDivElement, SheetMusicProps>(
+  (
+    {
+      mode = 'overlay',
+      animation = 'drift',
+      variant = 'ash',
+      density = 'normal',
+      count = 8,
+      notes: customNotes,
+      showStaff = false,
+      symbols = ['quarterNote', 'eighthNote', 'beamedNotes', 'sixteenthNotes', 'trebleClef', 'bassClef'],
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const notes = useMemo(() => 
+      customNotes || generateRandomNotes(count, symbols),
+      [customNotes, count, symbols]
+    );
+
+    const animationClass = {
+      drift: '',
+      falling: styles.falling,
+      swirling: styles.swirling,
+      rising: styles.rising,
+      none: '',
+    }[animation];
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${styles.container} 
+          ${mode === 'inline' ? styles.inline : ''}
+          ${styles[variant]} 
+          ${styles[density]}
+          ${animationClass}
+          ${className || ''}
+        `}
+        {...props}
+      >
+        {showStaff && (
+          <>
+            <div className={`${styles.staff} ${styles.staffTop}`}>
+              {[...Array(5)].map((_, i) => <div key={i} className={styles.staffLine} />)}
+            </div>
+            <div className={`${styles.staff} ${styles.staffBottom}`}>
+              {[...Array(5)].map((_, i) => <div key={i} className={styles.staffLine} />)}
+            </div>
+          </>
+        )}
+
+        {notes.map((note, i) => {
+          const symbol = MUSIC_SYMBOLS[note.symbol as keyof typeof MUSIC_SYMBOLS] || note.symbol;
+          return (
+            <span
+              key={i}
+              className={`${styles.note} ${sizeClasses[note.size || 'md']}`}
+              style={{
+                ...note.position,
+                animationDelay: `${note.delay || i * 2}s`,
+              }}
+            >
+              {symbol}
+            </span>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+SheetMusic.displayName = 'SheetMusic';
+export default SheetMusic;

package/decorative/sheet-music/css/sheet-music.module.css

@@ -0,0 +1,152 @@
+.container {
+  --note-color: #2a2a2a;
+  
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.inline {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.note {
+  position: absolute;
+  color: var(--note-color);
+  opacity: 0.3;
+  animation: noteDrift 20s linear infinite;
+}
+
+/* Note variations */
+.note1 { font-size: 1.5rem; }
+.note2 { font-size: 2rem; }
+.note3 { font-size: 1.8rem; }
+.note4 { font-size: 1.2rem; }
+.note5 { font-size: 3rem; }
+.note6 { font-size: 2.5rem; }
+
+@keyframes noteDrift {
+  0%, 100% { 
+    transform: translateY(0) rotate(0deg); 
+    opacity: 0.3; 
+  }
+  25% { 
+    transform: translateY(-20px) rotate(5deg); 
+    opacity: 0.5; 
+  }
+  50% { 
+    transform: translateY(0) rotate(0deg); 
+    opacity: 0.3; 
+  }
+  75% { 
+    transform: translateY(20px) rotate(-5deg); 
+    opacity: 0.5; 
+  }
+}
+
+/* Falling animation */
+.falling .note {
+  animation: noteFall 15s linear infinite;
+}
+
+@keyframes noteFall {
+  0% { 
+    transform: translateY(-100%) rotate(0deg); 
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.4;
+  }
+  90% {
+    opacity: 0.4;
+  }
+  100% { 
+    transform: translateY(100vh) rotate(360deg); 
+    opacity: 0;
+  }
+}
+
+/* Swirling animation */
+.swirling .note {
+  animation: noteSwirl 25s ease-in-out infinite;
+}
+
+@keyframes noteSwirl {
+  0%, 100% { 
+    transform: translate(0, 0) rotate(0deg) scale(1);
+    opacity: 0.2;
+  }
+  25% { 
+    transform: translate(30px, -40px) rotate(90deg) scale(1.1);
+    opacity: 0.5;
+  }
+  50% { 
+    transform: translate(0, 0) rotate(180deg) scale(1);
+    opacity: 0.3;
+  }
+  75% { 
+    transform: translate(-30px, 40px) rotate(270deg) scale(0.9);
+    opacity: 0.5;
+  }
+}
+
+/* Rising animation */
+.rising .note {
+  animation: noteRise 20s ease-in-out infinite;
+}
+
+@keyframes noteRise {
+  0% { 
+    transform: translateY(100vh) scale(0.5);
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.4;
+  }
+  80% {
+    opacity: 0.4;
+  }
+  100% { 
+    transform: translateY(-100%) scale(1.5);
+    opacity: 0;
+  }
+}
+
+/* Staff lines */
+.staff {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  opacity: 0.1;
+}
+
+.staffLine {
+  height: 1px;
+  background: var(--note-color);
+}
+
+.staffTop {
+  top: 15%;
+}
+
+.staffBottom {
+  bottom: 15%;
+}
+
+/* Variants */
+.ash { --note-color: #2a2a2a; }
+.silver { --note-color: #888888; }
+.gold { --note-color: #c9a227; }
+.blood { --note-color: #6b1010; }
+.ivory { --note-color: #e8e8e8; }
+
+/* Density */
+.sparse .note { animation-duration: 30s; }
+.normal .note { animation-duration: 20s; }
+.dense .note { animation-duration: 12s; }

package/decorative/sheet-music/tailwind/index.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useMemo } from 'react';
+
+export const MUSIC_SYMBOLS = {
+  quarterNote: '♩', eighthNote: '♪', beamedNotes: '♫', sixteenthNotes: '♬',
+  trebleClef: '𝄞', bassClef: '𝄢', sharp: '♯', flat: '♭', natural: '♮',
+  fermata: '𝄐', coda: '𝄌', segno: '𝄋',
+};
+
+export interface NoteConfig {
+  symbol: keyof typeof MUSIC_SYMBOLS | string;
+  position: { top: string; left: string };
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  delay?: number;
+}
+
+export interface SheetMusicProps extends HTMLAttributes<HTMLDivElement> {
+  mode?: 'overlay' | 'inline';
+  animation?: 'drift' | 'falling' | 'swirling' | 'rising' | 'none';
+  variant?: 'ash' | 'silver' | 'gold' | 'blood' | 'ivory';
+  density?: 'sparse' | 'normal' | 'dense';
+  count?: number;
+  notes?: NoteConfig[];
+  showStaff?: boolean;
+  symbols?: (keyof typeof MUSIC_SYMBOLS)[];
+}
+
+const variantColors = {
+  ash: 'text-zinc-800',
+  silver: 'text-gray-400',
+  gold: 'text-amber-600',
+  blood: 'text-red-900',
+  ivory: 'text-stone-200',
+};
+
+const sizeClasses = { sm: 'text-lg', md: 'text-2xl', lg: 'text-3xl', xl: 'text-5xl' };
+const densityDurations = { sparse: '30s', normal: '20s', dense: '12s' };
+
+const generateRandomNotes = (count: number, symbols: (keyof typeof MUSIC_SYMBOLS)[]): NoteConfig[] => {
+  const sizes: ('sm' | 'md' | 'lg' | 'xl')[] = ['sm', 'md', 'lg', 'xl'];
+  return Array.from({ length: count }, (_, i) => ({
+    symbol: symbols[Math.floor(Math.random() * symbols.length)],
+    position: { top: `${Math.random() * 80 + 10}%`, left: `${Math.random() * 90 + 5}%` },
+    size: sizes[Math.floor(Math.random() * sizes.length)],
+    delay: i * (Math.random() * 3 + 1),
+  }));
+};
+
+export const SheetMusic = forwardRef<HTMLDivElement, SheetMusicProps>(
+  ({ mode = 'overlay', animation = 'drift', variant = 'ash', density = 'normal', count = 8, notes: customNotes, showStaff = false, symbols = ['quarterNote', 'eighthNote', 'beamedNotes', 'sixteenthNotes', 'trebleClef', 'bassClef'], className = '', ...props }, ref) => {
+    const notes = useMemo(() => customNotes || generateRandomNotes(count, symbols), [customNotes, count, symbols]);
+    const duration = densityDurations[density];
+
+    const animationKeyframes = {
+      drift: `@keyframes noteDrift { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; } 25% { transform: translateY(-20px) rotate(5deg); opacity: 0.5; } 50% { transform: translateY(0) rotate(0deg); opacity: 0.3; } 75% { transform: translateY(20px) rotate(-5deg); opacity: 0.5; } }`,
+      falling: `@keyframes noteFall { 0% { transform: translateY(-100%) rotate(0deg); opacity: 0; } 10%, 90% { opacity: 0.4; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } }`,
+      swirling: `@keyframes noteSwirl { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.2; } 25% { transform: translate(30px, -40px) rotate(90deg) scale(1.1); opacity: 0.5; } 50% { transform: translate(0, 0) rotate(180deg) scale(1); opacity: 0.3; } 75% { transform: translate(-30px, 40px) rotate(270deg) scale(0.9); opacity: 0.5; } }`,
+      rising: `@keyframes noteRise { 0% { transform: translateY(100vh) scale(0.5); opacity: 0; } 20%, 80% { opacity: 0.4; } 100% { transform: translateY(-100%) scale(1.5); opacity: 0; } }`,
+      none: '',
+    };
+
+    const animationNames = { drift: 'noteDrift', falling: 'noteFall', swirling: 'noteSwirl', rising: 'noteRise', none: '' };
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          pointer-events-none overflow-hidden z-[1]
+          ${mode === 'overlay' ? 'fixed inset-0' : 'relative w-full h-full'}
+          ${variantColors[variant]}
+          ${className}
+        `}
+        {...props}
+      >
+        <style>{animationKeyframes[animation]}</style>
+
+        {showStaff && (
+          <>
+            <div className="absolute w-full top-[15%] flex flex-col gap-2 opacity-10">
+              {[...Array(5)].map((_, i) => <div key={i} className="h-px bg-current" />)}
+            </div>
+            <div className="absolute w-full bottom-[15%] flex flex-col gap-2 opacity-10">
+              {[...Array(5)].map((_, i) => <div key={i} className="h-px bg-current" />)}
+            </div>
+          </>
+        )}
+
+        {notes.map((note, i) => {
+          const symbol = MUSIC_SYMBOLS[note.symbol as keyof typeof MUSIC_SYMBOLS] || note.symbol;
+          return (
+            <span
+              key={i}
+              className={`absolute opacity-30 ${sizeClasses[note.size || 'md']}`}
+              style={{
+                ...note.position,
+                animation: animation !== 'none' ? `${animationNames[animation]} ${duration} linear infinite` : undefined,
+                animationDelay: `${note.delay || i * 2}s`,
+              }}
+            >
+              {symbol}
+            </span>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+SheetMusic.displayName = 'SheetMusic';
+export default SheetMusic;

package/layout/horizontal-scroll/css/horizontal-scroll.module.css

@@ -0,0 +1,93 @@
+.container {
+  --scroll-accent: #00f0ff;
+  --scroll-bg: rgba(0, 0, 0, 0.3);
+  --panel-gap: 2rem;
+  
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-accent) var(--scroll-bg);
+}
+
+.container::-webkit-scrollbar {
+  height: 4px;
+}
+
+.container::-webkit-scrollbar-track {
+  background: var(--scroll-bg);
+}
+
+.container::-webkit-scrollbar-thumb {
+  background: var(--scroll-accent);
+  border-radius: 2px;
+}
+
+.track {
+  display: flex;
+  gap: var(--panel-gap);
+  padding: 1rem 0;
+  width: max-content;
+}
+
+.panel {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+}
+
+/* Variants */
+.cyan { --scroll-accent: #00f0ff; }
+.green { --scroll-accent: #00ff88; }
+.amber { --scroll-accent: #ffaa00; }
+.blood { --scroll-accent: #8b1a1a; }
+
+/* Panel sizes */
+.panelFull {
+  width: 100vw;
+}
+
+.panelLarge {
+  width: 80vw;
+}
+
+.panelMedium {
+  width: 60vw;
+}
+
+.panelSmall {
+  width: 40vw;
+}
+
+/* Fade edges */
+.fadeEdges {
+  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
+}
+
+/* Indicators */
+.indicators {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--scroll-bg);
+  border: 1px solid var(--scroll-accent);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.indicator:hover,
+.indicatorActive {
+  background: var(--scroll-accent);
+  box-shadow: 0 0 10px var(--scroll-accent);
+}