Day 3/5 - Animated Checkboxes by Govind Ramachandran

Let’s create Animated Checkboxes that feel satisfying, tactile, and full of personality—something that makes checking off tasks actually fun. Inspired by Rauno Frielberg’s delightful microinteractions, we’ll include:

• Smooth checkmark animation

• Bouncy scale effect

• Color transitions for visual feedback

• Optional confetti burst for extra dopamine 🎉

import { useState } from "react";

import { motion, AnimatePresence } from "framer-motion";

export default function AnimatedCheckbox() {

const [checked, setChecked] = useState(false);

return (

<label className="flex items-center gap-3 cursor-pointer select-none">

<div

className="relative w-6 h-6 border-2 rounded-lg border-gray-400 flex items-center justify-center"

onClick={() => setChecked(!checked)}

>

<motion.div

initial={{ scale: 0 }}

animate={{ scale: checked ? 1 : 0 }}

transition={{ type: "spring", stiffness: 400, damping: 20 }}

className="w-full h-full rounded-md bg-green-500 absolute top-0 left-0 z-0"

/>

<AnimatePresence>

{checked && (

<motion.svg

xmlns="http: // www . w3 org/2000/svg"

key="check"

viewBox="0 0 24 24"

className="w-4 h-4 z-10 text-white"

initial={{ pathLength: 0 }}

animate={{ pathLength: 1 }}

exit={{ pathLength: 0 }}

transition={{ duration: 0.3 }}

fill="none"

stroke="currentColor"

strokeWidth="3"

>

<motion.path d="M5 13l4 4L19 7" />

</motion.svg>

)}

</AnimatePresence>

</div>

<span className="text-white">Complete Task</span>

</label>

);

}