butterfly museum

The home screen of the "New York Museum of Butterfly" (NMB), an invented museum, built as a single black WebGL hero. A real-time 3D butterfly hangs in the middle of the screen, beating its wings, turning to face the cursor and warming up wherever the cursor passes over its wings, with a glowing trail and bloom. Behind it a strip of glass photo cards travels on a curved orbit, short in the middle and tall at the edges, with rainbow light where the glass bends; it drifts on its own and can be pushed with the wheel or a sideways swipe, with real momentum. Whenever a card reaches the body, that butterfly's colour and shape spread out along the wings in fingers, and the huge name at the bottom and the short description beside it melt letter by letter into the next one: Red Postman, Cobra Atlas, Moon Ghost, Glass Morpho, Indigo Decoy and Torn Comma, each with its own palette. Header links roll their letters up in the current butterfly's colour on hover. While the scene loads, a preloader morphs between butterfly outlines over a progress line, the museum's full name collapses into its initials as the logo, and the 3D butterfly fills the last outline. Every wing, vein and photo is painted from code, so the six butterflies are just shapes and palettes you can edit. Tall screens and phones get their own stacked layout with a full-screen menu, and patches of wing warm up by themselves where there is no cursor.