@oalacea/chaosui 0.4.0 → 0.5.0

package/components/navigation/scattered-nav/scattered-nav.module.css

@@ -0,0 +1,113 @@
+/* scattered-nav - Nav éclatée/fragments positionnés aléatoirement */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 60px;
+  background: var(--chaos-void, #0a0a0a);
+  border-bottom: 1px solid var(--chaos-blood, #ff0040);
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  height: 100%;
+  font-size: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s;
+  color: var(--chaos-bone-dark, #888);
+  text-decoration: none;
+}
+
+.item:hover {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.scattered1 { transform: translateY(3px); }
+.scattered2 { transform: rotate(-2deg); border-left: 1px solid var(--chaos-blood, #ff0040); }
+.scattered3 { transform: translateY(-2px) rotate(1deg); }
+.scattered4 { transform: translateX(-3px); }
+.scattered5 { transform: rotate(1.5deg) translateY(1px); }
+
+.logo {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.3rem;
+  padding: 0 1.5rem;
+}
+
+.glitch { position: relative; }
+
+.glitch::before {
+  content: attr(data-text);
+  position: absolute;
+  left: 2px;
+  top: 0;
+  color: var(--chaos-bone, #e8e8e8);
+  opacity: 0.5;
+  animation: navGlitch 0.3s infinite;
+}
+
+@keyframes navGlitch {
+  0%, 100% { clip-path: inset(0 0 80% 0); }
+  25% { clip-path: inset(20% 0 60% 0); }
+  50% { clip-path: inset(40% 0 40% 0); }
+  75% { clip-path: inset(60% 0 20% 0); }
+}
+
+.corrupt {
+  font-family: var(--chaos-font-mono, monospace);
+  color: var(--chaos-blood, #ff0040);
+  font-size: 0.6rem;
+  opacity: 0.5;
+  animation: flickerText 3s infinite;
+}
+
+@keyframes flickerText {
+  0%, 90%, 100% { opacity: 0.5; }
+  92%, 94%, 96% { opacity: 0; }
+}
+
+.status {
+  margin-left: auto;
+  gap: 0.5rem;
+  font-size: 0.6rem;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 0 1.5rem;
+}
+
+.statusDot {
+  width: 6px;
+  height: 6px;
+  background: var(--chaos-blood, #ff0040);
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+.blink {
+  animation: blink 1s step-start infinite;
+  color: var(--chaos-blood, #ff0040);
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}

package/components/navigation/scroll-indicator/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
+import styles from './scroll-indicator.module.css';
+
+export interface ScrollIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  text?: string;
+  showArrow?: boolean;
+  showPercentage?: boolean;
+  variant?: 'default' | 'blood' | 'minimal';
+  position?: 'right' | 'left';
+  trackHeight?: number;
+}
+
+export const ScrollIndicator = forwardRef<HTMLDivElement, ScrollIndicatorProps>(
+  ({ text = 'SCROLL', showArrow = false, showPercentage = false, variant = 'default', position = 'right', trackHeight = 100, className, ...props }, ref) => {
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    useEffect(() => {
+      const handleScroll = () => {
+        const scrollTop = window.scrollY;
+        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+        setScrollProgress(Math.min(100, Math.max(0, progress)));
+      };
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      handleScroll();
+      return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const thumbTop = (scrollProgress / 100) * (trackHeight - 20);
+
+    const containerClasses = [
+      styles.container,
+      variant === 'blood' && styles.variantBlood,
+      variant === 'minimal' && styles.variantMinimal,
+      position === 'left' && styles.positionLeft,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        <div className={styles.inner}>
+          {showArrow && <span className={styles.arrow}>↓</span>}
+          <div className={styles.track} style={{ height: trackHeight }}>
+            <div className={styles.thumb} style={{ top: thumbTop }} />
+          </div>
+          {text && <span className={styles.text}>{text}</span>}
+          {showPercentage && <span className={styles.percentage}>{Math.round(scrollProgress)}%</span>}
+        </div>
+      </div>
+    );
+  }
+);
+
+ScrollIndicator.displayName = 'ScrollIndicator';
+export default ScrollIndicator;

package/components/navigation/scroll-indicator/scroll-indicator.module.css

@@ -0,0 +1,82 @@
+/* scroll-indicator - Indicateur de scroll vertical avec texte */
+.container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.track {
+  width: 2px;
+  height: 100px;
+  background: var(--chaos-iron, #2a2820);
+  position: relative;
+  border-radius: 1px;
+}
+
+.thumb {
+  width: 6px;
+  height: 20px;
+  background: var(--chaos-gold, #c9a227);
+  position: absolute;
+  left: -2px;
+  top: 0;
+  border-radius: 3px;
+  transition: top 0.3s ease-out;
+  box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
+}
+
+.text {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  font-family: var(--chaos-font-serif, 'Cinzel', serif);
+  font-size: 0.5rem;
+  letter-spacing: 0.4em;
+  color: var(--chaos-bone-dark, #9a8b6f);
+  transform: rotate(180deg);
+  text-transform: uppercase;
+}
+
+.arrow {
+  animation: bounce 2s ease-in-out infinite;
+  color: var(--chaos-gold, #c9a227);
+  font-size: 0.8rem;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(5px); opacity: 0.5; }
+}
+
+.variantBlood .track { background: rgba(255, 0, 64, 0.2); }
+.variantBlood .thumb { background: var(--chaos-blood, #ff0040); box-shadow: 0 0 10px rgba(255, 0, 64, 0.5); }
+.variantBlood .text { color: var(--chaos-bone-dark, #666); }
+.variantBlood .arrow { color: var(--chaos-blood, #ff0040); }
+
+.variantMinimal .track { width: 1px; height: 60px; }
+.variantMinimal .thumb { width: 3px; height: 10px; left: -1px; }
+.variantMinimal .text { display: none; }
+
+.positionLeft { left: 0; right: auto; }
+.positionLeft .text { transform: rotate(0deg); }
+
+.percentage {
+  font-family: var(--chaos-font-mono, monospace);
+  font-size: 0.6rem;
+  color: var(--chaos-gold, #c9a227);
+  margin-top: 0.5rem;
+}
+
+.variantBlood .percentage { color: var(--chaos-blood, #ff0040); }

package/components/navigation/vertical-nav/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './vertical-nav.module.css';
+
+export interface VerticalNavItemProps {
+  href?: string;
+  glyph: string;
+  label?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export interface VerticalNavProps extends HTMLAttributes<HTMLElement> {
+  items?: VerticalNavItemProps[];
+  runeTop?: string;
+  runeBottom?: string;
+  variant?: 'default' | 'dark';
+  size?: 'default' | 'compact';
+  children?: ReactNode;
+}
+
+export const VerticalNavItem = forwardRef<HTMLAnchorElement, VerticalNavItemProps>(
+  ({ href, glyph, label, active, onClick, ...props }, ref) => {
+    const classes = [styles.glyph, active && styles.glyphActive].filter(Boolean).join(' ');
+    
+    if (href) {
+      return <a ref={ref} href={href} className={classes} data-label={label} onClick={onClick} {...props}>{glyph}</a>;
+    }
+    return <button className={classes} data-label={label} onClick={onClick} {...props}>{glyph}</button>;
+  }
+);
+
+VerticalNavItem.displayName = 'VerticalNavItem';
+
+export const VerticalNav = forwardRef<HTMLElement, VerticalNavProps>(
+  ({ items, runeTop = 'ᛟ', runeBottom = 'ᛞ', variant = 'default', size = 'default', children, className, ...props }, ref) => {
+    const classes = [
+      styles.nav,
+      variant === 'dark' && styles.variantDark,
+      size === 'compact' && styles.sizeCompact,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <nav ref={ref} className={classes} {...props}>
+        <div className={styles.rune}>{runeTop}</div>
+        <div className={styles.items}>
+          {items?.map((item, i) => <VerticalNavItem key={i} {...item} />)}
+          {children}
+        </div>
+        <div className={styles.rune}>{runeBottom}</div>
+      </nav>
+    );
+  }
+);
+
+VerticalNav.displayName = 'VerticalNav';
+export default VerticalNav;

package/components/navigation/vertical-nav/vertical-nav.module.css

@@ -0,0 +1,98 @@
+/* vertical-nav - Nav latérale avec glyphes/runes */
+.nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 80px;
+  background: linear-gradient(to right, var(--chaos-obsidian, #121210) 0%, transparent 100%);
+  border-right: 1px solid var(--chaos-iron, #2a2820);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 0;
+  z-index: 100;
+}
+
+.rune {
+  font-size: 1.5rem;
+  color: var(--chaos-gold-dark, #8b7017);
+  opacity: 0.5;
+  animation: runeGlow 4s ease-in-out infinite;
+}
+
+@keyframes runeGlow {
+  0%, 100% { opacity: 0.3; text-shadow: none; }
+  50% { opacity: 0.8; text-shadow: 0 0 10px var(--chaos-gold, #c9a227); }
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.glyph {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--chaos-font-display, 'Cinzel Decorative', serif);
+  font-size: 1rem;
+  color: var(--chaos-bone-dark, #9a8b6f);
+  text-decoration: none;
+  border: 1px solid var(--chaos-iron, #2a2820);
+  position: relative;
+  transition: all 0.4s;
+}
+
+.glyph::before {
+  content: attr(data-label);
+  position: absolute;
+  left: 60px;
+  font-family: var(--chaos-font-serif, 'Cinzel', serif);
+  font-size: 0.6rem;
+  letter-spacing: 0.3em;
+  color: var(--chaos-bone-dark, #9a8b6f);
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: all 0.3s;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+
+.glyph:hover {
+  color: var(--chaos-gold, #c9a227);
+  border-color: var(--chaos-gold, #c9a227);
+  background: rgba(201, 162, 39, 0.1);
+}
+
+.glyph:hover::before {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.glyphActive {
+  color: var(--chaos-gold, #c9a227);
+  border-color: var(--chaos-gold, #c9a227);
+  box-shadow: 0 0 15px rgba(201, 162, 39, 0.3);
+}
+
+.variantDark {
+  background: linear-gradient(to right, var(--chaos-void, #0a0a0a) 0%, transparent 100%);
+  border-right-color: var(--chaos-blood, #ff0040);
+}
+
+.variantDark .rune { color: var(--chaos-blood, #ff0040); }
+.variantDark .glyph { border-color: rgba(255, 0, 64, 0.3); }
+.variantDark .glyph:hover {
+  color: var(--chaos-blood, #ff0040);
+  border-color: var(--chaos-blood, #ff0040);
+  background: rgba(255, 0, 64, 0.1);
+}
+
+.sizeCompact { width: 50px; padding: 1rem 0; }
+.sizeCompact .glyph { width: 30px; height: 30px; font-size: 0.8rem; }
+.sizeCompact .rune { font-size: 1rem; }

package/components/text/ascii-art/css/ascii-art.module.css

@@ -0,0 +1,173 @@
+.container {
+  display: block;
+  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
+  white-space: pre;
+  line-height: 1.2;
+  letter-spacing: 0;
+  overflow-x: auto;
+}
+
+/* Size variants */
+.xs { font-size: 0.5rem; }
+.sm { font-size: 0.65rem; }
+.md { font-size: 0.8rem; }
+.lg { font-size: 1rem; }
+.xl { font-size: 1.25rem; }
+
+/* Color variants */
+.blood {
+  color: #ff0040;
+  text-shadow: 0 0 5px #ff004080;
+}
+
+.cyber {
+  color: #00ffff;
+  text-shadow: 0 0 5px #00ffff80;
+}
+
+.matrix {
+  color: #00ff00;
+  text-shadow: 0 0 5px #00ff0080;
+}
+
+.amber {
+  color: #ffaa00;
+  text-shadow: 0 0 5px #ffaa0080;
+}
+
+.ghost {
+  color: #666;
+  opacity: 0.7;
+}
+
+.gradient {
+  background: linear-gradient(180deg, #ff0040 0%, #00ffff 50%, #00ff00 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Animation variants */
+.typing {
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typeIn 2s steps(40, end) forwards;
+}
+
+@keyframes typeIn {
+  from { max-width: 0; }
+  to { max-width: 100%; }
+}
+
+.reveal .line {
+  opacity: 0;
+  animation: lineReveal 0.5s forwards;
+}
+
+@keyframes lineReveal {
+  from { opacity: 0; transform: translateX(-10px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.glitch {
+  position: relative;
+}
+
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.glitch::before {
+  color: #ff0040;
+  animation: asciiGlitch1 3s infinite;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+}
+
+.glitch::after {
+  color: #00ffff;
+  animation: asciiGlitch2 3s infinite;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+}
+
+@keyframes asciiGlitch1 {
+  0%, 90%, 100% { transform: translate(0); opacity: 0; }
+  92% { transform: translate(-2px, 0); opacity: 0.8; }
+  94% { transform: translate(2px, 0); opacity: 0.8; }
+}
+
+@keyframes asciiGlitch2 {
+  0%, 90%, 100% { transform: translate(0); opacity: 0; }
+  93% { transform: translate(2px, 0); opacity: 0.8; }
+  95% { transform: translate(-2px, 0); opacity: 0.8; }
+}
+
+/* Scanline effect */
+.scanlines {
+  position: relative;
+}
+
+.scanlines::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 2px,
+    rgba(0, 0, 0, 0.1) 4px
+  );
+  pointer-events: none;
+}
+
+/* Border styles */
+.bordered {
+  border: 1px solid currentColor;
+  padding: 1rem;
+  position: relative;
+}
+
+.bordered::before {
+  content: '┌' attr(data-title) '┐';
+  position: absolute;
+  top: -0.6em;
+  left: 1rem;
+  background: inherit;
+  padding: 0 0.5rem;
+  font-size: 0.8em;
+}
+
+/* Flicker effect */
+.flicker {
+  animation: asciiFlicker 0.15s infinite;
+}
+
+@keyframes asciiFlicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+
+/* Pulse effect */
+.pulse {
+  animation: asciiPulse 2s ease-in-out infinite;
+}
+
+@keyframes asciiPulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* Line container for reveal animation */
+.line {
+  display: block;
+}

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

@@ -0,0 +1,116 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
+import styles from './ascii-art.module.css';
+
+export interface AsciiArtProps extends HTMLAttributes<HTMLPreElement> {
+  /** ASCII art content (multi-line string) */
+  children: string;
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Color variant */
+  variant?: 'default' | 'blood' | 'cyber' | 'matrix' | 'amber' | 'ghost' | 'gradient';
+  /** Animation effect */
+  animation?: 'none' | 'typing' | 'reveal' | 'glitch' | 'flicker' | 'pulse';
+  /** Show scanlines overlay */
+  scanlines?: boolean;
+  /** Show border */
+  bordered?: boolean;
+  /** Border title */
+  title?: string;
+  /** Delay between lines for reveal animation (ms) */
+  revealDelay?: number;
+  /** Custom color */
+  color?: string;
+}
+
+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 containerClasses = [
+      styles.container,
+      styles[size],
+      variant !== 'default' && styles[variant],
+      animation !== 'none' && styles[animation],
+      scanlines && styles.scanlines,
+      bordered && styles.bordered,
+      className
+    ].filter(Boolean).join(' ');
+
+    const renderContent = () => {
+      if (animation === 'reveal') {
+        return lines.map((line, i) => (
+          <span
+            key={i}
+            className={styles.line}
+            style={{
+              opacity: i < revealedLines ? 1 : 0,
+              animationDelay: `${i * revealDelay}ms`,
+              transform: i < revealedLines ? 'translateX(0)' : 'translateX(-10px)',
+              transition: 'opacity 0.3s ease, transform 0.3s ease',
+            }}
+          >
+            {line}
+            {'\n'}
+          </span>
+        ));
+      }
+      return children;
+    };
+
+    return (
+      <pre
+        ref={ref}
+        className={containerClasses}
+        style={{ 
+          color: color,
+          ...style 
+        }}
+        data-text={animation === 'glitch' ? children : undefined}
+        data-title={bordered ? title : undefined}
+        {...props}
+      >
+        {renderContent()}
+      </pre>
+    );
+  }
+);
+
+AsciiArt.displayName = 'AsciiArt';
+export default AsciiArt;