Motion Items

A family of five animated list-row components (hover lift, slide-in, fade-in, spring pop, and hover-reveal actions) for settings rows, menus, and lists, with built-in reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Motion Items to your project and fits it to your theme.

import HoverItem, {
  SlideItem,
  FadeItem,
  PopItem,
  RevealItem,
} from "@/components/ui/item-motion";

export default function ItemMotionDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3 p-6">
      <HoverItem />
      <SlideItem />
      <FadeItem />
      <PopItem />
      <RevealItem />
    </div>
  );
}