Prompt pack · 25 prompts
Interactions & Effects Pack
Build polished UI interactions faster with AI.
From $27One-time purchase · checkout on Gumroad
Instant download after checkout. All sales are final — every prompt is listed below.
Prompt pack · 25 prompts
Build polished UI interactions faster with AI.
Instant download after checkout. All sales are final — every prompt is listed below.
What's inside
Every one of these is in the download as a full, copy-paste prompt.
A glassmorphism success toast with a frosted semi-transparent backdrop and clean borders, paired with an animated horizontal progress bar that counts down to auto-dismiss for a premium, modern feedback moment.
Best forSuccess confirmations, SaaS notifications, subtle user feedback
A right-edge slide-over panel that glides in with ease-in-out timing, layered above content with a semi-transparent overlay that closes on outside click for focused, distraction-free detail viewing.
Best forDetail views, record inspectors, side-panel workflows
A contextual tooltip with a dynamically positioned arrow and configurable hover/focus delay, fading and scaling in smoothly to deliver polished inline guidance without interrupting workflow.
Best forForm hints, feature explainers, inline documentation
A multi-step confirmation modal with numbered step indicators and dynamic border/header color shifts that reflect warning severity, guiding users through high-consequence decisions with clarity.
Best forDestructive actions, high-stakes confirmations, multi-stage flows
An interactive rating modal with selectable emoji feedback buttons that scale and shift color on selection, complete with accessible focus rings for premium keyboard-navigable feedback collection.
Best forPost-interaction surveys, NPS prompts, CSAT flows
A floating action button that expands radially on click to reveal menu options with scale transitions, backed by a subtle backdrop-blur for depth that keeps focus on the primary action cluster.
Best forPrimary action hubs, quick-action menus, mobile-first UIs
A sticky top error banner with a pulse-animated icon to draw attention and a tactile retry button that scales on press, delivering clear recovery paths for system failures.
Best forAPI failures, network errors, inline system alerts
A cookie consent banner with custom peer-styled toggle switches for granular preference control, sliding in and out with transform animations for a compliant, unobtrusive consent experience.
Best forCompliance banners, GDPR consent flows, privacy preferences
A guided onboarding tour with a dynamic gradient progress bar and viewport-aware tooltips whose arrows reposition via edge detection, creating a smooth first-time-user experience.
Best forProduct onboarding, feature tours, new-user walkthroughs
A full-screen loading overlay with a semi-transparent dark veil and a themed SVG spinner using stroke-current for brand-consistent color, signaling system activity without jarring the user.
Best forApp initialization, heavy data loads, transitional states
A feedback form modal with a polished custom-styled file input for screenshot attachments, plus a thumbnail preview that lets users remove or replace images before submitting.
Best forIn-app feedback, bug reports, feature request flows
A session timeout modal with a monospaced red countdown that emphasizes urgency as expiration nears, plus a clearly affordable green ‘Extend Session’ button to preserve user work.
Best forAuthenticated apps, session management, security prompts
A feature announcement modal with a responsive 16:9 embedded video player and hover-revealed semi-transparent playback controls, presenting new features with cinematic polish.
Best forProduct launches, feature reveals, what's-new announcements
A delete confirmation modal requiring users to type ‘DELETE’ exactly before enabling the confirm button, with disabled/enabled states handled via Tailwind opacity and cursor utilities for safe destructive flows.
Best forDestructive deletions, irreversible actions, data removal flows
A progress modal with an animated circular SVG ring driven by stroke-dashoffset and a real-time percentage label in the footer, giving users confident visibility into ongoing tasks.
Best forFile uploads, data syncing, long-running task monitoring
A sticky bottom-anchored maintenance banner with a monospaced ETA countdown updated every second, set against a subtle dark gradient for a calm, informative system-status signal.
Best forScheduled downtime, incident notifications, status announcements
A survey modal with JavaScript-driven conditional logic that reveals follow-up questions based on prior answers, with active inputs visually distinguished via indigo focus rings.
Best forBranching surveys, onboarding questionnaires, conditional research
A network error toast featuring an offline-only indicator icon and a bouncing close button that activates after a persistent failure timeout, keeping users informed during connectivity issues.
Best forOffline states, connectivity errors, resilient web apps
A welcome modal with a dynamically injected personalized greeting and tabbed personalization options styled with underline highlights, giving new users a warm, tailored first interaction.
Best forNew-user welcomes, personalized onboarding, profile setup
An upgrade modal with a feature comparison table, accent-styled plan toggles, and sticky headers that keep feature names visible while scrolling, turning upgrades into confident decisions.
Best forSubscription upsells, plan comparisons, paywall moments
A help center slide-over with a pill-styled real-time search input that filters content as users type, wrapped in a sleek custom-styled scrollbar for a premium support surface.
Best forIn-app support, help documentation, embedded knowledge bases
An unsaved changes warning modal with distinct red discard and green save buttons, topped by a pulsing yellow warning icon that emphasizes the risk of losing in-progress work.
Best forEdit flows, form exit guards, data-loss prevention
An achievement toast with a confetti burst animation triggered on unlock and a gradient gold badge icon, turning ordinary milestones into memorable, shareable celebratory moments.
Best forGamified products, milestone moments, reward systems
A terms of service update modal that disables the accept button until the user scrolls to the bottom, with a custom-styled scrollbar improving readability for long legal content.
Best forLegal agreements, ToS updates, compliance flows
A keyboard shortcuts modal with a real-time search filter and a responsive two-column grid, complete with inline keycap-styled keys for a power-user-friendly reference.
Best forPower-user tooling, productivity apps, shortcut reference
Preview
Glassmorphism Success Toast Notification with Progress Bar
Act as a Senior Frontend Architect and UI/UX Expert. The Task: Write the complete, production-ready code for a [Glassmorphism Success Toast Notification with Progress Bar]. Tech Stack & Environment: - Strictly a SINGLE HTML file containing everything. - Use plain HTML5. - Use the Tailwind CSS CDN (<script src="https://cdn.tailwindcss.com"></script>) in the head for all styling. - Use plain Vanilla JavaScript enclosed in <script> tags for any interactivity. - Use inline SVG paths for any icons (do not use external icon libraries). Strict Requirements: - Visual Excellence: It must look like a premium, modern SaaS product (subtle shadows, rounded corners, clean borders, smooth hover/focus effects). - Responsive: Must look perfect on mobile, tablet, and desktop using Tailwind utility classes.
The feature-by-feature build steps continue in the pack — along with the other 24 prompts.
How to use it
Four steps. Zero setup. Every prompt in this pack is engineered to output a complete, single HTML file you can open directly in any browser.
Open any prompt page in this pack and copy the full prompt block to your clipboard.
Paste into Claude, ChatGPT, Gemini, Cursor, or any AI coding tool. No modifications required.
The AI returns a single complete HTML file. Copy the entire code block it produces.
Save it as index.html and double-click to open in your browser. Done.
What you get
Digital download from Gumroad, available right after checkout. Nothing ships.
Best for
SaaS founders, indie hackers, freelancers, web designers, developers, and marketers building product-style websites.
All sales are final, per the Gumroad listing.
Questions
The pack’s own instructions name Claude, ChatGPT, Gemini, and Cursor. Paste a prompt into any of them, or a similar AI coding tool.
Each prompt asks the AI for one complete HTML file you can save and open in a browser. What comes back depends on the model you use — the pack recommends a strong one.
No build tools. Copy a prompt, paste it into your AI tool, save the HTML it returns, and open it in your browser.
The HTML version of the pack includes a customizer: enter your brand, colors, or feature goals and it generates a tailored version of any prompt.
No. All sales are final, as stated on the Gumroad listing. Every prompt in the pack is listed on this page so you can check it covers what you need first.
A prompt pack gives you single copy-paste prompts for individual UI features. The Mission Vault is a structured set of missions, safety rules, and build checklists for building complete dashboards with Claude Code.
More packs
Analytics dashboards, KPI grids, data tables, charts & kanban boards.
See the pack →Bold, high-converting hero sections that grab attention instantly.
See the pack →Navbars, mega-menus, sidebars & mobile navigation that just works.
See the pack →Login screens, account dashboards, settings & role-based UI.
See the pack →Product grids, carts, checkout flows & sales pages that convert.
See the pack →Landing pages, lead-gen funnels, popups & CTAs built to sell.
See the pack →Blog layouts, article pages, content blocks & editorial UI.
See the pack →Profiles, feeds, comments & community interface components.
See the pack →Footers, bottom bars, newsletter blocks & end-of-page sections.
See the pack →