Geometric Arc Grid

Ignite your design with Geometric Arc Grid, a dynamic background component that visualizes flowing energy moving through a complex network of curved lines and fractures. This component uses SVG patterns and Framer Motion to create a continuous, hypnotic pulse without the heavy performance cost of video files.

It comes alive with user interaction—clicking or tapping triggers a stunning ripple explosion, making it perfect for gamified interfaces, Web3 landing pages, sci-fi dashboards, or high-impact hero sections. Choose from pre-set elemental themes (Magma, Ice, Toxic, Amethyst) or customize the colors to create your own branded digital flow.

Functions (Key Features):

• 🎨 Elemental Themes: Switch instantly between Magma (Fire), Ice (Frozen), Toxic (Biohazard), and Amethyst (Magic).

• 🌊 Flow Animation: A continuous background animation simulates liquid energy moving through the geometric arcs.

• 👆 Interactive Ripple: Clicking anywhere generates a glowing shockwave effect that fades out smoothly.

• ✨ Neon Glow: Adjustable SVG filters create a realistic, blooming light effect around the grid lines.

• 🛠️ Fully Customizable: Control the grid line width, glow intensity, flow speed, and custom color palettes.

How to Use:

1. Insert: Drag the Geometric Arc Grid component onto your frame.

2. Sizing: Set Width and Height to "Fill" (100%) for a full-screen background.

3. Variant: Select a preset Variant (e.g., "Magma" for orange/red, "Ice" for cyan/blue) to verify the look.

4. Custom Colors: To use your own brand colors, set Variant to "Custom" and adjust the Background, Color Start, and Color End.

5. Fine Tune: Adjust Glow and Grid Line Width to make the arcs look subtle or bold.

6. Interaction: Preview the component and click/tap to test the ripple effect.