Web Templates

A curated collection of production-ready, high-performance website templates featuring modern design, 3D effects, and cutting-edge visual experiences. This repository contains both vanilla HTML/CSS/JS templates and React-based solutions for various use cases.

🎨 What's Inside

Vanilla HTML Templates (No Build Required)

• 3D Experimental Templates (no-react/3D/) - Immersive 3D experiences using Three.js, GSAP, and WebGL shaders
• Landing Pages (no-react/landings/) - High-conversion landing pages with unique visual identities
• Modern Experimental (no-react/modern-experimental/) - Avant-garde designs pushing browser capabilities
• Full Multi-Page Websites (no-react/websites/) - Complete 12-page website templates with about, contact, services, and more

React Templates

• Unique modern Themes (react/) - Ready-to-use templates.

✨ Key Features

• Performance-First: Lighthouse 95+ targets, optimized assets, minimal dependencies
• Mobile-First: Fully responsive designs that work flawlessly on all devices
• Zero Build Step: Vanilla templates work immediately - just open in browser
• Modern Aesthetics: Award-winning design principles, bold typography, smooth animations
• 3D & Shaders: Cutting-edge WebGL experiences with Three.js and custom shaders
• Dark/Light Modes: Many templates include theme toggles
• Accessible: Semantic HTML, proper ARIA labels, keyboard navigation

🚀 Quick Start

Vanilla Templates

Simply open any HTML file in a modern browser. No installation required.

# Example: View a 3D template
open no-react/3D/109330182.html

React Templates

cd react/unique-modern-hero-design
npm install
npm start

📁 Repository Structure

web-templates/
├── no-react/                    # Vanilla HTML templates
│   ├── 3D/                      # 3D experimental templates
│   ├── landings/                # Landing page templates
│   ├── modern-experimental/     # Experimental modern designs
│   └── websites/                # Full multi-page websites
├── react/                       # React-based templates
│   └── unique-modern-*/
├── assets/                      # Shared assets (videos, images)
├── experiments/                 # Experimental files
└── prompt_*.md                  # Template generation prompts

🎯 Design Philosophy

All templates follow these core principles:

1. Performance Matters: Optimized loading, minimal JavaScript, efficient animations
2. Design Excellence: Bold visual language, thoughtful typography, intentional whitespace
3. User Experience: Intuitive navigation, fast interactions, accessible content
4. Modern Standards: Latest CSS features, semantic HTML5, progressive enhancement
5. Real-World Ready: Production-ready code with proper error handling

🔧 Technical Stack

Vanilla Templates

• HTML5 + CSS3 (Custom Properties, Grid, Flexbox)
• Vanilla JavaScript (ES6+)
• External libraries (CDN):
  • Three.js for 3D graphics
  • GSAP for animations
  • Font Awesome for icons
  • Google Fonts for typography

React Templates

• React 18+
• Modern CSS (CSS Modules or styled-components)
• Vite for fast development

📊 Template Generation System

Templates are generated using a seed-based randomness system that ensures unique, reproducible designs. Each template's seed number determines:

• Color palette family
• Typography pairing
• Layout rhythm & spacing
• Animation personality
• Corner treatment & visual texture
• Content density
• Interaction depth
• Accent geometry

See prompt_website.md and prompt_3D.md for the complete generation specifications.

🤝 Usage

These templates are free to use for personal and commercial projects. Attribution is appreciated but not required.

For Developers

• Study the code to learn modern web techniques
• Use as starting points for client projects
• Adapt and customize to your needs

For Designers

• Explore different visual approaches
• See how design decisions translate to code
• Get inspiration for your own projects

📝 License

MIT License - feel free to use, modify, and distribute as needed.

🌟 Contributing

Contributions are welcome! Feel free to:

• Report issues
• Submit new templates
• Improve existing templates
• Suggest enhancements

🔗 Resources

• Three.js Documentation
• GSAP Documentation
• CSS Tricks
• Web.dev Performance Guide

---

Made with ❤️ for the web community

Elevate your web presence with templates that combine stunning visuals with rock-solid performance.