# Arcada Photos in a row along a curve that glide when you drag or scroll and ripple slightly as they move. > Arcada is a THM Componentes component that shows photos in a row along a 3D arc drawn in WebGL: the center image stands upright while those at the ends drop and tilt. The gallery loops with drag, touch or the mouse wheel and snaps to the nearest photo. It works well for 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, OGL - Interaction: Mouse, Touch, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/arcada/ ## What it looks like Picture photos stuck to the top of a giant wheel, seen from the front. The middle one stands straight and highest; the ones on the sides drop and lean along the curve, which the bend prop makes sharper or flatter. Each photo has rounded corners and can carry a title underneath, white by default. The images ripple slightly all the time. When you drag or turn the mouse wheel, the row glides smoothly, the ripple grows and, once it stops, the closest photo snaps to the center. The background is transparent and the list repeats endlessly. ## You may be looking for this if you asked for something like - “a curved photo gallery that slides when I drag it” - “an arched image carousel for my portfolio” - “photos in a row that move with the mouse wheel and snap to the center” - “a project showcase with a curved 3D effect” - “an infinite image gallery that ripples as it moves” - “a way to show agency case studies that is not a regular slider” ## Also known as curved gallery, curved photo strip, arched image carousel, 3D image carousel, WebGL image gallery, infinite image carousel ## When to use - Photographer, designer or studio portfolios - Agency project or case study showcases - Collection highlights for fashion or home decor stores - Event pages with photos from past editions ## When to avoid - Long pages: the gallery listens to the mouse wheel and drags across the whole window - Content where each image needs a link or alt text - Pages that already run another heavy WebGL effect ## How to ask your AI ```text Create a curved WebGL image gallery for my portfolio: photos on an arc that loop with drag, touch or mouse wheel and snap to the center. Make it react only when the cursor is over the gallery, pause it when off screen and add a static version for reduced motion. ``` 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 Arcada ### Will Arcada interfere with page scrolling? It can. In the original code, Arcada listens to the mouse wheel, drags and touches on the whole window, so scrolling anywhere on the page also moves the gallery, always in the same direction. On long pages, ask your AI to limit those events to the component area. ### Can I use my own photos in Arcada? Yes. Arcada takes a list of items with an image and a text, and each photo is cropped to fill its card. Since they become WebGL textures, images must come from the same domain or a server with CORS enabled; curvature, corners, title color and font are props too. ### Does Arcada respect reduced motion settings? The original component does not handle that preference and keeps a slight ripple on the photos at all times. The THM Componentes prompt asks your AI for a static version for people who reduce motion and for the animation to pause off screen, since Arcada redraws the scene every frame. ## Related components - [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. - [Guirlanda](https://vibecode.thmtecnologia.com/en/components/guirlanda/): Photos, logos or icons arranged in a ring that keep turning around the center and can pause on hover. - [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. - [Ciclorama](https://vibecode.thmtecnologia.com/en/components/ciclorama/): Tall image panels arranged in a ring that keeps turning around you and can be dragged by hand. - [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. --- 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).