Storm in a Bottle is an interactive web experience designed to bring calm, reflection, and a gentle sense of connection. In this tranquil digital sea, users can anonymously cast their thoughts, fears, or worries into the waves by placing them inside floating bottles. As these bottles drift across the screen, others can click to catch one—revealing a shared thought from someone else and receiving a kind, uplifting message in return.

Built entirely with HTML, CSS, and vanilla JavaScript, the experience is self-contained, private, and requires no login or internet connection after loading. Every bottle is temporary, every worry eventually fades, and every message offers a small reminder that no one is alone in what they feel.

With soothing visuals, subtle animations, and a touch of emotional support, Storm in a Bottle is perfect for mindfulness moments, digital art showcases, or quiet browser-based reflection.

Key Features:

• Worry Submission: Users can type their concerns and watch them get sealed in a digital bottle
• Visual Release: Bottles drift across the screen with smooth wave animations
• Catching Bottles: Click floating bottles or use the "Catch a Drifting Bottle" button to receive random supportive messages
• Automatic Bottle Generation: The sea occasionally releases bottles with anonymous worries and encouragement

Design Highlights:

• Stunning gradient background with animated ocean waves
• Glassmorphism design with frosted glass effects
• Smooth animations and hover interactions
• Responsive design that works on all devices
• Calming color palette inspired by ocean themes

• Anonymous worry sharing creates a sense of community
• Supportive messages appear when catching bottles
• Visual metaphor of "letting go" through the drifting animation
• Gentle, non-judgmental interface that encourages emotional release

The widget combines modern web design with meaningful interaction, creating a space where people can both release their worries and find comfort in knowing others share similar struggles. The random pairing of worries with supportive messages helps create unexpected moments of connection and hope.

System Requirements

• Device: Desktop, laptop, tablet, or smartphone
• Operating System: Windows, macOS, Linux, iOS, or Android
• Web Browser: Any modern browser with JavaScript enabled, such as:
  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge
• Internet Connection:
  • Not required after the HTML file is loaded
  • Optional for online hosting

📦 Technical Requirements

• File Type: .html — no installation needed
• No external dependencies:
  • No frameworks (no Bootstrap, jQuery, React, etc.)
  • No backend or server required
• Self-contained: All logic, styling, and content are inside one HTML file

🧠 User Requirements

• Basic typing skills to input a message
• Mouse or touchscreen to click buttons and bottles
• English reading ability to understand shared worries and supportive messages
• No account needed — completely anonymous and private

🌐 Hosting Requirements (Optional)

If you'd like to share it online:

• Can be hosted on any static file host (e.g. GitHub Pages, Netlify, Vercel)
• No database or server setup needed

Just write your worries down and cast them away to send them floating down the ocean and you can also press the catch a bottle button to see what others are writing down which are completely anonymous.