IHC Studio

Entregas e Aprovações

HERES

Batel · Apresentação

Tecnologia
Página
2
2026
International House of Cinema
Curitiba · 2026 · Confidencial
Apresentação · Versões e Revisões

A apresentação do HERES é uma página, não um PDF: abre com um filme que corre conforme a pessoa rola a tela, e segue em onze blocos até a planta de cada unidade. É um serviço de tecnologia, e como o filme, teve seu ciclo de revisão. Está no ar em heres.laguna.ihc.studio.

Como isso foi construído

A apresentação parece um filme com texto por cima. Não é. O filme não toca — ele é percorrido quadro a quadro pela rolagem da pessoa, e cada peça abaixo existe porque a anterior não funcionava sozinha.

50 telas
350
16
26
20
55
A rolagem mapeada no tempo do filme
O mesmo eixo, duas medidas: em cima a posição da rolagem, embaixo o instante do filme que ela produz. Aos 88% o filme chega ao fim e congela — daí em diante a rolagem continua, mas já é a apresentação. Não existe botão de play em lugar nenhum.
01O filme obedece ao dedo, não ao play
Cinquenta telas de rolagem controlam trinta e cinco segundos de filme. Cada pixel rolado vira um instante do filme, com uma inércia calculada para a imagem não tremer quando a pessoa rola em solavancos: o tempo perseguido não é o tempo bruto da rolagem, é uma média que persegue o alvo. Aos 88% da rolagem o filme congela no último quadro e a apresentação começa — o corte entre uma coisa e outra não existe.
Os 350 quadros da intro
Os 350 quadros em que o filme foi decomposto para o celular, na ordem, um ao lado do outro. Cada retângulo é um arquivo WebP que o navegador precisa ter em mãos antes de a pessoa chegar nele. É o filme inteiro, virado imagem.
02No celular, o vídeo não serve
O Safari do iPhone não repinta um vídeo quando você o posiciona por código. A rolagem move o tempo, e a tela fica parada. Descobrir isso obrigou a refazer a intro inteira para o celular: o filme virou uma sequência de 350 imagens WebP desenhadas num canvas, com carregamento antecipado dos quadros vizinhos para não piscar. São 17 MB de quadros que existem só porque um navegador se recusa a repintar.
A poligonal sob três matrizes
A mesma poligonal em três momentos do filme, cada um com a sua matriz. A escala, o deslocamento e a inclinação mudam a cada seis quadros para que o contorno continue sobre o terreno enquanto a câmera se move — e enquanto as casas somem.
03A linha do terreno gruda no chão
O contorno verde do terreno não é um desenho parado por cima do vídeo — ele acompanha a imagem enquanto o drone se move. Foram levantadas 41 matrizes de rastreamento, uma a cada seis quadros, cobrindo 241 quadros do filme. Cada matriz tem seis números: escala, rotação, cisalhamento e deslocamento em x e y. Entre elas o navegador interpola. É o que faz a linha parecer pintada no terreno, e não colada na tela.
O voo antes e depois da gralha
Em cima, o filme como era: as asas ocupam metade do quadro do começo ao segundo 14. Embaixo, o mesmo voo sem ela. Não era um objeto para apagar — era o primeiro plano. Atrás dela não havia imagem.
04A gralha, e depois a ausência dela
A primeira versão tinha a gralha-azul voando à frente da câmera. Ela foi recortada quadro a quadro com canal alpha a partir de um fundo branco, e voava por trás das nuvens — a travessia rodava no compositor do navegador, não em JavaScript quadro a quadro, senão travava no celular. Quando a Laguna pediu para tirá-la, não havia como apagá-la: as asas atravessam a tela inteira do começo ao segundo 14. Atrás dela não existe imagem, só buraco. Os planos tiveram que ser refeitos.
O giro no simulador
No simulador, com o site no ar: em pé aparece o aviso; deitado a intro roda; e ao voltar para vertical a pessoa continua onde estava — no rodapé, não no começo. A posição é guardada como fração antes do giro e recolocada depois.
05Girar o celular não pode perder o lugar
A intro foi desenhada para a tela deitada, e a apresentação rola em pé. Girar o aparelho muda a altura da tela, e a altura da tela é o que define onde a pessoa está na rolagem. Sem tratamento, girar joga o leitor de volta ao começo. A posição passou a ser guardada como fração antes do giro e recolocada depois, com três tentativas escalonadas porque o navegador leva um tempo imprevisível para assumir a nova medida.
As 16 plantas vetorizadas
As dezesseis plantas, cada uma com a sua unidade em destaque na implantação. São vetor: a linha é desenhada na tela traço a traço, não é imagem carregada. Quinze vieram do PDF do deck; a Cobertura da Torre C foi reconstruída dos pixels.
06As dezesseis plantas são vetor, não imagem
Cada planta é desenhada na tela traço a traço, com a linha crescendo. Para isso as dezesseis foram vetorizadas a partir do deck. Quinze vieram do PDF original; a Cobertura da Torre C não tinha vetor, e foi reconstruída a partir do PNG detectando os segmentos direto dos pixels — o desenho é ortogonal, exceto por uma divisa inclinada que precisou de um segundo passe.
Os quatro níveis da navegação
Os quatro níveis, da torre à ficha, como a Laguna desenhou. Cada passo abre no mesmo lugar da página, sem nunca trocar de tela, e a planta é desenhada traço a traço quando a unidade é escolhida.
07Navegar sem sair da página
Torre, tipo, final e só então a ficha — quatro níveis que a Laguna desenhou e que abrem no mesmo lugar, sem nunca trocar de tela. Onze blocos, imagens que ampliam sem sair da página, retratos que animam ao entrar em quadro, e três idiomas de leitura: computador, celular em pé e celular deitado.
08A galeria mostra o ambiente inteiro
A grade das áreas comuns foi refeita para que cada imagem apareça na proporção em que foi renderizada, sem recorte. Como as proporções variam — há renders de 2,7:1 e de 1,5:1 —, os quadros são ordenados e pareados por altura, de modo que as duas colunas terminem quase no mesmo lugar em cada linha. O Salão de festas, o mais largo de todos, ocupa a largura inteira. Vinte ambientes, contra oito.
09As plantas entram sem a moldura branca
As vinte e seis plantas chegaram em fundo branco. Sobre o creme da página, cada uma viraria um retângulo. Remover branco por cor furaria paredes, pisos e móveis claros dentro do próprio desenho, então o fundo é preenchido a partir das bordas: só o branco que encosta na borda sai, e o de dentro fica. Antes de cada arquivo o programa confere se o ponto da borda é mesmo claro — se o desenho encostasse ali, o arquivo seria pulado em vez de estragado. Sai em WebP com transparência, mais leve que o JPG de origem.
10A planta e a implantação no mesmo lugar
Cada unidade abre na planta e troca para a implantação num toque, no mesmo controle que já existe na página. O seletor se adapta: apartamento de um pavimento mostra planta e implantação; duplex mostra pavimento inferior, superior e implantação. A planta amplia com um clique, como as demais imagens.
11A cor da marca num lugar só
Para o pré-lançamento a página usa o preto da apresentação digital, e não o verde escuro. A troca não foi feita tela a tela: a paleta inteira passou a viver em variáveis, e o verde que estava escrito à mão em trinta e oito pontos foi recolhido para elas. Na virada para o lançamento, voltar ao verde é trocar duas linhas, não refazer a página.
12O terreno nasce gramado sobre o quadro real
Para a abertura nova, o gramado foi construído sobre o quadro real do drone, dentro da divisa do levantamento. Fora da linha, cada pixel é o registro original do bairro — vizinhos, rua e carros intocados. Dentro, o campo verde contínuo, com cada árvore e palmeira exatamente onde está.
13O verde cresce a partir das árvores
A transição não demole nada em cena: uma frente de crescimento, calculada pela distância a partir das copas, abre o verde até a divisa com borda macia — e folhas ao vento atravessam o quadro enquanto ela avança. O entorno escurece no mesmo compasso, até o terreno ficar aceso sozinho.
14A luz é a do próprio filme
O escurecimento e a borda suave de luz não foram redesenhados: são extraídos do próprio take, quadro a quadro, e aplicados ao conteúdo novo. Para o gramado acompanhar a câmera do drone, cada quadro é registrado por correlação de blocos com precisão de um pixel — e a sequência de quadros do celular foi refeita por inteiro, para o iPhone mostrar a mesma cena.
A peça no ar
A apresentação do HERES Batelheres.laguna.ihc.studio
Em aberto

Depende de material da Laguna

→ Ver o filme (audiovisual)