Contexto: brief de ejecución v2 para el sitio de CAUDAL (productora de organizaciones temporales). Enviado por el usuario el 2026-08-11. Regla: si contradice al v1, gana v2, excepto posicionamiento y copy donde gana v1.
# CAUDAL — Build brief v2
(contenido completo del brief pegado por el usuario, verbatim)
## 0. LECTURA DEL BRIEF
Sujeto: productora que ensambla organizaciones temporales alrededor de un problema.
Audiencia: fundadores técnicos, editores, gente de datos, ONGs.
El trabajo: entender el modelo en 20 segundos y querer meter su problema en la máquina.
Lectura estética: instrumento científico publicado como revista.
Diales: VARIANCE alta (composición asimétrica, riel izquierdo fijo, sin centrado) /
MOTION media (un motor continuo + reposo) / DENSITY media-alta (metadatos mono visibles).
Riesgo aceptado: un solo motor WebGL2 sostiene la página; si falla, cae a versión estática buena.
## 1. CAMBIOS RESPECTO AL V1
1.1 Un instrumento, no nueve gráficos: un solo campo continuo que cambia de estado según scroll.
1.2 El formulario es el simulador: escribes tu problema, ensambla la organización propuesta, esa propuesta se envía.
1.3 Sin Three.js: WebGL2 crudo con helper ~200 líneas (~8 kb).
1.4 La prueba son artefactos (protocolos, diagramas de decisión, fichas de proyecto), no casos/logos/testimonios.
## 2. LA PIEZA FIRMA — EL CAUDAL
Campo de partículas donde cada partícula es un glifo. Recursos como palabras legibles (RESEARCH, PYTHON, LOCAL LLM, EDITOR, DATA) que se disuelven en flujo, confluyen y se recomponen como otra palabra (PROJECT_014).
- Arquitectura: WebGL2 sin dependencias, FBO ping-pong RGBA32F (RGBA16F fallback): positionTex xyz=pos w=vida; velocityTex xyz=vel w=ruido; targetTex xyz=destino w=índice glifo (estático por estado). Render: instanced quads, 1 draw call, atlas MSDF de un canal; atributos por instancia: id, cluster, glyphIndex.
- Conteo: 65536 partículas (256×256) desktop; 16384 (128×128) bajo 768px o deviceMemory<4. Dos draw calls/frame.
- Física GLSL: flow=curlNoise(pos*u_scale+u_time*0.06)*u_turbulence; lane=laneForce(pos,cluster); pull=(target-pos)*u_convergence; vel=vel*u_damping+(flow+lane+pull)*u_dt. u_convergence único parámetro controlado por scroll (0 deriva en carriles, 1 se clava en palabra).
- Destinos: canvas 2D offscreen, leer píxeles, muestrear oscuros, reparto estable por índice. Cualquier cadena (incl. la del usuario) → destino sin precalcular. MSDF solo para dibujar.
- Estados (nombres = secciones del riel): S0 estiaje (0.95, baja, CAUDAL) / S1 afluentes (0.15, alta, 7 carriles) / S2 confluencia (0.55, media, cruce) / S3 cauce (0.85, baja, PROJECT_001) / S4 crecida (0.30, alta, dispersión) / S5 delta (dinámico, input usuario). Transiciones por scroll, no temporizadores; única animación temporal = ruido.
- Presupuesto: motor ≤14kb gz; atlas MSDF ≤22kb (A-Z 0-9 _ - . /); frame ≤4ms @60fps M1 y Pixel 6a.
- Degradación: 1) sin WebGL2 → canvas 2D 900 partículas; 2) sin canvas/JS → SVG estático S3 inline; 3) prefers-reduced-motion → un frame convergido por sección + fade 200ms; 4) saveData → canvas 2D. Motor inicia tras LCP con requestIdleCallback; SVG estático es el LCP.
- Accesibilidad: canvas aria-hidden; cada palabra que forma el campo existe como texto real en DOM (encabezado). Lector de pantalla entiende el argumento sin el campo.
## 3. SISTEMA DE DISEÑO
Colores (5 tokens): --estiaje #F1F0EB papel; --tinta #111111; --sedimento #7A776F mono/hairlines; --lecho #0D0D0C invertida; --aforo #0E36C8 señal (solo: estado activo del riel, anillo de foco, nodos recién asignados por simulador; máx 3 veces por viewport).
Inversión: secciones 01, 03, 05, 10 sobre --lecho; demás sobre --estiaje. Sitio legible con filter:grayscale(1) como QA.
Tipografía: Neue Montreal (display, fallback Instrument Sans) + Berkeley Mono (fallback Commit Mono). Prohibidas: Inter, JetBrains Mono, Space Grotesk. Escala 1.25 móvil/1.333 desktop con clamp(); --t-mega clamp(3.2rem,11vw,9.5rem) tracking -0.03em; --t-xl clamp(2rem,4.5vw,3.6rem); --t-l clamp(1.4rem,2.2vw,1.9rem); --t-body clamp(1rem,1.05vw,1.125rem) 58-66 chars; --t-meta 0.75rem mono 0.08em uppercase. Solo Regular 400 + Medium 500 display; mono un peso. Subset woff2 ≤45kb, font-display swap, size-adjust para CLS=0.
Retícula: índice técnico fijo a la izquierda (riel sticky, mono, vertical: número de sección + estado hidrológico + barra de progreso; navegación real, landmark, teclado; móvil colapsa a franja 32px). Derecha: campo editorial que nunca se centra. 96px / 12 columnas gutter 24px max 1680px. Cero border-radius salvo cursor del instrumento. Hairlines 1px --sedimento 40%.
## 4. MOVIMIENTO
Dos relojes: scroll (determinista, mapeo lineal progreso→estado, sin easing; rebobinar = rebobinar) y tiempo (solo ruido del campo).
--ease-entrada cubic-bezier(0.16,1,0.30,1); --ease-estado cubic-bezier(0.65,0,0.35,1); --d-micro 160ms; --d-elem 420ms; --d-estado 900ms.
Regla de reposo: máx 1 elemento en transición además del campo.
Prohibido: revelado letra por letra (máx 1 vez), contadores animados, parallax, entradas desde fuera del viewport, loops infinitos.
Lenis lerp 0.09; deshabilitado en touch y reduced-motion. Preferir animation-timeline view()/scroll() nativos; JS solo campo + instrumento.
## 5. CARGA Y PRIMER FRAME
0ms: HTML+CSS crítico + SVG estático convergido "CAUDAL" (LCP). ~300ms: fuente reajusta sin salto. idle: motor toma relevo sin discontinuidad (mismas posiciones iniciales). Riel imprime 3 líneas mono una vez: field 65536 / atlas ok / state estiaje. Si motor no listo en 1200ms, SVG se queda. Nunca pantalla de carga.
## 6. ARQUITECTURA DE PÁGINA (10 secciones)
01 CAUDAL S0: "Producimos capacidad." Solo headline.
02 La frase S0→S1: "No necesitas contratar un equipo entero." Tipografía sola.
03 Modelo S1→S2: siete afluentes con etiquetas legibles cruzándose.
04 Estructura S2: Agencia/Freelancers/Caudal. NO tres tarjetas iguales (6.1: alturas y posiciones distintas; Caudal doble altura, más abajo, --tinta, su diagrama lo dibuja el campo en vivo).
05 Distribuida S4: agentes entrando y saliendo. Único momento de dispersión.
06 Qué producimos —: campo en pausa. Seis tipos como índice editorial numerado.
07 Humanos + máquinas S2: columnas 7/12 y 4/12. Asimetría = argumento.
08 Infraestructura —: lista mono de lo intercambiable. Tono pragmático.
09 Protocolo S3: "Primero protocolo. Después plataforma." Campo forma PROJECT_001.
10 El instrumento S5: simulador + formulario. Pantalla completa sobre --lecho.
## 7. EL INSTRUMENTO (sección 10)
Flujo: textarea grande mono sin borde "¿Qué estás intentando producir?" + chips ejemplo (observatorio de noticias / probar idea de negocio / miles de documentos) → al escribir el campo se reagrupa en tiempo real → ensambla 4-6 nodos palabra legible + bloque mono (PROJECT_014 / TYPE / RESOURCES / OUTPUT / DURATION / HUMANS required / MODELS replaceable) → "¿Es esto tu problema?" [correo] Enviar a Caudal → "Revisamos el problema antes de proponer el equipo." + descargar ficha SVG + copiar enlace.
Modelo de datos: recursos[] {id,label,tipo,afluente,sustituible} + arquetipos[] {id,tokens,recursos,salida,duracion}. Matcher determinístico sin IA: normalizar, tokenizar, puntuar por solapamiento ponderado; bajo umbral → combina 2 primeros como "TYPE híbrido". NUNCA devuelve vacío. 6-8 arquetipos con problemas reales.
Detalles: estado en URL (?p= input codificado, compartible); ficha SVG descargable (bloque mono + PROJECT_0xx + fecha); sin WebGL el instrumento sigue completo (form + lista de resultados); contador PROJECT_014 real en localStorage + contador servidor si existe.
## 8. ACCESIBILIDAD (checklist de merge)
Teclado completo incl. instrumento sin trampas de foco; anillo foco 2px var(--aforo) offset 3px jamás eliminado; skip link contenido + instrumento; texto ≥7:1 en ambas superficies; canvas aria-hidden con palabras reales en DOM; reduced-motion probado a mano; resultado simulador en aria-live="polite"; zoom 200% no rompe retícula; sin title como única etiqueta, sin div clicable, sin placeholder como label; página entera entendible en VoiceOver de arriba abajo.
## 9. PERFORMANCE
JS ≤90kb gz (motor 14 + instrumento 12 + lenis 4); CSS ≤18kb gz; fuentes ≤45kb; 0 imágenes; LCP <1.4s en 4G; CLS=0; INP<150ms; Lighthouse móvil ≥96/100/100/100. Motor no cuenta para LCP (arranca en idle). Medir con throttling móvil real.
## 10. STACK
Astro 5, cero framework UI. WebGL2 crudo sin Three. Lenis opcional (4kb). Formulario → endpoint propio, correo, sin servicio externo. Sin CMS, sin analytics de terceros.
Estructura: src/pages/index.astro, components/*.astro, engine/{gl.ts ~200 líneas, field.ts, shaders/*.glsl, fallback2d.ts}, instrument/{matcher.ts, data.json, ficha.ts}, styles/tokens.css, public/{atlas.png MSDF subset, static-field.svg S3 inline}.
## 11. DETALLES
Riel muestra estado hidrológico en vivo (estiaje→afluentes→confluencia→cauce→crecida→delta). view-source limpio y comentado. /llms.txt y /protocolo.md con protocolo operativo real. Consola al cargar: definición hidrológica de caudal y nada más (sin ASCII art, sin ofertas).
## 12. RÚBRICA
Diseño: ¿composición se sostiene con motor apagado? Usabilidad: ¿usuario de teclado completa el instrumento? Creatividad: idea en una frase que nadie más puede decir — "Las palabras son las partículas." Contenido: ¿hay algo real que llevarse? (ficha SVG + protocolo). Pregunta v1 §24 por elemento: ¿esto ayuda a explicar cómo funciona CAUDAL? Después quitar un accesorio.
## 13. QUÉ NO CONSTRUIR
Modo oscuro conmutable, preloader, cursor personalizado fuera del instrumento, transiciones de página, blog, sección de equipo, cookie banner.