inlet

Examples

Pick one and it runs in the notch at the top of this page. The code is the whole thing.

Showing Now Playing. Hover the notch at the top to open it.

import { useEffect, useState } from 'react'
import { NotchActivity, notch } from 'inlet-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"
      label="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>
  )
}

import { useEffect, useState } from 'react'
import { NotchActivity, notch } from 'inlet-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"
      label="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>
  )
}

Usage

import { Notch, NotchActivity, notch } from 'inlet-ui/react'

export function App() {
  return (
    <>
      <Notch />
      <NotchActivity
        leading={<AlbumArt />}   // left of the camera
        trailing={<Waveform />}  // right of the camera
        expanded={<Player />}    // on hover
      />
      <button onClick={() => notch.peek('Copied to clipboard')}>Copy</button>
    </>
  )
}

States and size

The notch is always in one of four states. A message isn't a separate thing: it's the notch peeking. Pick a state and the notch at the top goes there; the green dot follows what it's really doing. The expanded notch fits its content by default, or give it an exact width, height and radius.

Width360Height180Radius26

Opens on

<Notch trigger="hover" />

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

Peek

Call it from anywhere: a button, a background job, the main process. A peek can carry a button (Undo), a reply field, or a level that moves in place.

notch.peek('Copied to clipboard')

Menu bar

A wide notch would cover the menus and status items next to the camera. inlet measures the free space on each side: with avoid a side that doesn't fit is dropped, with overlay the notch draws over them. Status items need no permission; app menus need Accessibility access. The icons now in this page's menu bar are measured the same way.

The trailing side has no room next to the notch, so it is dropped. Nothing is covered.

Widen the window to see status items crowd the notch.

On the web it can also work the other way round: wrap your own header in NotchAvoid and it moves out of the notch's way.

// The default: the compact notch never covers menu bar items.
<Notch menuBar="avoid" />   // or "overlay"

Split island

By default the notch shows one activity, the one that matters most. Turn on split and a second can sit in a small bubble beside it instead of waiting behind, like the iPhone's Dynamic Island. Like a compact side, the bubble steps aside for menu bar items.

Focus Timer takes the notch; Now Playing moves to a bubble.

// Two activities at once: the second sits in a bubble beside the notch.
// Click it to swap them, or swipe sideways on the notch.
<Notch split />

// Or switch from code:
notch.show('timer')   // put one first
notch.cycle()         // move to the next

Drag and drop

Drag files, links or text onto the notch and it opens into a drop target. Any activity can take drops; in Electron you get the paths on disk, and the main process hears about them too. Try it on the notch at the top of this page.

Drag me to the notchor drop a file from your desktop.

// Drag files, links or text onto the notch. While something is over it,
// the notch opens into a drop target.
<NotchActivity
  label="Shelf"
  dropLabel="Drop to shelve"
  onDrop={({ files, paths }) => notch.peek(`Shelved ${files.length} files`, { type: 'success' })}
  expanded={<ShelfView />}
/>

Style

Fill the notch with any colour or gradient, and give peeks an accent. The band across the camera always stays black, because the hardware is. In SwiftUI it can also be a real material that blurs the desktop behind it.

Background

Accent

// The band across the camera stays black, like the hardware.
<Notch background="linear-gradient(#1e1b4b, #4338ca)" accent="#ffd60a" />

Motion

Opening overshoots a touch so it feels alive; closing settles without one so it feels decisive. Shape either curve and the notch at the top uses it straight away. Both platforms run the same physics, so the numbers you land on mean the same thing in SwiftUI.

OpenResponse0.38Damping0.80

CloseResponse0.30Damping1.00

<Notch
  spring={{
    open: { response: 0.38, dampingFraction: 0.8 },
    close: { response: 0.3, dampingFraction: 1 },
  }}
/>

Many components, one notch

Any component can start an activity. The highest priority is shown, and when it ends the notch falls back to the next. On this page, Now Playing is always running underneath the examples.

// Running in the background, low priority.
export function Music() {
  return <NotchActivity priority={0} leading={<Art />} trailing={<Bars />} expanded={<Player />} />
}

Accessibility

Press Tab and the notch at the top takes focus: Enter opens it and moves focus inside, Escape closes it and brings focus back. Every peek is read out by screen readers, and VoiceOver in SwiftUI. Give activities a label so they're announced by name. In SwiftUI, expand(focus: true) hands the keyboard to the notch from a shortcut. With reduced motion on, the springs settle without bouncing.

Put your app in the notch.