ScrollBud

🎯 Inspiration

I noticed that reading manga (or any long‑scroll webcomic) can be a pain when you’ve got a trackpad, a slow scroll wheel, or you just want to lean back and relax. Most extensions felt clunky or offered one‑size‑fits‑all speeds. I wanted to build something that’s like your reading buddy: smooth, adjustable on the fly, and disappears when you don’t need it—so you can just enjoy the story. 🛠️ What it does

ScrollBud is a cross‑browser extension that:

Auto‑scrolls your manga/comic pages at a speed you set.

Pauses automatically when it detects dense content (so you can catch every panel).

Jumps to the next chapter or page when you reach the end.

Lets you toggle direction, speed, and pause thresholds in real time via a compact popup UI.

Syncs your settings across devices (free tier covers basic scroll; Premium unlocks cloud sync & custom presets).

🚀 How we built it

Extension framework: WebExtension API for Chrome & Firefox compatibility

Scroll logic: Content scripts that measure DOM layout and adjust window.scrollBy() over requestAnimationFrame() for buttery‑smooth motion

Backend & sync: Supabase for user auth, profile settings, and real‑time syncing of presets

Payment & billing: Stripe integration to manage subscription tiers (free vs. Premium)

Analytics & logging: Google Analytics to track engagement; Sentry for error monitoring

UI & tooling: Plain HTML/CSS + minimal JS for the popup, plus a lightweight React dashboard for advanced settings

⚠️ Challenges we ran into

Project kickoff clarity: Figuring out exactly which features to include in the MVP (free vs. Premium, cloud sync scope) took a bit of back‑and‑forth.

Content detection: Teaching the scrolling script to “see” headers, footers, and images so it only pauses at the right spots was trickier than expected.

🏆 Accomplishments that we’re proud of

Reader‑first experience: Users can tweak scroll speed and direction in real time, making ScrollBud feel like a natural extension of their reading pace.

Seamless sync: Settings follow you across browsers and devices without any extra login friction (Premium subscribers love this!).

Lightweight & reliable: Under 100 KB unpacked, and it hits 99.9% uptime—so it loads instantly and just works.

💡 What we learned

Leveraging online resources (Supabase docs, Stripe examples) can drastically speed up feature builds.

Throttling vs. smooth animation: Fine‑tuning the balance between performance and fluidity was a great deep dive into requestAnimationFrame() best practices.

User research matters: Early feedback on pause‑threshold settings helped us iterate faster and avoid building unused options.

🔭 What’s next for ScrollBud

Drag‑and‑drop scroll presets: Letting users visually arrange their favorite speed/pause combos.

Export to PDF: Turn any chapter into a printable, self‑advancing slideshow.

Invite & share: Social links so readers can recommend ScrollBud and get referral perks.

Advanced analytics: Give users insights into their reading habits—like “you scrolled 100 chapters this month!”

Built With

• nextjs
• react
• supabase
• tailwindcss
• typescript