Animated eclipse visual effect component.

Examples

<.dm_fun_eclipse
  id="eclipse-1"
  size="medium"
  bg_color="#09090b"
  class="mx-auto"
/>

<.dm_fun_eclipse
  id="eclipse-2"
  size="large"
  bg_color="#000000"
  animation_speed="slow"
/>

Attributes

• id - Component ID (required)
• size - Size preset: small (400px), medium (600px), large (800px) (default: medium)
• bg_color - Background color of the eclipse (default: "#09090b")
• animation_speed - Animation speed multiplier (default: 1.0)
• class - Additional CSS classes

Styling

This component uses the dm-fun-eclipse CSS class from the eclipse.css file. It creates a beautiful animated eclipse effect with multiple rotating layers that create a celestial eclipse visualization.

The animation consists of 6 layers with different rotation speeds and directions:

• Layer 1: Fast forward rotation (30s base)
• Layer 2: Medium reverse rotation (20s base)
• Layer 3: Medium forward rotation (20s base)
• Layer 4: Slow reverse rotation (40s base)
• Layer 5: Slow forward rotation (40s base)
• Layer 6: Static background layer with gradient effects