Put your app in the notch.

import { useEffect, useState } from 'react'
import { NotchActivity, notch } from 'cove-ui/react'

const tracks = [
  { title: 'Glass Harbor', artist: 'Lumen Coast', colors: 'from-orange-400 via-pink-500 to-purple-500' },
  { title: 'Low Tide', artist: 'Marina Vale', colors: 'from-sky-400 via-blue-500 to-indigo-600' },
  { title: 'Salt & Signal', artist: 'The Breakwaters', colors: 'from-emerald-400 via-teal-500 to-cyan-600' },
]

export default function NowPlaying() {
  const [index, setIndex] = useState(0)
  const [playing, setPlaying] = useState(true)
  const [progress, setProgress] = useState(0.3)
  const track = tracks[index]

  useEffect(() => {
    if (!playing) return
    const id = setInterval(() => setProgress((p) => Math.min(1, p + 0.005)), 250)
    return () => clearInterval(id)
  }, [playing])

  const skip = (step: number) => {
    const next = (index + step + tracks.length) % tracks.length
    setIndex(next)
    setProgress(0)
    setPlaying(true)
    notch.peek(tracks[next].title, { description: tracks[next].artist })
  }

  return (
    <NotchActivity
      id="now-playing"
      leading={<Artwork colors={track.colors} size={20} />}
      trailing={<Bars playing={playing} />}
      expanded={
        <div className="grid w-72 gap-3">
          <div className="flex items-center gap-3">
            <Artwork colors={track.colors} size={48} />
            <div className="flex-1">
              <p className="text-sm font-semibold">{track.title}</p>
              <p className="text-xs text-white/50">{track.artist}</p>
            </div>
            <Bars playing={playing} />
          </div>
          <div className="h-1 overflow-hidden rounded-full bg-white/15">
            <div className="h-full bg-white/80" style={{ width: `${progress * 100}%` }} />
          </div>
          <div className="flex justify-center gap-6">
            <Control label="Previous" onClick={() => skip(-1)} d="M11 12 20 5v14zM2 12l9-7v14z" />
            <Control
              label={playing ? 'Pause' : 'Play'}
              onClick={() => setPlaying(!playing)}
              d={playing ? 'M6 4h4v16H6zM14 4h4v16h-4z' : 'M7 4v16l13-8z'}
            />
            <Control label="Next" onClick={() => skip(1)} d="M13 12 4 5v14zM22 12l-9-7v14z" />
          </div>
        </div>
      }
    />
  )
}

function Control({ label, d, onClick }: { label: string; d: string; onClick(): void }) {
  return (
    <button aria-label={label} onClick={onClick} className="grid size-8 cursor-pointer place-items-center rounded-full hover:bg-white/10">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d={d} />
      </svg>
    </button>
  )
}

function Artwork({ size, colors }: { size: number; colors: string }) {
  return <div className={`bg-gradient-to-br ${colors}`} style={{ width: size, height: size, borderRadius: size * 0.22 }} />
}

function Bars({ playing }: { playing: boolean }) {
  const [t, setT] = useState(0)
  useEffect(() => {
    if (!playing) return
    const id = setInterval(() => setT((t) => t + 0.1), 50)
    return () => clearInterval(id)
  }, [playing])

  return (
    <div className="flex h-4 items-center gap-0.5">
      {[0, 1, 2, 3].map((i) => (
        <span
          key={i}
          className="w-[3px] rounded-full bg-pink-500"
          style={{ height: playing ? 4 + 10 * Math.abs(Math.sin(t * 3 + i)) : 3 }}
        />
      ))}
    </div>
  )
}

<Notch trigger="hover" />

<NotchActivity
  width={360}
  height={180}
  radius={26}
  expanded={<MyView />}
/>

notch.peek('Copied to clipboard')