Íris.
Portafolio de artista 3D en negro profundo: nombre gigante en degradé de grafito a hielo de punta a punta de la pantalla, escultura iridiscente que sigue al mouse en el centro, dos franjas de renders que corren con el scroll en sentidos opuestos, texto que se ilumina letra a letra, hoja blanca de servicios numerados y tarjetas de proyecto que se apilan y se encogen.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Kanit
- Texto
- Kanit
ParaMarcas, agencias y startups que contratan trabajo visual de autor
Secciones de la página01/08nav distribuida
Del DESIGN.md, que por ahora está en portugués.
ParaMarcas, agencias y startups que contratan trabajo visual de autor
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Kanit en los títulos, Kanit en el texto.
TítulosKanit
Aag!
Íris en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoKanit
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- profesional que vende su propio nombre
- portafolio con muchas imágenes fuertes
- marca con morado, magenta o colores iridiscentes
- trabajo en 3D, motion o visual digital
- negocio local de servicio con agendamiento
- salud, derecho o finanzas
- quien no tiene imágenes propias que mostrar
- público que prefiere un look sobrio
Tono
Lo que lo hace Íris
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Nome de ponta a ponta:
h1em14.5vw, uma linha só (whitespace-nowrap), dentro deoverflow-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). - 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; dosmpara cima encosta no pé do hero, cobrindo a parte de baixo do nome. - 03
Entrada do hero:
data-sobecom--ye--atrasopróprios (nav −20px/0s, nome 40px/0.15s, texto 20px/0.35s, botão 20px/0.5s, escultura 30px/0.6s). - 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-timelineCSS). - 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ãoaria-hidden. - 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). - 07
Cartões de projeto que empilham: cada cartão é
sticky(top 6rem/8rem + 28px por índice) num trilho de 85vh e encolhe para1 − (restantes × 0.03)quando o próximo chega por cima.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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
#0C0C0Cem 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())eprefers-reduced-motion: no-preference. Sem suporte, a página fica parada e completa. - Imagens com
width/height; abaixo da dobra comloading="lazy". Imagem decorativa (faixas, ícones) comalt=""earia-hidden.
Adaptar à marca do cliente
- Trocar o nome no
h1e medir de novo ovwpara 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).
Lleva Íris
a tu cliente.
En Claude Code, Cursor o cualquier IA: lee el DESIGN.md de este diseño y aplica tokens, fuentes y textos en el proyecto del cliente.
Similares
Landings con tono o nicho en común con Íris.