Glance

A stunning Apple-style Dynamic Island for your browser. It delivers global media shortcuts, cross-tab PiP, and perfectly synced lyrics for Spotify, Apple Music, and YouTube.

Comment

Inspiration

Apple's Dynamic Island redefined how smartphones surface background activity. But it's locked to iPhone hardware. Browsers — where most people actually listen to music while working — have nothing equivalent. I wanted to build that missing piece: a persistent, beautiful, ambient media layer that lives inside the browser itself.

What It Does

Glance (V1.6) is a browser extension that injects an Apple-style Dynamic Island into every webpage. When no media is playing, it's a tiny idle dot. When music starts, it animates into a pill showing the track name. Hover to expand it into a full control surface with:

  • Album art with real-time color extraction that themes the entire UI
  • Play/pause, skip, shuffle, and repeat controls with platform-native icons
  • A 60FPS progress bar with sub-second accuracy
  • Live synchronized lyrics with word-by-word fill animation
  • Global keyboard shortcuts that work from any tab
  • An AMOLED Black mode that switches to pure black with accent colors
  • Picture-in-Picture teleportation that pops out the video in one click

It works across Spotify, Apple Music, YouTube, and YouTube Music — each with isolated extraction logic tuned to that platform's unique DOM.

The Design Philosophy

Every animation uses iOS spring curves (cubic-bezier(0.32, 0.72, 0, 1)) for that native Apple feel. The idle-to-pill collapse animates max-width, opacity, margin, and padding simultaneously — not display: none — to avoid layout snapping. The play button uses frosted glass (backdrop-filter: blur(8px)) to feel distinct from the flat media controls. Active shuffle/repeat buttons get platform-specific indicators: Spotify gets a dot below the icon, Apple Music gets a color tint, YouTube gets its native styling.

The lyrics panel uses a vertical blur mask (mask-image: linear-gradient(...)) so lyrics fade in at the top and bottom, keeping focus on the active line. Non-Latin lyrics (Korean, Japanese) get an instant Romanization overlay via Google Translate.

How I Built It

AI tools (Antigravity 2.0, Claude) generated the code syntax. I directed all product decisions, architecture, and debugging. Key challenges I personally solved:

  • The PiP teleportation system — browsers block background PiP requests, so I engineered a tab-switch-inject-switch-back pipeline
  • Apple Music's Content Security Policy blocking all script injection — solved via Firefox's wrappedJSObject and Chromium's world: 'MAIN' execution contexts
  • Host CSS bleeding — sites like YouTube and GitHub apply global CSS resets that broke the island's layout. Fixed with surgical !important resets on every UI element

The entire UI is built with pure vanilla JS and CSS — zero frameworks — for maximum rendering performance.

What's Next

Chrome Web Store publication, Web Audio API real-time visualizer, and a cascading lyrics fallback system querying additional providers.

Built With

Share this project:

Updates

Submission history