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.
Floating Label Input
Build a text input where the placeholder label floats up and shrinks above the field when focused or filled, using the CSS :focus and :placeholder-shown pseudo-classes (no JS required).
Animated Success Checkmark
After a form submits, show a circular checkmark icon that draws itself using SVG stroke-dasharray animation, replacing the submit button with a success state.
Password Strength Meter
Build a password input where a colored strength bar (red → amber → green) and label update live as the user types, based on length and character variety checks.
Tag Input with Chips
Build a text input where pressing Enter converts the typed text into a removable 'chip' tag displayed inline, supporting backspace to delete the last chip when the input is empty.
Drag-and-Drop File Upload Zone
Create a dashed-border dropzone that highlights with a colored glow when a file is dragged over it, and shows a file-name preview once dropped or selected via click.
Segmented Control Switch
Create a segmented control (like iOS) with 3 options where a sliding highlighted background smoothly animates to whichever segment is selected, using a single moving pill element positioned via transform.
Table Reservation Form
Create a reservation form with a party-size stepper, a date picker, and time-slot chip selector, culminating in a 'Confirm Reservation' button.
OTP Verification Input Boxes
Create a row of 6 individual single-digit input boxes for an OTP code, where typing a digit automatically focuses the next box, and backspace moves focus back to the previous one.
Phone Input with Country Flag
Build a phone-number input with a country-code dropdown (flag + dial code) attached to the left side of the field, filtering the dropdown list as the user types a country name.
Signature Pad Canvas
Create a canvas-based signature pad where the user can draw their signature with mouse or touch, plus a 'Clear' button to reset the canvas.
Multi-Select Dropdown with Chips
Build a dropdown that lets users select multiple options, rendering each selection as a removable chip inside the input field itself rather than a plain text value.
Date Range Picker
Create a two-month calendar view for selecting a start and end date range, highlighting all days between the two selected dates with a connected background band.
Address Autocomplete Field
Build a text input that shows a dropdown list of matching address suggestions as the user types, highlighting the matched substring in each suggestion.
Star Rating Review Form
Create a review submission form combining a 5-star rating selector with a textarea for written feedback and a submit button that disables until a star rating is chosen.
Multiple Choice Survey Question
Build a survey question card with radio-style answer options that highlight with a colored border and checkmark when selected, and a progress indicator showing 'Question 3 of 8'.
Likert Scale Rating Row
Create a Likert-scale survey row (Strongly Disagree to Strongly Agree) as a horizontal row of selectable circles with labels below the end points only.
Slider-Based Satisfaction Rating
Build a satisfaction survey using a horizontal slider with emoji faces at each end (frowning to smiling) that changes a background color gradient behind the track based on position.
Inline Newsletter Signup Bar
Build an inline newsletter signup bar embedded within page content (not a popup) with an email input and subscribe button side-by-side, showing a success checkmark message after submission.