Iris

Build a fullscreen preloader called Iris.

Centre a circle about 58% of the stage's smaller dimension on a near-black background, outlined with a one-pixel dashed white border at 20% opacity, turning slowly a full rotation every 12s. Inside it, inset 12%, place six petals, and pin a small accent-coloured dot at the exact centre.

Build each petal as two nested elements, and this is the part that matters. The outer element is inset to fill the area and carries only a static rotation of its index times 60 degrees. The inner element is the petal itself, half the width, centred, with its top-right and bottom-left corners fully rounded to make a leaf shape in white at 85% opacity, and it owns the animation. Keeping the static rotation and the moving transform on separate elements is what stops them overwriting each other, since transform is a single property and the last declaration wins.

Animate the petal over 4s on cubic-bezier(0.76, 0, 0.24, 1): rest closed over the centre until 8%; swing out to translate 46% and -46% with a 50-degree rotation at 0.62 scale by 46%; hold open until 62%; return home by 96%.

Run all six in sync. A real shutter moves as one mechanism, so a stagger here reads as a mistake rather than as craft.

Loop forever. Under prefers-reduced-motion, hold the petals open.