@oalacea/chaosui 0.4.0 → 0.5.0

package/components/layout/tower-pricing/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './tower-pricing.module.css';
+
+export interface PricingTier {
+  name: string;
+  price: number | string;
+  currency?: string;
+  period?: string;
+  features: string[];
+  featured?: boolean;
+  featuredLabel?: string;
+  buttonText?: string;
+  onSelect?: () => void;
+}
+
+export interface TowerPricingProps extends HTMLAttributes<HTMLDivElement> {
+  tiers: PricingTier[];
+  variant?: 'gold' | 'blood' | 'cyan' | 'bone';
+  showConnectors?: boolean;
+}
+
+export const TowerPricing = forwardRef<HTMLDivElement, TowerPricingProps>(
+  ({ tiers, variant = 'gold', showConnectors = false, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`${styles.tower} ${styles[variant]} ${className || ''}`} {...props}>
+        {tiers.map((tier, index) => (
+          <div key={tier.name} className={`${styles.tier} ${tier.featured ? styles.featured : ''}`}>
+            {tier.featured && tier.featuredLabel && <span className={styles.featuredBadge}>{tier.featuredLabel}</span>}
+            <div className={styles.tierHeader}>
+              <span className={styles.tierName}>{tier.name}</span>
+              <div className={styles.tierPrice}>
+                <span className={styles.currency}>{tier.currency || '$'}</span>
+                <span className={styles.amount}>{tier.price}</span>
+                {tier.period && <span className={styles.period}>/{tier.period}</span>}
+              </div>
+            </div>
+            <ul className={styles.tierFeatures}>
+              {tier.features.map((feature, i) => (
+                <li key={i} className={styles.feature}><span className={styles.featureIcon}>✦</span>{feature}</li>
+              ))}
+            </ul>
+            <div className={styles.tierAction}>
+              <button className={styles.actionButton} onClick={tier.onSelect}>{tier.buttonText || 'Select'}</button>
+            </div>
+            {showConnectors && index < tiers.length - 1 && <span className={styles.connector} />}
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+TowerPricing.displayName = 'TowerPricing';
+export default TowerPricing;

package/components/layout/tower-pricing/tower-pricing.module.css

@@ -0,0 +1,27 @@
+.tower { --tower-accent: #c9a227; --tower-bg: rgba(0, 0, 0, 0.6); --tower-border: rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 0; max-width: 400px; }
+.tier { position: relative; padding: 2rem; background: var(--tower-bg); border: 1px solid var(--tower-border); border-top: none; transition: all 0.3s ease; }
+.tier:first-child { border-top: 1px solid var(--tower-border); border-radius: 4px 4px 0 0; }
+.tier:last-child { border-radius: 0 0 4px 4px; }
+.tier:hover { background: rgba(201, 162, 39, 0.05); border-color: var(--tower-accent); z-index: 1; }
+.featured { border-color: var(--tower-accent); background: rgba(201, 162, 39, 0.1); transform: scale(1.02); z-index: 2; }
+.featured::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--tower-accent); }
+.featuredBadge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0.25rem 1rem; background: var(--tower-accent); color: #000; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
+.tierHeader { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tower-border); }
+.tierName { font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 700; color: var(--tower-accent); letter-spacing: 0.1em; }
+.tierPrice { display: flex; align-items: baseline; gap: 0.25rem; }
+.currency { font-size: 1rem; color: rgba(255, 255, 255, 0.5); }
+.amount { font-size: 2rem; font-weight: 700; color: #fff; }
+.period { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
+.tierFeatures { list-style: none; margin: 1rem 0; padding: 0; }
+.feature { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
+.featureIcon { color: var(--tower-accent); font-size: 0.75rem; }
+.tierAction { margin-top: 1.5rem; }
+.actionButton { width: 100%; padding: 0.875rem 1.5rem; background: transparent; border: 1px solid var(--tower-accent); color: var(--tower-accent); font-family: inherit; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: all 0.3s ease; }
+.actionButton:hover { background: var(--tower-accent); color: #000; }
+.featured .actionButton { background: var(--tower-accent); color: #000; }
+.featured .actionButton:hover { background: transparent; color: var(--tower-accent); }
+.gold { --tower-accent: #c9a227; }
+.blood { --tower-accent: #8b1a1a; }
+.cyan { --tower-accent: #00f0ff; }
+.bone { --tower-accent: #d4c5a9; }
+.connector { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 1px; height: 20px; background: var(--tower-accent); opacity: 0.3; }

package/components/layout/tracklist/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './tracklist.module.css';
+
+export interface Track {
+  number: number | string;
+  name: string;
+  artist?: string;
+  duration: string;
+  active?: boolean;
+}
+
+export interface TracklistProps extends HTMLAttributes<HTMLDivElement> {
+  tracks: Track[];
+  variant?: 'silver' | 'blood' | 'gold' | 'bone';
+  showHeader?: boolean;
+  compact?: boolean;
+  numbered?: boolean;
+  onTrackClick?: (track: Track, index: number) => void;
+}
+
+export const Tracklist = forwardRef<HTMLDivElement, TracklistProps>(
+  ({ tracks, variant = 'silver', showHeader = false, compact = false, numbered = false, onTrackClick, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`${styles.tracklist} ${styles[variant]} ${compact ? styles.compact : ''} ${numbered ? styles.numbered : ''} ${className || ''}`} {...props}>
+        {showHeader && <div className={styles.header}><span>#</span><span>Title</span><span></span><span>Duration</span></div>}
+        {tracks.map((track, index) => (
+          <div key={index} className={`${styles.track} ${track.active ? styles.active : ''}`} onClick={() => onTrackClick?.(track, index)}>
+            <span className={styles.trackNum}>{String(track.number).padStart(2, '0')}</span>
+            <div className={styles.trackInfo}>
+              <span className={styles.trackName}>{track.name}</span>
+              {track.artist && <span className={styles.trackArtist}>{track.artist}</span>}
+            </div>
+            {!compact && <div className={styles.trackBarContainer}><div className={styles.trackBar} /></div>}
+            <span className={styles.trackDuration}>{track.duration}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+Tracklist.displayName = 'Tracklist';
+export default Tracklist;

package/components/layout/tracklist/tracklist.module.css

@@ -0,0 +1,24 @@
+.tracklist { --track-accent: #888; --track-hover: rgba(255, 255, 255, 0.05); --track-active: rgba(139, 26, 26, 0.2); display: flex; flex-direction: column; font-family: 'Cormorant Garamond', serif; }
+.track { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: all 0.3s ease; }
+.track:hover { background: var(--track-hover); }
+.track:hover .trackBar { width: 100%; }
+.trackNum { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--track-accent); min-width: 2rem; }
+.trackInfo { display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; }
+.trackName { font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.trackArtist { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); font-style: italic; }
+.trackBarContainer { position: relative; width: 80px; height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
+.trackBar { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--track-accent); transition: width 0.6s ease; }
+.trackDuration { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); min-width: 3rem; text-align: right; }
+.active { background: var(--track-active); }
+.active .trackNum { color: #8b1a1a; }
+.active .trackNum::before { content: '▶'; margin-right: 0.5rem; }
+.active .trackBar { animation: progress 180s linear forwards; }
+@keyframes progress { from { width: 0; } to { width: 100%; } }
+.silver { --track-accent: #888; }
+.blood { --track-accent: #8b1a1a; --track-active: rgba(139, 26, 26, 0.2); }
+.gold { --track-accent: #c9a227; --track-active: rgba(201, 162, 39, 0.2); }
+.bone { --track-accent: #d4c5a9; --track-active: rgba(212, 197, 169, 0.2); }
+.header { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.5rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--track-accent); }
+.compact .track { padding: 0.75rem 1rem; gap: 1rem; }
+.compact .trackBarContainer { display: none; }
+.numbered .trackNum { font-size: 1.25rem; font-family: 'Playfair Display', serif; font-weight: 700; }

package/components/layout/void-frame/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './void-frame.module.css';
+
+export interface VoidFrameProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  variant?: 'gold' | 'bone' | 'blood' | 'iron' | 'cyan';
+  cornerStyle?: 'simple' | 'extended' | 'ornate';
+  glow?: boolean;
+  padding?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export const VoidFrame = forwardRef<HTMLDivElement, VoidFrameProps>(
+  ({ children, variant = 'gold', cornerStyle = 'simple', glow = false, padding = 'md', className, style, ...props }, ref) => {
+    const paddingSizes = { sm: '1rem', md: '2rem', lg: '3rem', xl: '4rem' };
+    const cornerStyleClass = cornerStyle === 'extended' ? styles.extended : cornerStyle === 'ornate' ? styles.ornate : '';
+
+    return (
+      <div ref={ref} className={`${styles.frame} ${styles[variant]} ${cornerStyleClass} ${glow ? styles.glow : ''} ${className || ''}`} style={{ padding: paddingSizes[padding], ...style }} {...props}>
+        <span className={`${styles.corner} ${styles.cornerTopLeft}`} />
+        <span className={`${styles.corner} ${styles.cornerTopRight}`} />
+        <span className={`${styles.corner} ${styles.cornerBottomLeft}`} />
+        <span className={`${styles.corner} ${styles.cornerBottomRight}`} />
+        {children}
+      </div>
+    );
+  }
+);
+
+VoidFrame.displayName = 'VoidFrame';
+export default VoidFrame;

package/components/layout/void-frame/void-frame.module.css

@@ -0,0 +1,38 @@
+.frame {
+  --frame-color: #c9a227;
+  --frame-bg: rgba(0, 0, 0, 0.5);
+  position: relative;
+  padding: 2rem;
+  background: var(--frame-bg);
+  border: 1px solid var(--frame-color);
+}
+.corner { position: absolute; width: 20px; height: 20px; border-color: var(--frame-color); border-style: solid; }
+.cornerTopLeft { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
+.cornerTopRight { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
+.cornerBottomLeft { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
+.cornerBottomRight { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
+.extended .corner { width: 30px; height: 30px; }
+.extended .corner::before, .extended .corner::after { content: ''; position: absolute; background: var(--frame-color); }
+.extended .cornerTopLeft::before, .extended .cornerBottomLeft::before { left: 5px; width: 1px; height: 15px; }
+.extended .cornerTopLeft::before { top: 5px; }
+.extended .cornerBottomLeft::before { bottom: 5px; }
+.extended .cornerTopRight::before, .extended .cornerBottomRight::before { right: 5px; width: 1px; height: 15px; }
+.extended .cornerTopRight::before { top: 5px; }
+.extended .cornerBottomRight::before { bottom: 5px; }
+.extended .cornerTopLeft::after, .extended .cornerTopRight::after { top: 5px; height: 1px; width: 15px; }
+.extended .cornerTopLeft::after { left: 5px; }
+.extended .cornerTopRight::after { right: 5px; }
+.extended .cornerBottomLeft::after, .extended .cornerBottomRight::after { bottom: 5px; height: 1px; width: 15px; }
+.extended .cornerBottomLeft::after { left: 5px; }
+.extended .cornerBottomRight::after { right: 5px; }
+.ornate .corner { width: 40px; height: 40px; }
+.ornate::before { content: '✦'; position: absolute; top: -0.5em; left: 50%; transform: translateX(-50%); color: var(--frame-color); font-size: 1rem; }
+.ornate::after { content: '✦'; position: absolute; bottom: -0.5em; left: 50%; transform: translateX(-50%); color: var(--frame-color); font-size: 1rem; }
+.gold { --frame-color: #c9a227; }
+.bone { --frame-color: #d4c5a9; }
+.blood { --frame-color: #8b1a1a; }
+.iron { --frame-color: #4a4a4a; }
+.cyan { --frame-color: #00f0ff; }
+.glow { box-shadow: 0 0 20px rgba(201, 162, 39, 0.2); }
+.glow.cyan { box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); }
+.glow.blood { box-shadow: 0 0 20px rgba(139, 26, 26, 0.3); }

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

@@ -0,0 +1,85 @@
+/* brutal-nav - Nav brutaliste chaotique avec status */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: var(--chaos-void, #0a0a0a);
+  border-bottom: 3px solid var(--chaos-blood, #ff0040);
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+}
+
+.inner { display: flex; align-items: stretch; height: 60px; }
+
+.brand {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.links { display: flex; flex: 1; }
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--chaos-bone-dark, #888);
+  text-decoration: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  transition: all 0.15s;
+}
+
+.link:hover { background: var(--chaos-blood, #ff0040); color: var(--chaos-void, #0a0a0a); }
+
+.linkActive {
+  background: rgba(255, 0, 64, 0.1);
+  color: var(--chaos-blood, #ff0040);
+}
+
+.linkActive::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--chaos-blood, #ff0040);
+}
+
+.status {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 0 2rem;
+  background: rgba(0, 0, 0, 0.5);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.statusItem { display: flex; flex-direction: column; gap: 0.2rem; }
+.statusLabel { font-size: 0.5rem; color: var(--chaos-bone-dark, #666); letter-spacing: 0.2em; text-transform: uppercase; }
+.statusValue { font-size: 0.7rem; color: var(--chaos-blood, #ff0040); font-weight: bold; }
+.statusOnline { display: flex; align-items: center; gap: 0.5rem; }
+
+.dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
+.dotOnline { background: #00ff00; box-shadow: 0 0 10px #00ff00; }
+.dotOffline { background: #ff0040; }
+.dotWarning { background: #ffaa00; animation: blink 0.5s infinite; }
+
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+@keyframes blink { 50% { opacity: 0; } }
+
+.variantHeavy { border-bottom-width: 5px; }
+.variantHeavy .brand { clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); padding-right: 3rem; }
+.variantDouble { border-bottom: 2px solid var(--chaos-blood, #ff0040); box-shadow: 0 4px 0 0 var(--chaos-blood, #ff0040); }

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './brutal-nav.module.css';
+
+export interface BrutalNavLinkProps {
+  href: string;
+  children: ReactNode;
+  active?: boolean;
+}
+
+export interface BrutalNavStatusProps {
+  label: string;
+  value: string;
+  status?: 'online' | 'offline' | 'warning';
+}
+
+export interface BrutalNavProps extends HTMLAttributes<HTMLElement> {
+  brand: string;
+  links?: BrutalNavLinkProps[];
+  statusItems?: BrutalNavStatusProps[];
+  variant?: 'default' | 'heavy' | 'double';
+  children?: ReactNode;
+}
+
+export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
+  ({ brand, links, statusItems, variant = 'default', children, className, ...props }, ref) => {
+    const navClasses = [
+      styles.nav,
+      variant === 'heavy' && styles.variantHeavy,
+      variant === 'double' && styles.variantDouble,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <nav ref={ref} className={navClasses} {...props}>
+        <div className={styles.inner}>
+          <div className={styles.brand}>{brand}</div>
+          
+          <div className={styles.links}>
+            {links?.map((link, i) => (
+              <a key={i} href={link.href} className={`${styles.link} ${link.active ? styles.linkActive : ''}`}>
+                {link.children}
+              </a>
+            ))}
+            {children}
+          </div>
+
+          {statusItems && statusItems.length > 0 && (
+            <div className={styles.status}>
+              {statusItems.map((item, i) => (
+                <div key={i} className={styles.statusItem}>
+                  <span className={styles.statusLabel}>{item.label}</span>
+                  <span className={styles.statusOnline}>
+                    {item.status && (
+                      <span className={`${styles.dot} ${styles[`dot${item.status.charAt(0).toUpperCase() + item.status.slice(1)}`]}`} />
+                    )}
+                    <span className={styles.statusValue}>{item.value}</span>
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </nav>
+    );
+  }
+);
+
+BrutalNav.displayName = 'BrutalNav';
+export default BrutalNav;

package/components/navigation/progress-dots/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './progress-dots.module.css';
+
+export interface ProgressDotItem {
+  id: string;
+  label?: string;
+  href?: string;
+}
+
+export interface ProgressDotsProps extends HTMLAttributes<HTMLDivElement> {
+  items: ProgressDotItem[];
+  activeId?: string;
+  variant?: 'default' | 'gold' | 'minimal';
+  direction?: 'vertical' | 'horizontal';
+  showConnector?: boolean;
+  onDotClick?: (id: string) => void;
+}
+
+export const ProgressDots = forwardRef<HTMLDivElement, ProgressDotsProps>(
+  ({ items, activeId, variant = 'default', direction = 'vertical', showConnector = false, onDotClick, className, ...props }, ref) => {
+    const containerClasses = [
+      styles.container,
+      variant === 'gold' && styles.variantGold,
+      variant === 'minimal' && styles.variantMinimal,
+      direction === 'horizontal' && styles.horizontal,
+      showConnector && styles.withConnector,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const handleClick = (id: string, href?: string) => {
+      if (onDotClick) onDotClick(id);
+      if (href) document.querySelector(href)?.scrollIntoView({ behavior: 'smooth' });
+    };
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        {items.map((item) => (
+          <button
+            key={item.id}
+            className={`${styles.dot} ${item.label ? styles.dotWithLabel : ''} ${activeId === item.id ? styles.dotActive : ''}`}
+            onClick={() => handleClick(item.id, item.href)}
+            aria-label={item.label || `Go to section ${item.id}`}
+          >
+            {item.label && <span className={styles.label}>{item.label}</span>}
+          </button>
+        ))}
+      </div>
+    );
+  }
+);
+
+ProgressDots.displayName = 'ProgressDots';
+export default ProgressDots;

package/components/navigation/progress-dots/progress-dots.module.css

@@ -0,0 +1,91 @@
+/* progress-dots - Indicateur de section (dots) */
+.container {
+  position: fixed;
+  right: 2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: transparent;
+  border: 2px solid var(--chaos-bone-dark, #666);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.dot::before {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  background: var(--chaos-bone-dark, #666);
+  transform: scale(0);
+  transition: transform 0.3s ease;
+}
+
+.dot:hover { border-color: var(--chaos-blood, #ff0040); }
+.dot:hover::before { transform: scale(0.5); background: var(--chaos-blood, #ff0040); }
+
+.dotActive {
+  border-color: var(--chaos-blood, #ff0040);
+  box-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
+}
+
+.dotActive::before { transform: scale(1); background: var(--chaos-blood, #ff0040); }
+
+.dotWithLabel { position: relative; }
+
+.label {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 1rem;
+  font-size: 0.6rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--chaos-bone-dark, #666);
+  opacity: 0;
+  transition: all 0.3s;
+  white-space: nowrap;
+  font-family: var(--chaos-font-mono, monospace);
+}
+
+.dot:hover .label { opacity: 1; }
+.dotActive .label { opacity: 1; color: var(--chaos-blood, #ff0040); }
+
+.withConnector .dot:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 1px;
+  height: 1.5rem;
+  background: var(--chaos-bone-dark, #333);
+  transform: translateX(-50%);
+}
+
+.variantGold .dot { border-color: var(--chaos-gold-dark, #8b7017); }
+.variantGold .dot:hover { border-color: var(--chaos-gold, #c9a227); }
+.variantGold .dot:hover::before { background: var(--chaos-gold, #c9a227); }
+.variantGold .dotActive { border-color: var(--chaos-gold, #c9a227); box-shadow: 0 0 10px rgba(201, 162, 39, 0.5); }
+.variantGold .dotActive::before { background: var(--chaos-gold, #c9a227); }
+.variantGold .dotActive .label { color: var(--chaos-gold, #c9a227); }
+
+.variantMinimal .dot { width: 8px; height: 8px; border-width: 1px; }
+
+.horizontal {
+  flex-direction: row;
+  top: auto;
+  bottom: 2rem;
+  right: 50%;
+  transform: translateX(50%);
+}

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './scattered-nav.module.css';
+
+export interface ScatteredNavItemProps {
+  href?: string;
+  children: ReactNode;
+  variant?: 'default' | 'logo' | 'corrupt' | 'status' | 'blink';
+  scattered?: 1 | 2 | 3 | 4 | 5;
+  glitchText?: string;
+}
+
+export interface ScatteredNavProps extends HTMLAttributes<HTMLElement> {
+  items?: ScatteredNavItemProps[];
+  children?: ReactNode;
+}
+
+export const ScatteredNavItem = forwardRef<HTMLAnchorElement | HTMLDivElement, ScatteredNavItemProps>(
+  ({ href, children, variant = 'default', scattered, glitchText, ...props }, ref) => {
+    const classes = [
+      styles.item,
+      variant === 'logo' && styles.logo,
+      variant === 'corrupt' && styles.corrupt,
+      variant === 'status' && styles.status,
+      variant === 'blink' && styles.blink,
+      scattered && styles[`scattered${scattered}`],
+    ].filter(Boolean).join(' ');
+
+    const content = glitchText ? (
+      <span className={styles.glitch} data-text={glitchText}>{children}</span>
+    ) : variant === 'status' ? (
+      <><span className={styles.statusDot} />{children}</>
+    ) : children;
+
+    if (href) {
+      return <a ref={ref as any} href={href} className={classes} {...props}>{content}</a>;
+    }
+    return <div ref={ref as any} className={classes} {...props}>{content}</div>;
+  }
+);
+
+ScatteredNavItem.displayName = 'ScatteredNavItem';
+
+export const ScatteredNav = forwardRef<HTMLElement, ScatteredNavProps>(
+  ({ items, children, className, ...props }, ref) => {
+    return (
+      <nav ref={ref} className={`${styles.nav} ${className || ''}`} {...props}>
+        {items?.map((item, i) => (
+          <ScatteredNavItem key={i} {...item} />
+        ))}
+        {children}
+      </nav>
+    );
+  }
+);
+
+ScatteredNav.displayName = 'ScatteredNav';
+export default ScatteredNav;