{/* Zona de campos: FORMULARIO de dos columnas (geometría idéntica en F4/F5/F6) */}
{/* Estado vacío antes del primer campo */}
{emptyOp > 0 && (
Sin campos todavía
)}
{/* Campos: cada beat = slot (label + caja vacía) → valor (typewriter o fade) → chip de tipo */}
{FIELDS.map((f, i) => {
if (t < f.at) return null;
const ty = TYPES[f.type];
const typeDur = f.typed ? Math.min(0.7, 0.22 + 0.055*f.value.length) : 0.35;
const slotP = clamp((t-f.at)/0.4, 0, 1); // slot: label + caja vacía
const slotE = Easing.easeOutCubic(slotP);
const valP = clamp((t-(f.at+0.42))/typeDur, 0, 1); // valor de ejemplo
const valE = Easing.easeOutCubic(valP);
const chipP = clamp((t-(f.at+0.42+typeDur+0.12))/0.4, 0, 1); // chip al acabar el valor
const chipE = Easing.easeOutBack(chipP);
const focus = clamp((t-f.at)/0.25, 0, 1) * (1 - clamp((t-(f.at+0.42+typeDur+0.1))/0.45, 0, 1));
const shown = f.typed ? f.value.slice(0, Math.ceil(valP*f.value.length)) : f.value;
const caretOn = f.typed && t >= f.at+0.3 && valP < 1;
const bR = Math.round(lerp(211,0,focus)), bG = Math.round(lerp(221,133,focus)), bB = Math.round(lerp(232,255,focus));
return (
{f.label}
{shown}
{caretOn && 0 ? 0.9 : 0.15}}/>}
{f.type === 'selector' && (
)}
{chipP > 0 && (
{chipIcon(f.type, ty.fg)}
{ty.label}
)}
);
})}