By Team Bloomscrollers Turning doomscrolling into bloomscrolling 🌸
Scrawl N Sprawl is a hyper-local kindness map that provides a digital scrapbook layer over the physical world. Instead of falling into the void of negative news, students can "scrawl" messages of support, gratitude, and joy, letting positivity "sprawl" across campus.
Campus life can be isolating and high-pressure. Many students spend their breaks doomscrolling, which increases anxiety and disconnection. Currently, there is no lightweight, anonymous, location-based space for students to leave small acts of encouragement for others nearby.
We created a digital third-place that acts as a community kindness layer. Students can:
- Leave kind messages on virtual sticky notes.
- Drop hand-drawn doodle stickers.
- Discover pockets of positivity near their current location.
- and most importantly, feel safe!
- 📍 Location-Based Posts: Click the map to drop a note, sticker, photo, or doodle with a unique "taped-on" look and random rotation for an authentic scrapbook feel.
- 🎨 Sticker Tray: A selection of hand-drawn SVG stickers to express feelings without needing to type.
- 🔥 Kindness Heat Glow: Areas with high note density emit a soft visual "warmth" on the map.
- ⏳ Ephemeral Content: All posts (notes, stickers, photos, doodles) expire after 1–7 days to keep the map fresh and the community active.
- ⭐ Bookmarks: Save favorite posts to a personal "Saved" tab that persists even after the post expires on the public map.
- 🛡 Safety First: Built-in keyword filtering and a "positive-only" design (no likes/dislikes/comments) to prevent toxicity.
To win Best UX, we prioritized a tactile, physical aesthetic:
- Paper Textures & Grain: Removing the "flat" digital feel with subtle overlays.
- Washi Tape Effects: Using CSS semi-transparent masking for a hand-applied look.
- Micro-interactions: Spring-physics animations (notes "jiggle" on hover) and soft paper-crinkle sound effects.
Scrawl N Sprawl supports Mental Wellness by facilitating "Micro-acts of Kindness." By grounding users in their physical environment, we promote mindfulness and reduce the stress associated with traditional social media consumption.
- Frontend: Vanilla JavaScript, HTML5, CSS3 (Scrapbook UI System)
- Map: Google Maps JavaScript API / Leaflet.js
- Backend: Firebase Realtime Database (for instant syncing)
- Design: Framer Motion (animations), Google Fonts (Patrick Hand, Gaegu)
- Assets: Transparent Textures, Mixkit SFX, Flaticon SVGs
- Open Map: Land on a grainy, warm-toned campus map.
- Add Vibe: Click a location to trigger a "pop" sound and open the scrawl modal.
- Personalize: Type a message, choose a color (Pink/Blue/Green), and pick a sticker.
- Place: Save to see your note appear with a random "messy" rotation.
- Explore: Scroll through the sidebar "Bloom Feed" to jump to other notes.