Craft, personalize, and share digital flower bouquets that never wilt.
Experience • Features • Tech • Deploy
Digibouquet is a modern, interactive web platform where people can design expressive floral arrangements, deeply personalize them, and share them instantly with friends and loved ones. Built with pure JavaScript and a focus on smooth drag-and-drop mechanics, the app provides a playful, emotional, and satisfying gifting experience. It’s completely free, requires no water, and the memories last forever.
"For gifting moments that do not fade."
|
Start your arrangement by curating a mood. Choose between vibrant full-color bouquets or sleek monochrome styles depending on your recipient. |
|
|
Select 6 to 10 unique flowers from an expansive library. Not feeling creative? Use quick templates or tap "Surprise Me" for an algorithmic layout. |
|
Drag, drop, arrange, and rotate flowers on a dynamic canvas. The app handles natural z-index layering to make your bouquet look professionally composed. |
|
|
Wrap it up! Add greenery, pick a ribbon, and attach a heartfelt text message. Then instantly download the image, copy it to clipboard, or share a direct link. |
- The Garden: Explore a community gallery of generated bouquets and save your own.
- Local Profiles: Keep an isolated history of everything you’ve created with custom avatars.
- Micro-Interactions: Features a dark/light theme toggle, ambient audio mode, celebratory confetti, and fluid page transitions.
Flawless responsive design for mobile, tablet, and desktop.
Digibouquet is built to be fast, lightweight, and completely decentralized from heavy frameworks.
- Bundler:
Vite 7 - Logic: Vanilla JavaScript (
ES Modules) - Styling: Modern HTML5 + Custom CSS Variables
- Exporting:
html2canvasfor precise screenshot rendering - Routing: Custom Hash-based SPA Router with state transitions
Want to run the garden locally? It takes less than a minute.
- Node.js 18.x or newer
- npm 9.x or newer
# Clone the repository
git clone https://github.com/yourusername/digibouquet.git
# Enter the directory
cd digibouquet
# Install dependencies
npm install
# Start the dev server
npm run devYour app will be running at http://localhost:5173.
npm i -g vercel
vercel login
vercel --prodSet the Build command to npm run build and Publish directory to dist.
- Fully integrated JSON-LD structured data.
- Open Graph imagery, Twitter cards, and semantic HTML structure.
- ARIA accessibility guidelines enforced on custom interactive components.
Built with ❤️ and ☕. Released under the MIT License.