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.
Sticky Shrinking Navbar on Scroll
Build a navbar that starts tall and transparent at the top of the page, then shrinks in height and gains a solid blurred background as the user scrolls down, with a smooth CSS transition.
Expanding Icon Sidebar
Create a vertical icon-only sidebar that expands to show text labels on hover, with a smooth width transition and icons that stay aligned throughout the animation.
Smooth Accordion FAQ
Create an accordion list where clicking a question smoothly expands/collapses its answer using a CSS grid-template-rows trick (0fr to 1fr) for animatable height, with a rotating chevron icon.
Animated Breadcrumb Trail
Create a breadcrumb navigation where each new segment fades and slides in from the right as the user navigates deeper, with a subtle chevron separator between items.
Sticky Bottom CTA Bar
Create a bottom-fixed call-to-action bar that slides up into view once the user scrolls past a certain point on the page, with a dismiss (×) button that hides it for the session.
Animated Hamburger to X Icon
Build a hamburger menu icon made of 3 bars that morphs smoothly into an X shape when clicked, using CSS transforms and transitions on each bar (no icon library).
Scroll-to-Top Fade Button
Create a circular scroll-to-top button fixed at the bottom-right that fades and slides in only after the user scrolls down 300px, smoothly scrolling the page back to top on click.
Sticky Table of Contents Sidebar
Build a sticky sidebar table-of-contents where the currently-in-view section heading is automatically highlighted as the user scrolls, using Intersection Observer to track active sections.
Currency Switcher Dropdown
Build a small currency-selector dropdown showing a flag icon and currency code, with a searchable list of currencies that appears below the button on click.
Vertical Tab Sidebar
Create a vertical tab list (like settings navigation) where the active tab has a colored left border indicator and slightly different background, smoothly transitioning when switching tabs.
Full-Width Mega Menu Dropdown
Build a navbar item that opens a full-width mega-menu dropdown panel below it containing multiple columns of links and a small promotional image or card on the right.
Language Switcher Flag Dropdown
Create a language selector button showing a flag and language code that opens a dropdown list of languages (each with its own flag), closing when a language is selected or clicked outside.
Command Palette (Cmd+K)
Build a command-palette overlay that opens with Cmd+K / Ctrl+K, showing a search input at top and a filtered list of actions/pages below that can be navigated with arrow keys and Enter.
Sticky Filter/Sort Bar
Build a filter and sort control bar that sticks to the top of a product/content list as the user scrolls past it, showing active filter count as a small badge on the Filters button.