Enrico Gastaldelli

Creative Code 02 · Ferramenta · Creative code

Glass Studio

As faixas funcionam como uma máscara fixa; só a imagem dentro delas se move. O resultado é uma distorção espacial que parece uma cortina de fatias.

Abrir a ferramenta

Cliente
Projeto autoral
Ano
2026
Função
Design e desenvolvimento
Serviços
Design de interface
Creative code
Ferramenta web
Ferramentas
HTML
CSS
JavaScript
Canvas
Interface da ferramenta Glass Studio: painel de controles à esquerda e, à direita, uma estrela preta de pontas irregulares dividida em faixas verticais com a imagem deslocada para fora.
01

A ferramenta

A imagem é cortada em faixas verticais ou horizontais de posição fixa. Dentro de cada faixa, a imagem se desloca do centro para as extremidades, em passos do tamanho escolhido. Quanto mais longe do centro, maior o deslocamento. Funciona melhor com PNG de fundo transparente.

Tela completa da ferramenta Glass Studio com a estrela de exemplo carregada: painel com operações da imagem, formato de saída e parâmetros das faixas.
A interface: tudo em um painel, com a visualização ao lado.
02

Controles

Imagem
Carregar, arrastar, colar (⌘/Ctrl+V) ou usar o exemplo; girar 90°
Formato
Original, Feed 4:5, Feed 1:1, Feed paisagem 1,91:1 e Stories 9:16
Fundo
Branco, preto ou transparente (PNG)
Faixas
Verticais ou horizontais, de 2 a 40, com espaço opcional entre elas
Deslocamento
Da imagem interna, para fora ou para dentro (valores negativos)
Largura
Divisão igual, afunilada ou aberta, com peso ajustável para a faixa central
Exportação
PNG ou JPG nas dimensões exatas do formato escolhido
Exemplo de saída da ferramenta: estrela preta ao centro, com as pontas laterais repetidas e deslocadas em faixas verticais sobre fundo branco, no formato 4:5.
Exemplo de saída no formato Feed 4:5 (1080×1350), com 13 faixas e deslocamento de 39 px.
03

Privacidade

Tudo acontece no navegador. A imagem não é enviada a nenhum servidor e o site não guarda nada.