Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingDarkboldplayfultechnological
ÍÍris

Íris.

3D artist portfolio in deep black: a giant name in a graphite-to-ice gradient edge to edge, an iridescent sculpture that follows the mouse at the center, two bands of renders running in opposite directions with scroll, text that lights up letter by letter, a white sheet of numbered services and project cards that stack and shrink.

Type
Landing page
Theme
Dark
Headings
Kanit
Body
Kanit

ForBrands, agencies and startups hiring authored visual work

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/iris

Page sections01/08spread-out nav

All the copy lives in content.ts and the colors in tokens.css.
Concept

From DESIGN.md, which is in Portuguese for now.

ForBrands, agencies and startups hiring authored visual work

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Kanit for headings, Kanit for body text.

HeadingsKanit

Aag!

Íris in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyKanit

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • professional selling their own name
  • portfolio with many strong images
  • brand with purple, magenta or iridescent colors
  • 3D, motion or digital visual work
Avoid for
  • local service business with appointments
  • healthcare, law or finance
  • anyone with no images of their own to show
  • audience that prefers a sober look
Niches
3D artistmotion designerdigital product designercreative studioillustratorart directorcreative developerproduct photographerfreelance designer

Tone

boldplayfultechnologicalauthored

What makes it Íris

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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

Take Íris
to your client.

In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.

Use with AI

Similar

Landings that share a tone or niche with Íris.

Browse catalog
LandingDarkView design

Ruído

LandingLightView design

Retícula

LandingDarkView design

Lado B

LandingDarkView design

Revelação