Detachable island
motion
useDragControls
useMeasure
tailwind
react
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.