Hover Shader Index

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 →

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 email at contact@omermirza.com.