Technical Specification: Free Online Rubik's Cube Scrambler & 3D Visualizer

Overview

A high-performance, single-file browser application that acts as a random-state Rubik's Cube scramble generator and 3D visualization tool. The application provides an interactive 3D cube model that reflects the generated scramble, allowing users to verify and study specific move sequences.

Technical Architecture

• Single File Structure: All HTML, CSS (Tailwind CDN), and JavaScript (Three.js CDN) must be contained within a single .html file.
• Rendering: Utilize three.js to render a interactive 3D Rubik's Cube.
• State Management: Application state (current cube orientation, scramble notation) must be held exclusively in-memory. No localStorage, sessionStorage, or cookies permitted due to sandboxing.
• Responsiveness: The UI must adapt from desktop to mobile screens using Flexbox/Grid via Tailwind CSS.

Core Feature List

1. Random Scramble Generator: Generates valid 20-move scrambles compliant with WCA regulations.
2. Interactive 3D Viewport: Uses three.js to render a 3x3x3 cube. Users can rotate the cube (orbit control) using mouse drag or touch gestures.
3. Move Playback: Buttons to apply scrambles step-by-step or automatically animate the scramble sequence.
4. Reset Function: Instantly resets the cube to the solved state.
5. Notation Display: Displays the current scramble algorithm in a clear, monospaced font.

User Interface Design

• Aesthetic: Modern, light-mode "SaaS" aesthetic. Use a clean white background (bg-gray-50), soft drop shadows for cards (shadow-sm, shadow-md), and professional blue/gray accents.
• Layout:
  • Header: Contains the tool title and a simple "How to use" icon.
  • Main Viewport: A centered, large 3D canvas area.
  • Control Bar: Positioned below the canvas, containing 'Generate New', 'Play/Pause', 'Reset', and 'Speed Control'.
  • Notation Box: A large, read-only text area displaying the generated algorithm.
• Micro-interactions: Use CSS transition on all buttons for hover effects (scale-up slightly, opacity changes).

Color Palette

• Background: #F9FAFB (Gray 50)
• Primary Accent: #2563EB (Blue 600) for primary buttons.
• Surface: #FFFFFF (White) for card backgrounds.
• Text: #1F2937 (Gray 800) for primary text, #6B7280 (Gray 500) for helper text.

Development Directives

• No External Popups: Do not use alert(), confirm(), or prompt(). If interaction is needed (e.g., reset confirmation), build a custom modal using HTML/CSS z-index.
• CDN Policy: Use reliable CDNs for three.js and tailwindcss (e.g., unpkg or cdnjs).
• Constraint Compliance: Explicitly ensure the app is self-contained. No server-side code. All math and visualization logic happens in the browser's main thread.