Hover Shader Index is a premium Framer section with hover-driven shader previews, smooth list interactions, and clean visual rhythm.
At default, the component starts as a minimal list. On hover, the active word shifts right, other items dim, and a liquid shader block appears beside the list, aligned so the selected word cuts through the preview for a floating layered effect.
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.
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.
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.
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
Hover Shader Index is 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.
Reach out any time via x.com email at contact@omermirza.com.
Hover Shader Index is a premium Framer section with hover-driven shader previews, smooth list interactions, and clean visual rhythm.
At default, the component starts as a minimal list. On hover, the active word shifts right, other items dim, and a liquid shader block appears beside the list, aligned so the selected word cuts through the preview for a floating layered effect.
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.
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.
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.
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
Hover Shader Index is 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.
Reach out any time via x.com email at contact@omermirza.com.
Omer Mirza
