--- title: "Fluid Action Button — Free Framer component · Best of Framer" description: "Free Framer component · by Quzmo Studios ™ · Text. Fluid Micro Interaction for Framer" canonical: "https://framer.elliotli.dev/component/fluid-action-button" --- [Home](/)/[Components](/components)/[Text](/components/category/text)/Fluid Action Button # Fluid Action Button Fluid Micro Interaction for Framer [View on Framer](https://framer.com/marketplace/components/fluid-action-button/?via=elliot-li) ![Fluid Action Button preview image 1](https://framer.elliotli.dev/og/component/fluid-action-button/adaa942dc5bc1897/1600x1200.jpg) ## Summary Fluid Micro Interaction for Framer ## Description ## 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.](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-oq1rv4to-JI3IEF95tlpjANcbB611c44FfXcFEz)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](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-a7rprugj-LdpFCN2PjBiVU8EFwA8RaeFuY0ZAlF)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 1. **Drag and Drop:** Copy the component and paste it directly onto your Framer canvas. 2. **Size the Container:** Adjust the core width (105px–400px) and height (40px–80px) to fit your layout grid. 3. **Set the Flow:** Define your Initial Label, Active Label, and which Icon to display. 4. **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.** ## Rank history [How rankings work →](/terms#rankings) - All · #3778 ## Details - **Author**: Quzmo Studios ™ - **Published**: 2026-03-31 - **Updated**: 2026-05-09 - **Added**: 2026-03-03 - **Categories**: Text ## More like this - [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer. - [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors - [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend - [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing