Kinetic Slider Mask

About this Component Kinetic Slider Mask turns a standard carousel into a physics-driven experience.

About this Component Kinetic Slider Mask turns a standard carousel into a physics-driven experience. A real-time WebGL engine drives jelly-like depth distortion, gravitational drag pull, and chromatic aberration, while a GPU mask reveal staggers each card into view. Senior-dev motion quality, wired into a single Framer component. Demo test here https://kineticslidermask.framer.website/playground Perfect for Fashion & Editorial: Cinematic entrances for lookbooks and campaign launches. Creative Portfolios: A mask stagger that signals craft from the first scroll. Agency & Studio Sites: Technical sophistication with zero shader code. Product & E-commerce: A tactile, speed-reactive gallery for collections. Feature Highlights WebGL Jelly Engine: Real vertex displacement at 60fps, not CSS tricks. Cinematic Mask Reveal: Center-out GPU mask, staggered left-to-right. Chromatic Aberration & Edge Skew: Lens-like RGB split on fast drags. Split-Text Hover Animation: Word-by-word reveal, spring or tween. Zero-Config Responsive: Auto horizontal/vertical, GPU effects disabled on mobile. The "Why" A WebGL carousel with staggered entrances, physics distortion, and synced text is a multi-week build — not a design task. Every shader and rAF loop here is already tuned and battle-tested, so you ship production-ready motion without touching a line of GLSL. 🛠 How to Use (3 Simple Steps) Set Your Foundation: Add your images, set card size, gap, and radius. Define the Aesthetic: Tune momentum, jelly pull, RGB split, stagger speed, and text style. Preview & Deploy: Preview the full physics interaction, then publish as configured.

WebGL slider with mask entrance.