---
title: "Kinetic Slider Mask — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Matheus Brandão · Carousels. About this Component Kinetic Slider Mask turns a standard carousel into a physics-driven experience."
canonical: "https://framer.elliotli.dev/component/kinetic-slider-mask"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Kinetic Slider Mask

# Kinetic Slider Mask

WebGL slider with mask entrance.

[View on Framer](https://framer.com/marketplace/components/kinetic-slider-mask/?via=elliot-li)

![Kinetic Slider Mask preview image 1](https://framer.elliotli.dev/og/component/kinetic-slider-mask/ef6dd157741508ab/1600x1200.jpg)

## Summary

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

## Description

### **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](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)**

1.  **Set Your Foundation:** Add your images, set card size, gap, and radius.
    
2.  **Define the Aesthetic:** Tune momentum, jelly pull, RGB split, stagger speed, and text style.
    
3.  **Preview & Deploy:** Preview the full physics interaction, then publish as configured.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4894

## Details

- **Author**: Matheus Brandão
- **Price**: $8.00
- **Published**: 2026-04-08
- **Updated**: 2026-10-18
- **Added**: 2026-03-30
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow