---
title: "Hover Shader Index — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Omer Mirza · Accordions. Hover Shader Index is a premium Framer section with hover-driven shader previews, smooth list interactions, and clean visual rhythm."
canonical: "https://framer.elliotli.dev/component/hover-shader-index"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Hover Shader Index

# Hover Shader Index

Hover List With Shader Previews

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

![Hover Shader Index preview image 1](https://framer.elliotli.dev/og/component/hover-shader-index/3ca5f40b750c35fb/1600x1200.jpg)

## Summary

Hover Shader Index is a premium Framer section with hover-driven shader previews, smooth list interactions, and clean visual rhythm.

## Description

**Get this component in the complete Shader Components Bundle.** Access all four paid shader-driven Framer components—worth **$39 separately—for $25.**

[Get the Shader Components Bundle →](https://buy.polar.sh/polar_cl_FBTRwXvW4IxXMkrBRaY6alzgUNvhGm5kkWwJN4Gn6NH)

**Hover Shader Index** is a premium Framer section with hover-driven shader previews, smooth list interactions, and clean visual rhythm.

### Shader Visuals

Each liquid shader block uses its own color palette and seed, while shared settings keep the overall system consistent.

The result is five distinct shader combinations that feel connected, with the block, gradient, icon, and description transitioning smoothly between states.

### Typography and Spacing

The design uses bold Inter typography, tight letter spacing, restrained inactive colors, balanced spacing, rounded shader blocks, and soft motion. The description sits below the list without competing with the main interaction.

### Responsiveness

Desktop is hover-based. On phone, the list becomes a tap accordion: tapping an item reveals its description, dims the others, and shows the matching shader block above the list. Tapping again returns to default.

### Customization

Customizable Framer variables let you adjust content, colors, logos, shader behavior, transitions, radius, and styling.

Customizable fields include:

-   Item labels, descriptions, and logos
    
-   Item, inactive, and description colors
    
-   Section background color
    
-   Transition settings
    
-   Shader speed, scale, amplitude, frequency, bands, noise amount, definition, and seeds
    
-   Shader block radius for desktop and phone
    

### Great For

Ideal for AI startups, SaaS landing pages, product feature sections, service showcases, portfolio pages, tool stack sections, creative studios, and any Framer website that needs a visually rich but minimal way to present multiple capabilities.

### Questions & Support

Reach out any time via [x.com](https://x.com/@omeronframer) email at [contact@omermirza.com](mailto:contact@omermirza.com).

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

-   All · #512

## Details

- **Author**: Omer Mirza
- **Price**: $9.00
- **Published**: 2026-06-16
- **Updated**: 2026-09-21
- **Added**: 2026-06-16
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [FAQ Accordion Search](/component/faq-accordion-search) — Russet Supply · $5 — Searchable FAQ accordion with categories