component

Tilted photo field

Running live. Go ahead and touch it.

Tilted columns of rounded photos drift against each other and fade into the page, under a navbar and two icon links.

See it in the design system

How it behaves

  • Columns run in alternating directions and stop over a photo
  • A pause button appears unless motion is reduced
  • Photos fade into the page at the left and bottom

Find more that moves like this

Kind
component
Blueprint
creator-showcase 1.0.4
Moves by
autoplay, entrance, hover

Import

import { TiltedPhotoField } from "@/components/shared/animation/tilted-photo-field";

Props

PropWhat it does
columnsPhoto columns with id, start, direction, and tiles
labelAccessible name for the group
navLinksNavbar links; active marks the current one with a dot
navActionsNavbar icon buttons
linksIcon links at the bottom
speedLoops per second. Defaults to 0.014
dotColorDefaults to #e0533d
classNameStyles for the outer element

Your agent builds it. You take the credit.

Tilted photo field ships inside the Creator Showcase blueprint. These instructions tell your agent to take only this piece.

Version
1.0.4
Files
77
Dependencies
20
Assets
18

Paste this into Claude Code, Codex, Cursor, or whichever agent you trust today.

  • Building a blueprint runs its code, so use an isolated environment.
  • License: UNLICENSED.
  • The three layouts derive from third-party design images supplied as references, whose reuse rights have not been cleared. Confirm the rights before any public release.
  • The creator names are fictional placeholders, replacing names in the reference, and are not real endorsements.
  • Nothing plays. Clip play buttons and creator cards only change visual state, as no video or audio is included. The photos are artwork from this library, and the links and navbar buttons have no destination yet.
website

Pallet Ross

A creative network landing page where one set of cards travels through pinned scroll stages, from arc to cascade to grid.

website

Sixpay

A fintech homepage with detail panels in the navbar, a phone between tilted photos, rotating feature tabs, and a looping carousel of customer stories.

website

Artify AI

A dark AI image generator homepage with a floating navbar, a staircase of images that climbs and separates on scroll, and a drifting row of partner logos.

websiteNew

Eduvet University

A university homepage with a split photo hero, founder message, campus gallery, interactive departments, news, and an admissions preview.