Íris.
Portfolio d'artiste 3D sur noir profond : nom géant en dégradé du graphite à la glace d'un bord à l'autre de l'écran, sculpture irisée qui suit la souris au centre, deux bandes de rendus qui défilent en sens opposés, texte qui s'allume lettre après lettre, feuille blanche de services numérotés et cartes de projet qui s'empilent et rétrécissent.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Kanit
- Texte
- Kanit
PourMarques, agences et startups qui commandent un travail visuel d'auteur
Sections de la page01/08nav étalée
Extrait du DESIGN.md, en portugais pour l'instant.
PourMarques, agences et startups qui commandent un travail visuel d'auteur
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Kanit pour les titres, Kanit pour le texte.
TitresKanit
Aag!
Íris en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteKanit
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- professionnel qui vend son propre nom
- portfolio avec beaucoup d'images fortes
- marque avec violet, magenta ou couleurs irisées
- travail en 3D, motion ou visuel digital
- commerce local de services sur rendez-vous
- santé, droit ou finance
- ceux qui n'ont pas d'images à eux à montrer
- public qui préfère un style sobre
Ton
Ce qui fait Íris
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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).
Emmenez Íris
chez votre client.
Dans Claude Code, Cursor ou n'importe quelle IA : elle lit le DESIGN.md de ce design et applique tokens, polices et textes au projet du client.
Similaires
Des landings qui partagent un ton ou un secteur avec Íris.
