What it looks like
Imagine a huge table covered in printed photos that you push around with your hand. White cards with a photo, a title and a small uppercase tag sit in columns of varying heights over a light dotted backdrop and repeat endlessly in every direction, while the edges of the area fade into the background color. Let go after a drag and the wall keeps gliding, slowing down gradually; columns move at slightly different speeds, which adds depth. Left alone for a few seconds, it starts drifting slowly by itself. On click, the photo expands smoothly into a detail view, with the wall blurred behind it.
You may be looking for this if you asked for something like
- an endless photo gallery you can drag in every direction
- a wall of projects people explore by pulling it with the mouse
- that agency portfolio where the images never run out
- a brand moodboard spread across the screen like a table of photos
- a card grid that keeps gliding after I let go of the drag
- click a photo and it grows into the detail view
- a product showcase to explore freely without scrolling the page
Also known as
- infinite canvas
- draggable gallery
- pan and zoom gallery
- endless photo wall
- interactive moodboard
- endless gallery
When to use
- A portfolio for an agency, studio or photographer with many projects
- A brand or campaign moodboard to present to clients
- A case archive people explore in no particular order
- A product showcase focused on visual discovery
When to avoid
- Lists people must go through in order or filter
- The middle of long pages without turning off captureWheel, since the wheel moves the wall instead of the page
- Items that need long text visible without opening the detail view
How to ask your AI
Create an infinite canvas gallery for my portfolio: photo cards in columns that repeat in every direction, drag with inertia for mouse and touch, arrow key support, a smooth zoom into a detail view that closes with Escape, and no inertia or drift for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Deriva
Does Deriva work on phones?
Yes. Deriva uses pointer events and claims the touch gesture for itself, so dragging with a finger moves the wall and a tap opens a card. In areas up to 640 pixels wide, the detail view stacks the photo over the title and hides the text. The THM Componentes prompt asks for a mobile test comparing LCP and INP.
Will Deriva make the page heavy?
Deriva is virtualized: only the visible cards, plus a margin, exist on the page, and motion uses transforms with no WebGL. The animation pauses when the wall leaves the screen. In Nuxt, the THM Componentes prompt tells your AI to wrap it in ClientOnly with a fallback image or color and to load it on demand.
Does Deriva support keyboard use and reduced motion?
Yes. The wall takes focus and moves with the arrow keys; with Tab, each card is a button and Deriva pans to the focused card. Enter opens the detail as a modal dialog and Escape closes it, returning focus to the card. With reduced motion on, inertia and automatic drift stop and the detail zoom becomes an instant cut.
