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.
Bento Grid Dashboard
Build a modern bento-box style dashboard layout using CSS Grid with mixed-size cards (stats, chart placeholder, list), rounded corners, subtle borders, and soft glow accents on hover.
3D Tilt Card on Mouse Move
Create a card that tilts in 3D following the mouse cursor position (rotateX/rotateY based on cursor offset), with a subtle glare/shine overlay and smooth spring-back on mouse leave.
Neon Cyberpunk Button
Design a glowing neon-outline button with a flickering pulse animation, cyan-to-violet color shift, and a subtle scanline overlay effect on hover.
Stacked Avatar Group
Create a group of overlapping circular avatars with a slight border, and a final '+N' circle showing how many additional people aren't displayed.
Vertical Animated Timeline
Build a vertical timeline with dots connected by a line, where each entry fades and slides in from the side as it scrolls into view using Intersection Observer.
Before/After Image Comparison Slider
Build a draggable vertical divider that reveals a 'before' image on one side and an 'after' image on the other as the user drags left/right across the container.
Interactive Star Rating
Create a 5-star rating widget where stars fill in with a golden color on hover (previewing the rating) and lock in that value on click, with a smooth color transition.
Chat Message Bubbles
Build a chat conversation UI with rounded message bubbles that align right (sender, gradient background) and left (receiver, muted background), including small tails and a typing-indicator animation with 3 bouncing dots.
Copy-to-Clipboard Code Block
Create a syntax-highlighted code block with a copy icon button in the top-right corner that changes to a checkmark for 2 seconds after copying the code to the clipboard.
Notification Bell Dropdown
Build a bell icon with an unread-count badge that opens a dropdown panel of recent notifications when clicked, closing when clicking outside the panel.
Step Progress Wizard
Build a multi-step form progress indicator with numbered circles connected by a line, where completed steps turn solid with a checkmark and the current step pulses.
Color Palette Swatch Picker
Build a row of circular color swatches where clicking one applies a check-mark ring around it and updates a preview box's background to the selected color, with a smooth scale animation on selection.
Drag-to-Reorder List
Create a vertical list of items that can be reordered by dragging (using the HTML5 Drag and Drop API), with a visual placeholder gap showing where the item will drop.
Team Member Card Grid
Build a grid of team-member cards, each with a circular avatar, name, role, and social icon row that fades in on hover with a slight upward slide, over a subtle card lift effect.
Blog Post Card with Reading Time
Design a blog post preview card with a gradient thumbnail, category tag, title, excerpt, and a small footer row showing author avatar, name, and estimated reading time.
Feature Comparison Table
Build a pricing-style feature comparison table with 3 plan columns and rows of checkmarks/crosses, highlighting the recommended plan's column with a colored border and 'Popular' badge.
Video Play Button Overlay
Create a video thumbnail with a centered circular play button that has a pulsing ring animation, scaling up slightly and darkening the thumbnail on hover.
Review Rating Distribution Bars
Create a review summary showing an average star rating next to horizontal bars for 5-star through 1-star counts, each bar animating its width in from 0 on page load.
Empty State Illustration Card
Design an empty-state placeholder (for when a list has no items) with a simple centered icon inside a soft glowing circle, a friendly headline, and a short call-to-action button — matching a 'No intel yet, Agent' spy-themed tone.
Audio Player with Waveform
Build an audio player UI with a play/pause button, a horizontal waveform made of animated bars that pulse in height while playing, and a scrubber progress line over the waveform.
Podcast Episode Card
Create a podcast episode list item with a square cover thumbnail, episode title, show name, duration, and a circular play button that appears on hover.
Sticky Mini Player Bar
Build a slim audio/video mini-player bar fixed to the bottom of the screen showing the current track, a mini progress bar, and play/next/prev controls, expandable to a full player on click.
Volume Slider with Icon Morph
Create a volume control where the speaker icon morphs between muted, low, and full-volume states as a slider is dragged, using SVG path transitions or icon swapping.
Mini Calendar Date Picker
Build a compact month-view calendar date picker with prev/next month arrows, today highlighted with a ring, and the selected date filled with a solid gradient circle.
Event Timeline Card
Create a day-schedule view where events are shown as colored blocks positioned and sized according to their start time and duration along a vertical hour timeline.
Booking Time Slot Grid
Build a grid of clickable time-slot buttons (e.g. 9:00, 9:30, 10:00...) for booking an appointment, where already-booked slots are disabled/greyed and the selected slot is highlighted.
Availability Heatmap
Create a GitHub-style contribution heatmap grid of small colored squares representing daily activity intensity over the past year, with a tooltip showing the exact count on hover.
Kanban Board Columns
Build a 3-column Kanban board (To Do / In Progress / Done) with draggable cards between columns, a card count badge in each column header, and an 'Add card' link at the bottom of each column.
Draggable Task Card
Create a task card for a Kanban board with a title, small colored label tags, an assignee avatar, and a due-date pill, that lifts with a shadow while being dragged.
Todo List with Strike-through
Build a to-do list where checking an item's checkbox animates a strike-through line across the text and fades its opacity, with a smooth transition rather than an instant change.
Habit Streak Grid
Create a weekly habit-tracker grid of small squares (one per day) that fill in with a checkmark and gradient color when marked complete, showing a current streak count above it.
Social Post Card with Reactions
Create a social media post card with avatar, username, timestamp, post text, and a reaction bar (like, comment, share icons) where the like count animates up when clicked.
Threaded Comment List
Build a nested comment thread UI where replies are indented under their parent comment with a connecting vertical line, including a 'Reply' link that reveals an inline reply input.
Bottom Share Sheet
Create a mobile-style share sheet that slides up from the bottom of the screen with a grid of app icons (copy link, twitter, whatsapp, email), dismissible by tapping the backdrop or swiping down.
Leaderboard Rank List
Build a leaderboard list with rank numbers, avatar, name, and score, where the top 3 rows get special gold/silver/bronze accent styling and slightly larger avatars.
Health/Mana Bar UI
Create an RPG-style health bar with a red gradient fill that smoothly shrinks when damage is taken, briefly flashing white, plus a thin secondary bar showing the previous value catching down slowly.
Crypto Price Ticker
Build a horizontal scrolling ticker of crypto/stock prices with green/red color coding and small up/down arrows for percentage change, auto-scrolling continuously like a stock exchange display.
Stock Chart Card
Create a card showing a stock symbol, current price, percentage change badge, and a simple animated SVG line chart of the past week's price movement filling in on load.
Transaction List Item
Build a bank/wallet transaction list row with a category icon in a colored circle, merchant name, date, and amount (green for income, red/default for expense) right-aligned.
Gradient Balance Card
Design a bank-card-style balance display with a gradient background, card-number-style masked digits, and a small chip icon, resembling a physical debit/credit card.
Lesson Completion Checklist
Build a vertical list of lesson titles each with a circular checkmark indicator that fills solid green when complete, connected by a vertical progress line that grows as lessons are finished.
Quiz Answer Feedback Flash
Create quiz answer buttons that flash green with a checkmark for the correct answer and red with an X for an incorrect selection immediately after the user picks one.
Certificate Preview Card
Design a certificate preview card with an ornate border, a ribbon/seal icon, recipient name, course title, and a 'Download PDF' button below it.
Flight Search Result Card
Build a flight listing card showing departure/arrival times and airport codes connected by a dashed line with a plane icon, plus duration, stops, and price on the right.
Destination Card with Overlay
Create a travel destination card with a full-bleed background image, a dark gradient overlay at the bottom for legibility, and the city name plus a small price tag in the corner.
Booking Confirmation Card
Build a booking-confirmed card with a checkmark icon animation, booking reference number, and a summary of the trip details in a clean receipt-like layout.
Trip Itinerary Timeline
Create a vertical itinerary timeline for a multi-day trip, grouping activities under each day's date header, connected by a dotted line with time-stamped icons.
Restaurant Menu Item Card
Build a menu item row with a small circular food photo, name, short description, price, and a '+' add button that briefly shows a checkmark after being tapped.
Order Status Tracker
Build a horizontal order-status tracker (Placed → Preparing → Out for Delivery → Delivered) with connected circles that fill in progressively and a moving delivery icon along the line.
Property Listing Card
Create a real-estate listing card with an image, price badge overlay, address, and a small icon row showing bed/bath/sqft counts along the bottom.
Price Range Dual Slider
Build a dual-handle range slider for filtering by minimum and maximum price, with a highlighted track between the two handles and live-updating value labels above each handle.
Map Pin Popup Card
Create a small popup card that appears above a map pin marker showing a property thumbnail, price, and address, with a little triangular pointer connecting it to the pin.
Step Counter Widget
Create a step-counter card with a large animated number counting up to the day's step total, a small footprint icon, and a thin progress bar showing progress toward a daily goal.
Water Intake Tracker
Build a water-intake tracker showing a glass/bottle icon that visually fills up from the bottom as the user taps '+1 cup', with a fraction label like '4/8 cups' updating live.
Terminal Prompt Typing Loop
Create a fake terminal window UI that types out a sequence of commands character-by-character with a blinking cursor, pausing between each simulated command.
Git Commit Graph
Build a simplified git-branch commit graph visualization with colored dots representing commits connected by curved SVG lines showing branch and merge points.
Side-by-Side Diff Viewer
Create a two-column code diff viewer with removed lines highlighted in red on the left and added lines highlighted in green on the right, with line numbers in a gutter.
JSON Response Tree Viewer
Build a collapsible JSON tree viewer where objects and arrays can be expanded/collapsed by clicking a chevron, with syntax coloring for keys, strings, numbers, and booleans.
Split Markdown Live Preview
Create a split-pane editor where typing Markdown in the left textarea instantly renders formatted HTML output in the right pane, updating on every keystroke.
Changelog Version Timeline
Build a changelog page listing version entries (v2.1.0, v2.0.0, ...) each with a date, colored tag (Added/Fixed/Changed), and a bulleted list of changes underneath.
Emoji Reaction Picker
Build a row of emoji reaction buttons that pop up on hovering a message, each emoji scaling up slightly on its own hover, with a running count shown once selected.
NPS Survey Slider
Build a 'How likely are you to recommend us?' survey with a 0-10 numbered button row, color-coded from red (low) to green (high), and a follow-up comment box that appears after selection.
Avatar Testimonial Carousel
Create a testimonial carousel where a large quote and customer avatar/name cross-fade between entries, with small avatar thumbnails below acting as navigation dots.
FAQ Live Search Filter
Build an FAQ page with a search input at the top that live-filters the list of questions below as the user types, highlighting the matching text within each question.
Roadmap Kanban Timeline
Create a product roadmap view with three columns (Now / Next / Later) containing feature cards, each card showing a short description and a small status tag.
Changelog Filter Tabs
Build changelog filter tabs (All / Features / Fixes / Improvements) above a list of entries, where selecting a tab animates a sliding underline and filters the visible entries.
Emoji Picker Grid
Create an emoji picker popover with category tabs at the top and a scrollable grid of emoji buttons below, each emoji scaling up slightly on hover.
@Mention Autocomplete Dropdown
Build a text input where typing '@' opens a small dropdown list of matching usernames below the cursor, inserting the selected mention as a styled inline chip when chosen.
Rich Text Editor Toolbar
Create a floating text-formatting toolbar (bold, italic, underline, link) that appears above selected text in an editable area, positioned dynamically based on the text selection.
Masonry Photo Grid
Build a Pinterest-style masonry photo grid where images of varying heights are arranged in balanced columns without gaps, using CSS columns or a JS packing algorithm.
Image Lightbox Zoom Viewer
Create a lightbox that opens a clicked thumbnail into a full-screen darkened overlay with the enlarged image centered, supporting next/prev arrows and closing on backdrop click or Escape.
PDF Viewer Toolbar
Build a PDF-viewer style toolbar with page-number input, zoom in/out buttons with a percentage display, and download/print icon buttons, styled as a slim dark header bar.
File Tree Explorer
Create a collapsible file/folder tree view (like a code editor sidebar) with folder icons that rotate a chevron when expanded, and file-type icons that vary by file extension.
Org Chart Tree Diagram
Build a simple organizational chart with a top-level box connected by lines down to several subordinate boxes, each showing a name and title, laid out with CSS Grid or Flexbox.
Weather Card with Animated Icon
Build a weather card showing city name, temperature, and a simple animated sun/cloud icon (sun rays rotating slowly or a cloud drifting), plus a 5-day mini forecast row at the bottom.
Rain Drop Background Effect
Create a subtle animated rain effect using thin falling line elements over a dark background, looping continuously at varying speeds and horizontal positions, for a weather-app hero.
Temperature Range Slider Display
Build a horizontal temperature scale bar showing today's low/high as a filled gradient segment on a full-range track, with min and max labels at each end of the filled portion.
Hourly Forecast Scroll Strip
Create a horizontally scrollable strip of hourly forecast cards, each showing time, a small weather icon, and temperature, with the current hour visually highlighted.
Now Playing Full-Screen Card
Build a full-screen 'Now Playing' music card with a large album art square, song title, artist, a scrubber progress bar, and play/pause/skip controls centered below.
Album Art Vinyl Spin
Create a circular album-art image that continuously rotates like a vinyl record while a track is playing, pausing the rotation smoothly when playback is paused.
Playlist Row with Hover Play
Build a playlist track row showing track number that swaps to a play icon on hover, title, artist, and duration, with the whole row highlighting on hover.
Genre Category Tile Grid
Create a grid of colorful gradient genre tiles (Pop, Rock, Jazz, Lo-fi) each with a slight rotated decorative icon in the corner, scaling up slightly on hover.
Equalizer Bars Animation
Build a small equalizer visualization of 4-5 vertical bars that animate up and down at random staggered heights continuously, indicating audio is currently playing.
Doctor Appointment Card
Build an appointment card showing doctor avatar, name, specialty tag, date/time, and a status badge (Confirmed/Pending), with a video-call icon button if it's a telehealth visit.
Medication Reminder List
Create a medication schedule list grouped by time of day (Morning/Afternoon/Evening), each item with a pill icon, name, dosage, and a checkbox to mark as taken.
Vital Signs Gauge Widget
Build a semi-circular gauge widget showing a heart-rate or blood-pressure value with a colored arc indicating normal/warning/critical zones and a needle or fill pointing to the current reading.
Symptom Checker Chat Flow
Create a step-by-step symptom-checker UI presented as chat bubbles asking one question at a time with tappable answer chips, advancing to the next question on selection.
Job Listing Card with Tags
Build a job listing card with company logo, job title, location, salary range, and small tag pills (Remote, Full-time), plus a bookmark icon in the top-right corner.
Application Status Stepper
Create a horizontal stepper showing a job application's progress (Applied → Screening → Interview → Offer), with completed steps filled and connected by a solid line, remaining steps dashed.
Resume Upload Drop Zone
Build a drag-and-drop file upload zone for a resume with a dashed border that highlights and changes color when a file is dragged over it, showing a file-icon preview once uploaded.
Skill Tag Match Percentage
Create a job-match card showing a circular percentage match score next to a list of skill tags, coloring matched skills green and missing ones grey.
Wallet Connect Button
Build a 'Connect Wallet' button that, when clicked, shows a brief loading spinner then swaps to display a truncated wallet address (e.g. 0x71C...9E3) with a small green connected-status dot.
NFT Gallery Card Hover
Create an NFT card with an image, a subtle animated gradient border, collection name, and floor-price label, with the border animation speeding up slightly on hover.
Token Swap Interface
Build a token-swap panel with two input fields (from/to token) separated by a circular swap-direction icon button that rotates 180° when clicked to flip the tokens.
Gas Fee Estimator Bar
Create a transaction gas-fee selector with three speed options (Slow/Average/Fast) as segmented buttons, each showing an estimated fee and time, with the selected option highlighted.
Live Crypto Price Chart Card
Build a coin price card with current price, 24h percentage change badge (green/red), and an animated SVG line chart that draws itself in on page load using a stroke-dashoffset animation.
AI Assistant Floating Bubble
Create a floating circular AI-assistant launcher button in the bottom-right corner with a soft pulsing glow ring, expanding into a chat panel when clicked.
Streaming Text Response Effect
Build a chat response area where AI-generated text appears character-by-character (streaming/typewriter effect) with a blinking cursor at the end until the message finishes.
Prompt Suggestion Chips
Create a row of suggested-prompt chip buttons above a chat input, wrapping to multiple lines on smaller widths, each filling the input field with its text when clicked.
AI Thinking Shimmer Skeleton
Build a chat-response placeholder made of a few shimmering skeleton lines (animated gradient sweep) shown while the AI is generating its answer, replaced by real text once ready.
Model Selector Dropdown
Create a model-selector dropdown (like choosing between GPT/Claude/Gemini) showing an icon, name, and short description per option, with a checkmark on the currently selected model.
Toggle Switch List (Settings)
Build a settings list of rows each with a label, short description, and an iOS-style toggle switch on the right that animates the knob sliding and background color change.
Theme Selector Swatches
Create a settings section for choosing an app theme, shown as small preview swatch cards (Light/Dark/System) with a selected-state ring border around the active choice.
Danger Zone Settings Section
Build a 'Danger Zone' settings card with a red-tinted border, warning icon, and a destructive action button (Delete Account) that opens a confirmation modal requiring the user to type the account name.
Two-Factor Auth Setup Flow
Create a 2FA setup panel showing a QR code placeholder, a manual setup key with a copy button, and a 6-digit verification code input to confirm the authenticator app link.
Profile Header with Cover Photo
Build a profile page header with a full-width cover-photo banner and a circular avatar overlapping the bottom edge, name and bio below, and an Edit Profile button aligned to the right.
Profile Completion Progress Bar
Create a 'Complete your profile' card with a circular percentage indicator and a checklist of remaining steps (Add photo, Verify email, Add bio), each with a checkmark once done.
Editable Avatar Upload Circle
Build a circular avatar image with a camera-icon overlay that appears on hover, opening a file picker and showing an upload-progress ring around the avatar while processing.
Tabbed Profile Sections
Create a profile page with tabs (Posts / About / Photos / Friends) where the active tab has an animated sliding underline indicator that moves smoothly between tab positions.
Video Player Custom Controls
Build a custom video-player control bar overlay with play/pause, a scrubber with buffered-range indicator, volume slider, and fullscreen button, fading out after a few seconds of inactivity.
Continue Watching Progress Card
Create a 'Continue Watching' thumbnail card with a thin progress bar along the bottom edge showing how much of the video has been watched, and a play icon overlay on hover.
Episode Thumbnail Scrub Preview
Build a video scrubber where hovering over a point on the timeline shows a small floating thumbnail preview image above the cursor position along with the timestamp.
Subtitle/Caption Toggle Bar
Create a video-settings popover for choosing subtitle language and playback speed, opened from a gear icon on the player controls, with radio-style selectable rows.
Live Stream 'LIVE' Badge Pulse
Build a small red 'LIVE' badge with a pulsing dot animation next to it, shown on a video thumbnail to indicate an ongoing live stream.
Blog Category Filter Pills
Build a horizontal row of blog-category filter pills where the active category has a solid gradient fill and others are outlined, filtering the post grid below on click.
Reading Progress Bar (Top)
Create a thin progress bar fixed to the very top of the viewport that fills left-to-right proportional to how far the user has scrolled through a blog article.
Author Bio Card Footer
Build an author bio card shown at the end of a blog post with avatar, name, short bio, and small social icon links, inside a subtly bordered rounded box.
Related Posts Card Row
Create a 'Related Articles' section with a horizontal row of compact post cards (thumbnail, title, date) shown at the bottom of a blog post.
Upvote/Downvote Arrow Widget
Build a vertical up/down arrow voting widget with a score number in between, where the arrow highlights its accent color when active and the score animates when it changes.
Forum Thread List Row
Create a forum thread list row with a category tag, thread title, reply count badge, last-activity avatar, and relative timestamp, with unread threads shown in bold.
Nested Reply Collapse Toggle
Build a collapsible comment thread where clicking a '[-]' toggle collapses all nested replies under a comment into a single line showing just the reply count.
Poll Results Bar Chart
Build a forum poll widget showing each option as a horizontal bar that fills to its percentage width with an animated transition, plus the vote count and percentage label.
Seller Profile Rating Card
Build a marketplace seller card with avatar, shop name, a 5-star rating display with a review count, and a 'Verified Seller' badge shown conditionally.
Offer/Counter-Offer Chat Card
Create an inline price-offer card inside a marketplace chat thread, showing the offered amount with Accept/Decline/Counter buttons directly in the message bubble.
Category Icon Grid Menu
Build a marketplace homepage grid of category icons in soft colored circular backgrounds with a label underneath each, scaling up slightly on hover/tap.
Listing Image Carousel with Dots
Create a swipeable image carousel for a marketplace listing with left/right arrow overlays on desktop and dot indicators at the bottom showing the current image position.
Plan Comparison Toggle (Monthly/Yearly)
Build a billing-cycle toggle (Monthly/Yearly) above pricing plan cards that animates a sliding pill background and updates displayed prices with a 'Save 20%' badge on the Yearly option.
Invoice List Row with Status
Create a billing history list row with invoice date, amount, a colored status pill (Paid/Failed/Pending), and a download-PDF icon button on the right.
Credit Card Input with Brand Icon
Build a card-number input field that detects the card brand as digits are typed (Visa/Mastercard/Amex) and displays the matching brand icon inside the input on the right side.
Usage Meter Bar with Overage Warning
Create a usage-limit bar (e.g. API calls used) that fills green under 80%, turns amber near the limit, and red with a warning icon once over the plan's included quota.
Cancel Subscription Retention Modal
Build a cancellation-flow modal that, before confirming, offers a retention incentive (e.g. discount or pause option) as alternative buttons alongside the final 'Cancel Anyway' link.
Multi-Line Comparison Chart Card
Build an analytics card with two overlaid SVG line charts (this period vs last period) in different colors, plus a small legend and a percentage-change summary above the chart.
Funnel Conversion Steps
Create a funnel visualization made of progressively narrower trapezoid/bar segments representing each step of a conversion flow, with a percentage label on each segment.
Donut Chart with Center Label
Build an SVG donut chart with multiple colored segments and a total value shown as text centered inside the ring, animating the segments filling in on load.
Real-time Active Users Counter
Build a live 'active users right now' widget with a pulsing green dot and a number that occasionally ticks up/down with a smooth count animation to simulate real-time updates.
Cohort Retention Heatmap Table
Create a retention cohort table where each cell's background color intensity represents the retention percentage for that week/cohort, darker/brighter for higher retention.
Smart Thermostat Dial
Build a circular draggable thermostat dial showing the current temperature setting in the center, with a colored arc around the edge indicating heating (orange) or cooling (blue) mode.
Room Device Toggle Grid
Create a grid of room/device cards (Living Room lights, Bedroom AC) each with an icon and a toggle switch, the card's background subtly glowing when the device is on.
Smart Lock Status Card
Build a door-lock status card showing a large lock/unlock icon that animates a rotation or shape change on toggle, plus 'Last locked at 9:42 PM' timestamp text below.
Energy Usage Bar Chart
Create a daily energy-consumption bar chart with bars colored by usage intensity, a total kWh summary above, and a comparison line showing the previous day's average.
Donation Goal Progress Bar
Build a fundraising progress bar showing amount raised vs goal, with a small marker icon riding along the top of the filled portion and a percentage label.
Donation Amount Chip Selector
Create a row of preset donation-amount chips ($10/$25/$50/$100) plus a 'Custom' option that reveals a text input, with the selected chip highlighted with a gradient fill.
Impact Stats Counter Row
Build a row of animated counting-up statistics (e.g. 'Meals Provided: 12,400') that count from 0 to their final value when the section scrolls into view.
Live Match Score Card
Build a live sports scoreboard card with two team logos/names, current score, match time/period, and a pulsing 'LIVE' indicator.
League Standings Table
Create a league standings table with rank, team name/logo, played/won/lost/points columns, highlighting promotion and relegation zones with colored left-border accents.
Player Stat Radar Chart
Build an SVG radar/spider chart comparing a player's stats (Speed, Passing, Shooting, Defense, Stamina) across five axes with a filled polygon shape.
Match Timeline Events Strip
Create a horizontal match-timeline strip with icons (goal, card, substitution) placed at their corresponding minute along the bar, with a tooltip on hover showing event details.
Car Rental Comparison Card
Build a car-rental listing card with a vehicle image, model name, seat/transmission icons row, price per day, and a 'Select' button.
EV Battery Charge Indicator
Create a battery-level indicator styled like an EV dashboard gauge, with a fill color that shifts from red to yellow to green based on charge percentage, plus an estimated range label.
Trip Route Map Preview Card
Build a ride-summary card with a simplified route line between two pin markers on a stylized map background, showing distance, duration, and fare below.
Sidebar Docs Navigation Tree
Build a documentation sidebar with collapsible nested sections (chevron-toggle) and the currently active page highlighted with a colored left border and background tint.
Contract Clause Accordion
Create an accordion for a terms-of-service page where each clause section expands/collapses with a smooth height animation and a rotating chevron icon.
E-Signature Confirmation Card
Build a document-signing confirmation card showing a stylized signature script rendering in, a green checkmark, and 'Signed on [date]' text below.
Event Countdown Timer
Create a countdown timer showing days/hours/minutes/seconds until an event date, each unit in its own flip-card-style box with numbers that update live.
RSVP Response Toggle Buttons
Build an RSVP widget with three toggle buttons (Attending / Maybe / Can't Make It) where the selected option fills with a color matching its meaning (green/amber/grey).
Guest Table Seating Chart
Create a seating-chart layout with circular table icons arranged around a floor plan, each table showing a guest-count badge and highlighting on hover with the assigned names in a tooltip.
Photo Gallery Masonry with Lightbox
Build an event photo gallery in a masonry grid layout that opens a full-screen lightbox with next/prev navigation when any photo thumbnail is clicked.
Podcast Episode List with Chapters
Build a podcast episode detail view listing chapter markers as clickable timestamps that jump the audio player to that point when clicked.
Show Subscribe Platform Icons
Create a row of 'Listen on' platform icon buttons (Spotify, Apple Podcasts, Google Podcasts) each with its own brand color on hover.
Playback Speed Selector Pill
Build a small pill button showing the current playback speed (e.g. '1.5x') that cycles through preset speed options (1x, 1.25x, 1.5x, 2x) each time it's tapped.
Survey Completion Thank You Screen
Create a survey-completion screen with a checkmark animation, a 'Thanks for your feedback!' message, and a small summary of how the responses will be used.
Before/After Image Slider
Build a draggable before/after image comparison slider with a vertical divider handle that reveals more of one image and less of the other as it's dragged.
Portfolio Filter Tag Grid
Create a photography portfolio grid with filter tags above (Portraits, Landscape, Events) that fade out non-matching images and reflow the grid when a filter is selected.
EXIF Metadata Overlay Card
Build a photo detail overlay showing camera settings (aperture, shutter speed, ISO, focal length) as small icon-labeled stats along the bottom of the image on hover.
Email Preference Center Checklist
Create an email-preferences page with a checklist of newsletter categories the user can opt in/out of individually, each with a toggle and short description.
Unsubscribe Confirmation Card
Build an unsubscribe-confirmation page with a simple card showing 'You've been unsubscribed', an option to resubscribe, and a short survey asking why they left.
Map Marker Pulse Pin
Build a map location pin with a continuous pulsing ring animation expanding outward from its base, indicating a live/current location on a map.
Nearby Places Bottom Sheet
Create a bottom-sheet panel over a map view listing nearby places with distance and rating, draggable to expand from a peek height to full-screen.
Route Direction Steps List
Build a turn-by-turn direction list with a small directional arrow icon per step, distance, and street name, highlighting the current step as the user progresses.
Location Search Autocomplete Dropdown
Create a location search input showing a dropdown of matching place suggestions with a pin icon and secondary address text, updating live as the user types.
Live Location Sharing Avatar Trail
Build a map view showing a moving avatar marker that leaves a fading trail line behind it representing recent movement history, updating position smoothly.
Grid/List View Toggle for Files
Build a file browser with a toggle button switching between grid view (thumbnail tiles) and list view (rows with metadata columns), animating the layout transition.
File Upload Progress List
Create a file-upload panel showing multiple files each with its own progress bar, a cancel icon per file, and a checkmark replacing the bar once upload completes.
Folder Breadcrumb Navigation
Build a folder-path breadcrumb bar with clickable segments separated by chevrons, truncating middle segments into a '...' dropdown when the path is too long.
File Type Icon Set Grid
Create a file grid where each item shows a distinct colored icon based on file extension (PDF, DOCX, image, zip), with the filename truncated below the icon.
Inbox List with Swipe Actions
Build an email inbox list row that reveals archive/delete action buttons when swiped left, snapping back if not fully swiped, with unread emails shown bold with a blue dot.
Compose Email Floating Window
Create a minimizable email-compose window fixed to the bottom-right corner with To/Subject/Body fields, that can be minimized to just a title bar and expanded again.
Email Label/Folder Sidebar
Build an email sidebar listing folders (Inbox, Sent, Drafts) and colored labels, each with an unread-count badge, highlighting the currently active folder.
Attachment Chip Preview Row
Create a row of attachment chips below an email compose body, each showing a file-type icon, filename, size, and a small 'x' remove button.
Snooze Email Time Picker
Build a 'Snooze until' popover with preset options (Later Today, Tomorrow, Next Week) plus a custom date/time picker, triggered from a clock icon on an email row.
Recipe Card with Cook Time Badge
Build a recipe card with a food photo, title, a small badge row showing prep time, cook time, and servings icons, and a bookmark button in the corner.
Ingredient Checklist with Servings Scaler
Create an ingredient checklist where each item has a checkbox, and a servings stepper above that recalculates all ingredient quantities proportionally when changed.
Step-by-Step Cooking Mode
Build a full-screen 'cooking mode' view showing one recipe step at a time in large text with next/prev arrows and a built-in timer button for steps that need one.
Nutrition Facts Bar Breakdown
Create a nutrition breakdown widget showing protein/carbs/fat as a segmented horizontal bar with percentages, plus total calories displayed above.
Pet Profile Card
Build a pet profile card with a circular photo, name, breed, age, and small icon stats row (weight, last vet visit), styled playfully with rounded shapes.
Vaccination Schedule Timeline
Create a vertical vaccination timeline for a pet showing past (checked) and upcoming (outlined) vaccine entries connected by a line, with dates labeled.
Walk Tracker Map Stat Card
Build a dog-walk summary card showing distance walked, duration, and a simplified route-line map preview, with a paw-print icon accent.
Baby Feeding/Sleep Log Timeline
Create a daily log timeline for a baby-tracking app showing feeding, sleep, and diaper-change entries as colored blocks along a 24-hour vertical timeline.
Growth Percentile Chart Card
Build a baby growth-chart card with an SVG line plotting height/weight over time against percentile curve bands shown as shaded regions.
Milestone Checklist Cards
Create a milestone tracker with cards for each developmental milestone (First Smile, First Steps) that flip or reveal a date-achieved stamp once marked complete.
Flashcard Flip Animation
Build a vocabulary flashcard that flips with a 3D rotation to reveal the translation on the back when clicked or swiped, using CSS perspective and backface-visibility.
Lesson Path Progress Map
Create a winding lesson-path map (like a game board) with circular nodes for each lesson connected by a curved dashed line, current lesson highlighted and glowing.
XP Streak Flame Counter
Build a streak counter showing a flame icon next to a day count, with the flame glowing brighter/larger as the streak number increases, resetting with a dimmed grey flame if broken.
Pronunciation Waveform Comparison
Create a side-by-side waveform comparison showing the target pronunciation waveform above and the user's recorded attempt waveform below, for a speaking-practice exercise.
DAW Track Mixer Channel Strip
Build a mixer channel strip UI with a vertical volume fader, pan knob, mute/solo buttons, and a small level meter bar beside the fader.
Step Sequencer Grid
Create a drum-machine step-sequencer grid of toggleable beat cells across multiple instrument rows, with the currently playing step column highlighted as it advances.
Knob Rotary Control
Build a rotary knob control (like a synth parameter) that rotates visually as the user drags vertically, with a small value readout appearing above it while dragging.
Waveform Editor Selection Region
Create an audio waveform editor where the user can drag to select a region, highlighting the selected portion with a semi-transparent overlay and draggable edge handles.
AR View Corner Bracket Overlay
Build an AR-scanning overlay UI with animated corner brackets on each corner of a square viewfinder area, plus a scanning line that moves up and down within it.
VR Menu Floating Panel
Create a floating glassmorphic VR-style menu panel with large touch-friendly icon buttons arranged in an arc, suitable for a spatial-computing interface mockup.
3D Object Rotation Gizmo
Build a 3D-viewer rotation control widget (small cube or sphere gizmo in the corner) that visually indicates the current camera orientation and can be clicked to snap to standard views.
Accessibility Settings Panel
Build an accessibility settings panel with toggles for high-contrast mode, larger text size, reduced motion, and a live preview box showing the effect of each setting.
Focus-Visible Ring Indicator
Create a set of interactive buttons that show a clear, high-contrast focus ring only when navigated via keyboard (Tab key), not on mouse click, using :focus-visible.
Text Size Adjuster Stepper
Build a floating text-size adjustment widget with A-/A+ buttons that scale the page's font size up/down within defined limits, showing the current size level.
Planet Orbit Info Card
Build a card for a planet showing a circular planet icon, name, and key stats (distance from sun, moons, day length) with a subtle rotating ring animation around the icon.
Rocket Launch Countdown
Create a mission-launch countdown display with a large T-minus timer, mission name, and a status label (Go/Hold) that changes color based on launch status.
Insurance Quote Slider Calculator
Build a quote calculator with sliders for coverage amount and deductible that live-update an estimated monthly premium display as they're adjusted.
Claim Status Tracker
Create a claim-status stepper (Submitted → Under Review → Approved → Paid) with icons per stage and an estimated completion date shown beneath the active stage.
Policy Document Card List
Build a list of policy document cards each showing policy type icon, policy number, expiry date with a colored badge if expiring soon, and a download button.
Stock Level Indicator Bar
Create an inventory row with a small horizontal stock-level bar colored green/amber/red based on remaining quantity relative to a reorder threshold.
Barcode Scan Input Field
Build a barcode-entry input styled with a scanner-line icon that, on receiving input, briefly flashes green and auto-submits, simulating a barcode scanner workflow.
Warehouse Bin Location Grid
Create a grid-map of warehouse storage bins where each cell is colored by occupancy level and shows a bin code label, with a hover tooltip showing item details.
Purchase Order Status Badge Row
Build a purchase-order list where each row has a colored status badge (Draft/Sent/Received/Cancelled), supplier name, and total amount, sortable by column headers.
POS Numeric Keypad
Create a point-of-sale numeric keypad with large touch-friendly digit buttons and a running total display above, plus clear and enter action buttons.
Cart Line Item with Quantity Stepper
Build a POS cart line item row with product name, a quantity stepper (-/+), unit price, and line total that updates instantly as quantity changes.
Payment Method Tile Selector
Create a grid of payment-method tiles (Cash, Card, UPI, Wallet) each with an icon, highlighting the selected tile with a colored border and checkmark.
Receipt Print Preview Card
Build a receipt preview styled like a printed paper strip with a dashed/torn edge effect at the bottom, listing items, tax, and total in a monospace font.
Room Type Comparison Card
Build a hotel room-type card with an image, amenities icon row (WiFi, breakfast, AC), price per night, and a 'Select Room' button.
Guest Count Stepper Popover
Create a guests/rooms selector popover with separate steppers for adults, children, and rooms, showing a summary label on the trigger button (e.g. '2 Guests, 1 Room').
Amenity Icon Filter Row
Build a horizontal row of amenity filter toggle icons (Pool, Gym, Parking, Pet-friendly) that highlight when active and filter the hotel list below.
Booking Summary Sticky Sidebar
Create a sticky booking-summary sidebar showing selected room, dates, price breakdown, and taxes, remaining fixed in view as the page content scrolls.
Desk/Room Availability Grid
Build a coworking-space floor plan grid showing individual desks/rooms colored by availability status (available/booked/reserved), clickable to open a booking modal.
Time Slot Booking Calendar Grid
Create a weekly calendar grid for booking meeting-room time slots, where dragging across cells selects a time range and shows a live duration label.
Membership Plan Toggle Cards
Build coworking membership plan cards (Hot Desk / Dedicated Desk / Private Office) with feature checklists, highlighting the recommended plan.
Book Spine Shelf Row
Create a horizontal bookshelf row displaying books as colored vertical spine rectangles with title text rotated vertically, scaling up slightly on hover to reveal the cover.
Reading Progress Bookmark Ribbon
Build a book cover thumbnail with a ribbon-style bookmark tab showing the percentage read, positioned at the top of the cover image.
Due Date Reminder Badge
Create a borrowed-book list item with a due-date badge that turns amber within 3 days of the due date and red once overdue, with a renew button appearing conditionally.
Exhibit Info Hotspot Overlay
Build an image of an artwork with small circular numbered hotspot markers overlaid at points of interest, opening an info tooltip when clicked.
Audio Guide Track List
Create a museum audio-guide track list with exhibit number, title, duration, and a play button, highlighting the currently playing track.
Gallery Floor Map Navigator
Build a simplified museum floor-plan map with clickable room sections that highlight and scroll to the corresponding exhibit list when selected.
Seat Map Selector Grid
Create an interactive seat-map grid where seats are colored by price tier and availability, letting users click to select seats which then highlight and add to a summary panel.
Ticket Stub Card Design
Build a ticket-stub styled card with a perforated-edge divider between the main info section and a tear-off stub section showing a QR code.
Countdown to Event Ticket Banner
Build a purchased-ticket banner showing event name, date, and a live countdown timer to the event, with a 'View Ticket' button that opens the QR code full-screen.
Artist Lineup Timeline
Create a festival lineup schedule showing multiple stages as columns and time slots as rows, with artist name blocks positioned and sized by their performance duration.
Invoice Line Items Table
Build a printable invoice layout with a header (logo, invoice number, date), a line-items table with quantity/rate/amount columns, and a totals summary block aligned to the right.
Business Card Preview Design
Create a front/back business-card preview pair side by side with a subtle drop shadow, showing a flip button that rotates between front and back designs.
Watermark Overlay Preview
Build a document preview with a diagonal repeating 'DRAFT' or 'CONFIDENTIAL' watermark text overlay at low opacity across the page background.
Print Layout Page Size Selector
Create a print-settings panel with selectable page-size thumbnails (A4, Letter, A5) that visually resize a preview page outline to match the chosen ratio.
Application Reference Number Card
Build a government-service application confirmation card showing a large reference number, a copy button, and a status stepper for tracking processing stages.
Public Service Directory Search
Create a searchable directory of public services with category icon filters and a results list showing office name, address, and hours.
Voting Ballot Selection Card
Build a sample ballot UI listing candidates as selectable radio-style cards with photo, name, and party, highlighting the selected candidate distinctly.
Live Cursor Presence Avatars
Create a document-editing UI showing other users' cursor positions as small colored labeled pointers moving in real time, plus a stack of avatar circles showing who's currently viewing.
Comment Thread Pin on Canvas
Build a design-tool style comment pin (small numbered circle) placed on a canvas element that opens a comment thread popover when clicked.
Version History Timeline Sidebar
Create a document version-history sidebar listing timestamped snapshots grouped by day, each showing the editor's avatar and a 'Restore' link on hover.
Live Editing 'Someone is typing' Banner
Build a subtle banner notification showing avatar(s) and 'X is editing this document' text that appears at the top of a collaborative document when another user starts typing.
Drawing Tool Floating Toolbar
Create a floating vertical toolbar for a whiteboard app with tool icons (pen, shapes, text, eraser) where the active tool is highlighted with a colored background pill.
Color and Stroke Width Picker
Build a drawing-tool settings popover with a row of color swatches and a stroke-width slider that live-previews the selected thickness as a growing dot.
Sticky Note Board Grid
Create a freeform sticky-note board where colored note cards can be repositioned by dragging, each note having an editable text area and a small color-tag selector.
Canvas Zoom Controls Widget
Build a bottom-corner zoom control widget with +/- buttons, a percentage display, and a 'Fit to screen' button for a whiteboard/canvas application.
Timer Start/Stop Widget
Build a time-tracking widget with a large running timer display, a project/task label, and a single button that toggles between 'Start' (green) and 'Stop' (red) states.
Weekly Timesheet Grid
Create a weekly timesheet grid with days as columns and projects as rows, each cell an editable hours input, with a running total column and row summary.
Idle Time Detection Prompt
Build a modal that appears after detecting inactivity while a timer is running, asking whether to keep or discard the idle time, showing the idle duration.
Billable Hours Summary Donut
Create a donut chart splitting billable vs non-billable hours for the week, with a legend showing exact hour totals and percentages for each segment.
Password Strength Meter Bar
Build a password input with a strength-meter bar beneath it that fills and changes color (red/amber/green) in real time as the user types, with a text label like 'Strong'.
Vault Item List with Reveal Toggle
Create a saved-password list row with a masked password field and an eye-icon toggle to reveal/hide the actual value, plus a copy-to-clipboard button.
Biometric Unlock Prompt Screen
Build a full-screen unlock prompt with a large fingerprint/face-icon that pulses while waiting, transitioning to a checkmark success animation on unlock.
Carbon Footprint Gauge
Build a semi-circular gauge showing a carbon-footprint score with color zones from green (low) to red (high) and a needle pointing to the current value.
Recycling Category Sort Game
Create a drag-and-drop UI where item icons must be dragged into the correct colored recycling bin (paper/plastic/glass), showing a success bounce animation on a correct match.
Eco Impact Stats Comparison Card
Build a card comparing an eco-friendly choice's impact (e.g. 'You saved 2kg CO2') against a baseline, with a small animated bar or leaf-icon fill representing the saved amount.