Flipside is a Framer code component that turns a single photo into a small moment of interaction. The card has two faces, a front and a back, and it flips between them based on the visitor's input. On desktop, your cursor's horizontal position drives the flip in real time, with a subtle Z-axis tilt that reverses smoothly across the rotation so the back face leans the opposite way to the front. On tablet and mobile, where there's no cursor, the card auto-flips on a quiet, configurable loop so the interaction never disappears on touch.
The motion is built on Framer Motion's spring physics, so it feels natural rather than mechanical. Every value, stiffness, damping, mass, perspective, tilt angle, is exposed through the right panel, so you can tune it to match the energy of your site.
The card's rotation tracks your cursor's X position, smoothed through a tunable spring. Sweep across the page, the card flips. Stop, it settles.
Below a viewport breakpoint you choose (default 1200px), the cursor handler steps aside and the card flips 180° on a loop, with configurable hold time and flip duration.
A cosine-based Z-axis tilt leans the card one way on the front and the opposite on the back, so the flip never feels flat. The math runs on a separate transform layer, so it doesn't interfere with the 3D rotation.
If a visitor has reduce-motion enabled in their OS, the auto-flip loop on mobile is suppressed and the card sits still on the front face.
Front and back images are full Framer ResponsiveImage controls, with srcSet support, so you don't lose retina quality.
When the viewport crosses the breakpoint in either direction, both motion pipelines reset to zero so the next mode starts fresh. No leftover momentum, no spinning catch-up.
Portfolio hero photo with a punchline on the back
About page portrait with a candid second shot
Designer/studio sites where the team photos can carry a second beat
Product cards where a second angle or detail shot lives on the reverse
Any single-image moment that could use one more layer of life
Click "Purchase", complete checkout, and you'll receive a Component URL. Paste it onto your Framer canvas and the component installs as an Asset. Set your two images in the right panel, tune the behavior, you're done.
Reach out at hello@madebrux.com if you hit any installation issues or have questions about customizing the component.
madebrux
