HyperFrames 3D card scene prompt — CSS 3D cards

<direction> An 8-second CSS 3D card scene, 1280x720 landscape. A perspective stage holds three cards labelled SORT, SEARCH, SHARE. On their beats, each card flips 180° on the Y axis: the front shows the verb big; the back shows one honest line about what the verb does. The cards also idle at a slight rotateX so the scene reads as 3D even between flips. Brand line: FLOWBASE CARDS. Banned: WebGL or any external 3D library, glows, gradients, card art/photos, more than three cards, flips so fast the back text cannot be read (each back holds ≥1.2s). </direction> <structure> Beat 1 (0.4s): stage tilts in, cards rise staggered. Beats 2–4 (1.6 / 3.1 / 4.6s): cards flip one at a time, back faces hold. Beat 5 (6.4s): brand line fades under the stage. Hold to 8s. </structure> <build> One HyperFrames composition, seek-driven GSAP. Cards use preserve-3d with backface-visibility hidden on both faces; GSAP animates rotationY on the card wrapper only. </build> <gotchas> The automated layout inspector reports content_overlap on the two faces of every card for the whole film. It is a false positive — backface-visibility means only one face can ever be visible — and the snapshots prove the fronts and backs read cleanly. Document it; do not 'fix' a correct scene. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.