React animation example
React Flip Card: 3D Card Flip Animation
A flip card shows two sides of one idea: a plan and its price, a question and its answer. This card rotates on a spring, so it overshoots slightly and settles like a physical card, and a highlight slides across the face as it turns. Hovering tilts it toward the cursor before you click.
- 4.4 KB file
- 6 live inputs
- React runtime
How this 3d flip card works
- Rotation is a spring from 0 to 180 degrees; the card is drawn with a horizontal scale of cos(angle) for the perspective.
- Past 90 degrees the back face is drawn instead of the front, so text is never mirrored.
- The flipped state is an input, so a parent component can flip a whole row of cards at once.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-flip-card.bexode goes in /public (download it below)
export function ReactFlipCard() {
return (
<ExodeUICanvas
src="/react-flip-card.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'flip'
}}
style={{ width: '100%', height: 460 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
flipped | Boolean | false | — |
front | Text | Pro plan | — |
back | Text | $29 / month | — |
accent | Text | #8b5cf6 | hex colour |
accent2 | Text | #ec4899 | hex colour |
bg | Text | #0b0a12 | hex colour |
Events: flip
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.
The same idea in other frameworks: Flutter credit card flip · SwiftUI flashcard deck