Tools I use: Figma, Claude, Paper, Motion, Tailwind CSS, Swift
PG Gonni
Forlì: 44.2093° N, 12.0673° EMontréal: 45.4905° N, 73.5587° W

PG Gonni

Design Engineer

Experiment

Detachable island

A draggable island that detaches from its container, then snaps back.

Drag outside this area to detachRelease to snap back
Home
Notifications
Messages


Drag the island outside of the container to detach it. Let go before detaching to snap back. Turn on debug to view the drag constraints and drag handle affordance.

I've been infatuated with islands, as they provide a great, malleable surface. They allow AI to live in a layer above the rest of the application, making them ideal for ever present, omnipotent agents. In this case, I wanted to experiment with a draggable island, snapping, and morphing.

In Rauno's course Devouring Details I also learned the importance of ergonomic affordances, so the drag handle uses after:content-[''] to increase its draggable area.

motion
useDragControls
useMeasure
tailwind
react