A hover-preview slider that pairs feature lists, work grids, or product items with contextual visual previews.

Interactive Hover Slider adds motion to a component that already has a job: hover previews guide exploration.
Use Interactive Hover Slider when a compact feature or capability list should reveal visual context through preview panels. The preview should help exploration without making hover the only access path.
The thing to watch is generic behavior. Interactive Hover Slider must use the right semantic pattern for its task before animation is added, and every state change should remain clear under keyboard, mobile, and reduced-motion conditions.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
A product page can use Interactive Hover Slider to preview related capabilities from a compact list. Hover enriches exploration on desktop, while mobile needs the same previews available through tap or stacked cards.
Not for essential information that mobile, keyboard, or no-hover users cannot reach.
Pre-size preview media, avoid swapping large images on every pointer movement, and lazy-load only previews that are likely to appear.
Support focus and tap paths for every preview. On mobile, switch to stacked cards, accordions, or tap-controlled panels instead of hover-only reveal.
| Prop | Type | Default | Description |
|---|---|---|---|
transitionDuration | number | 0.45 | Hover reveal and curve transition duration. |
imageScale | number | 0.95 | WebGL image plane scale. |
curveFactor | number | 1 | Multiplier for the circular arc image curvature. |
Use it when a feature or product section needs hover previews to guide exploration.
Every hover reveal needs an equivalent focus, click, tap, or stacked-content path. The preview must be reachable without a mouse.
Use tap-to-preview, stacked preview cards, or an accordion-like reveal. Do not rely on hover as the only way to see the content.
Yes, when short feature labels need supporting screenshots or proof snippets. It hurts conversion when previews hide the primary CTA or require desktop-only behavior.
Keep previews available while removing sliding, parallax, or image-travel motion between states.
Need a custom effect? Tell us what to create.