# Tabuleiro A wall of image cards you can drag in any direction without ever reaching the edge. > Tabuleiro is a THM Componentes component that builds an endless 3D wall of cards in WebGL: people drag it with the mouse or a finger in any direction, the tiles repeat forever and the grid keeps gliding with inertia on release. Each card shows a title, image, tags and date, which suits portfolios and project showcases. - Category: 3D and space - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, GSAP, OGL - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/tabuleiro/ ## What it looks like Picture a light table covered in photos that keeps going in every direction. On a black background, the cards form a mosaic with thin outlines: a title at the top, an image in the middle, tag pills and a date at the bottom. When you press and drag, the camera pulls back slightly and the grid slides; when you let go, it glides on with inertia until it stops. Hovering a card fades in a blurred copy of its own image behind it. The screen edges are darker and the grid shows a slight curve, as if seen through a lens. ## You may be looking for this if you asked for something like - “a project gallery I can drag around in any direction without it ending” - “an infinite portfolio grid that moves with the mouse, like an agency site” - “a 3D wall of photos people explore by dragging” - “show all my work in a grid that goes on forever” - “that endless canvas effect where you pull the screen and the cards follow” - “an immersive gallery for my studio case studies page” - “a card grid that keeps sliding after I let go of the mouse” ## Also known as endless project wall, infinite scroll gallery, draggable grid, endless canvas gallery, WebGL gallery, pannable portfolio grid ## When to use - A studio, agency or photographer portfolio with many projects to explore - A case studies page where free exploration is part of the experience - A collection, archive or showcase with strong imagery - A full-screen feature section where the grid fills the whole area ## When to avoid - Lists that need search, filters or a clear order, such as a store catalog - Pages that already run another heavy WebGL effect - Keyboard-only visitors: the component responds only to mouse and touch ## How to ask your AI ```text Build an endless WebGL 3D grid gallery on my portfolio page: image cards with title and tags that drag in any direction with inertia, pause when off screen, show a static version for reduced motion and offer a keyboard-friendly way to browse the projects. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Tabuleiro ### Does Tabuleiro work on phones? Yes. Tabuleiro handles touch events: people drag the grid with a finger, it keeps gliding with inertia on release, and a quick tap on a card counts as a click. Because it is rated Heavy in THM Componentes, with WebGL and post-processing, test it on modest devices and compare LCP and INP before and after. ### How do I open a project when someone clicks a card in Tabuleiro? Tabuleiro emits a tileClicked event with the clicked card data, and a click only counts when the pointer barely moved, so dragging is not mistaken for a click. Listen to that event and open the project page or a modal. The cards come from a list with title, image, tags and date. ### Does Tabuleiro respect reduced motion settings? In its original code, Tabuleiro does not read that preference: the inertia and the intro animation always run, and the scene is redrawn frame after frame without stopping. The THM Componentes prompt asks your AI for a static version when reduced motion is on, for on-demand loading and for pausing the animation when the grid leaves the screen. ## Related components - [Deriva](https://vibecode.thmtecnologia.com/en/components/deriva/): An endless wall of photo cards you drag in any direction and open in detail with a single click. - [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. - [Arcada](https://vibecode.thmtecnologia.com/en/components/arcada/): Photos in a row along a curve that glide when you drag or scroll and ripple slightly as they move. - [Coreto](https://vibecode.thmtecnologia.com/en/components/coreto/): Photos arranged in a ring, like a cylinder, that you spin by dragging, with inertia and a floor reflection. - [Cortiça](https://vibecode.thmtecnologia.com/en/components/cortica/): Photos of different heights fitted into columns, with category filters that rearrange everything with animation. --- 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).