# Porta-retrato A cube that turns as you drag it, showing a photo or a video on each face. > Porta-retrato is a THM Componentes component that builds a carousel shaped like a 3D cube, with a photo or video on each face. You drag it with the mouse or a finger and it snaps to the nearest face on release; buttons, arrow keys and autoplay turn it too. It is built with CSS 3D, no WebGL. - Category: 3D and space - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/porta-retrato/ ## What it looks like It is a 3D box that turns around one axis, with a photo or a video on each side, like a desktop photo cube. Drag in the direction of the turn and the cube follows your finger or mouse with a springy feel; let go and it snaps to the nearest face. With the previous and next buttons or the arrow keys, each quarter turn starts slowly, speeds up and brakes at the end. The axis can be horizontal or vertical, and the cube cycles through as many items as you like, swapping the hidden back face on every turn. Videos play muted and on a loop. ## You may be looking for this if you asked for something like - “a 3D cube with photos that turns when I drag it” - “show my product from several angles, turning like a box” - “a 3D image carousel I can spin with my finger” - “before and after on the faces of a rotating cube” - “photos on a box that turns like a die, one at a time” - “something like a spinning cube with a video on each side for my portfolio” ## Also known as photo cube, 3D cube slider, rotating cube gallery, spinning product cube, cube rotation effect, draggable 3D cube ## When to use - Showing a product from four angles on a sales page - Before and after for a service, such as a renovation or a cosmetic treatment - A portfolio highlight with photos and short videos - Launch sections that call for a light 3D element without WebGL ## When to avoid - Large galleries where people want to see several photos at once - Images with important text, which distorts during the turn ## How to ask your AI ```text Create a carousel shaped like a 3D cube to show my product from four angles: dragging with a finger or the mouse turns the cube and snaps to the nearest face on release, arrow keys, previous and next buttons, muted looping videos and instant face changes for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Porta-retrato ### Does Porta-retrato work on phones? Yes. Porta-retrato uses pointer events and reserves the touch gesture for itself, so dragging with a finger turns the cube, which snaps to the nearest face on release. In the demo the cube gets smaller on narrow screens. Videos play muted, on a loop and inline on the page. ### Does Porta-retrato respect reduced motion settings? Partly, yes. With reduced motion turned on in the system, Porta-retrato switches faces instantly when the turn comes from the buttons, the arrow keys or autoplay. Dragging still follows the finger, since the person is the one moving the cube. ### Can I control Porta-retrato with the keyboard? Yes. Porta-retrato takes focus with Tab and turns with the arrow keys of its axis: left and right for a horizontal turn, up and down for a vertical one. A live region announces the current item and the total, using the image alt text, and the next and prev methods let you build your own buttons. ## Related components - [Coreto](https://vibecode.thmtecnologia.com/en/components/coreto/): Photos arranged in a ring, like a cylinder, that you spin by dragging, with inertia and a floor reflection. - [Ciclorama](https://vibecode.thmtecnologia.com/en/components/ciclorama/): Tall image panels arranged in a ring that keeps turning around you and can be dragged by hand. - [Tirinha](https://vibecode.thmtecnologia.com/en/components/tirinha/): Vertical cards in a phone-sized frame that advance on their own, with progress bars at the top and tap to skip. - [Valete](https://vibecode.thmtecnologia.com/en/components/valete/): A card that turns 180 degrees on hover to show its back side, flipping sideways or top to bottom. - [Retoque](https://vibecode.thmtecnologia.com/en/components/retoque/): Two stacked images or screens and a line in the middle you move with the mouse or a finger to compare. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).