webgl-form

WebGL form

A forma é a onda: a folha dobrada do stripe.com, exatamente como o stripe.com a desenha. O veredito do usuário após muitas tentativas: "Só gosto da Onda porque ela é realmente uma boa forma. A Onda é o que eu queria." Todas as outras formas tentadas (anéis, nós, molas, um funil enrolado, uma folha emaranhada) foram rejeitadas. Portanto, uma ideia nunca se torna uma nova forma. Ela se torna uma onda com suas próprias cores, corte e configurações.

Arquivo	O que é
reference/stripe-three.js	O motor. Three.js r178: a folha dobrada construída no vertex shader, as torções da Stripe como uma lista de curvas, o sombreamento não iluminado da Stripe, a paleta pintada, o pós-passe e TAKES / PRESETS com as cinco ondas que funcionam abaixo. Copie-o e depois adicione predefinições.
reference/stripe-notes.md	A onda hero do stripe.com como ela é enviada: a geometria da dobra, os shaders, a câmera e as configurações de todas as suas quatro ondas. Leia antes de ajustar.
reference/twist-ribbon.js, reference/nib-ribbon.ts	Fitas WebGL2 mais antigas (OpenRouter, OpenEvidence). Apenas para projetos que já as executam.
reference/ReactMount.tsx	Montagem React/Next com fallback.

0. O que perguntar

O prompt carrega significado, nunca uma forma. Formas foram o fracasso: toda forma nomeada construída literalmente (um anel de Möbius, um nó, uma mola, um tornado) resultou em clip art 3D. A fita do OpenRouter funcionou porque o significado ("muitos modelos entram, um endpoint sai") se tornou configurações (onde a folha vira de lado), não um desenho do produto.

Pergunte no máximo três coisas, em uma única mensagem:

1. A ideia, em uma frase: o que o produto faz, ou a única coisa que a arte deve dizer. ("Cada modelo por um endpoint.")
2. As cores: as da marca, ou "leia-as do código" (os tokens em globals.css, um tema Tailwind, as cores do logotipo).
3. Onde fica: uma faixa hero (abaixo ou ao redor do texto), uma célula, um cartão; uma página clara ou escura.

Nenhum prompt é um uso válido: leia as cores do código, use a predefinição wave no posicionamento hero claro da Stripe e avise em uma linha.

Uma forma nomeada ("faça um tornado"): não construa a forma. Leia como uma dica sobre significado (um tornado: ascensão, rotação, força) e mapeie para as configurações abaixo. Avise o usuário em uma linha que a skill mantém a onda e por quê. Se ele ainda insistir, construa a forma como uma tomada extra ao lado das ondas, etiquetada, para que ele possa comparar.

Do significado às configurações (pontos de partida, não regras):

A ideia parece	Comece de	Mude
Calma, confiança, dinheiro, saúde	deep	Ritmo 4e-5, paleta fria ou neutra-quente, corte amplo
Muitos em um, foco, um endpoint	wave	Coloque o estiramento de lado (o aperto) abaixo ou ao lado do texto
Energia, tempo real, velocidade	petal ou fold	Ritmo até 8e-5, paleta quente
Mudança, dois lados, uma reviravolta	turn	A virada mostra ambas as faces
Nada específico	wave	Apenas a paleta da marca

Saída: duas ou três tomadas em uma página de tomadas, a mesma família de ondas em diferentes predefinições, cortes ou paletas. O usuário escolhe uma; delete o resto.

1. A forma

• A folha dobrada: um plano de 400 x 400 (128 x 256 segmentos) dobrado ao meio: a camada superior, uma tira de 32 unidades curvada em um meio cilindro (a dobra arredondada), a camada inferior escondida por baixo, separadas por 4 unidades nas extremidades e 2 no meio. Em pé com dois quartos de volta: comprimento ao longo de x, espessura ao longo de y, largura ao longo de z. Espessa, com borda arredondada, nunca uma linha fina. Construída a partir do uv no vertex shader (folded(uv)), então as normais são exatas.
• As três torções da Stripe a moldam: rotações sobre os eixos diagonais (.5, 0, .5) e (0, .5, .5), cada uma suavizada pelo passo suave característico da Stripe exp2(-exp2(n) * pow(x, n)) ao longo da largura (u) ou do comprimento (v). No motor: stripeTwists([x, y, z], [powX, powY, powZ]) a partir dos números da Stripe. A torção x deriva no ruído ao longo do comprimento: isso, com a onda de ruído, é todo o movimento. As partes se movem; o todo nunca gira.
• A onda de ruído: p.y += amount * noise(x * fx + t, z * fz + t).
• Posicionamento no quadro da Stripe: uma tela de 1392px de largura em unidades de pixel, uma câmera ortográfica em (100, 0, 5000) virada 0.02 rad em torno de y; todo número escala por largura da tela / 1392. Sempre grande e cortada pelo seu quadro, nunca pequena e flutuante.
• Ritmo: o relógio da Stripe, 4e-5 a 8e-5 por milissegundo. Lento de propósito.

2. As cinco ondas que funcionam

Quatro são as ondas que o stripe.com envia, com suas configurações exatas (torção x, y, z; potências; onda de ruído; posicionamento; brilho; ritmo). A quinta adiciona uma volta.

Predefinição	Fonte	Torção x, y, z / potências	Onda de ruído	Rotação; escala; posição	Brilho	Ritmo, deslocamento
wave	Hero clara da Stripe	-0.65, 0.41, -0.58 / 3.63, 0.7, 3.95	0.005831, 0.016001, -7.821	-0.4496, -0.1176, 1.8744; 9, 8, 5; 380, -301.7, -11.1	1.98, 0.806, 0.834	4e-5, 17500
deep	Hero escura da Stripe, desenhada em branco	-0.055, 0.077, -0.518 / 3.95, 5.85, 6.33	0.003234, 0.00799, 6.051	-0.1596, -0.2836, -2.8156; 10, 10, 7; -24.3, -56.4, -11.1	0.6, 0.589, 1	4e-5, 1150
fold	Hero de cobrança da Stripe, virada para caber em uma célula	-0.424, 0.024, -1.312 / 1.81, 0.94, 4.76	0.005, 0.0212, 6.68	-0.666, -0.0314, 1.9; 6.05, 8.4, 6.99; 50, -100, -11.1	1.55, 1.174, 0.972	5.25e-5, 17500
petal	Onda de acento pequena da Stripe, ampliada e virada	0.059, 0.32, -0.397 / 3.63, 0.44, 5.99	0.005831, 0.016001, -7.821	-2.8756, 3.0959, -1.6; 9, 9, 9; 0, -50, -11.1	3.86, 0.923, 1	8e-5, 2275
turn	A hero clara, rolada completamente (a única volta adicionada que funciona)	da hero clara, mais LENGTH (1, 0, 0) ao longo de v, 2pi, deriva 0.15	da hero clara	da hero clara	da hero clara	da hero clara

Números em negrito diferem do posicionamento original da Stripe: a Stripe colocou essas ondas para seus próprios quadros, então em uma célula menor elas cortavam para uma mancha plana ou flutuavam pequenas. Re-posicione, nunca re-forme: para caber em um quadro diferente, mude apenas rotação, escala e posição (data-overrides em HTML).

3. O sombreamento: o próprio da Stripe, não iluminado

O hero ao vivo do stripe.com não tem iluminação alguma; é por isso que parece brilhante e luminoso, não plástico. Sua superfície é:

1. A paleta nas coordenadas (u, v) da folha.
2. Longos traços finos ao longo do comprimento: n0 = noise(u * 0.1, v * 0.5), n1 = noise(u * (600 + 300 n0), v * 4 n0) (muito finos na largura, quase constantes ao longo do comprimento), adicionados como n1 * 0.2 a 0.26 * (1 - blue * 0.9) * pdy * edge, onde edge = 1 - pow(4u(1 - u), 3) (mais fortes em direção às bordas abertas). Eles aparecem melhor em cores quentes; para uma paleta toda azul, reduza o desvanecimento azul para cerca de 0.4.
3. O termo de brilho pdy: dFdy(v) * resolution.y * amount, mapeado de -1..1 para 0..1, elevado a uma potência, suavizado pela rampa. Seu sinal distingue as duas faces da folha; perto de zero a folha está dobrando.
4. Contraste, saturação, matiz, então + (1 - pdy) * 0.25: a outra face e a dobra ficam pálidas. Essa é a faixa cremosa na dobra da Stripe.
5. Opaco, testado em profundidade. Pós-passe: um desfoque rotacional de 0.02 rad mantido longe de uma faixa nítida no meio, depois granulação (1.1) onde há cor. A granulação é o pontilhamento estático da Stripe: color + mix(1, -1, random(gl_FragCoord.xy * 0.01)) * 4/255 * amount. Ela nunca muda de quadro para quadro. Uma granulação re-randomizada a cada quadro cintila e parece ruído ("muito ruído comparado à Stripe"), e em vídeo também aumenta o arquivo várias vezes.

Nenhuma linha desenhada, nenhuma luz viajante, nenhuma iluminação normal, nenhum destaque de vinco: o sombreamento iluminado mais antigo do motor é mantido apenas como uma opção (shading: "lit") e não é o padrão.

4. A paleta

Pinte-a como a Stripe faz, não como manchas aleatórias (manchas aleatórias deram uma cor plana na maior parte da folha visível):

• Ao longo do comprimento (v), o gradiente principal. O hero claro: azul lavanda #9fb6ff, violeta #a978ff, magenta #e05cff, rosa choque #ff4fa8, laranja #ff7a2a, âmbar #ffa318.
• Na largura (u), um tom em direção às bordas abertas (cerca de 75%, desvanecendo em u = 0.22 de cada lado): lavanda #a9b6ff para o hero claro.
• Algumas manchas fracas (14, a 25%) apenas para variar.
• O palette(along, edge, blobs) do motor constrói isso. Outros conjuntos funcionais: oceano (azul para ciano), crepúsculo (laranja, rosa, violeta), lima (verde-azulado, verde, amarelo, laranja), brasa (rosa, vermelho, laranja, amarelo).
• A cor é da marca ou semelhante à Stripe. Decorativa, nunca dados.

5. Posicionamento na página

Cópia sobre a onda (sobreposição da Stripe)

Medido no stripe.com, 2026-10-22. Quando a onda corre sob o título, a Stripe não a mascara e não a deixa cobrir as palavras. Ela desenha o texto duas vezes:

1. Abaixo da tela: o texto em suas cores normais (Stripe: título azul marinho #061b31, corpo cinza). Onde a onda passa sobre ele, a onda o esconde.
2. Acima da tela (z-index sobre a camada da onda): um texto idêntico, mesmo tamanho e posição, aria-hidden, com mix-blend-mode: hard-light e cores translúcidas matizadas (Stripe: título rgb(45, 37, 100), um violeta profundo; corpo rgba(0, 14, 255, 0.5), um azul meio transparente). Sobre a página branca, parece o texto normal; sobre a onda, as letras assumem as cores da onda, permanecendo legíveis e parecendo impressas na seda.

Regras:

• Escolha os matizes da cópia superior a partir da marca: uma versão profunda e saturada da cor do título e um azul da marca (ou cor de destaque) meio transparente para o corpo. Verifique uma captura de tela onde a onda está mais brilhante: cada palavra ainda legível.

• As duas cópias devem corresponder exatamente (mesmos estilos de elemento, mesmo invólucro): construa-as a partir de uma fonte e empilhe-as em uma célula de grade (grid-area: 1 / 1), para que uma alteração de fonte ou largura mova ambas.

• Leitores de tela obtêm apenas a cópia inferior; a superior é aria-hidden e não recebe eventos de ponteiro. Botões e links permanecem na camada inferior e nunca são cobertos pela tela (mantenha-os fora do caminho da onda ou levante apenas os botões acima dela).

• Movimento reduzido e o fallback de imagem estática mantêm ambas as cópias; a mesclagem funciona também sobre a imagem estática.

• Nunca faça o texto desviar da onda com uma placa branca ou uma máscara: essa é a aparência que a dupla cópia existe para evitar.

• A onda preenche ou corta sua célula ou faixa hero. Legendas ficam em um pequeno chip da cor da página.

• Nunca sob o nav ou na próxima seção. Onde uma onda cortada encontra o topo de uma faixa, desvaneça-a com uma máscara CSS; onde encontra texto, use a dupla cópia acima.

• Sem etiquetas, números ou linhas de grade dentro da arte.

6. Regras de engenharia

• Three.js r178 instalado no projeto, carregado com um mapa de importação ("three": "/node_modules/three/build/three.module.js").
• THREE.ColorManagement.enabled = false; paleta NoColorSpace; ShaderMaterial no estilo GLSL1.
• failIfMajorPerformanceCaveat: true; em caso de falha, uma imagem estática da mesma onda. Monitore os tempos de quadro: remova o pós-passe, depois a DPR, depois pare em um quadro estático.
• DPR limitada a 2; ResizeObserver; pausa fora da tela e em abas ocultas; movimento reduzido desenha um quadro estabilizado. Sem reatividade de ponteiro.
• Até cerca de 13 ondas em uma página; acima de 16 o navegador descarta contextos.
• Nunca nomeie uma variável GLSL de step, mix ou fract.

7. Fluxo de trabalho

1. Obtenha a entrada (seção 0): a ideia, as cores, o local. Sem prompt: cores do código, a predefinição wave. Mapeie a ideia para uma predefinição, um corte e uma paleta; nunca para uma nova forma.
2. Compare com o real: capture a tela do hero do stripe.com em 1440x900, renderize o nosso em uma tela no quadro exato da Stripe (1392 x 761 em x 337) e compare os dois no mesmo corte. Textura e cor são julgadas assim, não de memória.
3. Para uma página de várias ondas, use as predefinições acima, reposicionadas para caber em cada quadro; mostre alternativas em uma página de tomadas.
4. Verifique em tamanho completo (Chrome headless): console limpo e cada tela construída; 1440 e 375; dois quadros com quatro segundos de diferença comparados por quarto (mudança desigual: partes se movendo; mudança igual: uma rotação); a onda preenche seu quadro.
5. Commit com uma mensagem que diga o que mudou para o olho.

Rejeitado, não repita

• Interpretar uma forma nomeada literalmente. Um prompt como "faça um tornado" é uma dica sobre significado, não geometria.
• Qualquer forma que não seja a onda. Anéis, nós, molas e tubos varridos ao longo de um caminho ("as outras não parecem realmente legais"), e a folha dobrada empurrada para outras formas por torções fortes: um funil enrolado, uma bobina enrolada, um emaranhado ("o emaranhado, a bobina e o funil são realmente ruins"). Apenas a virada suave (turn) passou, como "talvez ok".
• Folhas iluminadas e sombreadas: parecem plásticas ao lado da superfície não iluminada da Stripe.
• Uma paleta de manchas aleatórias: uma cor plana preenche a folha visível.
• Uma folha de camada única: "você pode ver os lados finos".
• O objeto inteiro girando: "a coisa toda se moveu, não algumas partes".
• Linhas de luz viajantes: "era apenas uma coisa do OpenRouter, aqui imitamos a Stripe".
• Uma pequena onda flutuando no meio do seu quadro.
• Mesclagem alfa comum em qualquer coisa transparente: emendas.
• Linhas desenhadas, diagramas de nós e fios, linhas de grade, etiquetas.