LeaddeOpen Lab
Three.js · HTML

Three.js Rubik’s Cube Animation

Animate a 3D Rubik’s cube scrambling and solving in one HTML file with Three.js. Get the shared prompt, timing and setup notes.

Short creator preview · no audioOriginal post by @dayvanxd ↗

The shared prompt

Build "Rubik's Cube", a single self-contained HTML file, three.js r160 only. A glossy, realistic 3x3 Rubik's cube in a dark studio with soft lighting and a subtle shadow or reflection. Standard colors. Layers must really rotate. 0-1.5s solved cube turning, 1.5-5s it scrambles itself with 20 seeded random turns, 5-14s it solves itself with every turn animated (any method allowed, including undoing the scramble), 14-15s a small celebration. Slow cinematic camera, no UI.
Full shared prompt · English · View prompt on GitHub ↗

Make this prompt yours

Suggestions from Leadde Open Lab; the creator’s prompt above is unchanged.

  • Subject: Replace the subject with your product, story or lesson.
  • Palette: Specify your brand colors and visual style.
  • Timing: Set a duration for video, or a loop length for interactive work.
  • Frame: Choose landscape 16:9, portrait 9:16 or square 1:1.

Creator preview

Short creator preview · no audio