← Back to Gallery
Aurora Celestial Pricing Card
Live Preview
A premium single-card pricing component inspired by the Northern Lights. It features a deep-space aesthetic with a rotating conic-gradient 'Aurora' effect in the background. The design utilizes glassmorphism for the card body, paired with high-contrast typography and a vibrant emerald-to-blue gradient palette. The layout is optimized for high-conversion focus, emphasizing the price and call-to-action with subtle hover animations and depth effects.
Features
- Animated 'Aurora' background glow using conic gradients
- Sophisticated glassmorphism effect with backdrop-filter
- Micro-interactions: Smooth scaling and border-color transitions on hover
- High-contrast CTA with arrow animation
- Premium typography using Montserrat for headings and Inter for body text
- Mobile-responsive width and height constraints
Uses
- SaaS landing pages for a 'Pro' tier highlight
- Premium subscription service checkouts
- Digital product feature showcases
- Upselling modules in dashboard interfaces
Benefits
- No external JavaScript dependencies for maximum performance
- Strong visual hierarchy guides the user to the 'Ignite Access' button
- Unique theme stands out from standard corporate pricing tables
- Lightweight CSS-only animations reduce browser load
Techniques Used
The component uses CSS keyframe animations for the aurora rotation, backdrop-filter for the glass effect, and linear-gradient text clipping for the 'Celestial' typography. It employs flexbox for precise alignment and CSS transitions for a fluid interactive feel.
Frequently Asked Questions
How is the rotating 'Aurora' effect implemented to ensure it remains smooth on low-power mobile devices?
The effect leverages a conic-gradient on a pseudo-element with will-change: transform and a CSS animation property. By offloading the 360-degree rotation to the GPU and using a fixed aspect ratio for the gradient container, we minimize layout recalculations and avoid main-thread jank during the animation cycle.
What specific CSS properties are used to achieve the glassmorphism effect without compromising the legibility of the Inter body text?
We combine backdrop-filter: blur(20px) saturate(160%) with a subtle background-color of rgba(15, 23, 42, 0.65). This creates a dark glass pane that provides a high-contrast foundation for the white Inter text, ensuring the vibrant emerald-to-blue aurora colors don't interfere with readability.
How is the high-contrast CTA button's arrow animation synchronized with the overall card hover state?
The button uses a CSS transition on the nested SVG element. When the .pricing-card enters its hover state, we apply a transform: translateX(6px) to the arrow with a cubic-bezier(0.4, 0, 0.2, 1) timing function, creating a snappy directional affordance that mirrors the card's 1.05x scale transition.
How does the component manage the typographic hierarchy between the Montserrat and Inter font families?
The hierarchy is defined by using Montserrat at weights 700-900 with a letter-spacing of -0.02em for headings and the price display to establish a 'premium' brand feel. This is balanced by Inter at weight 400 for body text and feature lists, utilizing a 1.6 line-height to ensure maximum clarity against the semi-transparent glass background.
Can the conic-gradient colors be dynamically updated for different pricing tiers without rewriting the animation logic?
Yes, the component is engineered using CSS Custom Properties. By overriding the --aurora-primary and --aurora-secondary variables on a wrapper class, the conic-gradient automatically updates its color stops while the underlying @keyframes rotation logic remains identical across all instances.