The Ultimate Cinematic Slider Engine for Framer Creators.
The Liquid Inertia Deck is an elite, code-driven media carousel engineered to replace static layout carousels with fluid, velocity-mapped kinematics. Built explicitly to eliminate Framer's rigid container limits, this component uniquely packs two separate interaction engines into one single file—giving you absolute control over both user engagement and automated layouts.🕹️ The Dual-Engine Experience (Drag & Ticker In One)
Unlike standard marketplace sliders that restrict you to just one fixed layout pattern, this premium asset allows you to switch between two core interaction engines on the fly:
Engine 1: Manual Kinetic Drag Track: A touch-responsive, highly tactile track utilizing premium spring physics (stiffness: 210, damping: 26). It actively tracks your cursor's real-time dragging vector speed to apply organic, liquid-ink visual stretching (skewX and scaleY) that reacts to how aggressively a user sweeps across the track.
Engine 2: Infinite Marquee Ticker: Flip a switch to instantly shift into an automated, continuous horizontal loop showcase. Driven by a delta-time normalized useAnimationFrame pipeline, it maintains a flawless, hardware-accelerated scroll rate on everything from standard 60Hz mobile devices to premium 144Hz design monitors.
Isolated Hover ZigZag Waves: Individual cards run on separate thread matrices. When the cursor passes over a card (even while the infinite ticker is scrolling), it triggers an out-of-sync, phase-shifted sine ripple that floats elegantly without disrupting neighboring cards or causing layout shifts.
Dynamic Dual-Asset Inputs: Built-in programmatic image routing. Supports direct, native high-res file uploads alongside rapid CDN/Unsplash image URL strings, complete with conditional UI sidebar panel masking.
Advanced Image Resizing Matrix: Gives designers instant dropdown formatting over card image bounding behaviors, switching between Cover (Crop), Contain (Fit), or Fill (Stretch).
Omni-Responsive Layout Breakdown: Features automatic viewport window listener detection. Drops down from desktop layout scaling dimensions straight into independent mobile width, height, and spacing rules on screens $\le 810\text{px}$.
Abdul Sami
