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
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.
