@oalacea/chaosui 0.1.0 → 0.4.0

package/bin/cli.js

@@ -39,6 +39,34 @@ 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' },
+  
+  // 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' },
+  
+  // Navigation
+  'hexagon-menu': { category: 'navigation', description: 'Honeycomb hexagon menu', status: 'ready' },
+  
+  // Effects (new)
+  'glitch-image': { category: 'effects', description: 'Image with RGB glitch on hover', status: 'ready' },
 };
 
 const program = new Command();
@@ -75,8 +103,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 +120,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 +157,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 +201,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/glitch-button/glitch-button.module.css

@@ -13,8 +13,8 @@
   cursor: pointer;
   overflow: hidden;
   transition: transform 0.1s;
-  --glitch-color: #ff0040;
-  --glitch-color-alt: #00ffff;
+  --glitch-color: hsl(var(--primary, 347 100% 50%));
+  --glitch-color-alt: hsl(var(--secondary, 180 100% 50%));
 }
 
 .button:active {
@@ -23,20 +23,20 @@
 
 /* Variants */
 .default {
-  background: #0a0a0a;
-  color: #fafafa;
-  border: 1px solid #333;
+  background: hsl(var(--background, 0 0% 4%));
+  color: hsl(var(--foreground, 0 0% 98%));
+  border: 1px solid hsl(var(--border, 0 0% 20%));
 }
 
 .outline {
   background: transparent;
-  color: #fafafa;
+  color: hsl(var(--foreground, 0 0% 98%));
   border: 2px solid currentColor;
 }
 
 .ghost {
   background: transparent;
-  color: #fafafa;
+  color: hsl(var(--foreground, 0 0% 98%));
   border: none;
 }
 

package/components/chaos-vars.css

@@ -0,0 +1,27 @@
+/* Chaos UI - CSS Variables */
+/* These are the DEFAULT values - they will be overridden by your project's globals.css */
+/* Only add this if you don't have these variables defined yet */
+
+:root {
+  /* Standard variables (same as shadcn/ui) */
+  --primary: 347 100% 50%;           /* #ff0040 */
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 180 100% 50%;         /* #00ffff */
+  --secondary-foreground: 0 0% 0%;
+  
+  --accent: 300 100% 50%;            /* #ff00ff */
+  --accent-foreground: 0 0% 100%;
+  
+  --background: 0 0% 4%;             /* #0a0a0a */
+  --foreground: 0 0% 98%;            /* #fafafa */
+  
+  --muted: 0 0% 9%;                  /* #171717 */
+  --muted-foreground: 0 0% 63%;      /* #a1a1a1 */
+  
+  --border: 0 0% 20%;                /* #333333 */
+  
+  /* Chaos-specific (optional, for fine-tuning effects) */
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+}

package/components/cyber/cyber-avatar/css/cyber-avatar.module.css

@@ -0,0 +1,60 @@
+.avatar {
+  --avatar-color: #00f0ff;
+  --avatar-size: 3rem;
+  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+}
+
+.sm { --avatar-size: 2rem; }
+.md { --avatar-size: 3rem; }
+.lg { --avatar-size: 4rem; }
+.xl { --avatar-size: 6rem; }
+
+.cyan { --avatar-color: #00f0ff; }
+.pink { --avatar-color: #ff00ff; }
+.green { --avatar-color: #00ff88; }
+.purple { --avatar-color: #a855f7; }
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.border {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  border: 2px solid var(--avatar-color);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.glowing .border {
+  box-shadow: 0 0 10px var(--avatar-color), 0 0 20px var(--avatar-color);
+  animation: avatar-glow 2s ease-in-out infinite;
+}
+
+@keyframes avatar-glow {
+  0%, 100% { box-shadow: 0 0 5px var(--avatar-color); }
+  50% { box-shadow: 0 0 15px var(--avatar-color), 0 0 30px var(--avatar-color); }
+}
+
+.status {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  border: 2px solid hsl(var(--background, 0 0% 4%));
+}
+
+.online { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
+.offline { background: #666; }
+.busy { background: #ff0040; box-shadow: 0 0 6px #ff0040; }
+.away { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }

package/components/cyber/cyber-avatar/css/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes } from 'react';
+import styles from './cyber-avatar.module.css';
+
+export interface CyberAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  status?: 'online' | 'offline' | 'busy' | 'away';
+  glowing?: boolean;
+}
+
+export const CyberAvatar = forwardRef<HTMLDivElement, CyberAvatarProps>(
+  ({ src, alt = 'Avatar', size = 'md', variant = 'cyan', status, glowing = false, className, ...props }, ref) => {
+    const classes = [styles.avatar, styles[size], styles[variant], glowing && styles.glowing, className].filter(Boolean).join(' ');
+    return (
+      <div ref={ref} className={classes}>
+        <img src={src} alt={alt} className={styles.image} {...props} />
+        <div className={styles.border} />
+        {status && <span className={`${styles.status} ${styles[status]}`} />}
+      </div>
+    );
+  }
+);
+
+CyberAvatar.displayName = 'CyberAvatar';
+export default CyberAvatar;

package/components/cyber/cyber-avatar/tailwind/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes } from 'react';
+
+export interface CyberAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  status?: 'online' | 'offline' | 'busy' | 'away';
+  glowing?: boolean;
+}
+
+const sizeStyles = { sm: 'w-8 h-8', md: 'w-12 h-12', lg: 'w-16 h-16', xl: 'w-24 h-24' };
+const variantStyles = {
+  cyan: 'border-cyan-400 shadow-[0_0_10px_#00f0ff]',
+  pink: 'border-fuchsia-500 shadow-[0_0_10px_#ff00ff]',
+  green: 'border-emerald-400 shadow-[0_0_10px_#00ff88]',
+  purple: 'border-purple-500 shadow-[0_0_10px_#a855f7]',
+};
+const statusStyles = {
+  online: 'bg-emerald-400 shadow-[0_0_6px_#00ff88]',
+  offline: 'bg-gray-500',
+  busy: 'bg-rose-500 shadow-[0_0_6px_#ff0040]',
+  away: 'bg-amber-500 shadow-[0_0_6px_#ffaa00]',
+};
+
+export const CyberAvatar = forwardRef<HTMLDivElement, CyberAvatarProps>(
+  ({ src, alt = 'Avatar', size = 'md', variant = 'cyan', status, glowing = false, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`relative ${sizeStyles[size]} ${className}`}>
+        <img
+          src={src}
+          alt={alt}
+          className={`w-full h-full object-cover rounded-full border-2 ${variantStyles[variant]} ${glowing ? 'animate-pulse' : ''}`}
+          {...props}
+        />
+        {status && (
+          <span className={`absolute bottom-0.5 right-0.5 w-3 h-3 rounded-full border-2 border-[#0a0a0f] ${statusStyles[status]}`} />
+        )}
+      </div>
+    );
+  }
+);
+
+CyberAvatar.displayName = 'CyberAvatar';
+export default CyberAvatar;

package/components/cyber/cyber-input/css/cyber-input.module.css

@@ -0,0 +1,87 @@
+.wrapper {
+  --input-color: #00f0ff;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cyan { --input-color: #00f0ff; }
+.pink { --input-color: #ff00ff; }
+.green { --input-color: #00ff88; }
+.purple { --input-color: #a855f7; }
+.hasError { --input-color: #ff0040; }
+
+.label {
+  font-family: var(--font-display, 'Rajdhani', sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.125em;
+  color: var(--input-color);
+}
+
+.inputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  font-size: 0.875rem;
+  color: hsl(var(--foreground, 0 0% 98%));
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.input:focus {
+  border-color: var(--input-color);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+}
+
+.border {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--input-color);
+  transition: width 0.3s ease;
+}
+
+.input:focus ~ .border {
+  width: 100%;
+}
+
+.glow {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 1.25rem;
+  background: radial-gradient(ellipse, var(--input-color), transparent);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.input:focus ~ .glow {
+  width: 80%;
+  opacity: 0.3;
+}
+
+.error {
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  font-size: 0.75rem;
+  color: #ff0040;
+}

package/components/cyber/cyber-input/css/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { forwardRef, InputHTMLAttributes } from 'react';
+import styles from './cyber-input.module.css';
+
+export interface CyberInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  /** Label above input */
+  label?: string;
+  /** Error message */
+  error?: string;
+}
+
+export const CyberInput = forwardRef<HTMLInputElement, CyberInputProps>(
+  (
+    {
+      variant = 'cyan',
+      label,
+      error,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const wrapperClasses = [
+      styles.wrapper,
+      styles[variant],
+      error && styles.hasError,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div className={wrapperClasses}>
+        {label && <label className={styles.label}>{label}</label>}
+        <div className={styles.inputWrapper}>
+          <input ref={ref} className={styles.input} {...props} />
+          <span className={styles.border} />
+          <span className={styles.glow} />
+        </div>
+        {error && <span className={styles.error}>{error}</span>}
+      </div>
+    );
+  }
+);
+
+CyberInput.displayName = 'CyberInput';
+
+export default CyberInput;

package/components/cyber/cyber-input/tailwind/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, InputHTMLAttributes } from 'react';
+
+export interface CyberInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  label?: string;
+  error?: string;
+}
+
+const variantStyles = {
+  cyan: 'focus:border-cyan-400 focus:shadow-[0_0_10px_rgba(0,240,255,0.3)]',
+  pink: 'focus:border-fuchsia-500 focus:shadow-[0_0_10px_rgba(255,0,255,0.3)]',
+  green: 'focus:border-emerald-400 focus:shadow-[0_0_10px_rgba(0,255,136,0.3)]',
+  purple: 'focus:border-purple-500 focus:shadow-[0_0_10px_rgba(168,85,247,0.3)]',
+};
+
+const labelColors = {
+  cyan: 'text-cyan-400',
+  pink: 'text-fuchsia-500',
+  green: 'text-emerald-400',
+  purple: 'text-purple-500',
+};
+
+export const CyberInput = forwardRef<HTMLInputElement, CyberInputProps>(
+  ({ variant = 'cyan', label, error, className = '', ...props }, ref) => {
+    return (
+      <div className={`flex flex-col gap-2 ${className}`}>
+        {label && (
+          <label className={`font-['Rajdhani',sans-serif] text-xs font-semibold uppercase tracking-widest ${labelColors[variant]}`}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`
+            w-full px-4 py-3
+            font-['Share_Tech_Mono',monospace] text-sm text-white
+            bg-black/50 border border-white/10
+            outline-none transition-all duration-300
+            placeholder:text-white/30
+            ${error ? 'border-rose-500 focus:border-rose-500' : variantStyles[variant]}
+          `}
+          {...props}
+        />
+        {error && (
+          <span className="font-['Share_Tech_Mono',monospace] text-xs text-rose-500">{error}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberInput.displayName = 'CyberInput';
+export default CyberInput;

package/components/cyber/cyber-loader/css/cyber-loader.module.css

@@ -0,0 +1,102 @@
+.loader {
+  --loader-color: #00f0ff;
+  --loader-size: 2.5rem;
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cyan { --loader-color: #00f0ff; }
+.pink { --loader-color: #ff00ff; }
+.green { --loader-color: #00ff88; }
+.purple { --loader-color: #a855f7; }
+
+.sm { --loader-size: 1.5rem; }
+.md { --loader-size: 2.5rem; }
+.lg { --loader-size: 4rem; }
+
+/* Spinner */
+.spinner {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--loader-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  box-shadow: 0 0 10px var(--loader-color);
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Dots */
+.dots {
+  gap: 0.5rem;
+}
+
+.dot {
+  width: calc(var(--loader-size) / 4);
+  height: calc(var(--loader-size) / 4);
+  background: var(--loader-color);
+  border-radius: 50%;
+  animation: dot-bounce 1.4s ease-in-out infinite;
+  box-shadow: 0 0 10px var(--loader-color);
+}
+
+.dot:nth-child(1) { animation-delay: 0s; }
+.dot:nth-child(2) { animation-delay: 0.2s; }
+.dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dot-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Bars */
+.bars {
+  gap: 0.25rem;
+  height: var(--loader-size);
+}
+
+.bar {
+  width: calc(var(--loader-size) / 6);
+  height: 100%;
+  background: var(--loader-color);
+  animation: bar-stretch 1.2s ease-in-out infinite;
+  box-shadow: 0 0 8px var(--loader-color);
+}
+
+.bar:nth-child(1) { animation-delay: 0s; }
+.bar:nth-child(2) { animation-delay: 0.1s; }
+.bar:nth-child(3) { animation-delay: 0.2s; }
+.bar:nth-child(4) { animation-delay: 0.3s; }
+
+@keyframes bar-stretch {
+  0%, 40%, 100% { transform: scaleY(0.4); }
+  20% { transform: scaleY(1); }
+}
+
+/* Pulse */
+.pulse {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  background: var(--loader-color);
+  border-radius: 50%;
+  animation: pulse-grow 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-grow {
+  0% { transform: scale(0.5); opacity: 1; }
+  100% { transform: scale(1.5); opacity: 0; }
+}
+
+/* Hexagon */
+.hexagon {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  background: conic-gradient(from 0deg, var(--loader-color), transparent);
+  animation: spin 1.5s linear infinite;
+}