Drift Grid
Uilora Drift Grid — 12 tilted photos that float and drift in response to cursor movement.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...12 image URLs] | 12 images displayed as a tilted, floating photo grid. |
| backgroundColor | string | #f0ece4 | Background color (hex, rgb, or hsl). Light cream tones work best. |
| label | string | Uilora | Ghost outline watermark text rendered behind the grid in Georgia serif. |
When to Use
Best for portfolio landing pages, about sections, and brand galleries where you want imagery to feel tactile and alive. The light cream background evokes physical prints on a table.
Best Practices
Use square or portrait images. The spring physics are tuned for a weighty analog feel — tighten stiffness for snappier drift. Keep the label short (1–2 words) for clean watermark typography.
Why This Component Matters
Mouse-reactive layouts reward curiosity. The scatter + tilt mimics physical photographs, creating an emotional connection between the digital and physical worlds.
FAQ
QWhy no Math.random() for tilts?
Deterministic SLOTS values prevent React hydration mismatches between server and client renders.
QCan I show more than 12 images?
Add more SLOTS entries and remove the .slice(0, 12) to support larger grids.
QHow do I tune drift physics?
Adjust useSpring config: stiffness 48, damping 18. Lower stiffness = heavier drift, higher damping = less oscillation.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.