About this Component
Kinetic Slider Mask transforms the standard image carousel into a living, physics-driven experience that commands attention the moment a page loads. Powered by a real-time WebGL engine running directly in the browser, every card breathes with gravitational pull, jelly-like depth distortion, and chromatic aberration that responds to the speed of your drag. The signature Mask Reveal entrance — a GPU-rendered wipe that expands from the center of each card in a precise left-to-right stagger — sets the tone before the user even touches the slider. This is the kind of motion quality that used to require a dedicated creative developer and weeks of iteration. Now it's a single Framer component, fully wired and ready to ship.
https://kineticslidermask.framer.website/playground
Fashion & Editorial: Give lookbooks and campaign launches the cinematic entrance they deserve, with physics-driven cards that feel as intentional as the imagery inside them.
Creative Portfolios: Make the first scroll unforgettable — the mask stagger creates an immediate sense of craft and authorship that static sliders simply cannot match.
Agency & Studio Sites: Signal technical sophistication without writing a single line of shader code. Drop it in, configure the physics, and let the component do the talking.
Product & E-commerce: Showcase collections with a gallery that reacts to touch and speed, turning a product grid into an interactive, tactile browsing experience.
Real-Time WebGL Jelly Engine: Cards warp, bulge, and stretch in response to drag velocity — not CSS tricks, but actual vertex displacement running on the GPU at 60fps.
Cinematic Mask Reveal Entrance: Each card enters the stage through a GPU-rendered mask that opens from center outward, staggered left-to-right for a choreographed, film-quality reveal.
Chromatic Aberration & Edge Skew: Motion triggers a subtle RGB color split and edge curve that gives the slider a high-end, lens-like quality during fast scrolls.
Split-Text Hover Animation: Titles and descriptions animate in word-by-word on hover — or always-on with entrance sync — using a fully configurable spring or tween transition.
Zero-Config Responsive: Horizontal and vertical layouts, Desktop and Mobile modes, drag and wheel scroll — all resolved automatically, with GPU effects gracefully disabled on mobile for peak performance.
Building a WebGL carousel with staggered entrances, physics-based distortion, chromatic aberration, and synchronized text animations from scratch is a multi-week engineering project — not a design task. Kinetic Slider Mask eliminates that gap entirely. Every uniform, every shader, every rAF loop has already been tuned and battle-tested. You get production-ready motion quality that holds up across devices, browsers, and real user interactions, without touching a single line of GLSL.
Set Your Foundation: Drag Kinetic Slider Mask onto your canvas, open the Gallery panel, and add your images — via upload or direct URL. Set card width, height, gap, and border radius to match your layout.
Define the Aesthetic: Configure the Effects panel to dial in momentum, jelly pull, RGB split intensity, and edge skew. Set your entrance stagger speed and physics curve. Choose text visibility, font, color, and label position.
Preview & Deploy: Hit Preview to experience the full WebGL entrance and physics interaction. Publish when ready — the component is production-optimized and ships exactly as configured.
Madrepunk™ Studio
