Habilidade de Metal Líquido

Produza um único index.html autônomo que renderize uma superfície metálica em tempo real em tela cheia — cromo derretido com um brilho iridescente — com uma sobreposição tipográfica limpa por cima.

Por que este é um artefato poderoso

O OpenDesign detecta getContext('webgl2') e renderiza este arquivo em visualização poderosa — um iframe isolado entre origens com allow-same-origin. O pipeline completo da GPU está disponível; você não precisa contornar o sandbox opaco.

Mapa de recursos

webgl-liquid-metal/
├── SKILL.md      ← you're reading this
└── example.html  ← a working domain-warped chrome shader (READ FIRST)

Fluxo de trabalho

Etapa 0 — Leia a referência

Leia example.html de ponta a ponta. Observe a forma: um campo de altura fbm com distorção de domínio; uma normal de superfície reconstruída a partir do gradiente desse campo (diferenças finitas); sombreamento metálico = rampa de cromo difuso + um especular nítido (pow(dot(n,h), 80)) + um termo de fresnel; e uma paleta de cosseno iridescente (0.5 + 0.5*cos(2π(x + phase))) acionada por altura e fresnel para o brilho de filme fino.

Etapa 1 — Escolha a superfície

• Cromo derretido (padrão): altura fbm com distorção de domínio, especular nítido, base cinza fria.
• Papel holográfico: aumente a iridescência, amplie a fase da paleta, suavize o especular.
• Mancha de óleo: base mais escura, distorção de alta frequência mais fina, bandas de fresnel mais fortes.

Etapa 2 — Construa index.html

• Um arquivo, zero requisições externas. Triângulo de tela cheia + shader de fragmento.
• Reconstrua a normal a partir de pequenos deslocamentos de altura (e ≈ 0.0016); um expoente especular nítido (≥ 60) é o que é lido como "metal".
• Mantenha a iridescência com bom gosto — ligue-a ao fresnel/altura para que apareça em ângulos rasantes, não em todos os lugares.
• Compile os shaders com log de erros para que um erro de digitação falhe ruidosamente, não silenciosamente em preto.

Etapa 3 — Sobreposição + marca

• Mapeie as cores de destaque para o DESIGN.md ativo quando um estiver presente; caso contrário, uma paleta metálica restrita. A referência tinge o especular mais quente em direção ao verde limão #63fe13 como o destaque da marca.
• Título ≤ 13 caracteres mais uma linha de apoio. Mantenha o metal como o herói.

Etapa 4 — Autoavaliação (P0)

• Renderiza continuamente a ~60fps; o indicador de FPS é atualizado.
• É lido inequivocamente como metal: um destaque especular nítido e em movimento.
• A iridescência está presente, mas restrita (ângulos rasantes), não uma lavagem de arco-íris.
• Redimensiona de forma nítida ao redimensionar a janela (sem alongamento / borrão).
• Degrada para uma mensagem (não uma página em branco) se webgl2 estiver indisponível.