Developed by: Ekene Cynthia Nwume
Tech Stack: JavaScript (ES6+), CSS3, Safari WebExtension API
Most productivity tools are about pushing harder—more KPIs, faster metrics, tighter deadlines. Pippin is different. Pippin is a tiny, supportive amphibian who lives in the corner of your Safari browser. He doesn't care about your Jira tickets; he cares about you. Whether you're debugging deep into the night or writing a thesis, Pippin is there to make sure you don't forget your humanity in the middle of the code.
Pippin isn't just a static image. He has a "Biological Clock" and a reactive brain:
- Time-Awareness: He knows the time of day. He’ll greet you with a "Good Morning" and nudge you when it’s time for breakfast, lunch, or dinner.
- Health Nudges: He tracks how long you've been on a single tab. If you've been "doom-scrolling" or working for 30 minutes straight, he’ll suggest a screen break or a water refill. 💧
- Mood Boosts: Every 10 minutes, he shares a random affirmation or a cozy "idle thought" to keep your spirits high.
- Glow State: When you're active on a page, Pippin "wakes up" with a soft pink glow and a subtle bounce.
While Pippin looks simple, making a "Universal" browser buddy meant solving some tricky web development hurdles:
- The "Universal" Scroll Fix: Standard scroll listeners often fail on complex apps like ChatGPT or Gemini because they use nested containers. I implemented a Capture Phase event listener to ensure Pippin "overhears" scrolling anywhere on the page.
- Mutation Observation: For apps that swap content without traditional scrolling (like Google Docs), I utilized a
MutationObserverto track DOM changes, keeping Pippin responsive in every environment. - Performance First: Built with asynchronous debouncing and CSS cubic-bezier transitions to ensure Pippin remains lightweight on system resources.
Pippin’s world is built on a "Soft Mode" aesthetic.
- Elegant Transitions: Smooth, non-intrusive animations to reduce digital anxiety.
- Ghibli-Inspired Vibes: A focus on cozy, bright, and feminine-coded design elements.
- Dynamic Feedback: A custom "Soft Glow" filter applied during user interaction.
- Clone this repository.
- Open the project in Xcode.
- Build and Run the
TinyFrogBuddytarget. - In Safari, go to
Settings > Extensionsand enable Tiny Frog Buddy. - Pro Tip: Ensure 'Allow Unsigned Extensions' is toggled in the Safari Develop menu!
content.js: Pippin’s "Brain" (Logic, Timing, and Observers).style.css: The "Vibe" (Animations, Layout, and the Pink Glow).manifest.json: The "Blueprint" (Extension permissions and configuration).
"Not every tool has to optimize a bottom line. Some tools just make your day 2% better." 🎀