Animated To-Do List

This React component implements an interactive to-do list with smooth animations for adding and removing items. It leverages Framer Motion for its animation capabilities, creating a visually engaging user experience. The component manages a list of to-do items, each with a description, completion status, and estimated time. Users can check off tasks, delete them, and add new ones through a form. Adding a new task smoothly animates the form's appearance, while removing a task triggers a custom exit animation that fades the item and moves it offscreen, providing visual feedback to the user. The application uses functional components, hooks like useState and useEffect for state management and side effects, and the AnimatePresence component from Framer Motion to manage the appearance and disappearance of list items. Each to-do item is a motion component, allowing for individual animations. The form uses controlled components to manage input values and prevent unexpected behavior. This component is ideal for applications requiring a user-friendly and visually appealing to-do list interface. Example scenarios include personal task management, project planning, or simple to-do list applications. The use of Framer Motion enhances user engagement by providing smooth, visually appealing transitions between states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated To-Do List to your project and fits it to your theme.

import { VanishList } from "@/components/ui/animated-to-do-list";

export default function DemoOne() {
  return <VanishList />;
}