Designely Studio

Animation

3D Cube

An interactive 3D cube component that transforms your portfolio into an engaging visual experience. Each of the six faces displays a 3x3 grid of project images, creating a Rubik's cube-style portfolio showcase.

Features

  • Automatic rotation — smooth continuous spin on load

  • Drag interaction — users can grab and spin the cube in any direction

  • Physics-based momentum — cube continues rotating after release with natural easing

  • Fully customizable — replace images with your own projects

  • Responsive — scales to fit any viewport

  • No dependencies — built with pure CSS 3D transforms, no WebGL or external libraries



What's included

  • 6 cube faces, each with 3x3 image grid (54 image slots total)

  • Auto-rotate animation

  • Drag-to-spin interaction with momentum

  • Customizable rotation speed

  • Adjustable cube size




How to customize

  1. Replace placeholder images with your portfolio work

  2. Adjust cube dimensions via variables

  3. Change rotation speed and direction

  4. Toggle auto-rotate on/off

New components, straight to your inbox

CONTACT

hello@designely.studio

© 2026
Designely Studio · Manchester, UK

New components, straight to your inbox

CONTACT

hello@designely.studio

© 2026
Designely Studio · Manchester, UK

New components, straight to your inbox

CONTACT

hello@designely.studio

© 2026
Designely Studio · Manchester, UK

New components, straight to your inbox

CONTACT

hello@designely.studio

© 2026
Designely Studio · Manchester, UK