Modules/ PricingFree

3D Cube Pricing Showcase

Interactive 3D cube where each face reveals a different pricing plan. Built with Three.js React Three Fiber, featuring smooth auto-rotation, hover-to-pause, and click-to-navigate between plans.

Install

npm install three @react-three/fiber @react-three/drei

Usage guide

## Usage Guide\n\n### Cube Navigation\n- Click "Auto" for automatic rotation\n- Click a plan name to snap that face into view\n- Hover over the 3D canvas to see the lighting effects\n\n### Customizing Plans\nEdit the `PLANS` array in both frontend and backend to match your offerings. Each face shows the plan name, price, and features.\n\n### Auto-Rotation\nWhen `activeFace` is -1, the cube auto-rotates. The rotation speed is controlled by `delta * 0.3` in the useFrame callback.