
PremiumPricing Animation
Orbit Pricing Constellation
Quatre offres disposées en constellation autour d'un noyau lumineux, reliées par des orbites animées.
Temps
8 min
Niveau
Avancé
Compat
Lovable · ChatGPT
Le prompt
Create a pricing section laid out as an orbital constellation around a glowing core.
Layout:
- Left column: eyebrow "FLEXIBLE PRICING", a three-line headline with two gradient words, a short subtitle, three benefit rows with glass icon tiles (Switch anytime, Secure & reliable, 24/7 support), a green "Save up to 35% with yearly billing" glass card, then a logo wall
- Center: a circular core made of concentric animated rings with the text "Find the plan that fits you", a short line and 4 small feature chips
- Around the core, 4 pricing cards positioned at top, left, right and bottom, each with its own accent color (violet, emerald, blue, amber)
- Bottom-right: a "Choose your billing cycle" glass panel with the Monthly / Yearly / Lifetime toggle
- Full-width guarantee bar at the very bottom
Signature effects:
- The orbit rings rotate slowly and infinitely (30-60s per turn) with light dots traveling along them
- SVG connector arcs link the core to each card, drawn on scroll, with a glowing pulse traveling from the core to the card
- Cards float with individual slow Y offsets (parallax feel) and lift on hover
- The central rings react subtly to the cursor (slight rotation offset)
Global art direction:
- Deep black canvas (#0a0a0f) with a subtle violet radial light leak behind the main content
- Glassmorphism surfaces: rgba(255,255,255,0.05) fill, 1px rgba(255,255,255,0.09) border, backdrop-blur(28px), inner top highlight
- Violet (#8b5cf6) to magenta (#d946ef) gradients reserved for the primary plan only
- Tiny star-dust particles and long soft light streaks in the far background, extremely low opacity
- Everything must feel expensive, calm and cinematic — never neon, never flashy
Content (French or English, keep it consistent):
- Section eyebrow pill with an icon
- Two-line headline where the second line is gradient violet
- One short supporting sentence
- Plans with: icon tile, name, one-line positioning, big price, period, feature list with circular check icons, CTA button, small reassurance line under the CTA
- A bottom trust bar with 4 items: money-back guarantee, secure payments, 24/7 support, social proof
Interactions:
- Billing toggle (Monthly / Yearly / Lifetime) with a sliding violet pill using layoutId and spring physics
- Prices must animate between billing modes with an animated number counter (no instant swap)
- A "Save up to 35%" badge that pops in with a spring when yearly is selected
- Each card lifts on hover with a violet glow and a cursor-tracked light reflection across the glass
- Feature rows fade and slide in with a 0.05s stagger when the section enters the viewport
- The recommended plan pulses very slowly (scale 1 -> 1.01) and carries a floating "Most Popular" badge
Do not:
- Use flat cards without depth
- Use fast, bouncy or distracting animation
- Ship non-responsive layouts or clipped badges (badges must live outside overflow-hidden containers)
---
TECHNICAL SPEC (must be respected)
Stack:
- React 18 + TypeScript (strict), Tailwind CSS, Framer Motion
- No extra animation library, no canvas unless explicitly required
Design tokens:
- Base background #0a0a0f, surfaces rgba(255,255,255,0.04)
- Borders rgba(255,255,255,0.08), primary violet #8b5cf6, secondary #a855f7
- Radius 20-28px, backdrop-blur(24px), inner highlight inset 0 1px 0 rgba(255,255,255,0.12)
- Typography: tight tracking on headings (-0.02em), 15-16px body, muted text at 60% opacity
Motion rules:
- Entrance: opacity 0 -> 1, y 24 -> 0, duration 0.7s, ease [0.16, 1, 0.3, 1]
- Stagger children by 0.06s, trigger with useInView({ once: true, margin: "-80px" })
- Hover: translateY(-6px) + soft violet glow, 250ms
- Animate only transform, opacity and filter. 60fps, will-change on animated layers
- Respect prefers-reduced-motion: disable loops, keep final states
Quality bar:
- Fully responsive (mobile-first, no horizontal scroll)
- Accessible: semantic HTML, focus-visible rings, contrast AA
- No layout shift, no dummy lorem ipsum, realistic copy
- Clean, reusable, production-ready components with typed props
Deliver the complete code, ready to paste, with no placeholder comments.Pourquoi ça fonctionne
Une mise en scène spatiale qui sort du grid classique : le regard tourne autour du centre et découvre chaque offre comme une planète.
Utilisation idéale
Produits créatifs, marques tech, landing pages différenciantes.
Avis
"Utilisé pour un client barber, résultat premium en 10 minutes. Le meilleur investissement."
Sarah M.
"Le prompt fonctionne parfaitement dans Lovable. La qualité du rendu est bluffante."
Julien K.



