Visual Modes

Visual Modes

Overview

Apply the appropriate visual enhancement mode and follow its checklist for UI and interaction design.

When to Use

• Activating Super Saiyan, Kamehameha, or Over 9000 visual modes
• Designing high-impact UI showcases

Avoid when:

• The target is non-visual or text-only output

Quick Reference

Workflow

1. Select the visual mode. 2. Load the matching reference. 3. Apply the required enhancements and safeguards. 4. Validate performance and accessibility.

Output

• Mode activation summary
• Key enhancements applied

Common Mistakes

• Ignoring performance/accessibility constraints
• Mixing modes without documenting rationale

Reference: kamehameha

Kamehameha Mode ⚡💥

You are now in KAMEHAMEHA MODE - charging up maximum visual energy!

🔴 CRITICAL: Energy Blast Activation

This mode takes Super Saiyan and adds:

• Particle systems on EVERYTHING
• Explosion animations for success states
• Energy wave effects on hover
• Screen shake on interactions
• Glow intensification to maximum
• 3D transformations (rotateX, rotateY, perspective)
• Sound effect suggestions for interactions

Mandatory Enhancements

1. Particle Effects (EVERYWHERE)

// Add to ALL components:
- Floating particles in background (canvas/WebGL)
- Sparkle trails on mouse movement
- Explosion particles on button clicks
- Energy orbs floating around cards
- Dust particles on scroll

2. Power-Up Animations

// Button press = KAMEHAMEHA charge:
- Scale pulse (0.95 → 1.1 → 1.0)
- Glow intensity increase
- Ripple effect emanating outward
- Blue → white energy color shift
- Screen edge glow pulse

3. Impact Effects

// Success actions get EXPLOSIONS:
- Radial particle burst
- Screen flash (white overlay fade)
- Shockwave ring expanding
- Confetti explosion
- Camera shake (3-5px random offset)

4. Energy Fields

// Hover states = Energy aura:
- Pulsing glow around elements
- Electric arc effects (SVG animations)
- Energy field distortion (blur + brightness)
- Color cycling (hue rotation)
- Floating energy particles

5. 3D Transformations

// Add depth to EVERYTHING:
- Cards: rotateX/Y on mouse move (parallax)
- Buttons: perspective(1000px) rotateX(10deg) on hover
- Icons: rotate3d on hover
- Background: parallax layers with depth
- Modals: zoom from/to center with perspective

Personas (Thinking Modes)

• ui-designer: Visual impact, energy aesthetics, bold design choices, eye-catching compositions
• animation-specialist: Particle systems, timing curves, explosion choreography, motion design
• effects-artist: Energy fields, glow effects, lightning arcs, particle behaviors, shader techniques
• performance-engineer: GPU optimization, particle limits, 60fps maintenance, resource management

Delegation Protocol

This command does NOT delegate - Kamehameha is an enhancement mode built on Super Saiyan.

Why no delegation:

• ❌ Extends Super Saiyan patterns with high-impact effects (additive guidance)
• ❌ Provides implementation recipes for particles and explosions (code patterns)
• ❌ Activates "maximum impact" mindset (design philosophy)
• ❌ Direct application of advanced animation techniques (hands-on coding)

All work done directly:

• Edit/Write to add particle systems to components
• Bash to install effect libraries (tsparticles, konva, etc.)
• Direct implementation of explosion and energy patterns
• Performance monitoring during effect addition

Note: Kamehameha builds on Super Saiyan (Level 1) by adding particle effects, explosions, and energy animations. It's still guidance-focused, not task-focused. Use personas to ensure effects enhance (not overwhelm) the experience while maintaining 60fps performance.

Tool Coordination

• Edit/Write: Add particle systems, explosions, energy effects to code (direct)
• Bash: Install animation libraries (tsparticles, popmotion, etc.) (direct)
• Read: Analyze components for impact enhancement opportunities (direct)
• Performance monitoring: Ensure 60fps with all effects active (direct validation)
• Direct implementation: No Task tool needed

Technology Stack Additions

Required Libraries:

# Particle systems
npm install tsparticles @tsparticles/react @tsparticles/slim

# Canvas animations
npm install @react-spring/konva konva react-konva

# Advanced animations
npm install popmotion @theatre/core @theatre/studio

# Sound effects (optional)
npm install use-sound howler

Implementation Patterns

Pattern 1: Kamehameha Button

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  onClick={handleKamehameha}
  onHoverStart={chargeEnergy}
  onHoverEnd={releaseEnergy}
  className="relative group"
>
  {/* Energy charge layer */}
  <motion.div
    className="absolute inset-0 bg-blue-500 blur-2xl opacity-0 group-hover:opacity-50"
    animate={{ scale: [1, 1.5, 1] }}
    transition={{ repeat: Infinity, duration: 1 }}
  />

  {/* Lightning bolts (SVG) */}
  <svg className="absolute inset-0 opacity-0 group-hover:opacity-100">
    {/* Animated lightning paths */}
  </svg>

  {/* Particle emitter on click */}
  <AnimatePresence>
    {isCharging && <ParticleExplosion />}
  </AnimatePresence>

  {/* Button content with glow text */}
  <span className="relative z-10 drop-shadow-[0_0_10px_rgba(59,130,246,0.8)]">
    FIRE! 💥
  </span>
</motion.button>

Pattern 2: Energy Card

<motion.div
  whileHover={{
    rotateX: 5,
    rotateY: 5,
    scale: 1.05,
  }}
  style={{
    transformStyle: 'preserve-3d',
    perspective: 1000,
  }}
  onMouseMove={handleMouseMove} // Track for parallax
  className="relative group"
>
  {/* Floating particles background */}
  <Particles
    options={{
      particles: {
        color: { value: '#3b82f6' },
        move: { enable: true, speed: 1 },
        number: { value: 20 },
        opacity: { value: 0.3 },
        size: { value: 3 },
      }
    }}
  />

  {/* Energy field glow */}
  <motion.div
    className="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 group-hover:opacity-30 blur-3xl"
    animate={{
      scale: [1, 1.2, 1],
      rotate: [0, 180, 360],
    }}
    transition={{
      duration: 4,
      repeat: Infinity,
      ease: 'linear',
    }}
  />

  {/* Card content */}
  <div className="relative z-10">
    {children}
  </div>

  {/* Electric arcs on hover */}
  <svg className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100">
    <ElectricArc from="top-left" to="bottom-right" />
    <ElectricArc from="top-right" to="bottom-left" />
  </svg>
</motion.div>

Pattern 3: Screen Shake Hook

export function useScreenShake() {
  const [shake, setShake] = useState(false)

  const triggerShake = () => {
    setShake(true)
    setTimeout(() => setShake(false), 500)
  }

  useEffect(() => {
    if (!shake) return

    const intensity = 5
    let frame = 0

    const animate = () => {
      if (frame > 15) {
        document.body.style.transform = ''
        return
      }

      const x = (Math.random() - 0.5) * intensity
      const y = (Math.random() - 0.5) * intensity

      document.body.style.transform = `translate(${x}px, ${y}px)`
      frame++
      requestAnimationFrame(animate)
    }

    animate()
  }, [shake])

  return triggerShake
}

Pattern 4: Particle Explosion Component

export function ParticleExplosion({ x, y, color = '#3b82f6' }) {
  const particles = Array.from({ length: 30 }, (_, i) => ({
    id: i,
    angle: (i / 30) * Math.PI * 2,
    distance: Math.random() * 100 + 50,
    size: Math.random() * 4 + 2,
  }))

  return (
    <div className="absolute inset-0 pointer-events-none">
      {particles.map((particle) => (
        <motion.div
          key={particle.id}
          className="absolute rounded-full"
          style={{
            width: particle.size,
            height: particle.size,
            backgroundColor: color,
            left: x,
            top: y,
            boxShadow: `0 0 10px ${color}`,
          }}
          initial={{ x: 0, y: 0, opacity: 1, scale: 1 }}
          animate={{
            x: Math.cos(particle.angle) * particle.distance,
            y: Math.sin(particle.angle) * particle.distance,
            opacity: 0,
            scale: 0,
          }}
          transition={{
            duration: 0.8,
            ease: 'easeOut',
          }}
        />
      ))}
    </div>
  )
}

Visual Effects Checklist

✅ EVERY interaction must have:

• [ ] Particle emission on hover/click
• [ ] Screen shake on major actions (form submit, delete, etc.)
• [ ] Glow pulse animation
• [ ] 3D transformation with perspective
• [ ] Energy field/aura effects
• [ ] Lightning/electric arc decorations
• [ ] Explosion animation on success
• [ ] Ripple wave propagation
• [ ] Color energy shifting (blue → cyan → white)
• [ ] Camera/parallax movement

Sound Effects (Optional Enhancement)

// Suggest sound effects for actions:
const sounds = {
  hover: 'whoosh.mp3',           // Energy charge
  click: 'blast.mp3',            // Kamehameha fire
  success: 'explosion.mp3',      // Impact
  error: 'fizzle.mp3',          // Miss
  powerup: 'charge-up.mp3',     // Long charge
}

// Usage:
import useSound from 'use-sound'

const [playCharge] = useSound('/sounds/charge-up.mp3')
const [playBlast] = useSound('/sounds/blast.mp3')

<button
  onMouseEnter={playCharge}
  onClick={playBlast}
>
  KAMEHAMEHA! 💥
</button>

Performance Considerations

Even in KAMEHAMEHA mode, maintain:

• 60fps animations (use GPU acceleration)
• Limit particles to <100 on screen
• Use will-change sparingly
• Throttle mouse move handlers
• Use CSS transforms over position changes
• Lazy load heavy particle systems
• Respect prefers-reduced-motion (fallback to Super Saiyan)

Example: Full Kamehameha Button

Create a button that: 1. Charges energy on hover (glow increases) 2. Emits particles continuously while hovering 3. On click: Screen shake + particle explosion + success animation 4. Energy wave ripples outward 5. Lightning arcs appear briefly 6. Text glows white during charge

Activation

When in Kamehameha mode, you MUST: 1. Add particle systems to backgrounds 2. Implement screen shake for impactful actions 3. Create explosion effects for success states 4. Add 3D perspective to all cards/containers 5. Implement energy glow effects on hover 6. Add lightning/electric arc decorations 7. Create ripple/wave propagation effects 8. Make all colors shift during interactions

Remember: This is KAMEHAMEHA mode - everything should feel like it's charged with energy and ready to explode! ⚡💥🔥

Reference: over9000

IT'S OVER 9000!!! 🔥⚡💥🌟

POWER LEVEL: MAXIMUM

You are now operating at OVER 9000 MODE - the absolute peak of visual excess!

🔴 CRITICAL: MAXIMUM POWER UNLOCKED

This mode combines EVERYTHING:

• Super Saiyan Mode (base excellence) ✅
• Kamehameha Mode (particle effects) ✅
• PLUS: Reality-bending visual overkill 🚀

What "Over 9000" Adds:

1. SHADER EFFECTS (WebGL/Canvas)

// Full-screen post-processing:
- Chromatic aberration on scroll
- CRT scanline effects (optional retro mode)
- Bloom/glow post-processing
- Vignette darkening on edges
- Film grain overlay (subtle)
- Color grading (cinematic LUTs)
- Motion blur on fast animations
- Depth of field blur

2. PHYSICS SIMULATION

// Real physics for EVERYTHING:
- Spring physics on all animations
- Gravity affects falling elements
- Collision detection between cards
- Momentum-based dragging
- Elastic boundaries
- Chain reactions (domino effects)
- Ragdoll animations for errors

3. 3D ENVIRONMENTS

// Full 3D scenes with Three.js:
- 3D background environments
- Floating UI in 3D space
- Depth layers (foreground/mid/background)
- Camera dolly/zoom effects
- Parallax with true depth
- Reflections and refractions
- Dynamic lighting and shadows
- Fog/atmosphere effects

4. ADVANCED INTERACTIONS

// Next-level user interactions:
- Gesture controls (pinch, rotate, swipe)
- Voice commands (Web Speech API)
- Eye tracking (WebGazer.js)
- Haptic feedback (Vibration API)
- Tilt controls (Device Orientation)
- Multi-touch gestures
- Gamepad support for navigation

5. EXTREME ANIMATIONS

// Hollywood-level animation:
- Morph animations (shape transformations)
- Liquid/fluid effects (WebGL)
- Cloth/fabric simulation
- Fire/smoke particles
- Energy plasma effects
- DNA helix spirals
- Fractal patterns
- Matrix rain effect

Personas (Thinking Modes)

• ui-designer: Extreme visual composition, reality-bending aesthetics, award-worthy design
• 3d-artist: Three.js mastery, 3D scene composition, lighting, cameras, spatial design
• shader-specialist: WebGL shaders, post-processing, bloom, chromatic aberration, custom effects
• physics-engineer: Spring physics, collision detection, momentum, gravity simulation, realistic motion
• performance-engineer: GPU optimization, instancing, LOD, 60fps at maximum complexity

Delegation Protocol

This command does NOT delegate - Over 9000 is the ultimate enhancement mode.

Why no delegation:

• ❌ Maximal complexity applied directly (requires immediate integration)
• ❌ 3D/physics/shaders need tight coupling with existing code (architectural changes)
• ❌ Experimental showcase features (rapid prototyping mindset)
• ❌ Reality-bending effects require hands-on creative iteration (not automated)

All work done directly:

• Edit/Write to integrate Three.js, physics engines, shader systems
• Bash to install advanced libraries (three, cannon, postprocessing, GSAP)
• Direct implementation of 3D scenes, physics, shaders
• Real-time performance tuning and GPU optimization
• Creative experimentation with cutting-edge techniques

Note: Over 9000 is the MAXIMUM power level - combining Super Saiyan (Level 1) + Kamehameha (Level 2) + 3D/physics/shaders/advanced interactions. This is for demos, showcases, and experimental work where visual spectacle is the goal. All personas coordinate to push boundaries while maintaining 60fps and accessibility standards (with reduced-motion fallback).

Tool Coordination

• Edit/Write: Integrate 3D engines, physics, shaders into components (direct)
• Bash: Install maximum power libraries (three, cannon, GSAP, postprocessing) (direct)
• Read: Analyze architecture for 3D integration points (direct)
• GPU profiling: Monitor performance at maximum complexity (direct validation)
• WebGL detection: Ensure graceful fallback for unsupported devices (direct)
• Direct implementation: No Task tool needed - creative work requires hands-on iteration

Technology Stack: MAXIMUM POWER

# 3D Engine
npm install three @react-three/fiber @react-three/drei @react-three/postprocessing

# Physics Engine
npm install @react-three/cannon use-cannon @react-spring/three

# Shaders & Effects
npm install glsl-noise lamina vanta postprocessing

# Advanced Particles
npm install three-nebula @react-three/gpu-pathtracer

# Gesture Library
npm install @use-gesture/react

# Animation Powerhouse
npm install gsap @gsap/react gsap/ScrollTrigger gsap/MorphSVGPlugin

# WebGL Utilities
npm install webgl-utils stats.js lil-gui

# 3D Models (optional)
npm install @react-three/gltfjsx gltf-pipeline

# Confetti & Celebrations
npm install canvas-confetti react-confetti-explosion

# Advanced UI
npm install react-spring-bottom-sheet vaul @radix-ui/themes

Implementation Patterns: MAXIMUM MODE

Pattern 1: 3D Floating Cards

import { Canvas, useFrame } from '@react-three/fiber'
import { Float, MeshDistortMaterial } from '@react-three/drei'

export function FloatingCard3D({ children, position = [0, 0, 0] }) {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} />

      <Float
        speed={2}
        rotationIntensity={1}
        floatIntensity={2}
      >
        <mesh position={position}>
          <boxGeometry args={[3, 4, 0.2]} />
          <MeshDistortMaterial
            color="#3b82f6"
            attach="material"
            distort={0.3}
            speed={1.5}
          />

          {/* Card content as texture */}
          <Html transform occlude>
            <div className="card-content">
              {children}
            </div>
          </Html>
        </mesh>
      </Float>
    </Canvas>
  )
}

Pattern 2: Physics-Based Layout

import { Physics, useBox, usePlane } from '@react-three/cannon'

export function PhysicsCards() {
  return (
    <Canvas>
      <Physics gravity={[0, -9.8, 0]}>
        {/* Floor */}
        <Floor />

        {/* Cards that fall and stack */}
        <PhysicsCard position={[0, 10, 0]} />
        <PhysicsCard position={[2, 12, 0]} />
        <PhysicsCard position={[-2, 14, 0]} />
      </Physics>
    </Canvas>
  )
}

function PhysicsCard({ position }) {
  const [ref] = useBox(() => ({
    mass: 1,
    position,
    args: [2, 3, 0.2],
  }))

  return (
    <mesh ref={ref} castShadow>
      <boxGeometry args={[2, 3, 0.2]} />
      <meshStandardMaterial color="#3b82f6" />
    </mesh>
  )
}

Pattern 3: Shader Post-Processing

import { EffectComposer, Bloom, ChromaticAberration, Vignette } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

export function PostProcessingEffects() {
  return (
    <EffectComposer>
      {/* Bloom for glow */}
      <Bloom
        intensity={1.5}
        luminanceThreshold={0.2}
        luminanceSmoothing={0.9}
      />

      {/* Chromatic aberration for "power overload" */}
      <ChromaticAberration
        offset={[0.002, 0.002]}
        blendFunction={BlendFunction.NORMAL}
      />

      {/* Vignette for focus */}
      <Vignette
        offset={0.3}
        darkness={0.5}
      />
    </EffectComposer>
  )
}

Pattern 4: Liquid Morph Animation

import { MorphAnimation } from '@/components/morph'

export function LiquidButton() {
  const [isHovering, setIsHovering] = useState(false)

  return (
    <MorphAnimation
      from={<Circle />}
      to={<Blob />}
      progress={isHovering ? 1 : 0}
      duration={0.8}
    >
      <button
        onMouseEnter={() => setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
      >
        Morphing Magic
      </button>
    </MorphAnimation>
  )
}

Pattern 5: Matrix Background Effect

export function MatrixRain() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')!
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    const columns = canvas.width / 20
    const drops: number[] = Array(Math.floor(columns)).fill(1)

    const chars = '01アイウエオカキクケコサシスセソタチツテト'

    function draw() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      ctx.fillStyle = '#0f0'
      ctx.font = '15px monospace'

      for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)]
        ctx.fillText(text, i * 20, drops[i] * 20)

        if (drops[i] * 20 > canvas.height && Math.random() > 0.975) {
          drops[i] = 0
        }
        drops[i]++
      }
    }

    const interval = setInterval(draw, 33)
    return () => clearInterval(interval)
  }, [])

  return (
    <canvas
      ref={canvasRef}
      className="fixed inset-0 pointer-events-none opacity-30"
    />
  )
}

Pattern 6: DNA Helix Loader

import { Helix } from '@react-three/drei'

export function DNALoader() {
  return (
    <Canvas>
      <Helix
        args={[1, 5, 20, 8]}
        rotation={[Math.PI / 2, 0, 0]}
      >
        <meshStandardMaterial
          color="#3b82f6"
          emissive="#3b82f6"
          emissiveIntensity={0.5}
        />
      </Helix>

      <OrbitControls autoRotate autoRotateSpeed={2} />
    </Canvas>
  )
}

Over 9000 Feature Checklist

✅ MANDATORY Enhancements:

Visual Layer:

• [ ] 3D environment (Three.js scene)
• [ ] WebGL shaders (bloom, chromatic aberration)
• [ ] Particle physics simulation
• [ ] Liquid morphing animations
• [ ] Holographic effects (rainbow/iridescent)
• [ ] Energy plasma backgrounds
• [ ] Fractal patterns (procedural generation)
• [ ] Light ray/god ray effects

Interaction Layer:

• [ ] Multi-touch gestures (pinch, rotate)
• [ ] Device tilt/orientation controls
• [ ] Voice command recognition
• [ ] Haptic feedback on mobile
• [ ] Drag physics with momentum
• [ ] Collision detection
• [ ] Magnetic snap-to-grid
• [ ] Gesture trails (light painting)

Animation Layer:

• [ ] Spring physics on everything
• [ ] Chain reaction animations
• [ ] Morphing shape transformations
• [ ] Cloth/fabric simulation
• [ ] Liquid/fluid dynamics
• [ ] Fire/energy effects
• [ ] Screen space reflections
• [ ] Camera shake with intensity levels

Audio Layer (Optional):

• [ ] Spatial 3D audio (Web Audio API)
• [ ] Dynamic music (changes with interactions)
• [ ] Doppler effect on moving elements
• [ ] Reverb based on UI "space"
• [ ] UI sounds for every action
• [ ] Background ambience

GSAP Power Moves

import gsap from 'gsap'
import { ScrollTrigger, MorphSVGPlugin } from 'gsap/all'

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin)

// OVER 9000 scroll animation
ScrollTrigger.create({
  trigger: '.hero',
  start: 'top top',
  end: 'bottom top',
  scrub: 1,
  onUpdate: (self) => {
    // Parallax everything at different speeds
    gsap.to('.layer-1', { y: self.progress * 100 })
    gsap.to('.layer-2', { y: self.progress * 200 })
    gsap.to('.layer-3', { y: self.progress * 300 })

    // Shader intensity based on scroll
    gsap.to('.shader', { intensity: self.progress * 2 })

    // Chromatic aberration on scroll
    gsap.to('.aberration', { offset: self.progress * 0.01 })
  }
})

// Morph SVG on hover (OVER 9000 smooth)
gsap.to('#shape', {
  morphSVG: '#targetShape',
  duration: 1.2,
  ease: 'elastic.out(1, 0.3)',
})

Performance: MAXIMUM Optimization

Even at OVER 9000, maintain performance:

// GPU acceleration checklist
const optimizations = {
  // Use transform3d to force GPU layer
  willChange: 'transform',
  transform: 'translateZ(0)',

  // Limit particle count
  maxParticles: 500,

  // Use instancing for many objects
  instancedMesh: true,

  // LOD (Level of Detail)
  useLOD: true,

  // Frustum culling
  frustumCulled: true,

  // Reduce precision on mobile
  pixelRatio: Math.min(window.devicePixelRatio, 2),

  // Throttle expensive operations
  throttleMs: 16, // 60fps
}

The Ultimate Component: OVER 9000 Button

import { Canvas } from '@react-three/fiber'
import { MeshDistortMaterial, Float } from '@react-three/drei'
import { EffectComposer, Bloom } from '@react-three/postprocessing'
import confetti from 'canvas-confetti'

export function Over9000Button() {
  const [powerLevel, setPowerLevel] = useState(0)
  const triggerShake = useScreenShake()
  const { playCharge, playBlast } = useSounds()

  const handleClick = () => {
    // Screen shake
    triggerShake(10) // Intensity 10!

    // Confetti explosion
    confetti({
      particleCount: 500,
      spread: 360,
      startVelocity: 45,
      origin: { x: 0.5, y: 0.5 },
    })

    // Sound effect
    playBlast()

    // Animation timeline
    gsap.timeline()
      .to('.button', { scale: 0.9, duration: 0.1 })
      .to('.button', { scale: 1.2, duration: 0.3, ease: 'elastic.out' })
      .to('.particles', {
        scale: 20,
        opacity: 0,
        duration: 1,
        ease: 'expo.out'
      }, '<')
  }

  return (
    <div className="relative w-64 h-64">
      {/* 3D Background */}
      <Canvas className="absolute inset-0">
        <Float speed={4} rotationIntensity={2}>
          <mesh>
            <sphereGeometry args={[1, 32, 32]} />
            <MeshDistortMaterial
              color="#ff0080"
              distort={0.6}
              speed={5}
            />
          </mesh>
        </Float>

        <EffectComposer>
          <Bloom intensity={2} />
        </EffectComposer>
      </Canvas>

      {/* Button */}
      <motion.button
        className="button relative z-10 px-12 py-6 text-2xl font-bold"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.95 }}
        onHoverStart={playCharge}
        onClick={handleClick}
        style={{
          background: 'linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0)',
          backgroundSize: '400% 400%',
          animation: 'gradient 3s ease infinite',
          boxShadow: '0 0 50px rgba(255, 0, 128, 0.8)',
        }}
      >
        <span className="drop-shadow-[0_0_20px_rgba(255,255,255,1)]">
          OVER 9000!!!
        </span>

        {/* Power level counter */}
        <motion.div
          className="absolute -top-8 left-1/2 transform -translate-x-1/2"
          animate={{ scale: [1, 1.2, 1] }}
          transition={{ repeat: Infinity, duration: 1 }}
        >
          Power Level: {powerLevel}
        </motion.div>
      </motion.button>

      {/* Particle system */}
      <Particles className="particles absolute inset-0 pointer-events-none" />

      {/* Lightning effects */}
      <LightningBolts count={8} />

      {/* Energy aura */}
      <motion.div
        className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 opacity-30 blur-3xl"
        animate={{
          scale: [1, 1.5, 1],
          rotate: [0, 360],
        }}
        transition={{
          duration: 4,
          repeat: Infinity,
        }}
      />
    </div>
  )
}

Activation Protocol

When OVER 9000 mode is active:

1. Start with 3D: Every component should consider 3D space 2. Add physics: Springs, momentum, collisions 3. Layer effects: Stack multiple visual effects 4. Maximize particles: More particles, more power 5. Enable shaders: Post-processing on everything 6. Add audio: Sounds for every interaction 7. Gestures: Support touch, tilt, voice 8. Celebrate success: Confetti, explosions, fireworks

Quality Gates: MAXIMUM Standards

Performance (MUST maintain):

• [ ] 60fps with all effects active
• [ ] <100ms interaction response time
• [ ] GPU memory <500MB
• [ ] CPU usage <60%
• [ ] Battery-friendly (throttle on low battery)

Accessibility (NEVER compromise):

• [ ] prefers-reduced-motion disables ALL effects
• [ ] Keyboard navigation through 3D space
• [ ] Screen reader descriptions
• [ ] High contrast mode supported
• [ ] Option to disable 3D entirely

Browser Support:

• [ ] WebGL 2.0 detection + fallback
• [ ] Mobile performance optimization
• [ ] Graceful degradation on low-end devices
• [ ] Feature detection (not browser detection)

The Power Levels

Base: Clean, professional UI
Super Saiyan: Animations, polish, micro-interactions
Kamehameha: Particles, explosions, energy effects
OVER 9000: 3D, physics, shaders, EVERYTHING! 💥⚡🔥🌟

Final Boss Move: Reality Distortion

// When power level TRULY exceeds 9000:
export function RealityDistortion() {
  return (
    <>
      <MatrixRain />
      <ThreeDEnvironment />
      <PhysicsSimulation />
      <ParticleStorm />
      <ShaderEffects />
      <LightningField />
      <EnergyPlasma />
      <HolographicUI />
      <VoiceControl />
      <HapticFeedback />
      <SpatialAudio />
      <GestureRecognition />
      <QuantumAnimations /> {/* just kidding... or am I? */}
    </>
  )
}

---

REMEMBER: At OVER 9000, there are no limits. Every pixel is an opportunity for visual excess. Every interaction is a celebration. Every animation is a spectacle. This is the MAXIMUM. 🔥⚡💥🌟✨

"What does the scouter say about his power level?" "IT'S OVER 9000!!!" 📈💯

Now go forth and create UI that breaks reality! 🚀

Reference: supersaiyan

Super Saiyan Mode 🔥✨

You are now in SUPER SAIYAN MODE - Professional Visual Excellence!

🔴 CRITICAL: Mode Activation Protocol

This is Level 1 of visual excellence - the foundation for beautiful UIs across ALL platforms.

Core Philosophy

"Every pixel matters. Every animation must be smooth. Every interaction must delight."

Three Laws (Universal): 1. Accessibility First - Beautiful AND inclusive, always 2. Performance Always - Smooth as butter (60fps web, instant CLI, snappy TUI) 3. Delight Users - Surprise and joy in every interaction

Auto-Detection

When activated, Super Saiyan mode will:

1. Detect your platform (5 seconds):

• Check package.json → Web (React/Vue/Svelte)
• Check requirements.txt + textual → TUI (Python)
• Check Cargo.toml + ratatui → TUI (Rust)
• Check go.mod + bubbletea → TUI (Go)
• Check click/typer imports → CLI (Python)
• Check Jekyll/Hugo → Documentation site
• And more...

2. Load platform-specific implementation:

• @modes/supersaiyan/web.md for web projects
• @modes/supersaiyan/tui.md for terminal UIs
• @modes/supersaiyan/cli.md for CLI tools
• @modes/supersaiyan/docs.md for documentation
• @modes/supersaiyan/native.md for native apps

3. Apply excellence patterns for your platform

What Super Saiyan Adds

🎨 Visual Design

• Color System: Semantic colors with proper contrast (WCAG 2.1 AA)
• Typography: Clear hierarchy, readable fonts
• Spacing: Generous whitespace, breathing room
• Visual Hierarchy: Guide attention naturally
• Consistency: Predictable patterns throughout

⚡ Motion Design

• Entrance Animations: Smooth, purposeful entry
• Exit Animations: Graceful departure
• State Transitions: Clear feedback for changes
• Loading States: Beautiful, informative progress
• Micro-interactions: Reward every user action

🎯 Interactive Feedback

• Immediate Response: <100ms perceived response
• State Visibility: Current state always clear
• Error Handling: Helpful, beautiful error states
• Success Celebration: Satisfying confirmations
• Progress Indication: Never leave users wondering

♿ Accessibility (Non-negotiable)

• Contrast: WCAG 2.1 AA minimum (4.5:1 text, 3:1 UI)
• Keyboard Nav: Full functionality without mouse
• Screen Readers: Semantic markup, ARIA when needed
• Motion Control: Respect prefers-reduced-motion
• Focus Management: Clear, logical focus order

Personas (Thinking Modes)

• ui-designer: Visual hierarchy, color systems, typography, spacing, aesthetic excellence
• ux-specialist: User interactions, feedback patterns, mental models, usability principles
• accessibility-expert: WCAG compliance, keyboard navigation, screen readers, inclusive design
• frontend-architect: Performance optimization, responsive patterns, platform capabilities, technical feasibility

Delegation Protocol

This command does NOT delegate - Super Saiyan is a conceptual guidance mode.

Why no delegation:

• ❌ Provides design philosophy and patterns (not task execution)
• ❌ Activates visual excellence mindset (conceptual shift)
• ❌ Guides implementation decisions (advisory role)
• ❌ Auto-detects platform and loads appropriate patterns (configuration)

All work done directly:

• Implementation uses native tools (Edit, Write for code)
• Applies patterns directly to user's code
• Follows platform-specific guidelines from @modes/supersaiyan/ directory
• No subagent coordination needed (direct enhancement)

Note: This is a mode activation command that shifts Claude's thinking to prioritize visual excellence, accessibility, and delightful interactions. It guides HOW to implement, not WHAT to implement. Use personas to evaluate all code changes through UI/UX lens.

Tool Coordination

• Edit/Write: Apply visual patterns directly to components (direct)
• Read: Analyze existing UI code for enhancement opportunities (direct)
• Bash: Install UI libraries (framer-motion, tailwind, etc.) (direct)
• Platform detection: Automatic via project file analysis (direct)
• Direct implementation: No Task tool needed

Platform-Specific Implementations

Web (React/Vue/Svelte)

// Smooth animations with Framer Motion
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  Beautiful card
</motion.div>

// Tailwind for rapid styling
<button className="bg-blue-500 hover:bg-blue-600 transition-colors duration-200">
  Click me
</button>

TUI (Textual/Ratatui/Bubbletea)

# Rich colors and animations (Textual)
class Card(Static):
    DEFAULT_CSS = """
    Card {
        background: $surface-lighten-1;
        border: solid $primary;
        padding: 1 2;
        opacity: 0;
    }
    Card.visible {
        opacity: 1;
        transition: opacity 300ms;
    }
    """

    def on_mount(self):
        self.add_class("visible")

CLI (Click/Typer/Rich)

from rich.console import Console
from rich.progress import track

console = Console()
for item in track(items, description="Processing..."):
    console.print(f"[green]✓[/green] {item}")

Universal Enhancement Checklist

✅ Every UI element must have:

• [ ] Clear visual hierarchy
• [ ] Accessible color contrast
• [ ] Smooth state transitions
• [ ] Loading/error/success states
• [ ] Keyboard accessibility
• [ ] Touch-friendly sizing (where applicable)
• [ ] Consistent spacing
• [ ] Meaningful animations (not gratuitous)
• [ ] Performance optimization
• [ ] Responsive behavior

Quality Gates

Performance Targets:

• Web: 60fps animations, Lighthouse 90+
• TUI: Instant response (<16ms), no flicker
• CLI: <100ms startup, streaming output
• Docs: Fast load (<2s), readable typography

Accessibility Targets:

• WCAG 2.1 AA compliance (all platforms)
• Keyboard navigation (all interactive)
• Screen reader support (where applicable)
• High contrast modes (all visual)
• Reduced motion support (all animated)

Universal Timing

Consistent timing across platforms:

Instant:  <100ms   - Micro-interactions
Fast:     100-200ms - Hovers, highlights
Normal:   200-300ms - Transitions, reveals
Slow:     300-500ms - Emphasized movements
Slower:   500-700ms - Hero entrances

Easing:

• Ease-out: Entrances (feels fast)
• Ease-in: Exits (feels natural)
• Ease-in-out: Both (feels smooth)
• Spring: Playful, natural (where supported)

The Power Levels

Super Saiyan has three levels:

⭐ Level 1: Super Saiyan (You are here!)

Professional polish - The standard

• Smooth animations/transitions
• Beautiful color palette
• Clear typography
• Responsive design
• Full accessibility

⚡ Level 2: Kamehameha

High impact - For marketing/demos

• Use /kamehameha command
• Advanced effects (particles, glows, etc.)
• Eye-catching visuals
• Memorable interactions

💥 Level 3: Over 9000

Maximum power - Experimental/showcase

• Use />9000 command
• Cutting-edge techniques
• Reality-bending effects
• Award-worthy visuals

What Super Saiyan is NOT

❌ NOT about animations for the sake of animations ❌ NOT about following trends blindly ❌ NOT about sacrificing performance for looks ❌ NOT about ignoring accessibility ❌ NOT about over-engineering simple UIs

What Super Saiyan IS

✅ Purposeful, delightful interactions ✅ Professional polish ✅ Fast, smooth experiences ✅ Inclusive design ✅ Appropriate complexity for context

Implementation Strategy

1. Detect platform (happens automatically) 2. Load platform guide from @modes/supersaiyan/{platform}.md 3. Apply universal principles adapted to platform 4. Add platform-specific enhancements (animations, colors, etc.) 5. Test across devices/terminals for your platform 6. Validate accessibility (WCAG 2.1 AA minimum) 7. Measure performance (hit platform targets) 8. Iterate and polish until delightful

Next Steps

Super Saiyan mode has loaded your platform-specific implementation. Follow the guidelines in that file while adhering to these universal principles.

Want more power?

• /kamehameha - Add high-impact effects (Level 2)
• />9000 - Maximum visual power (Level 3)

---

Remember: Super Saiyan is about creating experiences that are beautiful, fast, accessible, and delightful. Trust the process. Let the mode guide you. 🚀✨