Pulse

A premium Music OS for your browser.
Control YouTube Music & Spotify from any tab, with a Dynamic Island, a full Music Hub, and a living waveform visualizer.

---

What is Pulse?

Pulse is a browser extension that turns your Chrome into a Music Operating System. Instead of hunting through 50 open tabs to find your music, Pulse gives you an always-visible Dynamic Island overlay and a full-featured Music Hub — all with polished glassmorphism, smooth Framer Motion animations, and a design language inspired by Apple Vision Pro.

Pulse natively detects your active YouTube Music or Spotify tab and bridges the gap between them — giving you unified control from anywhere in your browser.

---

Features

Dynamic Island

• Compact pill floats on every page — shows track name, artist, waveform, and controls
• Expands on click into a full player with a living waveform visualizer, 100px album art, and aligned controls
• Colors dynamically adapt between YT Music (pink/purple) and Spotify (green)

Music Hub

• Discover Tab — CSS Grid layout of your top playlists, mood mixes, and recently played
• Queue Tab — See and jump to any track in your current queue
• Settings Tab — Theme, accent color, overlay position, audio quality, and more
• Floating Media Controller — Always-visible bottom player bar with seek, shuffle, repeat
• Spotlight Search — Command-palette-style search bar with ⌘K shortcut
• Service Switcher — Toggle between YouTube Music and Spotify; entire UI color system adapts instantly

ALSRYiX Desk Pet Integration

• Real-Time Sync — Pulse broadcasts the current playback state (track, artist, artwork) locally via WebSockets.
• Interactive Speech Bubble — When music is playing, clicking your ALSRYiX desk pet brings up a native mini-player inside its speech bubble.
• Two-Way Control — Control YouTube Music playback (Play/Pause, Next/Prev) directly from the desk pet widget without opening the browser.

Player Screen

• Full 600×500 popup with large album art, animated waveform bars, and gradient progress bar
• Shuffle, repeat, like, volume — all controls in perfect alignment

---

Tech Stack

Layer	Technology
Extension Framework	Plasmo (Chrome MV3)
UI	React 18 + TypeScript
Animations	Framer Motion
State	Zustand (with localStorage persistence)
Data Fetching	TanStack Query (React Query)
Monorepo	Turborepo + pnpm workspaces
Styling	Vanilla CSS + Inline Styles

---

Project Structure

Pulse/
├── apps/
│   └── extension/          # Plasmo Chrome Extension (MV3)
│       ├── src/
│       │   ├── popup.tsx           # Root popup shell + background effects
│       │   ├── background.ts       # Service worker — tab detection, message routing
│       │   ├── contents/           # Content scripts injected into YT Music / Spotify
│       │   ├── components/
│       │   │   ├── DynamicIsland.tsx   # Floating overlay player
│       │   │   ├── MusicHub.tsx        # Full hub — discover, queue, settings
│       │   │   └── PlayerScreen.tsx    # Expanded popup player
│       │   ├── stores/
│       │   │   ├── playerStore.ts      # Playback state, controls
│       │   │   ├── uiStore.ts          # Island mode (compact / expanded / hub)
│       │   │   └── settingsStore.ts    # User preferences
│       │   └── services/
│       │       └── ProviderManager.ts  # YT Music + Spotify API abstraction
│       └── assets/                 # Extension icons
├── packages/
│   ├── types/              # Shared TypeScript interfaces (Track, PlaybackState…)
│   ├── youtube-sdk/        # YouTube Music DOM scraper & API wrapper
│   ├── spotify-sdk/        # Spotify Web API wrapper
│   ├── shared/             # Shared utilities
│   ├── hooks/              # Shared React hooks
│   ├── ui/                 # Shared UI primitives
│   └── config/             # Shared tooling configs (ESLint, TS…)
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

---

Getting Started

Prerequisites

• Node.js v18+
• pnpm (npm install -g pnpm)

Development

# 1. Clone the repo
git clone https://github.com/Abhishek-047/Pulse.git
cd Pulse

# 2. Install all dependencies (monorepo)
pnpm install

# 3. Start dev server
cd apps/extension
pnpm run dev

Then load the extension in Chrome:

1. Open chrome://extensions/
2. Enable Developer Mode (top-right toggle)
3. Click Load unpacked
4. Select apps/extension/build/chrome-mv3-dev

Production Build

cd apps/extension
pnpm run build
# Output: apps/extension/build/chrome-mv3-prod

---

Roadmap

The current version is v0.1 — Foundation. Below is what's coming next:

v0.2 — OAuth Integration & Unified Custom Playlists

• Spotify OAuth Login — Users can connect their Spotify account to load their personal playlists, liked songs, and recommendations directly within the extension.
• YouTube Music Login — Connect your Google account to seamlessly access your personal YouTube Music library and playlist history.
• The Ultimate Custom Playlist — Pulse will act as a bridge between the two platforms. By fetching songs from your Spotify and YouTube Music accounts, the extension will combine them into a single, unified, custom playlist that you can play directly from the extension.

v0.3 — Social & Polish

• Smart Lyrics — Inline lyrics synced to the current playback position.
• Share a Vibe — Share a cross-platform playlist as a public link.
• Firefox Support — Port to Firefox (MV2 + MV3).

---

Contributing

Contributions are welcome — whether it's a bug report, a design improvement, or a new feature.

1. Fork the repo
2. Create your feature branch: git checkout -b feature/your-feature-name
3. Commit your changes: git commit -m 'feat: add your feature'
4. Push to the branch: git push origin feature/your-feature-name
5. Open a Pull Request

Please follow Conventional Commits for commit messages.

---

License

MIT © Abhishek

---

_{Built with obsession for music lovers who live in their browser.}