# Diorama Scattered photos and shapes that shift at different speeds as the mouse moves, creating depth. > Diorama is a THM Componentes component that scatters photos or illustrations in layers and shifts them as the mouse or a finger moves, each at its own speed, which creates a sense of depth. The motion trails behind smoothly, like objects floating on water, and suits heroes with illustrated compositions, portfolios and launch pages. - Category: Interaction and physics - 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 - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/diorama/ ## What it looks like Picture paper cutouts hung at different heights inside a box: tilt the box and the closest ones travel farther than those at the back. Here, each element gets a depth value, and as the cursor or a finger moves across the screen, they all shift in the direction of the gesture, or the opposite one with negative sensitivity, by distances proportional to that depth. The offset follows the pointer with a soft lag, frame by frame, with no jolts. You position each layer with classes, and the content is up to you. In the demo, eight photos of varied sizes float on a black background around a central title. ## You may be looking for this if you asked for something like - “scattered photos that move when I move the mouse” - “a depth effect at the top of my site with floating images” - “a hero with elements moving at different speeds as the cursor moves” - “that mouse parallax effect agency sites have” - “a photo collage that reacts to my finger on the phone” - “give my homepage a 3D feel without using WebGL” ## Also known as mouse parallax, cursor parallax, parallax hero, floating images, depth effect, layered parallax ## When to use - An agency, studio or portfolio hero with a photo collage - A launch page with layered illustrations - Fashion, food or travel brand sections built on imagery - Welcome screens where the first impression matters ## When to avoid - Pages with forms or long text over the images, where the motion distracts - Compositions with many heavy images that slow down the top of the page ## How to ask your AI ```text Create a hero with mouse parallax: photos and illustrations in layers with different depths that shift smoothly with the cursor or a finger, pausing when the section is off screen, with a static version for reduced motion and optimized images. ``` 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 Diorama ### Does Diorama work on phones? Yes. Diorama also listens to finger movement on the screen, so the layers shift while someone drags or scrolls the page by touch. Without a cursor, the effect only shows during touch and stays still the rest of the time. Set smaller image sizes for narrow screens, as the demo does. ### Is Diorama heavy on the page? It is rated Light in THM Componentes, because it only moves layers with transforms and uses no WebGL. Diorama's animation loop runs all the time while the component is mounted, even off screen, so it is worth asking your AI to pause that loop when the section leaves the viewport. Photo weight is usually the biggest cost. ### How do I control the intensity of Diorama? Diorama has two levers on the container: sensitivity multiplies the offset of every layer, and negative values reverse the direction; easingFactor, 0.05 by default, sets how quickly each layer catches up with the cursor. On each element, the depth prop sets how far it travels: more depth, more motion. ## Related components - [Boia](https://vibecode.thmtecnologia.com/en/components/boia/): Any image or icon starts drifting slowly, rising, sinking and tilting a little, nonstop. - [Deriva](https://vibecode.thmtecnologia.com/en/components/deriva/): An endless wall of photo cards you drag in any direction and open in detail with a single click. - [Crônica](https://vibecode.thmtecnologia.com/en/components/cronica/): A testimonial in large type that appears word by word, with a giant number in the background that follows the mouse. - [Camafeu](https://vibecode.thmtecnologia.com/en/components/camafeu/): A card that tilts with the mouse and lifts its image, title and buttons into layers of depth. - [Alinhavo](https://vibecode.thmtecnologia.com/en/components/alinhavo/): Photos that pop up one after another behind the cursor and quickly fade, like a trail of images. --- 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).