Interactions
Small, precise reactions to every touch.
On images and surfaces
Loupe, foil, scrub, light: the pointer works right on the picture. Portrait on the phone, landscape from tablet up.
Cards and controls
Lists, cards, inputs and small reactions to hover and click.
When is an interaction worth it?
Interactions respond to pointer, drag or click and show something a still image cannot: a slider that compares before and after, a loupe over a product photo, a card that tilts toward the pointer, a surface you scratch free. The 28 interactions here are sorted into two groups, one for images and surfaces and one for cards and controls such as ratings, checklists or voice input.
An interaction is worth it when it answers a question the visitor already has. The before and after slider shows what a renovation changed, the loupe shows the stitching on a bag. As pure decoration the same movement only distracts. Each interaction is one React file with Tailwind CSS and framer-motion. With reduced motion turned on, the animations drop away and the function stays.
Related guides
Frequently asked questions
The effects run on Framer Motion. They respond to hover, click or cursor movement and stay smooth.
When the system requests less motion, transform animations are eased back and the content stays calm and readable.
Yes. Duration, spring parameters and amplitude are exposed in the source code and can be changed freely.
Didn't find your question? We're happy to help.
Get in touch
