---
title: "ShaderSlider — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Hamim Reza · Carousels. WebGL slider with shader transition fx."
canonical: "https://framer.elliotli.dev/component/shaderslider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/ShaderSlider

# ShaderSlider

WebGL slider with shader transition fx.

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

![ShaderSlider preview image 1](https://framer.elliotli.dev/og/component/shaderslider/69abcd734c0da9f3/1600x1200.jpg)

## Summary

WebGL slider with shader transition fx.

## Description

A WebGL image slider with five shader transition effects and six cycling text reveal animations. Built for studios, agencies, and creative developers who need a hero slider that looks unlike anything else.

## Features

-   Five WebGL shader transitions — glass, frost, ripple, plasma & timeshift
    
-   Six cycling text reveal animations per slide — stagger, blur, scale, flip & more
    
-   Auto-play with configurable slide duration and transition speed
    
-   Visual progress indicators and optional slide counter
    
-   Chromatic aberration and RGB channel separation on glass effect
    
-   Configurable intensity, speed multiplier and distortion strength
    
-   Dark overlay with adjustable opacity for text legibility
    
-   Full typography controls for title, description, nav and counter
    
-   Responsive via ResizeObserver — adapts to any container size
    
-   Pauses auto-play when browser tab is hidden
    
-   Accessible — ARIA labels, aria-current, semantic nav elements
    
-   Up to 6 slides supported
    

## Shader Effects

-   **Glass** — refraction, chromatic aberration & liquid flow
    
-   **Frost** — crystalline ice pattern coverage
    
-   **Ripple** — water-like wave distortion
    
-   **Plasma** — high-energy electric field transitions
    
-   **Timeshift** — temporal warp and image displacement
    

## Property Controls

**Slides** — title, description, image per slide (up to 6)

**Effect** — glass, frost, ripple, plasma, timeshift + presets per effect

**Timing** — auto-play toggle, slide speed (1000–20000ms), transition duration (0.2–6s)

**Intensity** — global intensity, speed multiplier, distortion strength

**Styling** — overlay strength, text color

**Typography** — title, description, nav, counter fonts

**Colors** — nav text, nav active, nav line colors

**UI** — show counter toggle

## Technical Details

-   THREE.js orthographic camera with custom GLSL fragment shader
    
-   GSAP text animations with six cycling reveal patterns
    
-   Dynamic CDN script loading — no manual installs required
    
-   ResizeObserver for responsive canvas updates
    
-   Visibility API pauses auto-play on tab hide
    
-   Proper WebGL resource disposal on unmount
    
-   Pixel ratio capped at 2x for performance
    

## Requirements

Framer Sites 2024 or later. WebGL and ES6+ required. GSAP and THREE.js load from CDN automatically. External images must return CORS headers.

## Use Cases

Hero sliders · Agency homepages · Creative portfolios · Product showcases · Brand campaigns · Photography galleries

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

-   All · #4414

## Details

- **Author**: Hamim Reza
- **Price**: $15.00
- **Published**: 2026-04-16
- **Updated**: 2026-04-27
- **Added**: 2026-04-01
- **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