Depth Stack
Uilora Depth Stack — each image zooms from distant to full-screen as you scroll through.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...6 image URLs] | Array of images. Each zooms from far away to full-screen and flies past. |
| backgroundColor | string | #060606 | Background color (hex, rgb, or hsl). |
| label | string | Uilora Archive | Monospace label shown top-left as a HUD overlay. |
When to Use
Use for premium editorial portfolios, photography showcases, or cinematic landing pages where you want each image to demand full attention. Best paired with 4–8 high-resolution hero images.
Best Practices
Use wide-format landscape images at 1600px+ width for the sharpest result at full scale. The blur-to-sharp transition means even slightly soft images look intentional.
Why This Component Matters
The depth-zoom pattern triggers a physiological sense of forward motion — viewers feel pulled through a sequence rather than browsing a static grid. Photography becomes a spatial experience.
FAQ
QHow many images work best?
4–8 is the sweet spot. Scroll height is images.length × 120vh.
QCan I control zoom speed?
Adjust the scale output range [0.48, 1, 1.72] in the DepthLayer sub-component.
QDoes it work on mobile?
Yes — touch-scroll works identically to mouse-scroll.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.