add right

src/app/page.tsx

@@ -10,12 +10,11 @@ export default function Home() {
             with Reinforcement Learning
           </div>
           <div className="text-gray-700">
-            <a href="https://cross-entropy.ai">
-              https://cross-entropy.ai
-            </a>
+            <a href="https://cross-entropy.ai">https://cross-entropy.ai</a>
           </div>
         </div>
       </div>
+
       <Canvas />
     </div>
   );

src/components/rotation-panel.tsx

@@ -14,10 +14,12 @@ export const RotationPanel = ({ direction, face }: RotationPanelProps) => {
   const position: Record<string, [number, number, number]> = {
     front: clockwise ? [0.5, 0, 1.01] : [-0.5, 0, 1.01],
     back: clockwise ? [-0.5, 0, -1.01] : [0.5, 0, -1.01],
+    right: clockwise ? [1.01, 0, -0.5] : [1.01, 0, 0.5],
   };
   const rotation: Record<string, [number, number, number]> = {
     front: [0, 0, 0],
     back: [0, Math.PI, 0],
+    right: [0, Math.PI / 2, 0],
   };
   return (
     <mesh position={position[face]} rotation={rotation[face]}>

src/components/rubiks-cube.tsx

@@ -28,6 +28,8 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
       <RotationPanel direction="counter-clockwise" face="front" />
       <RotationPanel direction="clockwise" face="back" />
       <RotationPanel direction="counter-clockwise" face="back" />
+      <RotationPanel direction="clockwise" face="right" />
+      <RotationPanel direction="counter-clockwise" face="right" />
     </group>
   );
 };