About Kinetic Slider Mask
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.
