Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { MosaicFlipHover } from "@/registry/tween/mosaic-flip-hover"
export function MosaicFlipHoverDemo() {
return (
<div className="w-full [font-family:ui-monospace,SFMono-Regular,Menlo,monospace]">
<MosaicFlipHover />
</div>
)
}
import { MosaicFlipHover } from "@/components/ui/mosaic-flip-hover"<MosaicFlipHover
projects={[
{ name: "NX-09", img: "/mosaic-flip-hover/img1.jpg" },
{ name: "Deep Space", img: "/mosaic-flip-hover/img3.jpg" },
]}
/>The component builds a tilesX × tilesY grid of 3D cubes. Each cube's four side faces carry one slice of the same image, reassembled across the grid into a full picture via percentage background positioning, so the wall works at any tile size. Every tile gently wobbles on its Z axis on a staggered loop. Hovering a project name swaps the currently hidden face to that project's image, then flips the whole grid 180° with a center-out stagger so the new mosaic resolves into view; moving off the list flips back to the default image. Alternating which face is hidden means each hover always reveals onto a fresh surface.
When prefers-reduced-motion: reduce is set, the breathing loop and the flip animation are skipped — hovering a name swaps the mosaic instantly with no rotation.
| Prop | Type | Default | Description |
|---|---|---|---|
projects | MosaicFlipProject[] | 6 defaults | Each is { name, img }; hovering name mosaics in img. |
defaultImg | string | default img | Image shown at rest and on the cube side faces. |
tilesX | number | 12 | Number of tile columns. |
tilesY | number | 9 | Number of tile rows. |
background | string | "#171717" | Scene background color. |
className | string | — | Extra classes on the outer container. |