# Deriva An endless wall of photo cards you drag in any direction and open in detail with a single click. > Deriva is an exclusive THM Componentes component that builds an endless wall of photo cards: people drag it in any direction with inertia, use the mouse wheel, trackpad or arrow keys, and a click zooms a card into a detail view. Only visible cards exist on the page. It suits portfolios, moodboards and case archives. - Category: Images and media - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/deriva/ ## 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 ```text 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. ## Related components - [Cortiça](https://vibecode.thmtecnologia.com/en/components/cortica/): Photos of different heights fitted into columns, with category filters that rearrange everything with animation. - [Translado](https://vibecode.thmtecnologia.com/en/components/translado/): Click a gallery card and its photo and title grow smoothly until they become the detail page. - [Alameda](https://vibecode.thmtecnologia.com/en/components/alameda/): An endless corridor with framed pictures on both walls that you travel with the mouse wheel, a drag or the arrow keys. - [Tabuleiro](https://vibecode.thmtecnologia.com/en/components/tabuleiro/): A wall of image cards you can drag in any direction without ever reaching the edge. - [Mutirão](https://vibecode.thmtecnologia.com/en/components/mutirao/): An endless whiteboard to stick notes, draw shapes, connect arrows and sketch by hand, like a live workshop wall. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).