Problem Description

I want to create a responsive, fluid infinite grid for an interactive museum exhibit website. I am 80% of the way there, but I need some help to polish it and improve its performance.

Users will filter and search the museum collection, and the grid will reload with a new set of items from that search. I want the frontend to resemble this: https://public.work/

Stack: React, typescript, tailwind, and nextjs, hosted on vercel. It is mobile friendly.

Key requirements:

• Grid items/columns all have the same fixed width, but their heights are dynamic and reflect the actual images. In other words, landscape images are shorter and tall images are taller, but they all have the same width. See the above example.
• The grid is traversable in all directions, 360 degrees. When the page loads, they can navigate up, down, right, and left.
• They can scroll, use touch gestures, or drag to navigae the grid. The navigation is smooth, continuous, with a bit of momentum after the gesture/drag is released. The user can move in between dragging and scrolling without any issues.
• There are no additional loading times as the user navigates across the grid. The images and grid items are pre-fetched and pre-rendered so the experience feels seamless.
• When an item is clicked, it enlarges/focuses that item while the grid blurs in the background. I have this functionality already.
• Optional: Right now, it's set up to fetch a set of items and then load the infinite grid with the items repeated. This is fine. However, a future direction could be load even more items as they traverse the grid.

Right now, my app works pretty well, but there are a few bugs:

• Users cannot navigate up, only horizontally and downwards.
• Scrolling is broken or disabled because there were rendering issues when the user scrolled, and then switched back to dragging. This causes some grid items and columns to rerender on every mouse movement, or a bounce back effect to where the drag started from.
• Mobile does not have smooth dragging with fingers, the images rerender.

Link to Project

Here's the project as it exists right now: https://bm-v2.vercel.app/explore

Timeline

Ideally, as soon as possible. I want to release this soon.