Skip to content

CaptainThunderbird/ScrawlNSprawl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

127 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📌 Scrawl N Sprawl

By Team Bloomscrollers Turning doomscrolling into bloomscrolling 🌸


📖 Overview

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.

🌱 The Problem

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.

🌸 The Solution

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!

🗺 Core Features

  • 📍 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.

🎧 UX & Interaction Design

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.

🧠 Social Good Impact

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.


🧰 Tech Stack

  • 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

🚀 Demo Flow

  1. Open Map: Land on a grainy, warm-toned campus map.
  2. Add Vibe: Click a location to trigger a "pop" sound and open the scrawl modal.
  3. Personalize: Type a message, choose a color (Pink/Blue/Green), and pick a sticker.
  4. Place: Save to see your note appear with a random "messy" rotation.
  5. Explore: Scroll through the sidebar "Bloom Feed" to jump to other notes.

About

Kindness Map by Bloomscrollers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors