Hover effect

Mosaic Flip Hover Effect

by Vanguardia · motionprompts.dev

A 12x9 grid of 3D cube tiles displays an image sliced via per-tile background-position, each tile gently floating on the z-axis in an endless 'breathe' loop. Hovering a project link flips every tile 180deg on rotateY with a center-out grid stagger (power3.inOut), revealing the hovered project's image on the cubes' hidden faces; leaving the list flips back to the default image.

Type: Web motion
Framework: GSAP
Trigger: hover
Duration: 0.3–0.5s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: sine
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap

center-out 3D cube-grid flip on hover (108 tiles, 0.5s power3.inOut, grid-staggered 0.05 each from center), over a perpetual randomized z-drift breathe (0.6-1.4s sine.inOut, self-recursive)

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev21,660 chars

# Mosaic Flip Hover Effect — 3D Cube-Tile Image Reveal

## Goal
Build a dark, full-viewport "spotlight" screen showing a single image rendered as a **12×9 mosai…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.