Skip to content
Get Pro
Feedback

Dynamic Island

A black pill that changes shape with what it is showing: compact, expanded with content, or split into two bubbles.

$149 once · every Pro piece

Customize

Width, height and corner radius ride springs; the second bubble buds off the right end through a gooey filter, so the neck stretches and snaps. Content cross-fades through a blur, clipped to the pill as it moves.

Install

npx shadcn@latest add @obsyde/dynamic-island

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { DynamicIsland } from '@/components/obsyde/ember/dynamic-island/DynamicIsland';

export function Example() {
  return (
    <DynamicIsland view="timer" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/dynamic-island/DynamicIsland.tsxcomponent
  • ember/dynamic-island/dynamic-island-demo.cssstyles
  • ember/dynamic-island/dynamic-island.cssstyles
  • ember/dynamic-island/DynamicIslandDemo.tsxdemo
  • ember/kit2-kit/check.cssshared
  • ember/kit2-kit/Check.tsxshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/kit2-kit/kit.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewView'idle' | 'timer' | 'recording' | 'done''timer'
autoplayCycle viewsbooleanfalse