Ícones, capas e mascotes animados em páginas do Notion

Um ícone de página do Notion pode ser um GIF animado?

Você pode enviar um. A central de ajuda do Notion diz que é possível adicionar "sua própria imagem ou URL de imagem pela aba Upload", que "os ícones enviados devem ter, idealmente, 280 x 280 pixels", e a lista de tipos de arquivo compatíveis inclui GIF. Guias de terceiros sobre o Notion relatam que GIFs animados funcionam como capas. As páginas de ajuda do Notion não detalham como a animação se comporta em todos os lugares onde um ícone aparece, então confira no cabeçalho da página, na barra lateral, nas menções de link e no app para celular antes de aplicar em um espaço de equipe.

Pense no menor lugar onde ele aparece. Na barra lateral o ícone é minúsculo, então uma piscada sutil ou um movimento de boca some. Escolha um loop em que a silhueta inteira se mova:

• Um aceno, um pequeno pulo ou uma inclinação de cabeça funcionam no tamanho de ícone.
• Mantenha o loop perfeito; um salto entre o último e o primeiro frame fica evidente quando ele se repete para sempre.
• Recorte bem justo para que o personagem preencha o quadrado.

Ao enviar, o Notion oferece uma caixa de seleção, Add to workspace Emoji library. Marcando essa opção, a imagem vira um emoji personalizado que você pode reutilizar como ícone de página, reação ou texto em linha em todo o workspace.

Qual deve ser o tamanho de uma capa animada no Notion?

A resposta do Notion é que "as imagens de capa são dinâmicas conforme a largura da janela, então não existe um tamanho específico que funcione melhor", com a recomendação de "imagens com pelo menos 1.500 pixels de largura". Guias de terceiros costumam sugerir 1500×600. Como a faixa visível muda com a janela, coloque o personagem no centro e deixe fundo liso dos dois lados; qualquer coisa perto das bordas é cortada em telas estreitas.

Um GIF pequeno de personagem não precisa ser esticado até 1.500 px. Em vez disso, coloque-o sobre um canvas largo com a mesma cor de fundo, o que mantém o arquivo pequeno porque essa margem nunca muda entre os frames. Os dois comandos foram executados no ffmpeg 7.1.1 e geraram um ícone de 280×280 e uma capa de 1500×600 a partir de um GIF quadrado de 480 px:

# Icon: 280x280 from a square GIF
ffmpeg -i mascot.gif -filter_complex "scale=280:280:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 icon.gif

# Cover: center the 480 px GIF on a 1500x600 canvas of the same background color
ffmpeg -i mascot.gif -filter_complex "pad=1500:600:(ow-iw)/2:(oh-ih)/2:color=0xF4EFE6,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:diff_mode=rectangle" -loop 0 cover.gif

Substitua 0xF4EFE6 pela cor de fundo exata do seu GIF. stats_mode=diff e diff_mode=rectangle fazem as etapas de paleta focarem nos pixels que se movem, o que ajuda tanto na qualidade quanto no tamanho.

Confira o tamanho antes de enviar. A central de ajuda do Notion diz que, no plano Free, "todos os arquivos enviados precisam ter menos de 5 MB" e, nos planos pagos, imagens (PNG, JPG) precisam ter menos de 5 MB. Se o GIF estiver grande demais, reduza a taxa de frames, encurte o loop ou diminua o personagem.

Como evitar que um ícone GIF pareça uma caixa no modo escuro?

O tema do Notion é uma configuração de cada pessoa, e uma página tem um único ícone, então não dá para publicar uma versão clara e outra escura do mesmo ícone. A questão é como o fundo do GIF se comporta nos dois:

A transparência do GIF é ligada ou desligada por pixel, então bordas suaves com anti-aliasing feitas para um fundo claro deixam um halo pálido em páginas escuras. Se você quiser transparência, converta a partir de uma fonte com canal alfa real e aceite bordas duras; o guia de GIF transparente traz as configurações do ffmpeg. Muitas vezes o bloco é a opção mais limpa: um quadrado colorido com o personagem dentro parece intencional nos dois temas.

Capas são mais fáceis. Uma capa é uma faixa larga, então uma cor de fundo que fica entre o claro e o escuro (uma cor suave da marca) fica bem em qualquer tema.

Posso incorporar uma animação Rive interativa no Notion?

Só por meio de um link hospedado. O Notion não executa seus próprios scripts, mas o bloco /embed exibe conteúdo de mais de 1.900 domínios pelo serviço Iframely. A documentação do Rive diz que a opção Embed link é voltada para "plataformas que geram prévia de links automaticamente, como Notion e Telegram". As limitações:

• Gerar URLs de embed exige um plano Rive Voyager ou Enterprise e um arquivo no editor do Rive.
• Uma URL de embed é um retrato fixo; depois de alterações, você precisa gerar um novo link.
• O Rive observa que os embeds "usam iframes e não dão acesso às APIs do runtime do Rive", então o personagem pode tocar sua state machine e reagir a cliques dentro do frame, mas nada no Notion consegue definir o humor dele.

Você também pode colar a URL de uma página sua que hospeda a animação. Se ela vai renderizar depende de o serviço de embed do Notion suportar esse site; o Notion avisa que alguns sites não podem ser incorporados e mostram "Failed to Load".

Como rodar um mascote Rive de verdade em um site Super.so?

O Super transforma páginas do Notion em um site e permite adicionar código. A documentação diz que o código para o site inteiro vai na página Code do editor do site, com as seções Head, Body e CSS, e que o código de uma única página é adicionado "clicando no ícone de código em uma página específica em 'Pages' do seu site". O código do Body "será adicionado ao topo da página", então um canvas com posição fixa é a forma mais simples de posicionar: ele não depende da estrutura de página do Notion.

<canvas id="mascot" width="160" height="160" role="img" aria-label="Animated mascot"
  style="position: fixed; right: 16px; bottom: 16px; width: 160px; height: 160px; z-index: 50"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://cdn.example.com/character.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  document.getElementById("mascot").addEventListener("click", () => {
    r.viewModelInstance.trigger("yes").trigger();
  });
</script>

• Hospede o .riv em HTTPS com CORS ativado, igual a qualquer embed em site.
• O Super lista as cores do Notion como variáveis CSS, por exemplo --color-bg-default (#FFFFFF no modo claro e #2F3437 no modo escuro, segundo a tabela dele). Como o canvas do Rive é transparente, o personagem fica sobre qualquer fundo que o site use.
• Adicione por página se o mascote pertence a uma só página, como a página inicial de uma central de ajuda, em vez de colocá-lo em todas.

A configuração completa do canvas está em como adicionar animação a um site.

Quais exportações do Charmotion servem para Notion e Super?

O Charmotion cria 17 animações a partir de uma imagem de personagem ou logo. Para o Notion, a exportação em GIF (480 px, fundo sólido) é a opção direta: reduza para 280×280 para usar como ícone e adicione margens para a capa com os comandos acima, usando a mesma cor do fundo do GIF. O Charmotion não exporta GIFs transparentes; se precisar de um, converta você mesmo o WebM com fundo transparente e espere bordas duras.

Para um site Super.so, use o .riv: dez humores em loop selecionados por um número mood e seis triggers de reação única, com código para web para adaptar. O .riv e o vídeo transparente estão em todos os planos pagos (a partir de US$ 20/mês), junto com MP4, GIF e o vídeo de abertura 9:16 com fundo sólido.

Como adicionar um ícone e uma capa com mascote animado a uma página do Notion

1. Escolha o loop. Escolha um loop perfeito em que o personagem inteiro se mova, como um aceno ou um quique.
2. Crie o ícone. Redimensione o GIF para 280×280 com o ffmpeg e gere a paleta de novo.
3. Crie a capa. Coloque o GIF em um canvas de 1500×600 com a mesma cor de fundo, deixando o personagem no centro.
4. Confira o tamanho. Mantenha cada arquivo abaixo de 5 MB; se passar, reduza a taxa de frames ou encurte o loop.
5. Envie. Use a aba Upload para o ícone e a opção Change cover para a capa e, se quiser, adicione o ícone à biblioteca de emojis do workspace.
6. Teste os dois temas. Veja a página nos modos claro e escuro, no desktop e no celular, e também na barra lateral.

Perguntas frequentes

Por que o Notion não aceita o upload do meu GIF?

A causa mais comum é o tamanho. A central de ajuda do Notion diz que, no plano Free, os uploads precisam ter menos de 5 MB, e indica o mesmo limite de 5 MB para imagens nos planos pagos. Reduza a taxa de frames, encurte o loop, corte o espaço vazio ou diminua o GIF antes de enviar de novo.

Posso definir um ícone de página diferente para o modo escuro no Notion?

As páginas de ajuda do Notion não descrevem um ícone separado para o modo escuro. Cada pessoa escolhe o próprio tema e a página mostra o mesmo ícone para todos, então crie uma imagem que funcione nos dois, por exemplo um personagem sobre um bloco colorido com cantos arredondados.

Posso usar o GIF do meu mascote como emoji personalizado no Notion?

Sim. Ao enviar um ícone de página, marque Add to workspace Emoji library. Assim o Notion permite usá-lo como ícone de página, como reação ou dentro do texto em qualquer página do workspace. Teste no tamanho de reação, em que os detalhes pequenos se perdem.

Respostas rápidas deste guia

• Um ícone de página do Notion pode ser animado?
• Posso incorporar uma animação Rive no Notion?

Fontes

• Customize and style your content (icons and covers), Notion Help Center
• Images, files and media, Notion Help Center
• Embeds, bookmarks and link mentions, Notion Help Center
• Sharing and embedding: Embed URLs, Rive
• Custom code, Super Docs
• Notion colors, Super Docs
• How to add Notion cover images (GIFs too), Simple.ink
• FFmpeg filters documentation (pad, palettegen, paletteuse), FFmpeg