A cicada,
generated from code.

The detail that sells it is not the geometry.

• Real cicadas beat their wings at roughly 60–120 Hz. At that rate on a screen the wings vanish into a blur, so the default here is 14 Hz — slow enough to read as a wing, fast enough to read as flight. Push the slider up to see why nobody animates it accurately.
• The wing pivots at the shoulder, not at its centre. Each wing sits in its own group positioned at the wing root; rotating that group is what makes the stroke look hinged.
• Feathering is the detail that sells it. The wing twists on rotation.z a quarter-cycle out of phase with the up/down stroke, the way a real wing changes angle of attack as it reverses.
• The body bobs at twice the wingbeat — one dip per power stroke — and the abdomen trails slightly behind the body.
• Flat shading is the whole aesthetic. Every surface uses flatShading: true with low segment counts, so the facets are deliberate rather than a compromise.

Geometry

procedural, no asset

Library

Three.js r128 (CDN, SRI)

Shading

flat, low segments

Controls

orbit · zoom · wingbeat

Readout

live triangles and fps

The fps and triangle counters are measured in the running loop, not written by hand. If your device drops below a usable frame rate, that number is the honest report.

All labs