Ravox UIby Ravox Labs
Landingescuroousadolúdicotecnológico
ÍÍris

Íris.

Portfólio de artista 3D em preto profundo: nome gigante em degradê de grafite a gelo de ponta a ponta da tela, escultura iridescente que segue o mouse no centro, duas faixas de renders que correm com a rolagem em sentidos opostos, texto que acende letra a letra, folha branca de serviços numerados e cartões de projeto que empilham e encolhem.

Tipo
Landing page
Tema
Escuro
Títulos
Kanit
Texto
Kanit

ParaMarcas, agências e startups que contratam trabalho visual autoral

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/iris

Seções da página01/08nav espalhada

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

ParaMarcas, agências e startups que contratam trabalho visual autoral

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Kanit nos títulos, Kanit no texto.

TítulosKanit

Aag!

Íris em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoKanit

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • profissional que vende o próprio nome
  • portfólio com muitas imagens fortes
  • marca com roxo, magenta ou cores iridescentes
  • trabalho em 3D, motion ou visual digital
Evitar para
  • negócio local de serviço com agendamento
  • saúde, direito ou finanças
  • quem não tem imagens próprias para mostrar
  • público que prefere visual sóbrio
Nichos
artista 3Dmotion designerdesigner de produto digitalestúdio criativoilustradordiretor de artedesenvolvedor criativofotógrafo de produtofreelancer de design

Tom

ousadolúdicotecnológicoautoral

O que faz ser Íris

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Nome de ponta a ponta: h1 em 14.5vw, uma linha só (whitespace-nowrap), dentro de overflow-hidden. O valor foi medido para "OI, SOU A NINA" (14 caracteres): texto novo pede nova medida (largura do texto ÷ largura da tela, deixar ~2% de folga para a barra de rolagem).

  2. 02

    Escultura com ímã (Ima.tsx): a peça central segue o cursor quando ele chega a 150 px dela (deslocamento/3; entra em 0.3s ease-out, volta em 0.6s ease-in-out). Desligado no toque e com movimento reduzido. No celular fica no meio da tela; do sm para cima encosta no pé do hero, cobrindo a parte de baixo do nome.

  3. 03

    Entrada do hero: data-sobe com --y e --atraso próprios (nav −20px/0s, nome 40px/0.15s, texto 20px/0.35s, botão 20px/0.5s, escultura 30px/0.6s).

  4. 04

    Duas faixas presas à rolagem: 6 renders triplicados por fileira (420×270, rounded-2xl); a de cima anda para a direita e a de baixo para a esquerda enquanto a página rola (view-timeline CSS).

  5. 05

    Sobre com quatro ícones 3D nos cantos, entrando pelos lados em fatias escalonadas da rolagem, e texto que acende letra por letra (opacidade 0.2 → 1 entre o topo do parágrafo a 80% da tela e o pé dele a 20%). O texto inteiro fica num sr-only; as letras são aria-hidden.

  6. 06

    Folha branca de serviços com cantos de cima arredondados, números gigantes à esquerda e réguas de 1px rgba(12,12,12,0.15).

  7. 07

    Cartões de projeto que empilham: cada cartão é sticky (top 6rem/8rem + 28px por índice) num trilho de 85vh e encolhe para 1 − (restantes × 0.03) quando o próximo chega por cima.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Portfólio de artista 3D em preto profundo (#0C0C0C) com texto gelo (#D7E2EA) e uma só família,
  • Kanit, do 300 ao 900. O nome da pessoa ocupa a largura inteira da tela em Kanit Black com degradê de
  • grafite a gelo (#646973 → #BBCCD7, 180°). A única cor quente é o botão de contato: pílula em degradê
  • ameixa → magenta → violeta → laranja queimado, com contorno branco por dentro. Todo o resto de cor vem
  • das imagens: renders 3D iridescentes. Os raios são grandes (40/50/60 px) e os títulos de seção são
  • enormes (clamp(3rem, 12vw, 160px)), sempre em caixa alta, entrelinha 1.

Regras

  • Fundo #0C0C0C em tudo, menos a folha de serviços (#FFFFFF, texto #0C0C0C).
  • Uma fonte só (Kanit). Títulos em 900, nomes em 500, textos longos em 300.
  • O degradê de título (.iris-grad) só em títulos grandes sobre o preto; nunca em texto corrido.
  • O botão em degradê (.iris-botao) é só para contato. Ação secundária usa a pílula fantasma (.iris-fantasma: borda 2px gelo, fundo gelo a 10% no hover).
  • Movimento: tudo que depende de rolagem está dentro de @supports (animation-timeline: view()) e prefers-reduced-motion: no-preference. Sem suporte, a página fica parada e completa.
  • Imagens com width/height; abaixo da dobra com loading="lazy". Imagem decorativa (faixas, ícones) com alt="" e aria-hidden.

Adaptar à marca do cliente

  • Trocar o nome no h1 e medir de novo o vw para ele ir de ponta a ponta sem estourar.
  • Cor da marca entra no degradê do botão (manter 4 paradas, escura → saturada → saturada → quente) e em ::selection. O degradê dos títulos fica neutro (grafite → gelo) para não brigar com as imagens.
  • A escultura do hero precisa de fundo transparente e proporção próxima de 1100×1400.
  • Os ícones do "Sobre" são objetos 3D soltos, com fundo transparente, no mesmo acabamento da escultura.
  • Os projetos pedem 3 imagens: duas horizontais (1280×800, 1280×1000) e uma vertical (1000×1400).
Claude Code

Leve o Íris
para o cliente.

Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.

/escolher-design usar o design Íris (iris)

Parecidos

Landings com tom ou nicho em comum com Íris.

Ver catálogo
LandingescuroVer design

Ruído

LandingclaroVer design

Retícula

LandingescuroVer design

Lado B

LandingescuroVer design

Revelação