Tilt Gallery
Editorial row of slightly tilted images that straighten and elevate on hover.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | TiltItem[] | DEFAULT_ITEMS (5 items) | Array of items with id, image URL, and optional caption. |
| heading | string | "Find your dream" | First line of the heading. |
| headingAccent | string | "aesthetic" | Second line of the heading (bold, accented). |
| subheading | string | "Explore collections..." | Descriptive subtext next to the heading. |
| accentColor | string | #166534 | Color of the bold accent heading line. |
| bgColor | string | #f0ede8 | Background color of the full-screen container. |
When to Use
Use for portfolio showcases, editorial features, mood boards, and any context that benefits from a casual, organic gallery feel rather than a rigid carousel.
Best Practices
Use images with varied colors so the row has visual rhythm. Keep to 4-6 images for optimal layout. The tilt angles are pre-set for visual balance.
Why This Component Matters
Tilted cards break the sterile grid pattern — they communicate creativity and human curation, signaling a design sensibility beyond the default.
FAQ
QHow does the hover interaction work?
Each card uses Framer Motion animate to tween rotate to 0, scale to 1.08, and y to -10 on mouseenter, reverting on mouseleave.
QCan I customize the tilt angles?
Yes — the TILTS array at the top of the component defines each card's default rotation. Edit it to set your preferred angles.
QIs there a click/navigation interaction?
No traditional next/prev — this component is designed as a gallery display with hover as the primary interaction.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.