Uilora Discover
Uilora-branded Pinterest-style masonry gallery — 22 images load in batches via an arrow button, with frosted-glass profile pills on hover and a bottom dissolve fade.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | Array<{src: string, profileName?: string}> | [{src: '...', profileName: 'Sofia Laurent'}, ...] | Array of image objects. Each needs a src URL; profileName is optional and appears in the hover pill. |
| backgroundColor | string | #fafafa | Background and fade color — the bottom dissolve gradient is derived from this value automatically. |
When to Use
Perfect for Uilora-powered photography portfolios, creative directories, and inspiration boards. The arrow-based batch loading keeps the layout clean while hinting at a rich, deep collection — ideal for showcasing attributed creator content.
Best Practices
Use images with varied natural aspect ratios to maximise the masonry feel. The bottom fade gradient auto-matches backgroundColor, so keep them in sync. Keep profile names under 20 characters so the pill stays compact.
Why This Component Matters
The Uilora Discover pattern mirrors the world's most engaging visual platforms — batch loading creates anticipation, profile attribution builds trust, and the bottom dissolve implies infinite depth without any visible pagination chrome.
FAQ
QHow does batch loading work?
The component starts with 12 images and each arrow click reveals 8 more. Once all images are loaded, the arrow swaps for an 'All N creators loaded' confirmation pill.
QHow does the profile pill appear?
Each card uses CSS group-hover transitions — the pill slides in from above with opacity + translateY, a smooth physical reveal with zero JavaScript overhead.
QCan I use real avatar photos?
Yes — extend the ProfileImage type to include an avatarSrc field and replace the gradient-initial div with an <img> tag inside the pill for real portraits.