scroll-craft

¿Qué hace scroll-craft?

El scroll es el único input que todo visitante ya sabe usar. Esta habilidad lo trata como una línea de tiempo: la rueda es un control deslizante, la página es una película con texto real encima, y cada sección se comporta de forma suficientemente diferente para que el visitante siga adelante y descubra qué hace la siguiente.

Lo que produces: un brief de entrevista, una gramática de página, un mapa del recorrido del cliente, una curva de sensaciones con un pico diseñado, una puntuación de scroll, un movimiento característico, activos generados, una página HTML real sobre un suelo de diseño basado en tokens, y una tira de capturas de pantalla que demuestran que se sostiene en cada posición de scroll.

Lo que esto no es

No es "generar un vuelo y ponerle texto encima". Ese enfoque produce un solo dispositivo aplicado a toda una página, y cada sitio construido así es reconocible de un vistazo: la misma diorama de plastilina, el mismo texto centrado, el mismo contador 01 / 06, el mismo empujón "desplázate para explorar". Cinco secciones que se comportan de forma idéntica son una sección mostrada cinco veces.

De eso se derivan cuatro reglas, que son la columna vertebral de esta habilidad:

1. La variedad es el producto. Una página usa al menos cuatro familias de dispositivos y nunca el mismo dispositivo dos veces seguidas. Lee references/devices.md.
2. El mundo es fotográfico a menos que la marca sea genuinamente ilustrada. La diorama de plastilina low-poly de mate suave está prohibida como opción por defecto. Lee references/worlds.md.
3. Sin cadena continua. Un único vuelo de cámara ininterrumpido es lo más caro y frágil que puedes construir, y solo existe para ocultar los cortes entre escenas. En su lugar, varía el dispositivo y el corte desaparece gratis, porque el visitante no está viendo una sola película. Encadena solo cuando el brief sea literalmente "un viaje continuo".
4. Un mundo diferente no es una página diferente. El kit de dispositivos varía el aspecto de una página. La estructura es un eje separado, y debe decidirse deliberadamente o cada construcción heredará el mismo esqueleto. Las primeras cuatro construcciones hicieron exactamente eso. Lee references/uniqueness.md.

Preferencia de héroe vertical

La superposición de capas dimensionales es un requisito básico para un héroe de marketing premium. Planifica planos de fondo, sujeto, primer plano y atmosféricos que se muevan de forma independiente antes de solicitar activos. Un hermoso fondo único con fundidos de texto no satisface esta preferencia. La profundidad debe provenir de una separación visible, oclusión y diferencias controladas en el movimiento, mientras el titular se mantiene legible y la escena cuenta una historia clara.

Lee references/hero-depth.md antes de planificar el héroe o generar sus activos. Cubre fondos limpios, recortes alfa genuinos, anclas de contacto compartidas, tipografía entre planos, coreografía de scroll moderada, dirección de arte móvil y aceptación visual, con el ejemplo aprobado de Sonder. Usa la composición que se ajuste a la gramática elegida; no repitas la escena de Sonder ni impongas fijación en una gramática que lo prohíba. Respeta las indicaciones explícitas de estática o simplicidad, y mantén la profundidad en la composición estática cuando el movimiento esté reducido.

Estándar de colección aprobada

Lee references/approved-collection.md antes de planificar un sitio de marketing premium. Destila la reconstrucción aprobada de diez sitios: investigación de marca real, contratos de capas, profundidad significativa de puntero/scroll, renderizado fotográfico o 3D apropiado, navegación y finales distintos, interacciones útiles, dirección de arte móvil y evidencia del paquete final. Estos son principios de ejecución y ejemplos prácticos, no un esqueleto de página reutilizable.

Paso 0: El brief y la autoridad creativa

Establece el brief antes de generar nada. Reutiliza las respuestas y los activos ya proporcionados. Cuando el usuario delegue explícitamente la dirección creativa (por ejemplo, "usa tu criterio" o "quiero quitarme de en medio"), escribe un brief de Redactado bajo delegación creativa explícita y continúa. Cubre los ocho temas a continuación, distingue la evidencia de las suposiciones y no inventes citas del usuario ni fuerces otro punto de control de entrevista/aprobación.

De lo contrario, entrevista para las decisiones faltantes. Haz preguntas reales, registra las respuestas y evita inferir una marca completa solo por su nombre.

La habilidad es un instrumento de rango, no un estilo de casa. El humano aporta la intención y los activos que posee; la entrevista es donde eso se convierte en el tipo correcto de página: un mundo ininterrumpido, escenas distintas, capítulos impresos, una superficie viva. La habilidad puede hacer cualquiera de ellos. La entrevista decide cuál.

Mantenlo breve. Ocho preguntas, hechas en una sola pasada:

1. Vibra en tres a cinco palabras, más hasta tres referencias de cualquier medio. Una película, una portada de álbum, una tienda, una revista, un juego. No "sitios que te gustan": nombrar sitios es cómo una página termina pareciéndose a un sitio existente.
2. El viaje de scroll, sección por sección, en sus palabras. Lo que el visitante debería ver primero, lo que viene después, lo último. Su secuencia, no un menú que ofreciste.
3. La curva de energía. Dónde debería sentirse tranquilo, dónde debería sentirse intenso. Una página que es ruidosa todo el tiempo es tan plana como una que es silenciosa todo el tiempo.
4. ¿Cómo debería sentirse alguien mientras se desplaza, etapa por etapa, y cuál es el ÚNICO momento que debería recordar? La energía es el volumen. Esto es emoción, y las dos no se alinean: en una página ruidosa, el acto tranquilo puede ser el más intenso. La respuesta etapa por etapa se convierte en la curva de sensaciones, el único momento se convierte en el pico. Ambos son obligatorios en BRIEF.md. Ver references/feel.md.
5. Una cosa que este sitio debería hacer que ningún sitio que hayan visto hace. Esta es la semilla del movimiento característico. Insiste en una respuesta real; "ser memorable" no lo es.
6. Qué tan lejos del minimalismo premium quieren ir. Ofrece el rango en uniqueness.md §5: brutalista, maximalista, lúdico, retro, denso, editorial, minimalista premium. Su respuesta gobierna la familia estética, no tu gusto.
7. ¿Un mundo ininterrumpido o escenas distintas? ¿Toda la página debería sentirse como un lugar continuo a través del cual el scroll vuela (vuelo mundial, ver references/worldflight.md), o como escenas separadas, capítulos o cortes? Esta es la bifurcación estructural más grande, y es su decisión, no un dispositivo que elijas después. Ofrece ambas claramente; ninguna es la opción por defecto.
8. ¿Qué activos ya tienen? Metraje, fotos, tomas de producto, un kit de marca, clips de ellos mismos. Los activos reales anclan el mundo y reducen el costo de generación; la respuesta decide qué se gradúa y codifica versus qué se genera. "Nada" es una respuesta válida y significa un mundo completamente generado.

Escribe las respuestas en <workspace>/builds/<nombre>/BRIEF.md antes de cualquier planificación de actos, en sus palabras, no parafraseadas en prosa de marketing. Todo lo que viene después lee de ese archivo.

BRIEF.md debe contener, como mínimo:

• Los ocho temas, con las respuestas textuales del usuario donde se proporcionen y las decisiones autorizadas claramente etiquetadas donde se deleguen.
• La curva de sensaciones. Una línea por acto: la emoción, luego qué en la pantalla la causa. Escrita antes de que existan los actos, ampliada a medida que se completa la puntuación.
• El pico. El único momento, escrito como la frase que un visitante le diría a un amigo, más en qué acto vive.
• La frase completa "díselo a alguien". "Es el sitio donde ___", completado con una experiencia, no un nombre de dispositivo.
• Cualquier silencio autorizado, para que la pasada de verificación pueda distinguirlo del scroll muerto.

references/feel.md es la especificación para los cuatro.

Si el humano es verdaderamente inalcanzable y la ejecución es completamente autónoma, escribe BRIEF.md tú mismo: responde las ocho preguntas en la voz de la marca, marca el archivo Redactado, no entrevistado en la parte superior, y dílo en el informe final. Un brief redactado sin delegación es un plan de respaldo. La delegación explícita anterior es un flujo de trabajo normal compatible y no requiere que el humano sea inalcanzable.

Bootstrap

Entorno, no una etapa del trabajo. Hazlo una vez que la entrevista esté respondida y antes del Paso 1.

Ejecuta el preflight en lugar de revisar a mano. Conoce los modos de fallo que de otro modo aparecen más tarde como errores engañosos, principalmente un ffmpeg incompleto que reporta un filtro faltante como un error de sintaxis en tu comando:

node <skill>/scripts/doctor.mjs

Reporta node, una compilación completa de ffmpeg, playwright y Chrome, la clave API y el espacio de trabajo resuelto. Los fallos requeridos salen con código de salida distinto de cero. Di claramente qué elementos faltan en lugar de solucionarlos silenciosamente.

El espacio de trabajo

Las construcciones y el registro de huellas digitales viven en un directorio, y se resuelve, nunca se asume:

node <skill>/scripts/workspace.mjs --ensure     # lo imprime, lo crea, siembra el registro

Orden de resolución, el primero que acierta gana:

1. SCROLLCRAFT_HOME
2. El .scrollcraft.json más cercano subiendo desde el cwd, { "workspace": "..." }
3. <raíz del proyecto>/scrollcraft, donde la raíz del proyecto es el ancestro más cercano que tiene un .git

Entonces, una carpeta de construcción es <workspace>/builds/<nombre>/ y el registro es <workspace>/FINGERPRINTS.md. El registro comienza vacío: la compuerta existe para evitar que te repitas, por lo que tu primera construcción no tiene nada que borrar.

Si ya guardas las construcciones en otro lugar, coloca un .scrollcraft.json en la raíz de tu proyecto apuntando a él y no se mueve nada.

El resto

1. KIE_AI_API_KEY, solo si estás generando activos. Una construcción a partir de las propias fotos y metraje del usuario no necesita clave ni gasto, y esa es una ruta de primera clase, no un plan de respaldo. Confirma el saldo con node <skill>/scripts/kie.mjs probe. Una imagen fija cuesta céntimos y un clip de 5s cuesta más; una página de seis actos con dos clips es un gasto pequeño, no grande.
2. Un kit de marca si existe (colores, logotipo, tipo, fotos de producto existentes). Si la marca tiene una carpeta en este repositorio, léela antes de generar nada y obedece sus reglas estrictas. Una marca que prohíbe números inventados significa que no hay contadores de estadísticas, por muy bien que se vean.

Copia engine/scrollcraft.js y engine/scrollcraft.css en la carpeta de construcción. Nunca edites el motor por proyecto; es el mecanismo. Tematízalo con tokens y escribe tu propio marcado.

Paso 1: El brief, el viaje primero

El tema lo debe indicar el usuario. Pregúntalo de forma abierta, en prosa simple, nunca como una lista de opciones múltiples inventada de industrias: un menú inventado los sesga y se lee como si estuvieras decidiendo su negocio por ellos.

El Paso 0 ya cubrió la vibra, la secuencia, la energía y el rango. No preguntes nada de eso de nuevo. Pregunta solo lo que no puedes establecer por defecto de manera sensata:

1. ¿Qué es esto y para quién es? Una o dos frases en sus palabras.
2. ¿Qué debe creer el visitante al final? La única frase que la página existe para instalar. No una lista de características. Si dan tres, haz que elijan una.
3. ¿Qué hace el visitante a continuación? Una acción. Una etiqueta, utilizada en todas partes de la página.
4. ¿Qué tienes ya? Logotipo, paleta, fotografía, fotos de producto, metraje, un documento de marca. Los activos reales superan a los generados cada vez.
5. Dirección de arte: ofrece los mundos en references/worlds.md como una opción real, y di que pueden ir por su cuenta.

Luego escribe el viaje antes que cualquier otra cosa: de cuatro a siete latidos, cada uno un cambio en lo que el visitante sabe o siente.

1  Reconocimiento   ven su propia mañana
2  Tensión          el costo, nombrado claramente
3  Giro             lo que cambia
4  Sustancia        por qué se sostiene
5  Rango            lo que pueden elegir
6  Compromiso       la única acción

Los latidos son la columna vertebral. Las secciones sirven a los latidos; una sección que no sirve a ningún latido se elimina, por muy bonita que sea la toma. Resuelve el viaje antes de generar activos. Muéstralo al usuario cuando se necesiten sus decisiones; bajo delegación creativa explícita, registra el viaje elegido y continúa dentro del alcance autorizado.

Paso 2: Gramática, compuerta, luego puntuación

Tres cosas en orden, y las dos primeras vienen antes de cualquier planificación de actos. Detalle completo en references/uniqueness.md.

Elige una gramática. Comienza con las ocho gramáticas definidas y sus restricciones. Una nueva gramática está permitida cuando su navegación, secuencia, final y prohibiciones explícitas describen una estructura diferente; una nueva etiqueta por sí sola no merece crédito. El plano secuencia de una sola toma es el que todas las primeras cuatro construcciones usaron, por lo que elegirlo de nuevo significa decir en el informe por qué las otras siete no encajaban en la entrevista. La navegación, el héroe y el cierre se derivan de la gramática; no se deciden por separado.

Inventa el movimiento característico. Una interacción a medida que vive solo en este sitio, codificada en la página, no un cambio de parámetro en un dispositivo de kit. La pregunta 5 de la entrevista es la semilla. El motor permanece intacto.

Ejecuta la compuerta de huellas digitales. Lee tu registro en <workspace>/FINGERPRINTS.md (ver El espacio de trabajo en Bootstrap; ejecuta node <skill>/scripts/workspace.mjs para imprimir la ruta). La construcción planificada debe diferir de cada fila existente en al menos 4 de 6 dimensiones: gramática, tratamiento de navegación, dispositivo héroe, forma de la secuencia de actos, patrón de cierre, movimiento característico. Cuatro contra cada fila individualmente. Si falla, cambia el plan, no el registro.

Escribe la curva de sensaciones antes de la tabla de puntuación. Una línea por acto: la emoción, luego qué la causa. La curva primero, los actos después, porque un dispositivo elegido antes de la sensación es un dispositivo que busca una razón. Dos actos adyacentes con la misma sensación significan que uno es relleno, y es más barato cortarlo aquí que después de que existan los activos. Nombra el pico en la misma pasada y dale el lapso más grande de la página. Método completo en references/feel.md.

Luego asigna a cada latido un dispositivo. Hazlo deliberadamente y escríbelo como una tabla:

Latido	Dispositivo	Por qué este
Reconocimiento	scrub	La cámara moviéndose bajo la propia mano del lector es la apertura más fuerte posible
Tensión	pin + cinética	El texto se ensambla línea por línea mientras el encuadre permanece quieto
Giro	reveal	Una wi...