Day 4/5 - Animated Toggles by Govind Ramachandran

Code:

import { useState } from "react";

import { motion } from "framer-motion";

export default function PricingToggle() {

const [isYearly, setIsYearly] = useState(false);

return (

<div className="flex items-center justify-center min-h-screen bg-neutral-900 text-white">

<div className="bg-neutral-800 px-6 py-4 rounded-xl shadow-lg text-center">

<h2 className="text-xl font-semibold mb-4">Choose Your Plan</h2>

<div

className="relative w-48 h-12 bg-neutral-700 rounded-full flex items-center cursor-pointer"

onClick={() => setIsYearly(!isYearly)}

>

<motion.div

className="absolute w-24 h-10 bg-white rounded-full z-10 shadow-md"

layout

transition={{

type: "spring",

stiffness: 300,

damping: 25,

}}

style={{

left: isYearly ? "calc(100% - 3rem)" : "0.5rem",

top: "0.5rem",

}}

/>

<div className="flex w-full justify-between px-4 text-sm font-medium z-20">

<span

className={`transition-colors ${

!isYearly ? "text-black" : "text-white/50"

}`}

>

Monthly

</span>

<span

className={`transition-colors ${

isYearly ? "text-black" : "text-white/50"

}`}

>

Yearly

</span>

</div>

</div>

<div className="mt-6 text-lg font-bold">

{isYearly ? "$99/year" : "$9.99/month"}

</div>

</div>

</div>

);

}

✨ Features:

• Springy slider for delightful transition

• Light-to-dark text shift to show selection

• Responsive pricing that updates on toggle

• Dark mode chic with glowing hover effects (optional add-on)

Want to upgrade it with:

• 💥 3D flip animation?

• 💡 Tooltip breakdowns?

• 🔒 Locking certain tiers for premium users?