Pricing page with monthly/annual toggle and comparison cards.
The knob slides with elastic cubic-bezier and background turns violet. Immediate feedback confirms period change and encourages annual selection.
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) Explore Buttons →Cards "lift" with deep shadow on hover. Users immediately perceive which plan they're exploring, facilitating comparison and decision.
transform: translateY(-12px) + box-shadow: 0 30px 60px Explore Hover & Interactions →The recommended card is slightly larger than others, creating natural visual anchoring. The violet border guides choice without forcing — the "Pro" plan attracts eyes first.
transform: scale(1.05) + border-color: var(--primary) Explore Cards →Pulse animation draws attention to savings. Effective psychological pattern to encourage annual choice by keeping promotion perpetually visible.
animation: pulse 2s infinite + transform: scale(1.05) Explore Utilities →Animated max-height creates smooth transition avoiding jarring jump. Plus icon rotates 45deg, visually confirming each question's open/closed state.
max-height: 0 to 200px + transition: all 0.3s ease Explore Transitions →Confetti explosion visually rewards clicking "Start Free Trial." This micro-moment of joy reduces conversion anxiety and creates positive memory.
animation: confettiFall 3s ease-out forwards (JS DOM) Explore Atmosphere →Violet radial gradient behind title creates visual depth and highlights "transparent pricing" text. Subtle effect but conveys premium appearance.
radial-gradient(circle, rgba(99,102,241,0.15), transparent) Explore Backgrounds →