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.
Parallax Hero with Floating Cards
Create a full-page hero section using CSS 3D transforms and JavaScript scroll listeners where background layers move at different speeds (parallax) and floating cards tilt in 3D as the user scrolls.
Scroll-Triggered 3D Card Flip
Build a scroll-triggered animation where a row of cards flip in 3D (rotateY) one by one as they enter the viewport, using the Intersection Observer API.
Horizontal Scroll-Jacked Gallery
Build a section where vertical page scroll is translated into horizontal movement of a row of large image panels (scroll-jacking), so scrolling down the page pans across a gallery sideways.
Animated Grid Background
Create a subtle moving grid-line background (like a HUD/dashboard) that slowly scrolls diagonally behind the page content, using a repeating CSS linear-gradient pattern animated with background-position.
Animated Noise Grain Overlay
Add a subtle animated film-grain/noise texture overlay on top of a dark gradient background using an SVG turbulence filter, for a premium cinematic feel.
Confetti Burst Celebration
Create a burst of colorful confetti particles that shoot outward from the center and fall with gravity and rotation when a button is clicked, using JavaScript canvas or absolutely positioned divs.
Twinkling Starfield Background
Create a full-page dark background covered in small randomly-placed dots that twinkle (fade in/out) at staggered intervals, simulating a starfield.
Pulsing Notification Dot
Build a small red notification dot on the corner of an icon that continuously pulses outward with a fading ring animation to draw attention.
User Reputation Badge Tier
Create a small reputation/level badge next to a username showing a colored icon (bronze/silver/gold/platinum tiers) with a tooltip on hover showing the exact point total.
'Sold' Ribbon Overlay
Build a diagonal 'SOLD' ribbon banner overlaid across the top corner of a listing thumbnail image, styled with a solid color and subtle shadow.
Shimmer Sweep Button
Create a rounded button with a diagonal white shimmer that sweeps across it every few seconds using a CSS keyframe animation on a pseudo-element, on a dark gradient background.
Magnetic Hover Button
Build a button that subtly follows the cursor within a radius (magnetic pull effect) when hovered nearby, snapping back smoothly when the mouse leaves, using JS mousemove and CSS transitions.
Play/Pause Morph Button
Build a circular play button whose triangle icon smoothly morphs into a pause icon (two bars) when clicked, using an SVG path or clip-path transition rather than an abrupt icon swap.
Like Button Burst Animation
Build a heart/like button that, on click, bursts several small heart particles outward and fading while the main icon fills solid, similar to Instagram's double-tap like animation.
Follow Button State Toggle
Create a 'Follow' button that switches to 'Following' (outlined, muted style) after clicking, reverting to a red 'Unfollow' state only when hovered while in the Following state.
Flip Card Reveal
Build a card that flips 180° on hover (using CSS 3D transform-style: preserve-3d and backface-visibility) to reveal different content on its back face.
Hover Reveal Info Overlay
Create an image/card tile where a dark overlay with title and description slides up from the bottom on hover, with the image slightly zooming in behind it.
Chat Bubble List with Tails
Build a messaging thread with left-aligned (received) and right-aligned (sent) chat bubbles, each with a small triangular tail, timestamps below each group, and different bubble colors for sent vs received.
Typing Indicator Dots
Create a chat 'typing...' indicator with three small dots inside a bubble that bounce up and down in a staggered sequence, looping continuously.
Message Read-Receipt Ticks
Build sent-message checkmark indicators that show a single grey tick for 'sent', double grey ticks for 'delivered', and double blue ticks for 'read', transitioning color smoothly between states.
Contact List with Online Dot
Create a chat contact list where each row has an avatar with a small green online-status dot in the corner, name, last message preview, and unread-count badge on the right.
Voice Message Waveform Bubble
Build a voice-message chat bubble containing a play button, a static waveform bar visualization, and a duration label, with the waveform bars highlighting progressively as playback advances.
Swipe-to-Reply Message Row
Create a chat message row that reveals a reply icon and slightly shifts the bubble to the side as the user swipes/drags it horizontally, snapping back when released.
Custom Cursor with Trailing Dot
Replace the default cursor with a small glowing dot that follows the mouse instantly, plus a second larger ring that trails slightly behind with a lag/easing effect.
Collapsible Sidebar Toggle
Create a dashboard sidebar that collapses to icon-only width when a toggle button is clicked, animating the width and fading out the text labels, with the main content area resizing to fill the space.
KPI Stat Card with Sparkline
Build a stat card showing a large number, a percentage-change badge (green up / red down arrow), and a small inline SVG sparkline chart showing the recent trend beneath it.
Notification Center Slide Panel
Build a bell-icon-triggered notification panel that slides in from the right, grouping notifications by 'Today' and 'Earlier', with unread items marked by a small colored dot.
Dark Dashboard Shell Layout
Create the base layout shell for an admin dashboard: fixed left sidebar with nav icons, a top header bar with search and profile avatar, and a scrollable main content region — all in a dark theme.
Sortable Data Table Headers
Build a data table where clicking a column header toggles an ascending/descending sort arrow icon and highlights the active column, re-ordering the visible rows accordingly.
Product Card with Hover Zoom
Build a product card where the product image slowly zooms in on hover (overflow hidden on the container), revealing a quick 'Add to Cart' button that fades in over the bottom of the image.
Slide-in Cart Drawer
Create a shopping cart drawer that slides in from the right edge of the screen over a dimmed backdrop, listing line items with quantity steppers and a sticky checkout button at the bottom.
Quick View Product Modal
Build a 'Quick View' modal that opens from a product card click, showing a larger image on one side and details/price/add-to-cart on the other, without navigating away from the listing page.
Size Selector Chips
Create a row of size-selection chips (S, M, L, XL) where the selected chip gets a solid gradient background and the others stay outlined, with unavailable sizes shown struck-through and disabled.
Add-to-Cart Success Bounce
Animate an 'Add to Cart' button so that on click it briefly shows a checkmark with a bounce/scale animation, then a small cart-icon badge count increments with a pop effect.
Wishlist Heart Toggle
Create a heart icon button that fills in with a pink color and a quick scale-pulse animation when clicked to add an item to a wishlist, reverting smoothly when clicked again.
Sticky Add-to-Cart Bar
Build a slim product summary bar that becomes fixed to the bottom of the screen once the user scrolls past the main product image, showing name, price, and an Add to Cart button.
Animated 404 Page
Design a 404 error page with a large glitching/flickering '404' headline, a short friendly message, and a button back to the homepage, using a subtle CSS glitch animation on the numbers.
Maintenance Mode Page
Build a 'Site under maintenance' page with a slowly rotating gear/wrench icon illustration, an estimated return time, and an email field to get notified when the site is back.
Under Construction Page
Design a playful 'Under Construction' landing page with a diagonal caution-stripe banner pattern background and a bouncing construction-icon animation.
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.
Split-Screen Animated Hero
Design a split-screen hero with text on the left and a slowly rotating gradient shape on the right, where both halves fade/slide in on page load with a slight delay between them.
Video-Style Looping Gradient Hero
Create a full-viewport hero where a large, slowly-morphing animated gradient blob fills the background (using CSS border-radius and background-position keyframes) behind a centered headline and CTA.
Responsive Pricing Cards
Create a responsive HTML/CSS pricing section with 3 cards (Basic, Pro, Enterprise), a highlighted 'most popular' card, hover lift effect, and a gradient CTA button on each card.
Animated Navbar Underline
Build an HTML/CSS navbar where each link gets an animated gradient underline that slides in from the left on hover.
Glassmorphism Pricing Hero
Design a dark landing page hero with a frosted-glass pricing card (backdrop-filter blur), a floating glowing orb behind it, gradient headline text, and a glowing gradient CTA button.
Floating Gradient Orbs Background
Create a full-page ambient background with 3-4 large soft blurred gradient orbs (cyan/violet/amber) that slowly float and drift using CSS keyframe animations, layered behind glassmorphism content cards.
Gradient Wave Section Divider
Create an SVG wave shape that sits between two page sections with different background colors, giving a smooth organic transition instead of a hard straight edge.
Monthly/Yearly Pricing Toggle
Build a pricing section with a monthly/yearly toggle switch that animates the displayed price change and shows a 'Save 20%' badge when yearly is selected.
Gradient Ring Spinner
Create a smooth circular loading spinner with a rotating conic gradient ring (cyan to violet) and a dark inner circle to mask the center, using pure CSS animation.
Bouncing Dots Loader
Build a classic 3-dot loading indicator where each dot bounces up and down in sequence with a staggered animation-delay, in the brand's gradient colors.
Skeleton Loading Placeholder
Create skeleton-screen placeholder blocks (avatar circle + text lines) with a shimmering gradient sweep animation to indicate content is loading, before the real content appears.
Page Transition Wipe Loader
Create a full-screen color wipe transition that slides across the viewport and back when navigating between pages, revealing the new page content underneath.
Infinite Scroll Loading Trigger
Create a list that automatically loads more items with a spinner shown at the bottom as the user scrolls near the end, using Intersection Observer to trigger the next page fetch.
Blurred Backdrop Modal
Build a modal dialog that fades in with a scale-up animation while the page behind it blurs and dims, using backdrop-filter and a CSS transition on open/close.
Newsletter Signup Popup
Build a centered popup modal that appears after a short delay, with an email input, subscribe button, and a small 'No thanks' dismiss link, animating in with a scale+fade.
Bug Report Modal Form
Create a bug-report modal with fields for a title, description, severity dropdown, and an optional screenshot drag-and-drop area, with a submit button showing a loading spinner while sending.
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.
Slide-in Toast Stack
Build a toast notification that slides in from the top-right corner, auto-dismisses after 3 seconds with a shrinking progress bar along its bottom edge, and stacks if multiple appear.
Cookie Consent Banner
Create a bottom-fixed cookie consent banner that slides up on page load, with Accept/Decline buttons, disappearing with a slide-down animation once a choice is made.
Achievement Unlock Toast
Create a game-style achievement notification that slides in from the top with a trophy icon, gold shimmer border, and the achievement name, auto-dismissing after a few seconds.
Multi-Step Signup Wizard
Create a 3-step signup form (Account → Profile → Preferences) with a progress bar at top, Next/Back buttons, and a slide transition between steps without a full page reload.
Product Tour Tooltip Walkthrough
Build a guided product-tour overlay that spotlights one UI element at a time with a dimmed backdrop everywhere else, showing a tooltip with 'Next'/'Skip' controls pointing at the highlighted element.
Welcome Confetti Screen
Design a full-screen 'Welcome aboard!' confirmation screen shown right after signup, with a burst of confetti animation and a prominent 'Start Exploring' button.
Progress Dots Carousel
Build an onboarding carousel of 3-4 slides with small dot indicators at the bottom that fill in as active, supporting swipe/drag and a 'Skip' link in the corner.
Permission Request Card
Create a friendly permission-request card (e.g. for notifications) explaining the benefit with an icon, and Allow/Not Now buttons, styled as a soft floating card rather than a native browser prompt.
Layered Depth Parallax Card
Create a card with 3 stacked layers (background image, gradient overlay, and floating title text) that move at different speeds relative to the mouse position, giving a strong sense of depth. Use JavaScript mousemove with translate3d.
Scroll Parallax Card Stack
Build a stack of overlapping cards inside a scroll container where each card slows down and scales slightly as the next one slides over it (like Apple's product pages), using position: sticky and scroll-driven transforms.
Tilt-and-Glow Parallax Card
Create a product card that tilts toward the cursor (3D rotate) while a radial light/glow follows the cursor position across the card surface, using CSS custom properties updated via JS mousemove.
Image Reveal on Scroll
Create a portfolio image gallery where each image is clipped by a sliding panel that reveals it (like a curtain opening) as it scrolls into view, using Intersection Observer and CSS clip-path transitions.
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.
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.
Expanding Icon Search Bar
Build a search icon button that expands into a full text input field when clicked, with a smooth width transition and auto-focus, collapsing back when it loses focus while empty.
Infinite Auto-Scrolling Logo Marquee
Build an infinite horizontal auto-scrolling logo/testimonial slider using pure CSS keyframe animation (duplicated content trick) that pauses smoothly on hover.
Draggable Card Carousel with Dots
Create a swipeable/draggable image or testimonial carousel with snap-scrolling, active-dot indicators below, and smooth momentum scrolling on both touch and mouse drag.
Range Slider with Live Gradient Fill
Build a custom-styled range input slider where the filled track shows a live cyan-to-violet gradient that updates as the user drags, with a glowing thumb handle.
Auto-Rotating Testimonial Card
Build a single testimonial card that automatically cross-fades to the next quote every few seconds, with small avatar circles below acting as clickable indicators.
Typewriter Effect Heading
Create a heading that types itself out character-by-character with a blinking cursor at the end, looping through a list of phrases, using pure JavaScript (no library).
Gradient Wave Text
Build a heading where a gradient color sweeps continuously left to right across the text using background-clip: text and a moving background-position keyframe animation.
Animated Counter on Scroll
Create a stat number that counts up from 0 to its target value over 1.5 seconds as soon as it scrolls into the viewport, using requestAnimationFrame with an ease-out curve.
Countdown Timer
Build a countdown timer showing days, hours, minutes, and seconds in separate flip-style boxes, updating every second with the digits sliding/fading on change.
Animated Dark Mode Switch
Create a pill-shaped toggle switch with a sliding circle that shows a sun icon in light mode and a moon icon in dark mode, animating the icon swap and background color together.
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.