orbit-poster-editorial

Orbit poster editorial

Una página de inicio que parece una serie de pósters de viaje impresos que cobraron vida. Las secciones oscuras como tinta y claras como papel se alternan; la tipografía es enorme y ajustada; un acento naranja lleva cada acción. El héroe es un pequeño universo — un planeta, órbitas y tarjetas de papel — que se inclina hacia el ratón. Más abajo, las fotografías reales no se colocan en cajas sino que se imprimen en los pósters: en escala de grises, multiplicadas sobre el color del papel, bajo letras gigantes, hasta que el visitante pasa el ratón y el color vuelve.

La compilación de referencia es example/index.html (Atlasio, una marca de viajes ficticia, en inglés). El código detallado está en references/components.md; screenshots/ muestra cada sección en escritorio y móvil.

1. Antes de diseñar

1. Recopila de 6 a 8 fotografías con personas en movimiento (estaciones, tableros, carreteras, ventanas). Asigna a cada una una única función: una pequeña impresión en el héroe, una por estado de póster, una por tarjeta de soporte. Nunca uses la misma foto dos veces.
2. Revisa cada foto en busca de logotipos y pantallas de terceros (publicidad de aeropuertos, carteles de marcas) y recórtalos.
3. Elige cuatro "posibilidades" para el conmutador de pósters (formas de viajar, ciudades, programas, estaciones) y cuatro pasos para la consola de ruta. Cada una necesita un título de póster de una palabra, un titular de dos líneas, una oración y un ejemplo concreto ("París → Viena en tren nocturno").
4. Comprime las fotos (ver §5). Las siete fotos del ejemplo ocupan ~750 KB en total.

2. ADN visual

Elemento	Regla
Tinta	#101b22 página; texto papel #edece4; apagado #9ca6a8; pelos #ffffff20.
Papel	#edece4 secciones claras con tintes de póster: salvia #cbd4b2, arcilla #d8c4b5, niebla #c0cfce, lila #c9c2d3; tarjetas de soporte #dbe1cd y #e5d5c6.
Acento	Un naranja #ff6c3a (planeta, discos solares, ticker, pestaña activa, sección final). Un lima pálido #c6d9ab/#c2d3a3 solo para el punto final en el titular y el número de ruta.
Tipografía	DM Sans 800–1000 para display (espaciado de letras -.065 a -.09em, altura de línea .8–1); 400–700 para texto. IBM Plex Mono 6–9px mayúscula para cada etiqueta, coordenada y ceja.
Titular	Tres líneas apiladas: sólida, contorneada (-webkit-text-stroke:1px), naranja; cada línea se mueve una cantidad diferente con el ratón.
Fotos	Dentro de pósters y tarjetas de soporte: grayscale(1) contrast(1.1) + mix-blend-mode:multiply sobre una tarjeta teñida y aislada; al pasar el ratón restaura el color y escala 1.04. Las impresiones pequeñas (héroe) se mantienen en color con un borde de papel.
Formas	Esquinas cuadradas en todas partes excepto planeta, discos solares, órbitas, píldoras en el conmutador.
Cursor	Un anillo de 30px con un punto, mix-blend-mode:difference; crece sobre los enlaces. Los botones magnéticos se desplazan hacia el puntero.

3. Patrones de sección

1. Cabecera – marca denominativa, un enlace mono "edición", tres anclas, un conmutador de movimiento (MOTION ON/OFF), un CTA con borde, hamburguesa por debajo de 650px. Una barra de progreso de lectura naranja de 2px está en la parte superior de la página.
2. Héroe – línea meta mono, el titular de tres líneas, una estrella asterisco, dos líneas de texto, un enlace subrayado, impresión pequeña. A la derecha: el universo en órbita (planeta con anillos de latitud/longitud y una palabra de dos letras, tres órbitas, satélites, etiquetas mono rotadas) y tres tarjetas flotantes: billete de destino (al hacer clic cicla las cuatro posibilidades), tarjeta de sello de pasaporte, impresión de foto. Barra inferior: enlace de desplazamiento, sugerencia "mueve el ratón", número de volumen.
3. Ticker – banda naranja a ancho completo girada −1.6°, palabras enormes separadas por glifos de estrella.
4. Posibilidades – titular con una frase gris intermedia, conmutador de píldoras, luego un tablero de dos columnas: el póster (línea de coordenadas, foto combinada, disco solar, palabra gigante, etiqueta inferior) y los detalles (número grande, ceja, titular, texto, "una ruta para empezar", botón tinta, descargo mono). El póster se inclina en 3D con el ratón.
5. Consola de ruta – sección oscura, titular con una frase naranja, cuatro pestañas como una fila con borde (pestaña activa naranja), panel con un número lima gigante dentro de una elipse orbital que gira lentamente y el texto del paso; una línea "desbloquear" debajo.
6. Soporte – estrella giratoria grande + titular bitono; dos tarjetas (autoservicio y asesor pagado) cada una con una foto combinada, una luz que sigue al cursor y un enlace subrayado; una línea "aprende un idioma" con una palabra naranja.
7. Llamada final – sección naranja completa con una cuadrícula, un enlace gigante de dos líneas ("¿Y ahora, adónde?") con una flecha que se mueve al pasar el ratón, una promesa corta, un botón tinta y una línea de ruta mono.
8. Pie de página – marca denominativa, una oración de dos líneas, enlaces; una fila inferior mono con una nota honesta cuando la marca es ficticia.

4. Efectos característicos

• Campo de ratón: en pointermove dentro del héroe establece --px/--py (−1…1) en :root; las líneas del titular, las tarjetas flotantes y el sistema de órbita 3D los leen en translate3d/rotateX/Y con diferentes multiplicadores, suavizados por una transición de .6s cubic-bezier(.16,1,.3,1). Una lectura en vivo de coordenadas X 050 / Y 050 se actualiza con ello.
• Red de partículas: un lienzo de 65 puntos que se desplazan (25 en teléfonos) enlazados cuando están a menos de 95px; los puntos son empujados dentro de 120px del puntero y líneas naranjas conectan al puntero dentro de 180px. Se ejecuta solo mientras el héroe es visible y el movimiento está activo.
• Pósters con foto combinada: la foto es un <img> posicionado absolutamente a z-index:-2 dentro de un póster isolation:isolate; escala de grises + multiplicar la imprime en el color del póster, el disco solar se multiplica encima, la palabra gigante se asienta arriba. Al cambiar de posibilidad, la foto antigua se desvanece (.swap), se intercambia src, se desvanece al load, y cambia el tinte del póster y el color del sol a través de un atributo data-theme.
• Tarjetas inclinables + luz del cursor: los pósters y las tarjetas de soporte giran hasta ~7–9° hacia el puntero y exponen --cx/--cy para un resalte radial.
• Pestañas accesibles: las pestañas de ruta usan role="tablist", tabindex rotativo, teclas de flecha/Inicio/Fin.
• Conmutador de movimiento: un botón pausa cada animación y pone a cero el campo del ratón; prefers-reduced-motion y punteros gruesos desactivan las mismas cosas automáticamente.

5. Reglas de compilación

• Fotos: ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg (impresión héroe ~900px de ancho). Recortar logotipos y pantallas: -vf "crop=w:h:x:y,scale=1100:-2". Mantener cada una por debajo de ~170 KB.
• HTML independiente con doctype, charset y viewport; fuentes de Google Fonts; símbolos SVG en línea para flechas y estrellas; sin otras dependencias.
• Cada foto tiene un alt real que describe la escena, excepto las fotos de póster, que son decorativas (alt="", aria-hidden) porque la palabra del póster y los detalles transmiten el significado.
• Móvil: el héroe se apila, el universo escala a ~66%, las tarjetas se encogen con sus propias transformaciones, las palabras del póster caen a 22vw con word-break:normal, las pestañas se convierten en una cuadrícula de 2×2, el anillo del cursor y la inclinación están desactivados.
• Sin desplazamiento horizontal a 390px; enlace de salto; contorno :focus-visible visible.

6. Escribir el texto

• Declaraciones cortas en tríos: "Ven con un sueño. Vete con un plan." "Encuentra el lugar. Dibuja tu propia ruta."
• Las etiquetas mono hablan como una edición impresa: 01 / POSIBILIDADES, MODO 02 / AIRE · LEJOS MAÑANA.
• Los ejemplos deben parecer reales pero etiquetarse como ejemplos; las reglas legales o de entrada siempre apuntan a la fuente oficial.

7. Lista de verificación final

• Cada foto se usa una vez, se acredita, se recorta libre de logotipos de terceros y se comprime.
• El héroe se inclina con el ratón; la tarjeta de destino y "otra posibilidad" ciclan los cuatro estados en sincronía con el póster.
• La foto del póster cambia sin un destello de la imagen antigua; el color vuelve al pasar el ratón.
• Las pestañas de ruta funcionan con el teclado.
• El conmutador de movimiento, movimiento reducido y táctil detienen el campo del ratón, el lienzo, el ticker y la inclinación.
• 390px: sin división de palabras dentro de los títulos de póster, sin desplazamiento horizontal, sin errores de consola.
• Capturas de pantalla regeneradas: node scripts/screenshots.mjs example screenshots.