Magic 3D Button

Elevate your UI with Liquid Magic

Add a touch of magic to your Framer projects with this high-performance, interactive button component. Designed with precision physics and fluid motion, it provides a tactile experience that goes beyond standard web buttons.

✨ Key Features

• Fluid Liquid Physics: The button features a unique skewed, rotating container that feels organic and alive.

• Staggered Text Animations: Every character is treated as an individual element, creating a beautiful "fly-away" effect when clicked.

• Interactive Success State: Built-in logic that smoothly transitions from your call-to-action to a custom "Success" or "Thank You" message after a short delay.

• Dynamic Glow & Shadows: Multi-layered shadows and a sweeping "light-streak" outline that activates on hover.

• SVG Splash Effects: Includes integrated vector splash animations that trigger on interaction.

🎨 Full Control at Your Fingertips

This component is built to be flexible. You don't need to touch a single line of code to make it yours:

• Custom Success Message: Toggle between your initial text and a secondary message for post-click interaction.

• 5-Point Color Gradient: Fine-tune the liquid look using five distinct primary color slots.

• Shadow & Text Controls: Easily adjust the depth of the button and the color/size of your typography.

• Adaptive Sizing: Fully responsive width, height, and border-radius controls.

🚀 How to Use

1. Drag the component onto your canvas.

2. Update the Text and Success Text in the properties panel.

3. Match the Primary Colors to your brand’s palette.

4. Set the Font Family to your project's primary typeface.

Perfect for: Landing pages, waitlists, premium SaaS dashboards, and high-conversion "Join" or "Submit" actions.