CSS 3D cube gallery

1 test · 1 finished runs (1 agent, 0 raw one-shot) · 1 video

The prompt

[Task] Create a 20-second 3D gallery piece at 1920x1080, 30 fps. A cube shows six code-drawn artworks, one per face, and rotates through them in real perspective before unfolding into a flat grid, under the fictional exhibition title "HEXAD". [Scenes] 1. 0-3 s: A dark, glossy floor and a soft spotlight. The cube materialises edge-first as glowing wireframe lines that fill in face by face. "HEXAD — Six Generative Works" fades in above it. 2. 3-7 s: The cube turns quarter by quarter to show faces 1-3. Each turn uses a spring with a small settle wobble. The current work's title and number appear in a caption bar below. 3. 7-11 s: The camera orbits up and over and the cube tumbles on a diagonal axis to show faces 4-6. The floor reflection follows every move. 4. 11-15 s: A fast, smooth spin of one full revolution with motion-blur trails. It slows into a three-quarter hero angle showing three faces at once, and light sweeps across them. 5. 15-18 s: The cube unfolds along its edges into a cross-shaped net, with faces hinging open in sequence. The net then slides and rearranges into a flat 3x2 grid. 6. 18-20 s: The camera settles straight-on and all six titles appear under their tiles with a stagger. The HEXAD title locks up centred above the grid. [Style] Palette: #0A0A0F void, #E8E4DA gallery white, #FF5A36 vermilion, #2E6BFF cobalt, #FFC845 saffron. Minimal sans captions with wide tracking and small monospaced numbers. Faces get thin bevel highlights, the floor shows a blurred, fading reflection, and a soft spotlight casts a pool of light. Motion uses springs for rotations, ease-in-out for the camera and a 90 ms stagger on the unfold. Artworks (each face animates subtly the whole time): 1. "Orbit" — pulsing concentric rings. 2. "Weave" — Truchet tiles flipping in waves. 3. "Current" — a flow field of curved lines. 4. "Block" — a primary-colour rectangle grid re-dividing itself. 5. "Interference" — two rotating line gratings making moiré. 6. "Drift" — a seeded field of twinkling stars. [Wow] - True 3D perspective, with correct face ordering and lighting that darkens faces turned away from the light. - Live reflections that mirror the animated artworks, not static copies. - The unfold hinges each face around its real shared edge. - Depth parallax between the floor, the cube and floating dust motes. [Rules] - Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts. - Deterministic: no unseeded randomness at render time. - Text must be crisp, spelled correctly and readable at 1080p. - No hard cuts between scenes: every change is a designed transition. - All six artworks keep animating during every rotation and the unfold. [Harness notes] Render the final video to out.mp4 (1920x1080, 20 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.