A collection of 50 unique, interactive 3D flower experiences built (vibe-coded) with Three.js. Each flower is a mini art piece with its own visual style, animations, and mood.
- 50 Unique Flowers - From photorealistic roses to quantum superposition blooms
- Dark Luxury Aesthetic - Editorial design with elegant typography
- Fully Responsive - Desktop, tablet, and mobile optimized
- Touch Gestures - Swipe to navigate on mobile
- No Build Step - Pure HTML, CSS, and JavaScript
# Clone the repository
git clone https://github.com/hubshashwat/flowers.git
cd flowers
# Start a local server (Python)
python -m http.server 8000
# Or use any static file server
npx serve .Then open http://localhost:8000 in your browser.
| Category | Examples |
|---|---|
| Nature | Rose, Tulip, Moonflower |
| Physics | Quantum, Magnetic, Wind-Tunnel |
| Materials | Glass, Liquid Metal, Fabric |
| Art Styles | Watercolor, Origami, Wireframe |
| Elements | Fire (Phoenix), Ice, Cloud |
| Sci-Fi | Neon Cyberpunk, Molecular, Meteor |
flowers/
├── index.html # Landing page with flower gallery
├── css/
│ └── style.css # Shared styles for flower pages
├── js/
│ └── utils.js # Three.js utilities
└── pages/
├── photorealistic-rose.html
├── quantum-flower.html
└── ... (50 flower pages)
- Create a new file in
pages/(e.g.,my-flower.html) - Use the existing flower pages as templates
- Add your flower to the
flowersarray inindex.html - Pick a unique emoji and write a short description
See CONTRIBUTING.md for detailed guidelines.
- Three.js - 3D rendering
- Vanilla CSS - Styling (no frameworks)
- Google Fonts - Cormorant Garamond & Inter
MIT License - See LICENSE for details.
Contributions are welcome! Please read our Contributing Guidelines first.
Ideas for contributions:
- New flower concepts
- Visual improvements to existing flowers
- Performance optimizations
- Accessibility improvements
- Documentation
Created with love. Each flower is a small meditation on beauty and code.