Prompt pack · 25 prompts
Hero Sections Pack
Build stunning website hero sections faster with AI.
$27One-time purchase · checkout on Gumroad
Instant download after checkout. All sales are final — every prompt is listed below.
Prompt pack · 25 prompts
Build stunning website hero sections 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 split-layout hero where one side hosts a draggable 3D object powered by CSS transforms, letting visitors rotate the model on desktop and touch. Clean grid alignment and subtle shadows make the object feel grounded.
Best forProduct launches, 3D-focused SaaS, tech brands
A full-width autoplaying video background anchored by a bold typography overlay, with a subtle black-to-transparent gradient layer ensuring text legibility over any footage. Performance-conscious and visually striking.
Best forCinematic brands, agencies, launch campaigns
A vibrant gradient mesh backdrop layered with floating UI cards that animate in on scroll. The combination feels contemporary, polished, and perfectly suited to showcasing a modern product.
Best forModern SaaS, fintech, productivity tools
A restrained, typography-led hero where the headline does all the heavy lifting, enhanced by animated underlines and a subtle cursor blink micro-interaction that keeps the page feeling alive.
Best forEditorial brands, studios, minimalist SaaS
A conversion-focused hero with an inline email capture field, real-time validation feedback, and a sticky submit button that shifts state as the input becomes valid. Built for maximum signup friction reduction.
Best forWaitlists, newsletters, pre-launch pages
A multi-layered parallax hero where background, midground, and foreground elements scroll at distinct speeds to create a convincing sense of depth. Powered by requestAnimationFrame for buttery smoothness.
Best forStorytelling sites, cinematic landing pages
A hero anchored by inline animated SVG illustrations that play on scroll and adapt their fill and stroke colors to light or dark themes. Crisp at any resolution and infinitely customizable.
Best forProduct explainers, educational tools, apps
A hero with two side-by-side CTAs that dynamically expand on hover, using z-index lift and shadow intensification to create a clear visual hierarchy between primary and secondary actions.
Best forTwo-audience products, freemium SaaS
A kinetic headline that types and retypes phrases in sequence with a blinking monospace cursor. Perfect for highlighting multiple value propositions without cluttering the layout.
Best forMulti-feature SaaS, agencies, dev tools
A detailed isometric SVG illustration peppered with interactive hotspots that reveal tooltips on hover or focus. Fully keyboard navigable, turning the hero into a discoverable mini-tour.
Best forFeature showcases, platform tours, edtech
A hero anchored by a product showcase carousel with touch-friendly swipe gestures, pause-on-hover auto-play, and custom pagination dots. Built to rotate hero products without sacrificing polish.
Best forE-commerce, product launches, multi-SKU brands
A deep-dark hero lit by pulsing neon glow accents around headlines and buttons. Uses saturation and contrast filters to make the accent colors pop against the near-black backdrop.
Best forDev tools, crypto, cyberpunk brands
A Canvas-powered particle field drifting behind the hero content, reactive to mouse movement with repulsion effects. Subtle enough to stay out of the way but hypnotic enough to reward curiosity.
Best forTech brands, AI products, interactive sites
A split hero with a value prop on one side and customer testimonial cards on the other, complete with avatars and star ratings. Cards slide in on scroll via IntersectionObserver for a polished entrance.
Best forB2B SaaS, agencies, trust-focused brands
A layered hero background that reveals hidden imagery or patterns on hover using clip-path transitions and smooth fades. An interactive surface that rewards exploration.
Best forCreative portfolios, photography, experiential brands
A stripped-down hero that puts a single centered search bar front and center, with animated placeholder text and a scale-up focus state. Ideal when search is the primary action.
Best forSearch-first products, directories, docs sites
A hero anchored by a real-time countdown timer in a crisp digital-clock aesthetic, with animated progress bars beneath each unit. Designed to manufacture urgency without feeling spammy.
Best forLaunches, flash sales, event landing pages
A hero with a video thumbnail and a centered semi-transparent play button that launches a full modal video player on click. Loads video content on demand, keeping the initial page fast.
Best forProduct demos, explainer-led launches, courses
A hero where the background itself is a live SVG data visualization — line graphs and data points that animate into view on scroll. Perfect for positioning data-driven products.
Best forAnalytics platforms, fintech, data SaaS
A split-screen hero with a draggable divider that wipes between "before" and "after" images. The handle sports a ring and shadow that animates as it moves, turning comparison into a tactile moment.
Best forPhoto editors, AI tools, transformation products
A hero that threads social proof badges into a horizontally snap-scrolling strip, with consistent borders and accessibility-friendly hover and focus states. Trust signals that scale gracefully.
Best forB2B SaaS, marketplaces, credibility-first brands
A full-screen hero where each element reveals itself in sequence as the viewer scrolls, chained together with staggered delays. Produces a cinematic first impression without sacrificing performance.
Best forImmersive landing pages, brand launches
A hero showcasing a full WebGL product viewer that users can rotate and zoom via mouse or touch, with cursor-state feedback on drag. Puts the product itself at the center of the first impression.
Best forHardware products, industrial design, 3D commerce
A minimalist hero surrounded by slowly rotating and drifting abstract shapes, layered with mix-blend modes for soft color interplay behind the typography. Understated but unmistakably designed.
Best forDesign studios, boutique SaaS, portfolios
A hero that embeds a multi-step onboarding form directly into the first screen, with progress indicators and horizontal slide transitions between steps. Turns visitors into activated users without leaving the hero.
Best forOnboarding flows, signup funnels, activation
Preview
Split-Screen Hero with Interactive 3D Element
Act as a Senior Frontend Architect and UI/UX Expert. The Task: Write the complete, production-ready code for a [Split-Screen Hero with Interactive 3D Element]. 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
Freelancers, affiliate marketers, creators, beginners, and business owners.
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 →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 →Toasts, modals, slide-overs, loaders & animation that feels alive.
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 →