Interactive

Junni Tile Flip Board

by Vanguardia · motionprompts.dev

A full-screen 6x6 grid of 3D tiles, each showing a slice of a shared image split by background-position. Hovering a tile triggers a GSAP timeline that spins it a full turn on rotateX with a column-based rotateY tilt; a 'Flip Tiles' button flips the whole board with gsap.to and a random stagger, swapping between the front and back images. A fixed grid overlay highlights cells under the cursor on mousemove.

Type: Web motion
Framework: GSAP
Trigger: hover
Duration: 0.25–1s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

hover-triggered 3D tile flips with per-column tilt, random-stagger board-wide flip, plus a CSS-transition cursor grid highlight

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,952 charsCustomize

# Tile Flip Board — full-screen 6×6 grid of 3D tiles, hover spin + board-wide flip reveal

## Goal

Build a full-viewport **6×6 grid of 3D flip tiles**. Each ti…

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.