AI Prompt Library
Ready-to-use prompts for HTML, React, 3D scroll animations, and more. Every thumbnail below is a live render of the exact code behind it — copy the prompt into any AI to get that same result.
Animated Counter Component
Write a React component using useState and useEffect that animates a number counting up from 0 to a target value over 1.5 seconds when it scrolls into view.
Dark Mode Toggle Hook
Create a custom React hook `useDarkMode()` that toggles a data-theme attribute on <html>, persists the choice to localStorage, and respects the user's system preference on first load.
Animated Gradient Text Reveal
Write a React component that reveals a heading word-by-word with a fade-and-slide-up animation on scroll into view, using Framer Motion, with an animated gradient color sweep across the text.
Framer Motion Staggered Card Reveal
Using React and Framer Motion, animate a grid of cards so each one fades in and slides up with a staggered delay (0.1s between each) when the grid scrolls into view, using whileInView and a parent variants object with staggerChildren.
Framer Motion Layout Shared-Element Tab Indicator
Build a React tab bar where a highlighted pill background smoothly slides (using Framer Motion's layoutId shared layout animation) to whichever tab is currently active, instead of fading in a new element each time.