Cards
Pricing Card Highlight
A pricing card that scales and glows to mark the recommended plan.
Pro
Supporting copy goes here.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.pricing-card {
transform: translate3d(120px, 30px, 0);
width: 240px;
height: 260px;
background: #1c1e2a;
border-radius: 22px;
color: #e7e9ee;
font-size: 14px;
transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-card:hover {
transform: translate3d(120px, 30px, 0) scale(1.04, 1.04);
box-shadow: 0px 0px 36px 1px #8b7bff77;
}
@media (prefers-reduced-motion: reduce) {
.pricing-card {
animation: none;
transition: none;
}
}Why it is built this way
A back-out easing overshoots very slightly before settling, which makes the card feel picked up rather than inflated. Keep the scale under about 1.05 or the text inside visibly softens.
What it animates
No keyframes at all — this one is built from interaction states, so the browser only does anything when the visitor does.
What it costs to run
Nothing here runs on a timer. The motion lives entirely in :hover, which compiles to a transition — so it costs nothing until the visitor does something, and it interrupts and reverses cleanly halfway through.
Accessibility
A reader who never triggers :hover never sees this, so it carries no risk on load. Worth adding a :focus-visible state alongside it: as written, a keyboard user gets no feedback at all.