About Fluid Action Button

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.