Move your cursor, or tap anywhere on a touch screen, to give the monarchs a place to land. They take their own winding paths to get there, then fold their wings into a little cluster of autumn leaves. Choose another spot and watch them take flight again. The butterfly at the side pauses the experiment; the buttons below change the flock size and butterfly size.
How It Works
This is a test of GPT 6 Astra, and another entry in my cursor experiments, following Cursor Ivy and Cursor Fluid. The idea this time was to give the cursor some company: butterflies that take a moment to catch up and settle down.
I supplied a monarch photograph and used the img2threejs skill to guide a procedural reconstruction. The butterfly is built in code: pointed forewings, rounded hindwings, a dark body, and curved antennae.
Each butterfly has a slightly different size and wingbeat. Each one chooses its own waypoints and flies at a limited speed, so the flock doesn’t move as one with the cursor. When it stops, their paths narrow toward individual landing spots on an invisible rounded perch. They bank and turn in three dimensions, arrive at different times, and fold their wings outward from the perch into a little leaf-like roost. The next movement opens their wings and draws them back into flight.
A Small Astro Experiment
The controls are a native Astro component. The post renders as HTML, and a small browser script loads the existing Three.js dependency I have here for the butterflies. There are no new packages, downloaded models, or animation libraries. The butterflies share their geometry and materials, and the animation loop stops once the whole group has landed.
The small sidebar controls pause the experiment and change the number or size of the butterflies. On smaller screens they sit in the bottom corner, with larger touch targets. The overlay lets clicks pass through, so links and text underneath still work. Reduced motion keeps the butterflies off. On mobile, tap a destination to send them there; swiping still scrolls the page.
Footprint
Built with about 2M tokens, mostly cached context, at an estimated $4 in standard API costs. The experiment’s JavaScript payload is about 161 KiB with gzip (630 KiB uncompressed), including Three.js. Astro keeps the component specific to this post, and the simulation loads only when enabled. No new packages or runtime AI calls.