Hover Shader Index

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

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 .

Hover List With Shader Previews