# Awesome Web Prompts

> A curated collection of web development resources — AI prompts and ready-to-use source code for building beautiful web pages.

[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

[中文](README.md) | English

## About

A carefully curated collection of web development resources in two formats:

- **Prompt** — Instructions for AI tools (ChatGPT, Claude, Cursor, etc.) that generate complete web page code when pasted
- **Source Code** — Ready-to-run web code you can use directly or as a starting point for further development

Every entry includes a preview screenshot and usage notes.

## Index

### Hero Section

The first viewport-height section of a page, typically featuring a headline, subheadline, CTA buttons, and a strong visual background.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Bio-Age Dashboard](prompts/sections/hero/bio-age-dashboard/) | Prompt | Slow rotating aura + infinite ticker ruler + expandable hover cards; health data dashboard hero | ![](prompts/sections/hero/bio-age-dashboard/preview.png) |
| [Bold Studio](prompts/sections/hero/bold-studio/) | Prompt | Full-screen video bg + three-line impact headline + stat counters; creative agency landing | ![](prompts/sections/hero/bold-studio/preview.png) |
| [Contact Cybernetic](prompts/sections/hero/contact-cybernetic/) | Prompt | Mouse-scrub video interaction + spring-animated multi-select pills; cybernetic contact hero | - |
| [CozyPaws](prompts/sections/hero/cozy-paws/) | Prompt | Bouncy overshoot word pop animation + responsive 3-panel footer image parallax, cozy pet store hero | - |
| [Creative Portfolio](prompts/sections/hero/creative-portfolio/) | Prompt | 3-video crossfade switcher + precise responsive typography; personal creative hero | ![](prompts/sections/hero/creative-portfolio/preview.png) |
| [Immersive Ocean](prompts/sections/hero/immersive-ocean/) | Prompt | Cinematic deep ocean video background + responsive collapsible nav + staggered fade-up text animations; Foldcraft studio hero | ![](prompts/sections/hero/immersive-ocean/preview.png) |
| [IntelligentX](prompts/sections/hero/intelligent-x/) | Prompt | Giant typography mixed with inline pill visual elements + deep masked video, minimalist glassmorphic medical hero | - |
| [Interactive Discovery](prompts/sections/hero/interactive-discovery/) | Prompt | Cursor-following spotlight reveals a second image; dark geology brand hero | ![](prompts/sections/hero/interactive-discovery/preview.png) |
| [Luxury Hero](prompts/sections/hero/luxury-hero/) | Prompt | Scroll-scrubbed background video + GSAP parallax glass panel; luxury experience hero | ![](prompts/sections/hero/luxury-hero/preview.png) |
| [Organic Odyssey](prompts/sections/hero/organic-odyssey/) | Prompt | Cinematic microscopic background + precise liquid glass button; nature aesthetic hero | ![](prompts/sections/hero/organic-odyssey/preview.png) |
| [Portal](prompts/sections/hero/portal/) | Prompt | CSS Mask bottom blur fade + Liquid Glass + 10-level staggered entrance, cinematic full-screen hero | - |
| [Retro-Futurist](prompts/sections/hero/retro-futurist/) | Prompt | Mouse-scrub interactive video background + custom typewriter effect; retro-futurist agency hero | ![](prompts/sections/hero/retro-futurist/preview.png) |
| [Securify Data Security](prompts/sections/hero/securify-data-security/) | Prompt | Giant staggered typography + floating stats + background video; data security SaaS hero | ![](prompts/sections/hero/securify-data-security/preview.png) |
| [Stillmind](prompts/sections/hero/stillmind/) | Prompt | 4-video switcher + Liquid Glass UI + floating PNG overlay; mindfulness app fullscreen hero | ![](prompts/sections/hero/stillmind/preview.png) |
| [TechForward](prompts/sections/hero/techforward/) | Prompt | Minimal black-and-white video hero + Framer Motion animations + plain CSS; neuro-tech brand | ![](prompts/sections/hero/techforward/preview.png) |
| [VaultShield Hero](prompts/sections/hero/vault-shield-hero/) | Prompt | Responsive fullscreen hero section for a password manager app, featuring a background video, Framer Motion animations, and a custom SVG logo | - |
| [VEX Venture](prompts/sections/hero/vex-venture/) | Prompt | Minimalist venture hero page; raw video background + precise native staggered animations | ![](prompts/sections/hero/vex-venture/preview.png) |
| [Vision Reveal](prompts/sections/hero/vision-reveal/) | Source Code | Tile split entrance + cursor spotlight reveal; pure HTML/CSS/JS creative studio hero | ![](prompts/sections/hero/vision-reveal/preview.png) |
| [Wellbeing OS](prompts/sections/hero/wellbeing-os/) | Prompt | High-end Liquid Glass borders + responsive hover-triggered dropdown menu + smooth sliding mobile drawer, flowpath wellness SaaS hero | - |
| [Wellness Balance](prompts/sections/hero/wellness-balance/) | Prompt | Word-by-word reveal typography + asymmetric grid footer with auto-carousel, minimalist wellness supplement hero | - |
| [Wellness Devicex](prompts/sections/hero/wellness-devicex/) | Prompt | 5-layer Z-index architecture + Canvas dynamic spotlight video mask, cinematic dark mode wearable hero | - |

### Landing Page

Full multi-section pages covering hero, features, testimonials, pricing, and footer.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [3D Story](prompts/pages/landing-page/3d-story/) | Source Code | Scroll-driven video frame scrubbing + particle system + card reveal; immersive 3D framework marketing page | ![](prompts/pages/landing-page/3d-story/preview.png) |
| [AI Designer Portfolio](prompts/pages/landing-page/ai-designer-portfolio/) | Prompt | Mouse-trail GIF particles + parallax image + auto-scrolling testimonial carousel; designer portfolio landing | - |
| [Health Portal](prompts/pages/landing-page/health-portal/) | Prompt | Masked cards mosaic effect + staggered reveals; single-page dental medical landing page | ![](prompts/pages/landing-page/health-portal/preview.png) |
| [Innovation](prompts/pages/landing-page/innovation/) | Prompt | Advanced liquid glass + vanilla JS seamless video crossfade to black; 5-section enterprise landing page | - |
| [Orbis NFT](prompts/pages/landing-page/orbis-nft/) | Prompt | Advanced liquid glass effect + global texture overlay + deep space video grid, dark mode NFT landing page | - |
| [Prisma Creative Studio](prompts/pages/landing-page/prisma-creative-studio/) | Prompt | Cinematic dark mode + SVG noise background + words pull-up animation; 3-section creative studio landing page | ![](prompts/pages/landing-page/prisma-creative-studio/preview.png) |
| [SkyElite Private Jets](prompts/pages/landing-page/skyelite-private-jets/) | Prompt | Premium private jet landing page with video background and overlapping typography | - |
| [USD Halo](prompts/pages/landing-page/usd-halo/) | Prompt | Fintech stablecoin landing page, rounded video Hero + brand font marquee | - |

### SaaS & Cloud Platforms

SaaS cloud platforms, high-performance computing, and enterprise intelligent service marketing stages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Intelligent Performance](prompts/pages/saas/intelligent-performance/) | Prompt | Single-file zero-dependency SaaS marketing stage, responsive dual CloudFront video backgrounds, LED dot matrix font generator, and three 429x554 glass metric cards | - |

### Official Website & Cultural

Official websites, cultural/museum exhibitions, and multi-section immersive narrative web experiences.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Neo Museum (NHM)](prompts/pages/website/neo-museum/) | Prompt | Immersive Natural History Museum (NHM) multi-section website featuring SVG polygon letter entrance, SVG filter sand-dissolve chapter transitions, and dark/light section flow. | - |

### Editorial & Storytelling

Cinematic scroll-driven video storytelling, editorial layouts, and immersive long-scroll pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Vectrus Energy](prompts/pages/editorial/vectrus-energy/) | Prompt | Cinematic scroll-driven video storytelling website with WebCodecs + MP4Box frame-bank decoding for smooth scrubbing, Helvetica Neue ME typography, and a 500vh narrative scroll track. | - |

### App & Product Landing

Product showcase, calm and creative landing pages for mobile and desktop apps.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [ADHD Planner (Drift)](prompts/pages/app/adhd-planner/) | Prompt | Calm and ADHD-friendly planner app Drift landing page with fullscreen video hero, warm cream About section, and sticky scroll-linked feature cards. | - |

### Agency & Studio

Creative studio, talent collective, and design agency showcase pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Playful Idea](prompts/pages/agency/playful-idea/) | Prompt | Single-page creative studio footer with lavender character video background, pointer gaze scrubbing interaction, and 3-column minimalist layout | - |
| [Talent Collective](prompts/pages/agency/talent-collective/) | Prompt | Minimalist fullscreen creative studio talent showcase featuring seamlessly transitioning background portraits, subtle gradients, and pure CSS interactions. | - |

### Creative Pages

High-impact creative pages featuring avant-garde typography, 3D assets, and scroll animations.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Sparkform](prompts/pages/creative/sparkform/) | Prompt | A highly creative landing page featuring stacked 3D text effects, scroll-driven typography animations, and an infinite marquee. | - |

### Technology & Identity

Cutting-edge tech, voice identity, and terminal aesthetic dark mode product pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Cyber Ronin](prompts/pages/technology/cyber-ronin/) | Prompt | Self-contained full-viewport cyberpunk hero section featuring cursor spotlight dual-image reveal, word-pull-up typography, and 6-tier responsive architecture. | - |
| [Signal ID](prompts/pages/technology/signal-id/) | Prompt | A full-viewport dark hero landing page for a technology brand, featuring a right-aligned signup form and a cinematic background video. | - |

### AI & Intelligent Systems

AI platforms, autonomous runtime systems, and dot-matrix aesthetic landing pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Agent Wave (Vesper.ai)](prompts/pages/ai/agent-wave/) | Prompt | Single-file dependency-free pure black single-viewport AI landing page with liquid metal navigation pills, Instrument Serif typography, and responsive stats footer. | - |
| [AI Runtime](prompts/pages/ai/ai-runtime/) | Prompt | Single-viewport immersive video background AI landing page featuring retro dot-matrix typography and animated stat counters. | - |
| [Fastshot](prompts/pages/ai/fastshot/) | Prompt | Self-contained single-viewport AI app builder Fastshot landing page with dawn video background, pixel-precise composer card, and 3-tier responsive architecture. | - |

### Data Intelligence

Data intelligence, predictive models, and high-fidelity analytics chart hero pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Quantum Core (Apogee)](prompts/pages/data-intelligence/quantum-core/) | Prompt | Deep space nebula video background + glassmorphic revenue growth card + pure CSS bar grow animation, Apogee data intelligence hero landing page | - |

### Cybersecurity

Cybersecurity, system defense, and hard-edged dark tech single-viewport landing pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Cyber Layer](prompts/pages/cybersecurity/cyber-layer/) | Prompt | Self-contained single-viewport cybersecurity dark landing page with dual color-graded LUT video background, Space Grotesk typography, and choreographed WAAPI entrance timeline. | - |

### Auth & Onboarding

Authentication, sign-in/sign-up, and user onboarding pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Aurora Onboard](prompts/pages/auth/aurora-onboard/) | Prompt | Split-screen layout + unmasked pure video hero + staggered entrance animations, minimalist B&W sign up | - |
| [Real-Time Alerts (Signal)](prompts/pages/auth/real-time-alerts/) | Prompt | Self-contained dependency-free single HTML/CSS/JS login page with diving peregrine falcon video hero, pixel-calibrated 3-mode responsive engine, and WAAPI entrance timeline. | - |

### 404 Pages

Custom error guidance and 404 not found pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [404 Planet](prompts/pages/404/404-planet/) | Prompt | Locked 100vh cloud hosting error page with looping video background, liquid glass button, and glowing 404 text | - |
| [Fun 404 Page](prompts/pages/404/fun-404-page/) | Prompt | Dynamically scaled giant background text + handcrafted staggered drawer menu, bright children's brand 404 | - |
| [Nexto 404](prompts/pages/404/nexto-404/) | Prompt | Locked 100vh viewport + layered spaceship background + slow float animation, sci-fi error page | - |
| [Skybridge 404](prompts/pages/404/skybridge-404/) | Prompt | Minimalist precision 404 error page with full-viewport 100% opacity video background, pixel SVG logo, and gradient 404 numerals | - |

### Footer Section

Modern footer navigation sections and Call-to-Action (CTA) components.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Heritage Grove](prompts/sections/footer/heritage-grove/) | Prompt | Single-file zero-dependency elegant teal ink landscape full-viewport footer, Cormorant Garamond wordmark, and 5 responsive breakpoints | - |
| [Tenlas Footer](prompts/sections/footer/tenlas-footer/) | Prompt | Dark mode CTA + premium footer with staggered fade-up animations and responsive flush SVG brand text | - |
| [Wayfinder](prompts/sections/footer/wayfinder/) | Prompt | Meridian single-screen vintage engraved illustration full-viewport footer featuring dark green viaduct & stagecoach looping video, multiply blend mode paper integration, Fraunces serif wordmark, compass SVG mark, and responsive nav grid | - |

### UI Components

Standalone UI components, 3D interactive visuals, and card carousels.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Animated Cards](prompts/components/animated-cards/) | Prompt | 3D horizontal cylinder card carousel with mouse parallax tilt, volumetric thickness layers, and dual-face flip | - |
| [Scroll Expansion Hero](prompts/components/scroll-expansion-hero/) | Source Code | Wheel and touch-driven immersive scroll-expanding media hero with smooth video/image expansion, text blend parallax, and dual-mode toggle | - |

### Portfolio

Personal portfolio pages focused on showcasing past work and skills.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [3D Portfolio](prompts/pages/portfolio/3d-portfolio/) | Prompt | 3D creator portfolio with magnetic hover, infinite marquee, and sticky stacking cards | ![](prompts/pages/portfolio/3d-portfolio/preview.png) |
| [Digital Director](prompts/pages/portfolio/digital-director/) | Prompt | Pixel-perfect full-viewport portfolio landing page for Digital Director Adam Roberts with basis33 bitmap font, background video, and award chips | - |
| [Gold Standard](prompts/pages/portfolio/gold-standard/) | Prompt | SOSCALE gold standard full-viewport hero landing page featuring SVG evenodd text cutout video mask, rigid 1280 --u scaling system, focal-point video positioning algorithm, and Web Animations API choreographed entrance | - |
| [Portfolio Cosmic](prompts/pages/portfolio/portfolio-cosmic/) | Prompt | Premium dark portfolio with HLS background and complex GSAP scroll parallax | - |

### Fintech

Financial technology pages, including mobile app mockups, payment flows, and digital asset product pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Remit Race](prompts/pages/fintech/remit-race/) | Prompt | Dark competition-style mobile mockup with 3D globe video + layered countdown bar | - |

### Contact Pages

Contact forms and landing pages focused on input validation, custom tags, and interactive submit states.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Build With Us](prompts/sections/contact/build-with-us/) | Prompt | Full-screen video background + physical card layout + service tags multi-select + submit success state transition | - |

### Travel & AI Planner

Travel and AI trip planner pages featuring video backgrounds, liquid glass prompt cards, and high-end typography.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [AI Trip Planner (Wandor)](prompts/pages/travel/ai-trip-planner/) | Prompt | Full-viewport AI travel hero page for Wandor with video background, frosted glass prompt card, and Special Elite branding | - |

### Environmental & Sustainability

Environmental protection, ocean conservation, and sustainability non-profit full-viewport pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [TrueEarth](prompts/pages/environmental/true-earth/) | Prompt | Single-file zero-dependency ocean conservation nonprofit hero, aerial reef video card, image-filled headline highlight, and frosted glass nav sheet | - |

### 3D & Space Planet

Immersive 3D visuals, space planetary exploration, and multidimensional interactive full-viewport pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Space Planet](prompts/pages/3d/space-planet/) | Prompt | Single-file zero-dependency immersive space hero with seamless 3-planet video switching, --u reference unit scaling, and interactive planet cut-outs | - |

### E-Commerce & Retail

E-commerce, brand retail, and digital merchant showcase full-viewport pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Vertex](prompts/pages/ecommerce/vertex/) | Prompt | Single-file zero-dependency e-commerce SaaS hero with 1172x657 scaled canvas, 37-card 3D perspective cylinder ring, and bottom-glow buttons | - |

### Automotive & Mobility

Automotive industry, electric mobility, and interactive concept vehicle showcase full-viewport pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Veyra Electric](prompts/pages/automotive/veyra-electric/) | Prompt | Interactive electric concept car landing page featuring 1672:941 shared image plane, multi-video off-DOM canvas decoding, and paint/wheel appearance dock | - |

### Manufacturing & Industrial

Precision manufacturing, heavy industrial protection, and engineering equipment showcase full-viewport pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Cordex](prompts/pages/manufacturing/cordex/) | Prompt | Single-file zero-dependency industrial cable protection landing page featuring All-Intra video scroll-scrubbing and multi-scene spec card linkage | - |

### Motion & Interactive Visuals

High-precision motion design, unit measurement systems, and micro-interactive full-viewport pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [ConSentinel](prompts/pages/motion/consentinel/) | Prompt | Single-file zero-dependency digital security hero featuring --u reference unit scaling, WAAPI entrance choreography, and aspect-ratio driven responsive geometry | - |

### Photography & Nature

Wildlife and nature photography archives with 3D sphere layouts, immersive lightboxes, and cinematic video intros.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Nature Portfolio](prompts/pages/photography/nature-portfolio/) | Prompt | Wildlife photography archive with Fibonacci photo sphere, 16vh scroll dolly, FLIP lightbox, flat grid, fullscreen menu, and custom cursor | - |

### Space & Nebula

Space exploration, nebula, and cosmic sci-fi full-viewport landing pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Nebula Hero](prompts/pages/space/nebula-hero/) | Prompt | Orbit space product full-viewport hero landing page featuring a rigid 1563×1006 --u scaling system, ringed planet vector SVG, 9s looping nebula video, dual-line text mask reveal, and a 1.7s choreographed entrance timeline | - |

### Supply Chain & Logistics

Modern supply chain, freight logistics, and intermodal transport full-viewport landing pages.

| Name | Type | Description | Preview |
|------|------|-------------|---------|
| [Logistics Freight](prompts/pages/supply/logistics-freight/) | Prompt | Logistics Freight modern supply chain full-viewport hero landing page featuring aerial freight train video background, @font-face font-metric overrides, train-axis mirrored dual feature layout, and 1.8s single entrance animation | - |

## Structure

```
awesome-web-prompts/
├── README.md                 # 中文主页 (Auto-built)
├── README_EN.md              # English version (Auto-built)
├── CONTRIBUTING.md           # Contribution Guidelines
├── package.json              # Scripts & Tooling
├── scripts/                  # Automation scripts
└── prompts/                  # Prompt Repository
    ├── _template/            # Template for new entries
    ├── pages/                # Full Pages (Landing Page, Agency, Automotive…)
    ├── sections/             # Page Sections (Hero, Footer, Contact)
    └── components/           # UI Components & Visuals
```

## How to Use

**Prompt entries:**
1. Open `prompt.md` and copy the prompt text
2. Paste it into ChatGPT, Claude, Cursor, or any AI coding tool to generate the code

**Source Code entries:**
1. Open `prompt.md` and copy the complete code
2. Save it in the appropriate file format and open it in a browser, or use it as a starting point for your own project

## Contributing

Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to add a new entry.

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=DexZane/awesome-web-prompts&type=Date)](https://star-history.com/#DexZane/awesome-web-prompts&Date)

## License

[MIT](LICENSE)