GGamma
⌘ K
Import component

Drift wall

An endless perspective wall of tiles drifting past, lifting a hovered tile toward the viewer.

New
DuneDuneVaporVaporQuarryQuarryVesperVesperDuneDuneVaporVaporQuarryQuarryVesperVesper
FjordFjordLumenLumenRelayRelayWickWickFjordFjordLumenLumenRelayRelayWickWick
EmberEmberCinderCinderSableSableYarrowYarrowEmberEmberCinderCinderSableSableYarrowYarrow
GroveGroveMeadowMeadowTimberTimberZephyrZephyrGroveGroveMeadowMeadowTimberTimberZephyrZephyr
StaticStaticOnyxOnyxUmbraUmbraAcreAcreStaticStaticOnyxOnyxUmbraUmbraAcreAcre

Twenty studies drift upward; hovering pauses the wall and lifts a tile while the other columns dim.

Live previewUse keyboard to interact

Implementation

1"use client";2 3import {4  useEffect,5  useMemo,6  useRef,7  useState,8  type CSSProperties,9  type PointerEvent as ReactPointerEvent,10} from "react";11 12export interface DriftWallItem {13  image: string;14  title?: string;15  href?: string;16}17 18export interface DriftWallProps {19  items?: DriftWallItem[];20  columns?: number;21  tileWidth?: number;22  tileHeight?: number;23  gap?: number;24  radius?: number;25  tilt?: number;26  turn?: number;27  roll?: number;28  perspective?: number;
PreviousDome galleryNextEmpty state