@oalacea/chaosui 0.5.0 → 0.5.1

package/bin/cli.js

@@ -1,308 +0,0 @@
-#!/usr/bin/env node
-
-import { Command } from 'commander';
-import pc from 'picocolors';
-import prompts from 'prompts';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const COMPONENTS_DIR = path.join(__dirname, '..', 'components');
-
-// Component registry
-const COMPONENTS = {
-  // Overlays
-  'noise-overlay': { category: 'overlays', description: 'SVG fractal noise texture overlay', status: 'ready' },
-  'scanlines': { category: 'overlays', description: 'CRT-style horizontal scanlines', status: 'ready' },
-  'vignette': { category: 'overlays', description: 'Dark edges radial gradient', status: 'ready' },
-  'static-flicker': { category: 'overlays', description: 'Animated noise with flicker effect', status: 'ready' },
-  
-  // Text effects
-  'glitch-text': { category: 'text', description: 'RGB split glitch text effect', status: 'ready' },
-  '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' },
-  'light-beams': { category: 'backgrounds', description: 'Vertical colored light beams', status: 'ready' },
-  'glow-orbs': { category: 'backgrounds', description: 'Floating blurred orbs', status: 'ready' },
-  'particle-field': { category: 'backgrounds', description: 'Drifting particle background', status: 'ready' },
-  
-  // Effects
-  '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();
-
-program
-  .name('chaos-ui')
-  .description('Add glitch & noise components to your project')
-  .version('0.1.0');
-
-// LIST command
-program
-  .command('list')
-  .description('List all available components')
-  .action(() => {
-    console.log(pc.bold('\n🗡️  Chaos UI Components\n'));
-    
-    const categories = {};
-    for (const [name, info] of Object.entries(COMPONENTS)) {
-      if (!categories[info.category]) categories[info.category] = [];
-      categories[info.category].push({ name, ...info });
-    }
-    
-    for (const [category, components] of Object.entries(categories)) {
-      console.log(pc.cyan(`  ${category}/`));
-      for (const comp of components) {
-        console.log(`    ${pc.white(comp.name.padEnd(20))} ${pc.dim(comp.description)}`);
-      }
-      console.log();
-    }
-  });
-
-// ADD command
-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]) => ({
-        title: name,
-        description: info.description,
-        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()))
-        },
-        {
-          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
-    if (!COMPONENTS[componentName]) {
-      console.log(pc.red(`\n✗ Component "${componentName}" not found.`));
-      console.log(pc.dim(`  Run ${pc.white('chaos-ui list')} to see available components.\n`));
-      return;
-    }
-    
-    const info = COMPONENTS[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)) {
-      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)}${variantLabel} to ${pc.dim(targetDir)}?`,
-        initial: true,
-      });
-      
-      if (!confirm.value) {
-        console.log(pc.dim('Cancelled.'));
-        return;
-      }
-    }
-    
-    // Copy files
-    try {
-      await fs.ensureDir(targetDir);
-      await fs.copy(sourceDir, path.join(targetDir, 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
-      const pascalName = componentName
-        .split('-')
-        .map(s => s.charAt(0).toUpperCase() + s.slice(1))
-        .join('');
-      
-      console.log(pc.dim('  Import:'));
-      console.log(pc.white(`  import { ${pascalName} } from './components/chaos/${info.category}/${componentName}';\n`));
-      
-    } catch (err) {
-      console.log(pc.red(`\n✗ Failed to add component: ${err.message}\n`));
-    }
-  });
-
-// INIT command
-program
-  .command('init')
-  .description('Initialize chaos-ui in your project')
-  .action(async () => {
-    console.log(pc.bold('\n🗡️  Initializing Chaos UI...\n'));
-    
-    const response = await prompts([
-      {
-        type: 'select',
-        name: 'framework',
-        message: 'Framework?',
-        choices: [
-          { title: 'React', value: 'react' },
-          { title: 'Vue', value: 'vue' },
-          { title: 'Vanilla (HTML/CSS/JS)', value: 'vanilla' },
-        ],
-      },
-      {
-        type: 'select',
-        name: 'styling',
-        message: 'Styling?',
-        choices: [
-          { title: 'CSS Modules', value: 'css-modules' },
-          { title: 'Plain CSS', value: 'css' },
-          { title: 'Tailwind (with CSS vars)', value: 'tailwind' },
-        ],
-      },
-      {
-        type: 'text',
-        name: 'dir',
-        message: 'Components directory?',
-        initial: './components/chaos',
-      },
-    ]);
-    
-    if (!response.framework) {
-      console.log(pc.dim('Cancelled.'));
-      return;
-    }
-    
-    // Create config file
-    const config = {
-      framework: response.framework,
-      styling: response.styling,
-      componentsDir: response.dir,
-    };
-    
-    await fs.writeJson('./chaos-ui.json', config, { spaces: 2 });
-    await fs.ensureDir(response.dir);
-    
-    console.log(pc.green('\n✓ Initialized!'));
-    console.log(pc.dim(`  Config: ${pc.white('./chaos-ui.json')}`));
-    console.log(pc.dim(`  Components: ${pc.white(response.dir)}\n`));
-    console.log(pc.dim(`  Run ${pc.white('chaos-ui add <component>')} to add components.\n`));
-  });
-
-program.parse();

package/components/backgrounds/light-beams/index.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './light-beams.module.css';
-
-export interface LightBeamsProps extends HTMLAttributes<HTMLDivElement> {
-  /** Array of beam colors */
-  colors?: string[];
-  /** Number of beams */
-  count?: number;
-  /** Beam width in pixels */
-  beamWidth?: number;
-  /** Beam opacity (0-1) */
-  opacity?: number;
-  /** Animation duration range [min, max] in seconds */
-  durationRange?: [number, number];
-  /** Fixed or absolute positioning */
-  position?: 'fixed' | 'absolute';
-}
-
-export const LightBeams = forwardRef<HTMLDivElement, LightBeamsProps>(
-  (
-    {
-      colors = ['#7c3aed', '#06b6d4', '#ec4899', '#10b981', '#f59e0b'],
-      count = 5,
-      beamWidth = 2,
-      opacity = 0.15,
-      durationRange = [15, 25],
-      position = 'fixed',
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const beams = Array.from({ length: count }, (_, i) => {
-      const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
-      const delay = Math.random() * -duration;
-      const color = colors[i % colors.length];
-      const positionX = ((i + 1) / (count + 1)) * 100;
-
-      return {
-        id: i,
-        duration,
-        delay,
-        color,
-        positionX,
-      };
-    });
-
-    return (
-      <div
-        ref={ref}
-        className={`${styles.container} ${className || ''}`}
-        style={{ position, ...style }}
-        aria-hidden="true"
-        {...props}
-      >
-        {beams.map((beam) => (
-          <div
-            key={beam.id}
-            className={styles.beam}
-            style={{
-              left: `${beam.positionX}%`,
-              width: beamWidth,
-              background: `linear-gradient(180deg, transparent, ${beam.color}, transparent)`,
-              opacity,
-              animationDuration: `${beam.duration}s`,
-              animationDelay: `${beam.delay}s`,
-            }}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-
-LightBeams.displayName = 'LightBeams';
-
-export default LightBeams;

package/components/backgrounds/light-beams/light-beams.module.css

@@ -1,27 +0,0 @@
-.container {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.beam {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  filter: blur(1px);
-  animation: beam-move 20s ease-in-out infinite;
-}
-
-@keyframes beam-move {
-  0%, 100% {
-    transform: translateX(-50px) skewX(-5deg);
-    opacity: 0.1;
-  }
-  50% {
-    transform: translateX(50px) skewX(5deg);
-    opacity: 0.2;
-  }
-}

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

@@ -1,81 +0,0 @@
-/* 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/dead-button/dead-button.module.css

@@ -1,111 +0,0 @@
-/* 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/deeper-button/deeper-button.module.css

@@ -1,76 +0,0 @@
-/* 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; }