proNew138 lines · framer-motion
Pricing Glow Cards
Three plans, picked like a radio group, each with its own glow. Three plan cards behaving like a radio group — click one to select it — each with a soft colour-matched glow that intensifies on hover and selection, plus a single 'Continue with <plan>' button below that reflects the pick.
- Use it for
- A pricing section where you want the plan choice itself to feel tactile before the visitor ever reaches a checkout button, instead of three independent 'Choose plan' buttons.
- Themes
- Light + dark
- License
- Commercial use
Live
Pricing
Pick a plan, see it glow
tsx
"use client";
import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";
function useReducedMotionSafe() {
const prefersReduced = useReducedMotion();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => setMounted(true), []);
return mounted ? !!prefersReduced : false;
}
export interface GlowPlan {
name: string;
price: string;
period?: string;
blurb: string;
features: string[];
accent?: "signal" | "info" | "lime" | "ok";
}
The rest is in Pro.
Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.
Get ProHow it behaves
- →The three cards form a role="radiogroup"; clicking a card selects it and deselects the others, exactly one is ever checked.
- →Each card has an ambient blurred glow in its own accent colour that sits faint at rest and grows on hover or when selected.
- →The button below the grid always reads 'Continue with <selected plan name>' and updates the moment a different card is picked.
- →Selection and hover glow transitions are instant (no distance-based tween) under prefers-reduced-motion, keeping the radio semantics identical.
Accessibility
- ✓Cards are real `role="radio"` buttons inside a labelled `role="radiogroup"`, with `aria-checked` reflecting the current pick.
- ✓The selection indicator is a visible checkmark circle, not colour alone.
- ✓Glow layers are `aria-hidden` and `pointer-events-none`.
- ✓Honours prefers-reduced-motion.