# Arenito

Uma escultura abstrata de camadas finas flutua e se retorce num céu claro, iluminada por um sol.

> Arenito é um fundo em shader do THM Componentes que renderiza, por raymarching, uma escultura fractal em 3D: uma forma de camadas finas e bordas desfiadas que se retorce e pulsa num céu claro, iluminada por um sol. A câmera gira sozinha e responde ao mouse. Serve para peças artísticas, portfólios e aberturas de evento.

- Categoria: Fundos e atmosferas
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL
- Interação: Mouse, Toque
- URL: https://vibecode.thmtecnologia.com/componentes/arenito/

## Como ele é

Parece um asteroide ou uma concha esculpida em lâminas finas, flutuando num céu claro. A forma tem bordas desfiadas e pontiagudas, em tons de ferrugem, rosa e verde-azulado, com sombras e brilho de sol nas faces. Ao fundo, o céu passa do azul-claro no alto para um creme quase branco embaixo, com os cantos levemente escurecidos. A escultura se retorce e pulsa devagar enquanto a câmera dá a volta nela; mover o mouse ou arrastar o dedo muda o ângulo de visão, com resposta suave. O fundo ocupa toda a área do elemento pai.

## Você pode estar procurando isto se pediu algo assim

- “fundo com uma escultura 3D abstrata girando no meio da tela”
- “aquele efeito de arte generativa que parece uma rocha se retorcendo”
- “fundo artístico em 3D para portfólio de designer”
- “forma orgânica flutuando num céu claro para abertura de evento”
- “fundo fractal que muda de ângulo quando mexo o mouse”
- “algo tipo instalação de arte digital no topo do site”

## Também chamado de

raymarching, fractal background, fundo fractal, escultura 3D generativa, SDF shader, arte generativa, 3D fractal shader

## Quando usar

- Peça artística ou página sobre arte digital e criatividade
- Portfólio de designer, artista 3D ou estúdio
- Abertura de evento, exposição ou festival
- Layout claro que precisa de um fundo marcante sem ser escuro

## Quando evitar

- Celulares e notebooks modestos, porque o cálculo por pixel é muito pesado
- Páginas que já usam outro efeito em WebGL
- Seções com texto no centro, onde a escultura disputa a atenção

## Como pedir para a sua IA

```text
Crie um fundo em shader GLSL com raymarching de uma escultura fractal 3D no hero do portfólio: câmera girando devagar e respondendo ao mouse, cores da minha marca, pausa fora da tela, resolução reduzida no celular e imagem estática para movimento reduzido.
```

Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Arenito

### Arenito roda bem no celular?

Com cuidado. Arenito calcula até 250 passos de raymarching por pixel, além de sombras e oclusão, e por isso tem a classificação Pesado no THM Componentes. O componente já pausa fora da tela e renderiza em resolução 1x, mas no celular vale usar uma imagem estática ou pedir à IA para reduzir ainda mais a resolução.

### Arenito combina com site claro?

Combina. Arenito é uma cena clara: o céu vai do azul-claro ao creme, e a escultura aparece em tons de ferrugem, rosa e verde-azulado no centro. As props hue, saturation e brightness ajustam a paleta, e speed controla o ritmo da animação.

### Como Arenito reage ao mouse?

Em Arenito, a posição do mouse sobre o fundo define o ângulo da câmera: mover na horizontal dá a volta na escultura, e na vertical muda a altura do olhar. Por padrão a resposta é bem amortecida, então a vista gira devagar. No toque, arrastar o dedo gira a câmera e não rola a página.

## Componentes relacionados

- [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o mouse.
- [Gude](https://vibecode.thmtecnologia.com/componentes/gude/): Uma bola de vidro com um redemoinho de tinta índigo e ciano dentro, que gira devagar sobre um chão claro.
- [Voragem](https://vibecode.thmtecnologia.com/componentes/voragem/): Um anel de luz laranja e azul gira em volta de um centro escuro, como um buraco negro engolindo poeira cósmica.
- [Caleidoscópio](https://vibecode.thmtecnologia.com/componentes/caleidoscopio/): Uma tela que roda efeitos visuais escritos em GLSL, como campos de estrelas e vórtices, e reage ao mouse.
- [Onça](https://vibecode.thmtecnologia.com/componentes/onca/): Manchas e ramos índigo crescem sozinhos como coral ou pele de animal, e o cursor planta novos focos.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.