Fluid Action Button

Fluid Micro Interaction for Framer

Kinetic Fluid Pro — Premium Interaction System Elevate your interface with cinematic, physics-driven motion. The Kinetic Fluid Pro is a high-precision motion component engineered for designers who demand luxury-level interaction. Built on a layer-isolated fluid architecture, it delivers organic "Fluid" transitions while keeping your typography and icons vector-sharp—solving the common distortion issues of standard SVG filters. ❖ The Engineering Behind the Motion Unlike basic animated templates, this component uses a dual-layer rendering engine. The liquid physics operate strictly in the background, allowing the functional UI to maintain 100% clarity during high-velocity transitions. It is fully optimized for modern web standards, featuring automatic prefers-reduced-motion detection to gracefully disable complex blurs for motion-sensitive users, alongside native aria hooks for enterprise-grade accessibility. A high-fidelity, fluid component featuring organic "gooey" transitions and physics-based motion. Engineered with precision, it blends natural interaction with a sleek, minimal aesthetic for modern Framer projects. ❖ Comprehensive Property Controls Everything is configurable directly within Framer’s native right-hand panel. No code required. Motion & Physics 6 Curated Easing Presets: Choose from custom-engineered curves like Luxury Ease , Fluid Fade , Heavy Liquid , Elastic Snap , Smooth Organic , or Spring . Precision Timing: Dial in the exact transition duration (300ms–3000ms) to match your project's pacing. Advanced State Management Smart Activation: Trigger the expansion via standard Click, gentle Hover, or Press-and-hold states. Intelligent Dismissal: Give users the option to close the state by clicking the main button, the secondary icon, or anywhere outside the component. Production-Ready Disabled States: Built-in disabled logic that grays out the UI, prevents triggering, and supports custom popover text (e.g., "Action disabled"). Cursor Context: Define specific mouse cursors for enabled and disabled states (Pointer, Help, Not-Allowed) to enhance UX clarity. Granular Control, Effortless Design. Precision-engineered properties meet a seamless user interface, giving you total command over motion, style, and logic in one unified panel ❖ Visual Architecture & Styling Bind the component seamlessly to your brand's design system. Dynamic Typography Native Font Integration: Deeply integrated with Framer’s native font picker. Control family, size (9px–18px), weight (100–1000), and letter-spacing (0–2px). Morphing Text Logic: Labels automatically split, blur, and animate sequentially between your Initial (e.g., "Remove") and Active (e.g., "Confirm") text states. Tri-State Color Mapping: Assign distinct text and background colors for your Initial, Active, and Disabled states. Icon Intelligence Built-In Phosphor Icons: Instantly swap between core action icons without importing external assets: Check, Cancel, Trash, Heart, Play, and Question . Smart Animation: Icons automatically un-hide, rotate, and scale into place with perfectly timed entry delays based on your chosen fluid physics. Granular Layout: Fine-tune icon size (8px–20px) and apply absolute color matching. How to Use in Framer Drag and Drop: Copy the component and paste it directly onto your Framer canvas. Size the Container: Adjust the core width (105px–400px) and height (40px–80px) to fit your layout grid. Set the Flow: Define your Initial Label, Active Label, and which Icon to display. Style & Publish: Bind the Initial, Active, and Disabled color states to your Framer Color Styles, select your interaction physics, and hit publish. Perfect For: High-End SaaS Dashboards (Action confirmation, deletions, or data execution) Boutique Portfolio Sites (Menu triggers, video play buttons, or contact calls-to-action) Luxury E-commerce (Wishlist additions and checkout workflows) Stop settling for static UI. Bring Apple-level interaction refinement to your project with a single drag-and-drop.

Fluid Micro Interaction for Framer