Tip: 3-Layer Animated Proximity Gradient Glows
Hey Framer Community! ⚡🎨
Wanted to drop a quick layout blueprint to help other creators build an ultra-premium, interactive Proximity Gradient Glow Button completely native inside the canvas—without writing custom code or bloating your layers weight.
The secret to keeping animated neon text fully accessible and readable is a strict 3-layer depth matrix inside a single component wrapper.
⚡ The Master Structural Setup:
• 1. The Wrapper Frame: Set to your standard pill dimensions (e.g., 220px × 56px) with a 99px corner radius. Set the background color to a deep charcoal or dark blue (#0B1426) at 85% opacity, and add a 1px border gradient set to 15% opacity to trap the glass edge cleanly.
• 2. The Liquid Background Core: Draw a frame inside, scaled to 100% width and height. Set its Z-Index to 1. Apply a vibrant 3-stop linear gradient (e.g., Electric Cyan to Neon Sky Blue) at a 45° angle. Add a Loop Effect set to Rotate (360° over 4s on a Linear curve), and add a 12px Layer Blur graphic effect. This creates a moving liquid-aurora flow perfectly contained by the wrapper clip.
• 3. The Top Typography Layer: Place your text block directly over the center, and set its Z-Index strictly to 2 to pin it safely above the shifting gradient backgrounds.
🚀 Tuning Interactive Micro-Animations:
• Hover State: Add a variant layer and apply a soft outer Shadow Graphic Effect matching your primary neon hex tone. Set the blur to 24px and the spread to 2px. The button will immediately cast an ambient glow onto the canvas the exact millisecond the cursor approaches.
• Pressed State: Add a final variant with a global layout scale modification property set uniformly to 0.96 to give the user a tactile, responsive click physical response when tapped.
Would love to hear how you guys handle your high-conversion CTAs—do you prefer clean, solid-color interactive states or custom animated aura wrappers for your premium builds? 👇
