webgl-form

WebGL form

La forma es la ola: la lámina plegada de stripe.com, tal como stripe.com la dibuja. El veredicto del usuario tras muchos intentos: "Solo me gusta la Ola porque es realmente una buena forma. La Ola es lo que quería." Cada otra forma probada (anillos, nudos, resortes, un embudo en espiral, una lámina enredada) fue rechazada. Así que una idea nunca se convierte en una forma nueva. Se convierte en una ola con sus propios colores, recorte y configuración.

Archivo	Qué es
reference/stripe-three.js	El motor. Three.js r178: la lámina plegada construida en el vertex shader, las torsiones de Stripe como una lista de giros, el sombreado sin iluminación de Stripe, la paleta pintada, el pase posterior, y TAKES / PRESETS con las cinco olas funcionales a continuación. Cópialo y luego añade preajustes.
reference/stripe-notes.md	La ola hero de stripe.com tal como se envía: la geometría del pliegue, los shaders, la cámara y la configuración de sus cuatro olas. Léelo antes de ajustar.
reference/twist-ribbon.js, reference/nib-ribbon.ts	Cintas WebGL2 más antiguas (OpenRouter, OpenEvidence). Solo para proyectos que ya las ejecuten.
reference/ReactMount.tsx	Montaje React/Next con fallback.

0. Qué preguntar

El prompt lleva significado, nunca una forma. Las formas fueron el fracaso: cada forma nombrada construida literalmente (un anillo de Möbius, un nudo, un resorte, un tornado) resultó ser clip art 3D. La cinta de OpenRouter funcionó porque el significado ("muchos modelos entran, un endpoint sale") se convirtió en ajustes (dónde la lámina se vuelve de canto), no en un dibujo del producto.

Pregunta como máximo tres cosas, en un solo mensaje:

1. La idea, en una frase: qué hace el producto, o la única cosa que el arte debería decir. ("Cada modelo a través de un endpoint.")
2. Los colores: los de la marca, o "léelos del código" (los tokens en globals.css, un tema de Tailwind, los colores del logotipo).
3. Dónde se ubica: una banda hero (debajo o alrededor del texto), una celda, una tarjeta; una página clara u oscura.

Ningún prompt es un uso válido: lee los colores del código, usa el preajuste wave en la colocación hero clara de Stripe, y dilo en una línea.

Una forma nombrada ("haz un tornado"): no construyas la forma. Léelo como una pista sobre el significado (un tornado: ascenso, rotación, fuerza) y mapea eso a los ajustes a continuación. Dile al usuario en una línea que el skill mantiene la ola y por qué. Si aún insiste, construye la forma como una toma extra junto a las olas, etiquetada, para que pueda comparar.

Del significado a los ajustes (puntos de partida, no reglas):

La idea se siente como	Empieza desde	Cambia
Calma, confianza, dinero, salud	deep	Ritmo 4e-5, paleta fría o neutra-cálida, recorte amplio
Muchos en uno, enfoque, un endpoint	wave	Coloca el estiramiento de canto (el pellizco) debajo o junto al texto
Energía, tiempo real, velocidad	petal o fold	Ritmo hasta 8e-5, paleta cálida
Cambio, dos caras, un giro	turn	El volteo muestra ambas caras
Nada específico	wave	Solo paleta de la marca

Salida: dos o tres tomas en una página de tomas, la misma familia de olas en diferentes preajustes, recortes o paletas. El usuario elige una; elimina el resto.

1. La forma

• La lámina plegada: un plano de 400 x 400 (128 x 256 segmentos) doblado por la mitad: la capa superior, una tira de 32 unidades curvada en un semicilindro (el pliegue redondeado), la capa inferior doblada debajo, separadas 4 unidades en los extremos y 2 a media longitud. Ergida con dos cuartos de giro: longitud a lo largo de x, grosor a lo largo de y, anchura a lo largo de z. Gruesa, con un borde redondeado, nunca una línea fina. Construida a partir de la uv en el vertex shader (folded(uv)), por lo que las normales son exactas.
• Las tres torsiones de Stripe le dan forma: rotaciones sobre los ejes diagonales (.5, 0, .5) y (0, .5, .5), cada una modulada por el paso suave de Stripe exp2(-exp2(n) * pow(x, n)) a lo largo de la anchura (u) o la longitud (v). En el motor: stripeTwists([x, y, z], [powX, powY, powZ]) a partir de los números de Stripe. La torsión x se desplaza con ruido a lo largo de la longitud: eso, junto con la ola de ruido, es todo el movimiento. Las partes se mueven; el conjunto nunca gira.
• La ola de ruido: p.y += amount * noise(x * fx + t, z * fz + t).
• Colocación en el marco de Stripe: un canvas de 1392 px de ancho en unidades de píxel, una cámara ortográfica en (100, 0, 5000) girada 0.02 rad sobre y; cada número escala por ancho canvas / 1392. Siempre grande y recortada por su marco, nunca pequeña y flotante.
• Ritmo: el reloj de Stripe, 4e-5 a 8e-5 por milisegundo. Lento a propósito.

2. Las cinco olas que funcionan

Cuatro son las olas que stripe.com envía, con sus ajustes exactos (torsión x, y, z; potencias; ola de ruido; colocación; brillo; ritmo). La quinta añade un giro.

Preajuste	Fuente	Torsión x, y, z / potencias	Ola de ruido	Rotación; escala; posición	Brillo	Ritmo, desplazamiento
wave	Hero clara de 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 oscura de Stripe, dibujada sobre blanco	-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 facturación de Stripe, girada para encajar en una celda	-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	Ola de acento pequeña de Stripe, ampliada y girada	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	La hero clara, volteada completamente (el único giro añadido que funciona)	La de la hero clara, más LENGTH (1, 0, 0) a lo largo de v, 2pi, deriva 0.15	La de la hero clara	La de la hero clara	La de la hero clara	La de la hero clara

Los números en negrita difieren de la colocación propia de Stripe: Stripe colocó esas olas para sus propios marcos, por lo que en una celda más pequeña se recortaban a un parche plano o flotaban pequeñas. Re-coloca, nunca re-forma: para encajar en un marco diferente, cambia solo la rotación, escala y posición (data-overrides en HTML).

3. El sombreado: el propio de Stripe, sin iluminación

El hero en vivo de stripe.com no tiene iluminación en absoluto; por eso se ve brillante y luminoso, no plástico. Su superficie es:

1. La paleta en el (u, v) de la lámina.
2. Vetas largas y finas a lo largo de la longitud: n0 = noise(u * 0.1, v * 0.5), n1 = noise(u * (600 + 300 n0), v * 4 n0) (muy finas a lo ancho, casi constantes a lo largo), añadidas como n1 * 0.2 a 0.26 * (1 - blue * 0.9) * pdy * edge, donde edge = 1 - pow(4u(1 - u), 3) (más fuertes hacia los bordes abiertos). Se ven mejor en colores cálidos; para una paleta completamente azul, reduce la atenuación azul a aproximadamente 0.4.
3. El término de brillo pdy: dFdy(v) * resolution.y * amount, mapeado de -1..1 a 0..1, elevado a una potencia, suavizado por la rampa. Su signo distingue las dos caras de la lámina; cerca de cero, la lámina se está plegando.
4. Contraste, saturación, tono, luego + (1 - pdy) * 0.25: la otra cara y el pliegue se vuelven pálidos. Esa es la banda cremosa en el pliegue de Stripe.
5. Opaco, probado en profundidad. Pase posterior: un desenfoque rotacional de 0.02 rad mantenido fuera de una banda nítida en el medio, luego grano (1.1) donde hay color. El grano es el tramado estático de Stripe: color + mix(1, -1, random(gl_FragCoord.xy * 0.01)) * 4/255 * amount. Nunca cambia de un fotograma a otro. Un grano realeatorizado cada fotograma brilla y se lee como ruido ("demasiado ruido comparado con Stripe"), y en video también infla el archivo varias veces.

Sin líneas dibujadas, sin luces viajeras, sin iluminación normal, sin resalte de pliegues: el sombreado iluminado más antiguo del motor se conserva solo como una opción (shading: "lit") y no es el predeterminado.

4. La paleta

Píntala como lo hace Stripe, no como manchas aleatorias (las manchas aleatorias dieron un solo color plano sobre la mayor parte de la lámina visible):

• A lo largo de la longitud (v), el gradiente principal. La hero clara: azul lavanda #9fb6ff, violeta #a978ff, magenta #e05cff, rosa intenso #ff4fa8, naranja #ff7a2a, ámbar #ffa318.
• A lo ancho (u), un tinte hacia los bordes abiertos (aproximadamente 75%, desvaneciéndose a u = 0.22 desde cada lado): lavanda #a9b6ff para la hero clara.
• Unas pocas manchas tenues (14, al 25%) solo para variar.
• El palette(along, edge, blobs) del motor construye esto. Otros conjuntos funcionales: océano (azul a cian), atardecer (naranja, rosa, violeta), lima (verde azulado, verde, amarillo, naranja), brasa (rosa, rojo, naranja, amarillo).
• El color es el de la marca, o similar al de Stripe. Decorativo, nunca datos.

5. Colocación en la página

Texto sobre la ola (la superposición de Stripe)

Medido en stripe.com, 2026-10-22. Cuando la ola se ejecuta debajo del titular, Stripe no la enmascara ni deja que cubra las palabras. Dibuja el texto dos veces:

1. Debajo del canvas: el texto en sus colores normales (Stripe: titular azul marino #061b31, cuerpo gris). Donde la ola pasa sobre él, la ola lo oculta.
2. Encima del canvas (z-index sobre la capa de la ola): un texto idéntico, mismo tamaño y posición, aria-hidden, con mix-blend-mode: hard-light y colores teñidos traslúcidos (Stripe: titular rgb(45, 37, 100), un violeta intenso; cuerpo rgba(0, 14, 255, 0.5), un azul semitransparente). Sobre la página blanca se lee como el texto normal; sobre la ola, las letras toman los colores de la ola, por lo que permanecen legibles y parecen impresas sobre la seda.

Reglas:

• Elige los tintes del texto superior de la marca: una versión intensa y saturada del color del titular, y un azul de marca semitransparente (o de acento) para el cuerpo. Verifica en una captura de pantalla donde la ola sea más brillante: cada palabra sigue siendo legible.

• Los dos textos deben coincidir exactamente (mismos estilos de elemento, mismo envoltorio): constrúyelos desde una fuente y apílalos en una misma celda de cuadrícula (grid-area: 1 / 1), de modo que un cambio de fuente o ancho mueva ambos.

• Los lectores de pantalla obtienen solo el texto inferior; el superior es aria-hidden y no recibe eventos de puntero. Los botones y enlaces permanecen en la capa inferior y nunca están cubiertos por el canvas (mantenlos fuera del camino de la ola, o eleva solo los botones por encima de ella).

• El movimiento reducido y el fallback de imagen estática conservan ambos textos; la mezcla funciona también sobre la imagen estática.

• Nunca hagas que el texto evite la ola con una placa blanca o una máscara: ese es el aspecto que el texto doble existe para evitar.

• La ola llena o recorta su celda o banda hero. Los pies de foto se colocan sobre un pequeño chip del color de la página.

• Nunca debajo de la navegación ni hacia la siguiente sección. Donde una ola recortada se encuentre con la parte superior de una banda, desvanécela con una máscara CSS; donde se encuentre con texto, usa el texto doble anterior.

• Sin etiquetas, números ni líneas de cuadrícula dentro del arte.

6. Reglas de ingeniería

• Three.js r178 instalado en el proyecto, cargado con un mapa de importación ("three": "/node_modules/three/build/three.module.js").
• THREE.ColorManagement.enabled = false; paleta NoColorSpace; ShaderMaterial en estilo GLSL1.
• failIfMajorPerformanceCaveat: true; en caso de fallo, una imagen estática de la misma ola. Monitorea los tiempos de fotograma: elimina el pase posterior, luego la DPR, luego detente en un fotograma fijo.
• DPR limitado a 2; ResizeObserver; pausa fuera de pantalla y en pestañas ocultas; el movimiento reducido dibuja un fotograma estable. Sin reactividad de puntero.
• Hasta aproximadamente 13 olas en una página; después de 16, el navegador pierde contextos.
• Nunca nombres una variable GLSL step, mix o fract.

7. Flujo de trabajo

1. Obtén la entrada (sección 0): la idea, los colores, el lugar. Sin prompt: colores del código, el preajuste wave. Mapea la idea a un preajuste, un recorte y una paleta; nunca a una forma nueva.
2. Compara con lo real: captura de pantalla de la hero de stripe.com a 1440x900, renderiza la nuestra en un canvas en el marco exacto de Stripe (1392 x 761 en x 337), y compara ambas en el mismo recorte. La textura y el color se juzgan así, no de memoria.
3. Para una página de varias olas, usa los preajustes anteriores, re-colocados para encajar en cada marco; muestra alternativas en una página de tomas.
4. Verifica a tamaño completo (Chrome sin cabeza): consola limpia y cada canvas construido; 1440 y 375; dos fotogramas con cuatro segundos de diferencia comparados por cuarto (cambio desigual: partes moviéndose; cambio uniforme: un giro); la ola llena su marco.
5. Confirma con un mensaje que diga qué cambió visualmente.

Rechazado, no repetir

• Tomar una forma nombrada literalmente. Un prompt como "haz un tornado" es una pista sobre el significado, no la geometría.
• Cualquier forma que no sea la ola. Anillos, nudos, resortes y tubos recorridos a lo largo de un camino ("los otros no parecen realmente geniales"), y la lámina plegada empujada a otras formas por torsiones fuertes: un embudo en espiral, una bobina enrollada, un enredo ("el enredo, la bobina y el embudo son realmente malos"). Solo el suave volteo (turn) pasó, como "tal vez bien".
• Láminas iluminadas y sombreadas: se leen como plástico junto a la superficie sin iluminación de Stripe.
• Una paleta de manchas aleatorias: un solo color plano llena la lámina visible.
• Una lámina de una sola capa: "se pueden ver los lados delgados".
• El objeto completo girando: "todo se movió, no solo algunas partes".
• Líneas de luz viajeras: "era solo una cosa de OpenRouter, aquí imitamos a Stripe".
• Una ola pequeña flotando en el medio de su marco.
• Mezcla alfa ordinaria en cualquier cosa translúcida: costuras.
• Líneas dibujadas, diagramas de nodos y cables, líneas de cuadrícula, etiquetas

...