Uso interno

Laboratório ROO3

Provas de conceito de interface e movimento. Serve para mostrar em reunião o que a agência consegue construir, antes de vender. Nada aqui é indexado por buscador.

07

Do Sol até Plutão

Novo
A rolagem sai do Sol, passa por todos e volta

A única peça do laboratório sem vídeo e sem IA de imagem: os 378 quadros foram traçados por raio, com fotografias reais de missões da NASA aplicadas sobre esferas e iluminadas da posição de verdade do Sol. Tamanho, distância, inclinação de eixo, achatamento polar e albedo são os das fichas da NASA. A página declara, item por item, o que é foto e o que foi reconstruído.

cinco atos · traçado de raio · fotos da NASA
06

IA nas empresas

O laptop abre, se desmonta e fecha de novo

Três atos: começa fechado, a rolagem levanta a tela, os componentes saem e crescem, e tudo volta pra dentro. O interior segue o manual de reparo oficial da máquina. O texto é sobre inteligência artificial dentro de empresa: os quatro erros que matam projeto e os cinco passos que funcionam.

três atos · pesquisa de hardware · IA
05

Motor V8 em três atos

Um V8 seccionado, por dentro, sem parar de girar

Rolagem longa de verdade: três vídeos encadeados, com a câmera entrando mais fundo a cada ato, e texto entre eles. Cada ato só baixa os quadros quando você chega perto, então 252 quadros não pesam na primeira tela.

três atos · carga sob demanda · IA
04

Produto na rolagem: comida

O lanche se desmonta e se remonta

Mesma técnica do relógio, com o motor compartilhado: a rolagem separa as sete camadas no ar, a câmera troca de ângulo e tudo volta ao lugar. Serve pra qualquer produto que valha ser visto por dentro.

canvas · motor compartilhado · IA
03

Produto na rolagem

A barra de rolagem vira o cursor do tempo

Um vídeo gerado por IA virou 110 imagens. Rolando a página, o produto gira e se desmonta peça por peça, quadro a quadro, sem tag de vídeo. É a técnica das páginas de produto da Apple.

canvas · sequência de quadros · IA
02

Cenas de motion

Três demonstrações de movimento

Anatomia (o produto se abre em camadas com profundidade 3D real), Tipografia (a palavra vira a cena) e Dissolução (uma forma se desfaz em milhares de pontos e vira outra).

CSS 3D · canvas · sem biblioteca
01

Scrollytelling

As três técnicas por trás daqueles sites

Palco fixo, progresso de rolagem de 0 a 1 e amarração de propriedades. A página explica cada técnica enquanto ela acontece na sua frente.

rolagem presa · progresso
← Voltar para o site