# Playground

An interactive page for building an island for your own app. Start from a blank activity or any preset, fill each region (compact leading and trailing, minimal, and the expanded leading, center, trailing and bottom) with an icon, text, a progress ring or bar, a timer, a level meter or buttons, pick the accent, and add a second activity to see the split. Buttons fire the engine's real calls: show, update, expand, collapse, long-press, alert, split, unsplit and dismiss. A Motion panel tunes the spring for each transition against the engine's defaults and the simulator's measured values, and the stage switches between light and dark and reduced motion. The whole build lives in the page's URL, so a link shares it.

> For the full documentation index, see [llms.txt](https://islandcn.dev/llms.txt). Every page has a Markdown version: add `.md` to its URL or send `Accept: text/markdown`. To build an island, follow the islandcn agent skill at https://islandcn.dev/.well-known/agent-skills/islandcn/SKILL.md.

The playground has no API of its own. It copies two things: the `npx shadcn@latest add` command for exactly the registry items the build uses, and one file with an `AppIsland` provider (`IslandProvider` with a `motion` prop holding only the springs you changed, and `reducedMotion` if you forced it, plus `<Island placement="viewport" />`), a content function and a hook per activity (`show`, `update`, `alert`, `expand`, `collapse`, `dismiss`, built on `useIslandActions()`), and an example component that shows the build. See https://islandcn.dev/docs/api/use-island.md and https://islandcn.dev/docs/guides/motion.md.