junhoyeo / iphone

🏝️ iPhone 14 Pro with dynamic island, on the web.

@junhoyeo/iphone

🏴‍☠️ @junhoyeo/iphone

🏝️ iPhone 14 Pro with dynamic island, on the web.

Warning
This package is under rapid development 🛠

yarn add @junhoyeo/iphone

import { Phone, type GridItemProps } from '@junhoyeo/iphone';

import '@junhoyeo/iphone/dist/style.css';

const APPS: GridItemProps[] = [];
const DOCK: GridItemProps[] = [];
const BACKGROUND_IMAGE_URL: string = '';

<Phone
  appBarBrightness="dark"
  frameColor="purple"
  transformScale={1}
  apps={APPS}
  dock={DOCK}
  backgroundImage={BACKGROUND_IMAGE_URL}
  dynamicIslandProps={{ ... }}
>
  <AppBar />
  <Screen>
    <Iframe src="/demo" allowTransparency />
  </Screen>
</Phone>

• Special thanks to Sunghyun Cho(@anaclumos)! The implementation of Dynamic Island was made possible by his work.
• If you found this project interesting, please consider following me(GitHub/Twitter) or ⭐️ giving it a star.

Powered by

• Fork of anaclumos/dynamic-island
• picturepan2/devices.css

Powers

• junhoyeo/junho.io
• junhoyeo/paracosm