@oalacea/chaosui 0.1.0 → 0.5.0

package/bin/cli.js

@@ -24,10 +24,25 @@ const COMPONENTS = {
   'flicker-text': { category: 'text', description: 'Text that flickers randomly', status: 'ready' },
   'distortion-text': { category: 'text', description: 'Wave/shake/skew/blur text effects', status: 'ready' },
   'falling-text': { category: 'text', description: 'Letters falling in cascade', status: 'ready' },
+  'typing-text': { category: 'text', description: 'Terminal typing effect', status: 'ready' },
+  'char-glitch': { category: 'text', description: 'Per-character glitch effect', status: 'ready' },
+  'reveal-text': { category: 'text', description: 'Text reveal on scroll', status: 'ready' },
+  'strike-reveal': { category: 'text', description: 'Strikethrough then reveal', status: 'ready' },
+  'giant-layers': { category: 'text', description: 'Giant text with 3D shadow layers', status: 'ready' },
+  'blood-drip': { category: 'text', description: 'Dripping blood effect letters', status: 'ready' },
+  'rotate-text': { category: 'text', description: 'Vertical rotating text', status: 'ready' },
+  'ascii-art': { category: 'text', description: 'Styled ASCII art block', status: 'ready' },
+  'countdown-display': { category: 'text', description: 'Stylized countdown timer', status: 'ready' },
+  'terminal-output': { category: 'text', description: 'Terminal block with prompt', status: 'ready' },
   
   // Buttons
   'glitch-button': { category: 'buttons', description: 'Button with glitch hover effect', status: 'ready' },
   'chaos-button': { category: 'buttons', description: 'Chaotic animated button with debris', status: 'ready' },
+  'dead-button': { category: 'buttons', description: 'Destroyed/glitched button with layers', status: 'ready' },
+  'deeper-button': { category: 'buttons', description: 'Go deeper style descent button', status: 'ready' },
+  'dual-choice': { category: 'buttons', description: 'Yes/No dual button choice', status: 'ready' },
+  'cta-brutal': { category: 'buttons', description: 'Brutalist CTA button', status: 'ready' },
+  'tension-bar': { category: 'buttons', description: 'Dramatic tension/progress bar', status: 'ready' },
   
   // Backgrounds
   'noise-canvas': { category: 'backgrounds', description: 'Animated noise canvas background', status: 'ready' },
@@ -39,6 +54,49 @@ const COMPONENTS = {
   'warning-tape': { category: 'effects', description: 'Scrolling warning tape banner', status: 'ready' },
   'cursor-follower': { category: 'effects', description: 'Custom cursor with trail', status: 'ready' },
   'screen-distortion': { category: 'effects', description: 'Full screen distortion effect', status: 'ready' },
+  'glowing-border': { category: 'effects', description: 'Glowing border container with pulse', status: 'ready' },
+  'glitch-image': { category: 'effects', description: 'Image with RGB glitch on hover', status: 'ready' },
+  
+  // Neon components
+  'neon-button': { category: 'neon', description: 'Button with neon glow effect', status: 'ready' },
+  'neon-badge': { category: 'neon', description: 'Luminous status badges', status: 'ready' },
+  'neon-progress': { category: 'neon', description: 'Glowing progress bar with shimmer', status: 'ready' },
+  'neon-toggle': { category: 'neon', description: 'On/off switch with neon glow', status: 'ready' },
+  'neon-alert': { category: 'neon', description: 'Alert notifications with neon style', status: 'ready' },
+  'neon-tabs': { category: 'neon', description: 'Tab navigation with glow effect', status: 'ready' },
+  'neon-divider': { category: 'neon', description: 'Luminous section dividers', status: 'ready' },
+  
+  // Cyber components
+  'cyber-input': { category: 'cyber', description: 'Input with animated border glow', status: 'ready' },
+  'cyber-loader': { category: 'cyber', description: 'Futuristic spinners and loaders', status: 'ready' },
+  'cyber-modal': { category: 'cyber', description: 'Modal with scanlines and glow', status: 'ready' },
+  'cyber-avatar': { category: 'cyber', description: 'Avatar with neon border and status', status: 'ready' },
+  'cyber-slider': { category: 'cyber', description: 'Slider with neon track and thumb', status: 'ready' },
+  'cyber-tooltip': { category: 'cyber', description: 'Terminal-style tooltips', status: 'ready' },
+  
+  // Layout components
+  'hologram-card': { category: 'layout', description: 'Holographic card with scanlines', status: 'ready' },
+  'data-grid': { category: 'layout', description: 'Terminal-style data table', status: 'ready' },
+  'horizontal-scroll': { category: 'layout', description: 'Horizontal scrolling panels', status: 'ready' },
+  'void-frame': { category: 'layout', description: 'Frame with decorative corners', status: 'ready' },
+  'tower-pricing': { category: 'layout', description: 'Vertical stacked pricing cards', status: 'ready' },
+  'spec-grid': { category: 'layout', description: 'Terminal-style specs grid', status: 'ready' },
+  'tracklist': { category: 'layout', description: 'Music tracklist component', status: 'ready' },
+  
+  // Navigation
+  'hexagon-menu': { category: 'navigation', description: 'Honeycomb hexagon menu', status: 'ready' },
+  'scattered-nav': { category: 'navigation', description: 'Scattered fragment navigation', status: 'ready' },
+  'vertical-nav': { category: 'navigation', description: 'Vertical nav with glyphs', status: 'ready' },
+  'brutal-nav': { category: 'navigation', description: 'Brutalist chaotic navigation', status: 'ready' },
+  'progress-dots': { category: 'navigation', description: 'Section progress indicator', status: 'ready' },
+  'scroll-indicator': { category: 'navigation', description: 'Vertical scroll indicator', status: 'ready' },
+  
+  // Decorative
+  'rune-symbols': { category: 'decorative', description: 'Animated runic symbols', status: 'ready' },
+  'ornaments': { category: 'decorative', description: 'Medieval ornaments', status: 'ready' },
+  'coffee-stain': { category: 'decorative', description: 'Coffee stain/aged paper effect', status: 'ready' },
+  'sheet-music': { category: 'decorative', description: 'Floating music notes', status: 'ready' },
+  'inscription': { category: 'decorative', description: 'Stone carved inscription', status: 'ready' },
 };
 
 const program = new Command();
@@ -75,8 +133,15 @@ program
   .command('add [component]')
   .description('Add a component to your project')
   .option('-d, --dir <path>', 'Target directory', './components/chaos')
+  .option('-v, --variant <type>', 'Styling variant: css or tailwind', 'css')
   .option('-y, --yes', 'Skip confirmation')
   .action(async (componentName, options) => {
+    const variant = options.variant.toLowerCase();
+    if (!['css', 'tailwind'].includes(variant)) {
+      console.log(pc.red(`\n✗ Invalid variant "${variant}". Use 'css' or 'tailwind'.\n`));
+      return;
+    }
+
     // If no component specified, show interactive picker
     if (!componentName) {
       const choices = Object.entries(COMPONENTS).map(([name, info]) => ({
@@ -85,20 +150,33 @@ program
         value: name,
       }));
       
-      const response = await prompts({
-        type: 'autocomplete',
-        name: 'component',
-        message: 'Which component?',
-        choices,
-        suggest: (input, choices) => 
-          choices.filter(c => c.title.includes(input) || c.description.toLowerCase().includes(input.toLowerCase()))
-      });
+      const response = await prompts([
+        {
+          type: 'autocomplete',
+          name: 'component',
+          message: 'Which component?',
+          choices,
+          suggest: (input, choices) => 
+            choices.filter(c => c.title.includes(input) || c.description.toLowerCase().includes(input.toLowerCase()))
+        },
+        {
+          type: 'select',
+          name: 'variant',
+          message: 'Styling variant?',
+          choices: [
+            { title: 'CSS Modules', value: 'css' },
+            { title: 'Tailwind', value: 'tailwind' },
+          ],
+          initial: variant === 'tailwind' ? 1 : 0,
+        }
+      ]);
       
       if (!response.component) {
         console.log(pc.dim('Cancelled.'));
         return;
       }
       componentName = response.component;
+      options.variant = response.variant || variant;
     }
     
     // Validate component exists
@@ -109,22 +187,36 @@ program
     }
     
     const info = COMPONENTS[componentName];
-    const sourceDir = path.join(COMPONENTS_DIR, info.category, componentName);
+    const baseDir = path.join(COMPONENTS_DIR, info.category, componentName);
+    
+    // Check if component has variant subdirs or is legacy (flat structure)
+    const variantDir = path.join(baseDir, options.variant);
+    const hasVariants = fs.existsSync(path.join(baseDir, 'css')) || fs.existsSync(path.join(baseDir, 'tailwind'));
+    const sourceDir = hasVariants ? variantDir : baseDir;
     const targetDir = path.resolve(options.dir, info.category);
     
     // Check source exists
     if (!fs.existsSync(sourceDir)) {
-      console.log(pc.yellow(`\n⚠ Component "${componentName}" is not yet implemented.`));
-      console.log(pc.dim('  Coming soon!\n'));
+      if (hasVariants) {
+        console.log(pc.yellow(`\n⚠ Variant "${options.variant}" not available for "${componentName}".`));
+        const available = [];
+        if (fs.existsSync(path.join(baseDir, 'css'))) available.push('css');
+        if (fs.existsSync(path.join(baseDir, 'tailwind'))) available.push('tailwind');
+        console.log(pc.dim(`  Available variants: ${available.join(', ')}\n`));
+      } else {
+        console.log(pc.yellow(`\n⚠ Component "${componentName}" is not yet implemented.`));
+        console.log(pc.dim('  Coming soon!\n'));
+      }
       return;
     }
     
     // Confirm
     if (!options.yes) {
+      const variantLabel = hasVariants ? ` (${pc.magenta(options.variant)})` : '';
       const confirm = await prompts({
         type: 'confirm',
         name: 'value',
-        message: `Add ${pc.cyan(componentName)} to ${pc.dim(targetDir)}?`,
+        message: `Add ${pc.cyan(componentName)}${variantLabel} to ${pc.dim(targetDir)}?`,
         initial: true,
       });
       
@@ -139,7 +231,7 @@ program
       await fs.ensureDir(targetDir);
       await fs.copy(sourceDir, path.join(targetDir, componentName));
       
-      console.log(pc.green(`\n✓ Added ${componentName}`));
+      console.log(pc.green(`\n✓ Added ${componentName}`) + (hasVariants ? pc.magenta(` (${options.variant})`) : ''));
       console.log(pc.dim(`  → ${path.join(targetDir, componentName)}\n`));
       
       // Show usage hint

package/components/backgrounds/glow-orbs/index.tsx

@@ -21,7 +21,7 @@ export interface GlowOrbsProps extends HTMLAttributes<HTMLDivElement> {
 export const GlowOrbs = forwardRef<HTMLDivElement, GlowOrbsProps>(
   (
     {
-      colors = ['#7c3aed', '#06b6d4', '#ec4899', '#10b981'],
+      colors = ['hsl(var(--primary))', 'hsl(var(--secondary))', 'hsl(var(--accent, 300 100% 50%))', 'hsl(var(--muted))'],
       count = 5,
       sizeRange = [100, 300],
       blur = 80,

package/components/buttons/chaos-button/chaos-button.module.css

@@ -1,5 +1,6 @@
 .button {
-  --accent: #ff0040;
+  --accent: hsl(var(--primary, 347 100% 50%));
+  --accent-alt: hsl(var(--secondary, 180 100% 50%));
   position: relative;
   padding: 1rem 2.5rem;
   font-family: inherit;
@@ -132,7 +133,7 @@
 }
 
 .ghost1 { color: var(--accent); }
-.ghost2 { color: #00ffff; }
+.ghost2 { color: var(--accent-alt); }
 
 .button:hover .ghost1 {
   opacity: 0.6;

package/components/buttons/cta-brutal/cta-brutal.module.css

@@ -0,0 +1,81 @@
+/* cta-brutal - CTA style brutaliste */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1.5rem 3rem;
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.15s;
+  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
+}
+
+.button:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 var(--chaos-bone, #e8e8e8);
+}
+
+.button:active {
+  transform: translate(0, 0);
+  box-shadow: none;
+}
+
+.icon { font-size: 1.2em; transition: transform 0.3s; }
+.button:hover .icon { transform: translateX(5px); }
+
+.variantOutline {
+  background: transparent;
+  border: 3px solid var(--chaos-blood, #ff0040);
+  color: var(--chaos-blood, #ff0040);
+  clip-path: none;
+}
+
+.variantOutline:hover {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.variantGold { background: var(--chaos-gold, #c9a227); }
+.variantGold:hover { box-shadow: 4px 4px 0 var(--chaos-gold-dark, #8b7017); }
+
+.variantInverse { background: var(--chaos-bone, #e8e8e8); color: var(--chaos-void, #0a0a0a); }
+.variantInverse:hover { box-shadow: 4px 4px 0 var(--chaos-blood, #ff0040); }
+
+.sizeSm { padding: 0.8rem 1.5rem; font-size: 1rem; }
+.sizeLg { padding: 2rem 4rem; font-size: 2rem; }
+.sizeXl { padding: 2.5rem 5rem; font-size: 2.5rem; }
+
+.fullWidth { width: 100%; clip-path: none; }
+.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+
+.loading { position: relative; color: transparent; }
+.loading::after {
+  content: '';
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.shake:hover { animation: shake 0.1s infinite; }
+
+@keyframes shake {
+  0%, 100% { transform: translate(-2px, -2px); }
+  25% { transform: translate(-1px, -3px); }
+  50% { transform: translate(-3px, -1px); }
+  75% { transform: translate(-2px, -2px); }
+}

package/components/buttons/cta-brutal/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+import styles from './cta-brutal.module.css';
+
+type BaseProps = {
+  children: ReactNode;
+  variant?: 'default' | 'outline' | 'gold' | 'inverse';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
+  fullWidth?: boolean;
+  shake?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+type ButtonProps = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never };
+type AnchorProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+export type CtaBrutalProps = ButtonProps | AnchorProps;
+
+export const CtaBrutal = forwardRef<HTMLButtonElement | HTMLAnchorElement, CtaBrutalProps>(
+  ({ children, variant = 'default', size = 'md', icon, iconPosition = 'right', fullWidth = false, shake = false, loading = false, disabled = false, className, ...props }, ref) => {
+    const classes = [
+      styles.button,
+      variant === 'outline' && styles.variantOutline,
+      variant === 'gold' && styles.variantGold,
+      variant === 'inverse' && styles.variantInverse,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      size === 'xl' && styles.sizeXl,
+      fullWidth && styles.fullWidth,
+      shake && styles.shake,
+      loading && styles.loading,
+      disabled && styles.disabled,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const content = (
+      <>
+        {icon && iconPosition === 'left' && <span className={styles.icon}>{icon}</span>}
+        {children}
+        {icon && iconPosition === 'right' && <span className={styles.icon}>{icon}</span>}
+      </>
+    );
+
+    if ('href' in props && props.href) {
+      return <a ref={ref as any} className={classes} {...(props as AnchorProps)}>{content}</a>;
+    }
+    return <button ref={ref as any} className={classes} disabled={disabled || loading} {...(props as ButtonProps)}>{content}</button>;
+  }
+);
+
+CtaBrutal.displayName = 'CtaBrutal';
+export default CtaBrutal;

package/components/buttons/dead-button/dead-button.module.css

@@ -0,0 +1,111 @@
+/* dead-button - Bouton détruit/glitché avec layers */
+.container {
+  position: relative;
+  width: 280px;
+  height: 60px;
+  animation: btnShake 0.1s infinite;
+  cursor: not-allowed;
+}
+
+.container:hover { animation: btnShakeHard 0.05s infinite; }
+
+@keyframes btnShake {
+  0%, 100% { transform: translate(0); }
+  25% { transform: translate(0.5px, 0.5px); }
+  50% { transform: translate(-0.5px, -0.5px); }
+  75% { transform: translate(0.5px, -0.5px); }
+}
+
+@keyframes btnShakeHard {
+  0%, 100% { transform: translate(0) rotate(0); }
+  25% { transform: translate(2px, 1px) rotate(0.5deg); }
+  50% { transform: translate(-1px, -2px) rotate(-0.5deg); }
+  75% { transform: translate(1px, -1px) rotate(0.3deg); }
+}
+
+.clean {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+  font-weight: 600;
+  font-size: 1rem;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  letter-spacing: 0.02em;
+}
+
+.gradient2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4); }
+.gradient3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4); }
+.gradient4 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4); }
+
+.icon { font-size: 1.1rem; }
+
+.destroy {
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 0, 64, 0.1) 2px, rgba(255, 0, 64, 0.1) 4px),
+    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0.3) 4px);
+  border-radius: 16px;
+  mix-blend-mode: multiply;
+}
+
+.noise {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.15;
+  mix-blend-mode: overlay;
+  animation: noiseMove 0.2s steps(5) infinite;
+}
+
+@keyframes noiseMove {
+  0% { transform: translate(0, 0); }
+  20% { transform: translate(-2px, 1px); }
+  40% { transform: translate(1px, -1px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(-1px, -2px); }
+  100% { transform: translate(0, 0); }
+}
+
+.glitch1, .glitch2 { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; }
+.glitch1 { background: var(--chaos-blood, #ff0040); mix-blend-mode: color-dodge; opacity: 0; animation: glitchSlice1 3s infinite; }
+.glitch2 { background: cyan; mix-blend-mode: color-dodge; opacity: 0; animation: glitchSlice2 3s infinite; }
+
+@keyframes glitchSlice1 {
+  0%, 89%, 91%, 93%, 95%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
+  90% { opacity: 0.8; clip-path: inset(20% 0 60% 0); transform: translateX(-5px); }
+  92% { opacity: 0.6; clip-path: inset(50% 0 30% 0); transform: translateX(3px); }
+  94% { opacity: 0.7; clip-path: inset(70% 0 10% 0); transform: translateX(-2px); }
+}
+
+@keyframes glitchSlice2 {
+  0%, 89%, 91%, 93%, 95%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
+  90% { opacity: 0.5; clip-path: inset(30% 0 50% 0); transform: translateX(4px); }
+  92% { opacity: 0.4; clip-path: inset(10% 0 70% 0); transform: translateX(-3px); }
+  94% { opacity: 0.6; clip-path: inset(60% 0 20% 0); transform: translateX(5px); }
+}
+
+.container::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -10px;
+  right: -10px;
+  height: 3px;
+  background: var(--chaos-blood, #ff0040);
+  transform: rotate(-3deg);
+  box-shadow: 0 0 10px var(--chaos-blood, #ff0040);
+}
+
+.noStrike::after { display: none; }
+.sizeSm { width: 200px; height: 45px; }
+.sizeSm .clean { font-size: 0.85rem; border-radius: 12px; }
+.sizeLg { width: 340px; height: 70px; }
+.sizeLg .clean { font-size: 1.2rem; border-radius: 20px; }

package/components/buttons/dead-button/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './dead-button.module.css';
+
+export interface DeadButtonProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  icon?: ReactNode;
+  gradient?: 1 | 2 | 3 | 4;
+  size?: 'sm' | 'md' | 'lg';
+  showStrike?: boolean;
+}
+
+export const DeadButton = forwardRef<HTMLDivElement, DeadButtonProps>(
+  ({ children, icon, gradient = 1, size = 'md', showStrike = true, className, ...props }, ref) => {
+    const containerClasses = [
+      styles.container,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      !showStrike && styles.noStrike,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const cleanClasses = [
+      styles.clean,
+      gradient === 2 && styles.gradient2,
+      gradient === 3 && styles.gradient3,
+      gradient === 4 && styles.gradient4,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        <div className={cleanClasses}>
+          {icon && <span className={styles.icon}>{icon}</span>}
+          {children}
+        </div>
+        <div className={styles.destroy} />
+        <div className={styles.noise} />
+        <div className={styles.glitch1} />
+        <div className={styles.glitch2} />
+      </div>
+    );
+  }
+);
+
+DeadButton.displayName = 'DeadButton';
+export default DeadButton;

package/components/buttons/deeper-button/deeper-button.module.css

@@ -0,0 +1,76 @@
+/* deeper-button - Bouton "aller plus loin" style descent */
+.button {
+  padding: 2rem 4rem;
+  background: transparent;
+  border: 2px solid var(--chaos-blood, #ff0040);
+  color: var(--chaos-blood, #ff0040);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  display: inline-block;
+  text-transform: uppercase;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--chaos-blood, #ff0040);
+  transition: left 0.3s;
+  z-index: -1;
+}
+
+.button:hover { color: var(--chaos-void, #0a0a0a); }
+.button:hover::before { left: 0; }
+
+.arrow {
+  display: inline-block;
+  margin-left: 1rem;
+  transition: transform 0.3s;
+}
+
+.button:hover .arrow { animation: arrowBounce 0.5s ease-in-out infinite; }
+
+@keyframes arrowBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(5px); }
+}
+
+.variantGold { border-color: var(--chaos-gold, #c9a227); color: var(--chaos-gold, #c9a227); }
+.variantGold::before { background: var(--chaos-gold, #c9a227); }
+.variantGold:hover { color: var(--chaos-void, #0a0a0a); }
+
+.variantOutline { border-width: 1px; }
+.variantOutline:hover { border-width: 2px; }
+
+.variantGhost { border-color: transparent; border-bottom-color: var(--chaos-blood, #ff0040); }
+.variantGhost::before { display: none; }
+.variantGhost:hover { color: var(--chaos-blood, #ff0040); border-color: var(--chaos-blood, #ff0040); }
+
+.sizeSm { padding: 1rem 2rem; font-size: 1rem; }
+.sizeLg { padding: 2.5rem 5rem; font-size: 2rem; }
+
+.pulsing { animation: pulse 2s ease-in-out infinite; }
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.4); }
+  50% { box-shadow: 0 0 0 15px rgba(255, 0, 64, 0); }
+}
+
+.variantGold.pulsing { animation: pulseGold 2s ease-in-out infinite; }
+
+@keyframes pulseGold {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4); }
+  50% { box-shadow: 0 0 0 15px rgba(201, 162, 39, 0); }
+}
+
+.iconLeft { margin-right: 1rem; }
+.iconRight { margin-left: 1rem; }

package/components/buttons/deeper-button/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+import styles from './deeper-button.module.css';
+
+type BaseProps = {
+  children: ReactNode;
+  variant?: 'default' | 'gold' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  showArrow?: boolean;
+  pulsing?: boolean;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+};
+
+type ButtonProps = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never };
+type AnchorProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+export type DeeperButtonProps = ButtonProps | AnchorProps;
+
+export const DeeperButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, DeeperButtonProps>(
+  ({ children, variant = 'default', size = 'md', showArrow = true, pulsing = false, iconLeft, iconRight, className, ...props }, ref) => {
+    const classes = [
+      styles.button,
+      variant === 'gold' && styles.variantGold,
+      variant === 'outline' && styles.variantOutline,
+      variant === 'ghost' && styles.variantGhost,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      pulsing && styles.pulsing,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const content = (
+      <>
+        {iconLeft && <span className={styles.iconLeft}>{iconLeft}</span>}
+        {children}
+        {iconRight && <span className={styles.iconRight}>{iconRight}</span>}
+        {showArrow && <span className={styles.arrow}>↓</span>}
+      </>
+    );
+
+    if ('href' in props && props.href) {
+      return <a ref={ref as any} className={classes} {...(props as AnchorProps)}>{content}</a>;
+    }
+    return <button ref={ref as any} className={classes} {...(props as ButtonProps)}>{content}</button>;
+  }
+);
+
+DeeperButton.displayName = 'DeeperButton';
+export default DeeperButton;