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 Circular Progress Ring
Create an SVG circular progress ring that animates from 0 to a target percentage using stroke-dashoffset, with the percentage number counting up in sync in the center.
Top Scroll Progress Bar
Add a thin gradient bar fixed to the very top of the page that fills from left to right proportionally to how far the user has scrolled down the document.
Sprint Progress Bar
Build a segmented progress bar for a project sprint showing completed, in-progress, and remaining tasks as differently colored proportional segments in a single bar, with a legend below.
XP Bar with Level-Up Flash
Build an experience-points progress bar that fills smoothly, and when it reaches 100%, flashes/glows and resets to 0 while a 'Level Up!' badge briefly pops up above it.
Course Progress Ring
Create a circular progress ring showing percentage of a course completed, with the topic title in the center and a small 'Continue' button below it.
Workout Ring Trio (Activity Rings)
Build three concentric circular progress rings (like Apple Watch activity rings) in different colors representing move/exercise/stand goals, each animating its fill on load.