Nook — Seu notch virou um cantinho.

A ideia

O notch é a única parte da tela do MacBook que ninguém usa. O Nook o transforma numa ilha para bater o olho, do jeito que designers e criadores trabalham: música e chamadas, mas também arquivos, capturas, cores e a próxima tarefa — tudo a um passar de mouse.

01Um olhar, uma coisaA ilha fechada mostra a atividade ao vivo mais importante. Uma segunda espera numa pequena bolha ao lado.
02Calma por padrãoO movimento é dosado pela frequência com que você o vê. O que aparece cem vezes por dia não quica.
03Nunca chutarQuando o Nook diminui um arquivo, ele mede se a imagem continua igual.
04Palavras gentisCurtas, gentis, simples: “Tudo livre por hoje”, “Solte arquivos aqui para deixá-los à mão”.
05Tudo fica no seu MacSem conta, sem rastreamento, sem nuvem.

A marca é o produto

Um arco creme — o cantinho, um lugar pequeno e abrigado — sobre um quadrado cor de mel. Dentro dele, uma pílula preta é a ilha, com um ponto laranja e uma pequena onda sonora: algo está ao vivo. No site a marca é código, não imagem — ela anima a própria história.

A marca é código, não imagem — veja ela se montar. Passe o mouse: a ilha se estica e a onda toca.

Mel

#FF9F43

O destaque: botões, estados ao vivo, a onda sonora

Quase preto

#0C0A09

Fundo do site, nunca preto puro

Ilha

#000000

A própria ilha, para se fundir ao notch

Coral → Rosa

#FF6F61 → #E8578F

Palavras em degradê e luz, nunca interface

Menta

#3CCF91

“Deu certo”: economia, sucesso

A tipografia do app é SF Rounded, para que uma forma preta no notch ainda pareça amigável. O app vem com Mel e oferece doze cores de destaque, além de seguir a do próprio Mac.

Uma coisa de cada vez

A ilha tem um pequeno sistema de prioridades: aberta vence tudo; uma tecla vence um toast; uma gravação vence a música, porque esquecê-la custa mais caro. Descanse o mouse nela e ela cresce.

Ilha do Nook — Música, com a onda sonora ao vivo — Música, com a onda sonora ao vivo

Ilha do Nook — Cresce ao passar o mouse — miniplayer — Cresce ao passar o mouse — miniplayer

Ilha do Nook — Evento daqui a dez minutos — Evento daqui a dez minutos

Ilha do Nook — Gravando — Parar, Recomeçar, Descartar — Gravando — Parar, Recomeçar, Descartar

Ilha do Nook — Tecla de volume — Tecla de volume

Ilha do Nook — Prévia da captura, pronta para arrastar — Prévia da captura, pronta para arrastar

Ilha do Nook — Duo — uma segunda atividade ao lado da ilha — Duo — uma segunda atividade ao lado da ilha

Ilha do Nook — Timer de foco rodando — Timer de foco rodando

Nook aberto no Início: tocando agora com controle de volume e a agenda do dia — Aberto — Início: tocando agora e a agenda do dia de todos os calendários, com Entrar a um clique

A Shelf: uma bandeja de arquivos com prévias reais — Shelf — uma bandeja para os arquivos que você está prestes a usar

Zonas de soltar mostrando o resultado medido antes de soltar — As zonas de soltar mostram o resultado real — “295 KB → 22 KB, −92%” — antes de você soltar

A barra de captura crescendo da ilha — ⌃⌥5 transforma a ilha numa barra de captura

O verificador de contraste sugerindo o tom aprovado mais próximo — Cor — um verificador de contraste que não só reprova: ele acha o tom mais próximo que passa

Duas listas de tarefas: Pra já e Pra depois — Tarefas — duas listas, Pra já e Pra depois, e nada mais

Markup sobre a aba Início real: Entrar destacado e numerado, a contagem marcada, a saudação pixelada, uma seta com o rótulo Entrar pelo notch — Markup numa captura real — caixa, número, marca-texto, pixelar o que é privado, uma seta com rótulo

Ajustes com todas as permissões num só lugar — Ajustes, do jeito Mac — todas as permissões num só lugar, com correção para as travadas

Movimento, dosado pela frequência

Toda animação usa um de cinco tokens. Reduzir Movimento é respeitado em tudo; parado, o Nook fica em cerca de 0% de CPU.

micro100 mshovers, barras de nível

quick160 msfechar, trocas na ilha fechada, abas — vistos 100+ vezes por dia

standard200 mstoasts, a bolha do Duo, mudanças na Shelf

open220 msabrir a ilha: sem quique, acontece o dia todo

delight400 mssó momentos raros ou de primeira vez, como as boas-vindas

Um MacBook que conta a história

Um MacBook Pro feito em Three.js a partir de formas em código, iluminado como a marca. A tampa abre ao carregar; a rolagem o vira para você, sobe até o notch e toca seis capítulos na tela. A tela é a ilha real em HTML, projetada no display a cada frame — dá para passar o mouse.

nook-mu-three.vercel.app ↗

Não é mockup — é o site real, incorporado ao vivo. Role: a tampa abre, o MacBook gira, os capítulos tocam.

Um capítulo da história: música na ilha — Seis capítulos tocam na tela do MacBook enquanto o texto muda ao lado

Um capítulo da história: a ilha aberta — A tela é HTML ao vivo, não um vídeo

A seção de arquivos menores — Números honestos — do benchmark do próprio app sobre a captura mostrada

A seção do estúdio — “Direto do app”: estados reais tirados dos snapshots do próprio Nook

Não dá para instalar um app de Mac no celular — então o celular ganha Enviar para meu Mac no lugar de um botão de download inútil.

Quatro dias, revisados a fundo

Construído com o Claude Code como par de programação com IA — 76 testes unitários, 89 verificações no app, testes de snapshot de cada estado da ilha. As revisões guiaram o trabalho: uma única revisão escrita do site virou 18 correções numeradas.

30 outO briefing: voz, estados da ilha, ganchos no sistema

31 outA ilha e as atividades ao vivo; as ferramentas de estúdio; Markup; otimização medida por SSIM; zonas de soltar com resultado ao vivo; tokens de movimento; o primeiro site

1 novTarefas (Pra já e Pra depois), desfazer e controle por teclado, o controle de volume

2 novPermissões, Entrar em chamadas, miniplayer, barra de captura, Markup e Shelf refeitos, sincronia com Lembretes, o site 3D e uma revisão de UI/UX ponto a ponto

Próximos passos: Developer ID e notarização, atualizações automáticas, domínio próprio, um vídeo de demonstração de verdade. É um beta público — e isso fica claro em todo lugar, inclusive aqui.