Good interactive website design gives visitors something to do that a static page can't: turn the product, compare two options, build their own version, or simply play for a few seconds. Every interaction should have a job. If you can't name it, it's decoration, and decoration is where budgets and load times go to die.
We sort interactions into four jobs: explain, compare, configure, delight. Here are 12, each with when to use it, a relative cost level and the accessibility catch.
Job 1: Explain
1. Product hotspots. Tap points on an image or 3D model that open a detail: the stitching, the sensor, the hinge. Use when: a product has three to six features worth pointing at. Cost: Low. Accessibility: hotspots must be focusable buttons with labels, not bare dots.
2. Scroll-scrubbed explainer. The product opens, assembles or rotates as the visitor scrolls. Use when: the mechanism is the selling point. Cost: Medium. Accessibility: under prefers-reduced-motion, show key frames as stills with captions. More scroll patterns live in animated website examples.
3. Before/after slider. Drag a handle to compare two states: renovation, retouching, a skincare result. Use when: the change is visual and dramatic. Cost: Low. Accessibility: the handle needs arrow-key control and an accessible name.
Job 2: Compare
4. Variant toggle. Switch size, finish or plan and see the page update in place. Use when: people hesitate between two or three options. Cost: Low. Accessibility: announce changes to screen readers with an ARIA live region.
5. Live filter. Results reshuffle as you pick criteria, with a quick layout animation so you can see what moved. Use when: catalogs over a few dozen items. Cost: Medium. Accessibility: keep the result count in text, and give each filter state its own URL so it's shareable.
6. True scale and AR view. See the product at real size, or in your room through the phone camera. Google's model-viewer web component supports AR from a standard glTF model. Use when: size uncertainty drives returns. Online returns ran at 19.3% in 2025 according to NRF/Happy Returns data cited by Framesixty. Cost: Medium. Accessibility: always list dimensions in text too.
Job 3: Configure
7. 3D product configurator. Choose material, color and parts, and watch a real-time model update. Use when: options are meaningful and the price justifies the build. Sketchfab reports that POM, a personal-safety spray brand with 72 variants, moved from 0.82% to 3.65% conversion after adding a 3D configurator. Framesixty cautions that many widely shared 3D figures trace back to older vendor research, so read them as directional. Cost: High. Hon Tran puts a custom single-product configurator at $4K-$10K and a multi-option build with rules at $10K-$30K, and Utsubo lists configurators in its $100K-$200K agency Flagship tier; full breakdown in 3D product configurator cost. Accessibility: every option must also work as a normal form control.
8. Interactive apartment selector. Hover or tap a building facade to see each unit's rooms, area, price and status. In an example residential project we built in Tallinn, every lit window was a home you could open. Use when: selling off-plan property with more than a handful of units. Cost: Medium to High. See our guide to the interactive apartment selector. Accessibility: pair the visual selector with a sortable table of the same units.
9. Calculator or quote builder. Monthly payment, energy savings, project estimate. Numbers update as sliders move. Use when: price depends on inputs. Cost: Low to Medium. Accessibility: sliders need keyboard support and visible values; offer number inputs as an alternative.
Job 4: Delight
10. Cursor-reactive hero. Particles, type or a 3D object respond to the pointer. Use when: the first screen needs to feel alive. Cost: Medium. Accessibility: provide a static frame under reduced motion and a gentle idle state on touch screens.
11. Physics toys. Objects you can drag, throw or stack, built with physics engines like Rapier. Use when: the brand is playful and visitors have a reason to linger. Cost: Medium to High. Accessibility: never hide navigation or content inside the toy.
12. Hidden details. Small rewards for curiosity, like a logo that reacts on hover. Use when: the brand has a sense of humor. Cost: Low. Accessibility: nothing essential should live only there.
Interactive elements website cheat sheet
| Interaction | Job | Cost level | Biggest risk |
|---|---|---|---|
| Product hotspots | Explain | Low | Unlabeled dots |
| Scroll-scrubbed explainer | Explain | Medium | Asset weight |
| Before/after slider | Explain | Low | Mouse-only handle |
| Variant toggle | Compare | Low | Silent updates |
| Live filter | Compare | Medium | No shareable URL |
| True scale / AR | Compare | Medium | No text dimensions |
| 3D configurator | Configure | High | Slow first load |
| Apartment selector | Configure | Medium-High | No table fallback |
| Calculator | Configure | Low-Medium | Slider-only input |
| Cursor-reactive hero | Delight | Medium | Nothing on touch |
| Physics toy | Delight | Medium-High | Hides content |
| Hidden details | Delight | Low | Essential info hidden |
The rule we apply
Spend on configure and explain first: they answer buying questions. Add delight once, where people look first. Overdesigned sites have this backwards.
