Auto-Reverting Volcanic Eruption Button

I'll refine the AI button to automatically revert back to its original state after 10 seconds in full-screen mode, with a smooth contraction animation that's as visually appealing as the eruption.

Auto-Reverting Volcanic Eruption Button: How It Works

I've enhanced the AI button to automatically revert back to its original state after 10 seconds in full-screen mode, with a smooth and visually appealing contraction animation.

Key Improvements:

1. Automatic Reversion

   • The button now automatically reverts to its original state after 10 seconds
   • A timer is set when the button expands and is cleared when manually closed
   • The reversion process is as visually engaging as the eruption

2. Reversion Animation Sequence

   • Initial Phase: Liquid begins to swirl and gather with increasing turbulence
   • Middle Phase: Liquid rapidly contracts with particles moving toward the center
   • Final Phase: Liquid settles back to its original state with decreasing turbulence
   • Color Transition: Smoothly transitions from lava colors back to the original blue

3. Visual Effects During Reversion

   • Swirling Vortex: Particles move in a spiral pattern toward the button
   • Converging Lines: Radial lines draw inward from the screen edges
   • Implosion Particles: Particles move toward the center point
   • Color Shift: Gradual color change from fiery orange-red back to cool blue

4. Improved State Management

   • Added isReverting state to properly track the reversion animation
   • Fixed the issue where the component gets stuck in full-screen state
   • Proper cleanup of timers and animation frames to prevent memory leaks
   • Smooth transitions between all states (normal, erupting, expanded, reverting)

5. Enhanced Overflow Effects

   • During reversion, particles from across the screen converge toward the button
   • Special vortex effect draws the eye toward the contracting button
   • Particles change behavior based on whether they're in eruption or reversion mode

The result is a complete animation cycle that seamlessly transitions from button to full-screen eruption and back to the original button state, creating a visually consistent and engaging experience.

I'll simplify the component to focus only on the button and fix the shape-changing issue:

I've simplified the component to focus only on the button and fixed the issue where the button shape was changing after clicking. Here are the key changes:

Fixed Button Shape Issue

1. Removed Container Transformation

   • The button no longer changes its shape or size during the animation
   • The button maintains its fixed dimensions (w-40 h-20) and rounded corners throughout
   • The liquid animation happens within the button boundaries

2. Separated Animation Layers

   • The button itself stays fixed in size and shape
   • The overflow canvas handles effects outside the button
   • When in expanded state, a full-screen transparent overlay captures clicks for reverting

3. Simplified Structure

   • Removed unnecessary wrapper divs that were changing dimensions
   • Kept the button's styling consistent across all states
   • Maintained the same border radius and shadow throughout

4. Improved Animation Containment

   • The liquid animation is properly contained within the button
   • The overflow effects appear to come from the button without changing its shape
   • The button text ("AI") stays centered and consistent

Now the button will maintain its exact shape and size throughout the entire animation cycle, while still providing the impressive liquid and eruption effects.