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.
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.
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.
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.
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.
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.
Qusco
