Aki UI

Dynamic Island

ダイナミックアイランド

A pill that reshapes itself around whatever it is showing, and opens further when there is more to say. The shell animates its own layout while the contents cross-fade inside it — animating both together is what stops the pill snapping to its new size before the content has changed. Click it to expand a state that has more detail. Built with Framer Motion layout animations↗↗ and Tailwind CSS.

Aki

Installation

Install the following dependencies:1

npm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

import { AnimatePresence, motion } from "framer-motion"

import { useState, type ReactNode } from "react"

export type IslandState = {

id: string,

label: string,

compact: ReactNode,

expanded?: ReactNode

How to use it3

"use client"

import { DynamicIsland } from "@/components/ui/dynamic-island"

const states = [

{ id: "idle", label: "Idle", compact: <span>Aki</span> },

{

id: "music",

label: "Music",

compact: <span>Nocturne</span>,

Props

DynamicIsland

Name	Default	Description
states	—	IslandState[] The states the island can take
dark	false	boolean Render the dark palette

Name

Default

Description

states

—

IslandState[]

The states the island can take

dark

false

boolean

Render the dark palette

IslandState (type)

Name	Default	Description
id	—	string Stable key for the state
label	—	string Text on the button that selects this state
compact	—	ReactNode What the island shows at rest
expanded	—	ReactNode Optional larger form; the island is only clickable when set