splatstudio-landing-deck
Habilidad hermana de splatstudio-landing. Mismo
sistema visual Atelier Zero (papel cálido, Inter Tight + Playfair Display,
énfasis cursiva-serif, puntos coral), pero paginado como un mazo
deslizable horizontal estilo revista en lugar de una página de
desplazamiento larga.
El modelo de navegación está tomado intencionadamente de la habilidad
guizang-ppt — teclas de flecha ←/→, rueda /
deslizamiento, ESC para la cuadrícula de vista general — para que se
sienta como pasar las páginas de una revista impresa en lugar de un mazo
de diapositivas web que se desplaza.
inputs.json + ../splatstudio-landing/styles.css
│
└──────────► scripts/compose.ts
│
▼
<out>/index.html
(un viewport por diapositiva, deslizamiento horizontal)
Qué obtienes
- Un único archivo HTML autónomo con N diapositivas del tamaño del viewport dispuestas horizontalmente en un solo track flex transformado.
- Navegación por teclado:
←/→·↑/↓· RePág/AvPág · Espacio · Inicio/Fin. - Rueda + deslizamiento táctil (con protección de inercia para que un solo golpe de trackpad no se pase).
- Barra cromática por diapositiva: marca, título del mazo, ubicación,
año en números romanos, contador de diapositivas en vivo (
01 / 11). - Barra de progreso coral en la parte inferior que se llena a medida que avanzas.
- Indicador de puntos cerca de la parte inferior; haz clic en cualquier punto para saltar.
- Cuadrícula de vista general con ESC — miniaturas escaladas de cada
diapositiva, haz clic para saltar. Refleja la UX de vista general de
guizang-ppt. - Reutiliza la misma biblioteca de imágenes de 16 espacios que la habilidad hermana: sin activos duplicados.
Tipos de diapositiva
| Tipo | Úsalo para |
|---|---|
cover | Placa de título al inicio. Copia a 2 columnas + arte collage. |
section | Divisor con números romanos entre capítulos. Centrado, a sangre. |
content | Ceja + título + cuerpo + viñetas + arte collage opcional. |
stats | Hasta 4 celdas de estadísticas grandes (valor · etiqueta · subetiqueta). |
quote | Cita destacada + autor. Collage de retrato opcional a la derecha. |
cta | Propuesta de cierre + 1-2 botones. |
end | Palabra de remate mega en cursiva-serif + pie de firma. |
Una presentación típica de 11 diapositivas:
1. cover — placa de título, collage héroe
2. section — "I. El problema"
3. content — acerca de / manifiesto, viñetas
4. content — capacidades, viñetas
5. stats — 4 números
6. section — "II. Cómo se siente"
7. content — método, viñetas
8. content — trabajo seleccionado
9. quote — testimonio de cliente
10. cta — acción primaria + secundaria
11. end — mega remate + firma
Flujo de trabajo
1. Redacta inputs.json
Comienza desde inputs.example.json (el mazo de
presentación de Open Design). El bloque de marca, la estrategia de imágenes
y la ruta de activos reflejan la habilidad hermana: si ya completaste un
brief para splatstudio-landing, copia brand e imagery textualmente.
Para cada diapositiva, elige un kind y completa los campos tipificados
de schema.ts. MixedText (línea base sans-serif +
intervalos de énfasis cursiva-serif + punto de terminación coral) es la
misma codificación utilizada por la habilidad hermana; consulta su
inputs.example.json.
2. (Opcional) Genera o crea placeholders de imágenes
Esta habilidad no incluye su propio generador de imágenes o script
de placeholders; comparte la biblioteca de 16 espacios de
splatstudio-landing. Para regenerar o crear placeholders:
# generar mediante gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/
# o placeholders SVG con textura de papel
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/
Configura inputs.imagery.assets_path de tu mazo a donde residan esos
PNG (por defecto en el ejemplo: ../splatstudio-landing/assets/).
3. Compón el mazo
npx tsx scripts/compose.ts inputs.json out/index.html
El compositor lee inputs.json, carga la hoja de estilo canónica de
Atelier Zero desde ../splatstudio-landing/styles.css, superpone reglas
específicas del mazo (track flex horizontal, diseños de diapositiva, HUD,
navegación por puntos, vista general con ESC, manejadores de teclado /
rueda / táctil) y escribe un único archivo HTML autónomo.
4. Autocomprobación
- Abre el HTML en una pestaña nueva del navegador; la diapositiva 1
(cover) se muestra con la barra cromática en la parte superior
derecha indicando
01 / N. - Presiona
→(o Espacio, o desplázate hacia abajo). Se desliza suavemente un viewport a la derecha; la navegación por puntos avanza; la barra de progreso coral avanza. - Presiona
Fin. Salta a la diapositiva final. - Presiona
Inicio. Vuelve a la diapositiva 1. - Presiona
Esc. Aparece la cuadrícula de vista general con miniaturas escaladas; haz clic en cualquier mosaico para saltar y cerrar la vista general. - Cambia el tamaño a 1080px y 640px. Las diapositivas de portada / contenido se colapsan a una sola columna; la navegación por puntos sigue funcionando; las barras cromáticas se reducen.
-
prefers-reduced-motion: reduce(DevTools → Rendering): las transiciones de página siguen siendo rápidas y no inducen mareos. - Lighthouse: contraste AA, intercambio de fuente display, sin cambio de diseño.
Límites
- Reutiliza la hoja de estilo de la habilidad hermana. El compositor
lee
../splatstudio-landing/styles.cssen tiempo de compilación. No mantengas una copia duplicada aquí; si los tokens de Atelier Zero evolucionan, edítalos una vez en la habilidad hermana. - Reutiliza la biblioteca de imágenes de la habilidad hermana. No es necesario volver a generar o renderizar: las mismas 16 láminas funcionan para ambas superficies.
- Mantén las diapositivas en un solo viewport. Si el contenido de una diapositiva no cabe en 100vh × 100vw a 1280×800, se desbordará y se sentirá apretado. Recorta el texto o divide en dos diapositivas.
- No cambies a desplazamiento vertical con scroll-snap. La postura de deslizamiento horizontal es lo que hace que esta habilidad se sienta como un pliego de revista; un desplazador vertical sería solo una página de aterrizaje larga.
- No agregues un enrutador. Este es un artefacto de un solo archivo. Los mazos de varias páginas están fuera del alcance; para una experiencia con múltiples mazos, renderiza cada mazo por separado y enlázalos desde un índice principal.
Ver también
splatstudio-landing— habilidad hermana de página de aterrizaje.guizang-ppt— el patrón de navegación de mazo revista que esta habilidad toma prestado.design-systems/atelier-zero/DESIGN.md— especificación de tokens.