AI Blocks › Build websites and web apps
Page transition animator
Describe the motion you want. Get smooth React page and element transitions that respect reduced-motion settings.
Page transition animator is a free AI skill for the job "Build websites and web apps". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
Smooth movement between screens in your React or Next.js app, such as a card that grows into a detail page, using the browser's built-in transition tool instead of a heavy library. It works through five patterns in order: shared elements that carry across pages, loading reveals, lists that rearrange, items that appear and disappear, and full route changes. Each animation has to say something, like going deeper or new data arrived, or it is left out. Slides are saved for list to detail moves, and quiet background refreshes get none. Reduced-motion settings are honoured. You need a React project.
You give it
- Your React or Next.js code
- Which screens or lists should animate
- The feel you want, such as subtle or lively (optional)
You get
- Working transition code
- Matching animation styles for each navigation type
- Reduced-motion handling
- Notes on which moments were left still
Use it when
- Your app changes screens with an abrupt jump.
- You want a thumbnail to grow into its full page.
- You are adding animation but fear it will annoy users.
- You must respect users who set reduced motion.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can edit your project files.