✨ Preview Component

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

At default, the component starts as a minimal list. When a user hovers over any item, the active word shifts slightly to the right, the other items dim down, and a liquid shader block appears beside the list. The block aligns with the active item so the selected word visually cuts through the middle of the shader preview, creating a floating, layered interaction.

Each shader block includes a carefully tuned liquid gradient background and a relevant foreground icon, giving every item its own visual identity while keeping the whole section consistent.

How it Works

Hover over a list item and the component responds instantly:

• The hovered item becomes active
• The active item shifts slightly to the right
• Inactive items fade into a softer color
• A shader block appears beside the active item
• The liquid gradient and foreground icon change smoothly
• A short description appears below the list

Once the hover ends, the component returns to its clean default state.

Shader Visuals

The component uses liquid gradient shader blocks as the main visual layer. Each block has been individually tuned with its own color palette and seed, while keeping the overall shader settings consistent across the component.

The result is a set of five distinct shader combinations that feel connected but not repetitive. The palettes cover different moods, making the default demo feel polished and ready for SaaS, AI, and product-focused websites.

The shader preview behaves like one continuous visual system. Between hover states, the block, liquid gradient, icon, and description transition smoothly instead of feeling like separate static elements.

This keeps the interaction clean and makes the component feel more refined than a basic hover list.

Typography and Spacing

The default design is carefully tuned around clean spacing, strong typography, soft motion, and balanced proportions.

The list uses large, bold Inter typography with tight letter spacing and restrained inactive colors. The description text is smaller, softer, and positioned below the list to add context without competing with the main interaction.

The shader block uses rounded corners, soft sizing, and a premium visual weight so it feels like a floating material tile rather than a basic image card.

Responsiveness

On desktop, the component is hover-based.

On phone, the interaction changes because hover does not exist on touch devices. The list becomes a mobile accordion-style layout. When a user taps an item, the relevant description appears under that item, the other items dim down, and the matching shader block appears above the list.

Tapping the open item again returns the component to its default state.

Customization

The component is built with customizable Framer variables, so you can adjust the content, visuals, colors, shader behavior, and styling without rebuilding the component.

Customizable fields include:

• Transition settings
• Item name color
• Inactive item color
• Description color
• Item one label
• Item one description
• Item one logo
• Item two label
• Item two description
• Item two logo
• Item three label
• Item three description
• Item three logo
• Item four label
• Item four description
• Item four logo
• Item five label
• Item five description
• Item five logo
• Section background color
• Shader speed
• Shader scale
• Shader amplitude
• Shader frequency
• Shader bands
• Shader noise amount
• Shader definition
• Shader seed one
• Shader seed two
• Shader seed three
• Shader seed four
• Shader seed five
• Shader block radius
• Shader block radius on phone

Great For

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.

How to Access

You will get the component URL after completing your purchase on the success page and via email.

Refund Policy

Due to the digital nature of this product, all sales are final, and refunds will not be issued. Please ensure you review all product details carefully before purchasing. If you have any questions or need further clarification, feel free to reach out before completing your purchase.

Questions & Support

Reach out any time via x.com or email at contact@omermirza.com.