Velocity UI
Loading…
Menu

Dynamic Island

A fully interactive, pixel-perfect recreation of the Dynamic Island interface. Features 11 unique states including AirDrop, Maps Navigation, Music Player, Call, Timer, and more, all powered by Framer Motion for fluid spring animations.

Installation

Add this component to your project using the CLI:

terminal
npx vui-registry-cli-v1 add dynamic-island

Source Code

dynamic-island.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

timer.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

ring-silent.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

airdrop.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

call.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

record.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

music.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

airdrop-mini.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

calling.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

find-my.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Source Code

navigation.tsx

Premium Source Code

Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.

Premium Only

Get Premium

Dependencies

  • framer-motion: latest
  • lucide-react: latest
  • canvas-confetti: latest
  • @types/canvas-confetti: latest

Props

Component property reference.

NameTypeDefaultDescription
classNamestringundefinedAdditional CSS classes to apply to the container.
defaultStateIslandState'idle'The initial state of the Dynamic Island. Options: 'idle' | 'airdrop' | 'timer' | 'ring' | 'silent' | 'call' | 'calling' | 'record' | 'music' | 'airdrop-mini' | 'find-my' | 'navigation'
Context Worth Keeping In Orbit

Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.

I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.

I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.