Sitio personal Scroll-film
Construye un sitio personal o portafolio donde el desplazamiento sea el cabezal de reproducción. No un archivo de video. Ritmo agradable, totalmente responsivo, mejora progresiva.
Autoridad
- Primero, escenas sticky con CSS y animaciones basadas en desplazamiento. Una biblioteca de timeline solo cuando CSS no pueda anclar o hacer scrub.
- Sigue la dirección artística o skill de gusto del repositorio. No recurras a un kit frontend genérico que luche contra ese gusto.
- Skills oficiales de scroll-timeline cuando estén instalados.
- Solo ideas de catálogo (sí / tal vez): blur-fade, glare-hover, scroll-progress, un puntero con retardo, ruido, rayos de luz. Reimplementa en CSS o en la biblioteca de timeline. No pegues primitivas de movimiento de otro framework.
- Respeta
prefers-reduced-motion: reduce— imágenes fijas, mismo orden de contenido, sin llamadas a la acción bloqueadas por movimiento.
Escalera de cámara (detente en el primer peldaño que sostenga)
- Elimina escenas redundantes.
- CSS: escenas sticky,
animation-timeline: view()/scroll(), solo transform y opacidad. - Una biblioteca de activación por desplazamiento solo si CSS no puede anclar o hacer scrub de una escena. Scrub suave, ease lineal, detener al desmontar. Animar solo transform y opacidad.
- No agregues un secuestro de desplazamiento suave de terceros, secuencias de frames de canvas, un héroe 3D, o scrub de
<video>con currentTime.
Gramática de escenas
- Máximo de 4 a 6 escenas. Los cortes adyacentes no deben compartir la misma familia de diseño.
- Abrir, sostener (anclar más scrub), cortar, cerrar.
- Patrón de anclaje: un scroller alto más una imagen fija sticky de viewport completo.
- Sin scroll snap obligatorio en toda la página.
- El contenido debe leerse con JavaScript desactivado. Sin secuestro de desplazamiento. Sin estado de framework por tick en mousemove o scroll.
Contenido del sitio personal (adaptar según el resumen)
Típicos beats: identidad, qué construyo, el producto actual, enlaces (los perfiles reales que te dieron), una llamada a la acción de cierre. Los enlaces son solo URLs reales — nunca inventes perfiles. Pregunta por los reales si faltan.
Cursor
Se permite un cursor personalizado con arrastre de resorte o deslumbramiento al mover como mejora progresiva. Mantén el cursor nativo disponible para movimiento reducido y táctil. Prefiere listeners de puntero con limitación de animation-frame, no estado de framework en cada movimiento.
Valores predeterminados de la pila
- Un framework web moderno está bien.
- Despliega bajo la cuenta de hosting del propietario, no la de un equipo diferente.
- La codificación sigue el valor predeterminado de codificación local: implementar, luego una segunda revisión, y armar una rutina de verificación.
Definición de completado
- Una URL en vivo bajo la cuenta del propietario
- El desplazamiento se siente como una película (agradable, no brusco)
- Responsivo; imágenes fijas con movimiento reducido
- Solo enlaces reales
- Reporta la URL cuando esté en vivo