Efeito light leak: o brilho quente do filme no design

O efeito light leak é o brilho quente laranja, vermelho e amarelo que aparece quando uma luz perdida atinge o filme fotográfico, em geral por uma tampa solta, uma vedação gasta ou uma fresta na hora de colocar o rolo. No filme era um acidente. No design virou um clima: nostálgico, ensolarado, um pouco imperfeito. Dá para recriar com degradês suaves em cores quentes, posicionados na borda do quadro e mesclados sobre uma imagem, e os detalhes abaixo são o que faz o efeito parecer real e não colado por cima.

Como é um vazamento de luz de verdade

Como a luz entra por uma fresta, o vazamento quase sempre começa numa borda ou num canto e se dissolve para dentro. No filme colorido, o brilho costuma ir do vermelho profundo na ponta fraca, passando pelo laranja, até o amarelo e quase branco onde era mais forte. Ele clareia a foto em vez de escurecer, e não tem contorno duro.

• Posição: uma borda ou um canto, muitas vezes de um lado só.
• Cor: vermelho para laranja para amarelo claro, mais quente na borda externa do brilho.
• Forma: faixas verticais suaves ou um clarão difuso, nunca um círculo perfeito no meio.
• Comportamento: acrescenta luz, lavando as sombras por onde passa.
• Variação: nenhum quadro é igual ao outro, e isso faz parte do charme.

Degradês de light leak para copiar

Cada um destes é um único degradê CSS que termina em transparente, então pode ficar por cima de uma foto ou de um fundo escuro. Aqui eles aparecem sozinhos sobre fundo escuro; em cima de uma foto, mescle como explica a próxima seção.

Como adicionar um light leak em CSS

Coloque o degradê numa camada acima da imagem e mescle com screen, que só clareia, igual à luz perdida. Baixe a opacidade até a foto continuar bem legível. A referência de mix-blend-mode do MDN lista os outros modos; lighten e soft-light também valem o teste.

.photo {
  position: relative;
  isolation: isolate;
}

.photo img {
  display: block;
  width: 100%;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 45% 80% at 0% 50%,
    #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%
  );
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

Para parecer mais com filme, coloque granulação por cima de tudo e esquente um pouco as sombras. Degradês granulados e overlay de degradê em CSS explicam as duas camadas.

Preste atenção também na ordem das cores. A maioria dos vazamentos pouco convincentes fica num laranja chapado de ponta a ponta ou vira rosa na ponta clara. Deixe o ponto mais quente claro e levemente amarelo, esfrie passando pelo âmbar até o vermelho, e deixe o vermelho sumir na imagem em vez de terminar numa borda visível.

Onde os light leaks funcionam, e onde não

Os light leaks combinam com fotógrafos, festivais de cinema, músicos, campanhas de verão, viagens e tudo que é nostálgico. Eles casam naturalmente com paletas de degradês retrô e fotos quentes e desbotadas. Combinam menos com marcas precisas e técnicas, porque a graça toda está na imperfeição.

Light leaks em vídeo e animação

Em vídeo, os light leaks costumam ser usados como transição: um clarão quente atravessa o quadro em mais ou menos meio segundo, chega quase ao branco e revela o próximo clipe. Use curtos e de vez em quando. Um vazamento entre cenas parece filme; um em cada corte parece pacote de filtros.

Para posts estáticos que precisam de calor sem overlay, um fundo vivo e quente faz o mesmo trabalho com mais discrição. No Gradiently, a luz e a granulação de um Mark são renderizadas ao vivo em qualquer tamanho, e a área mais calma dele vai sozinha para trás das suas palavras, então uma superfície ensolarada e cinematográfica nunca coloca o ponto mais claro atrás de um título. Fotos adicionadas no Studio também podem receber um banho quente nas cores do Mark, para que imagem e fundo compartilhem o mesmo brilho. Para o efeito parecido de luz em volta de formas, veja efeito de brilho; para fotógrafos especificamente, identidade visual para fotógrafos.