Editorial Art

2025
Diseño y Desarrollo Full Stack
Editorial Art

Sobre el proyecto

Template de portfolio desarrollado como ejemplo para un cliente artista. El proyecto destaca por su diseño editorial elegante con un enfoque en las animaciones de scroll suaves mediante Lenis y efectos visuales avanzados con GSAP. Incluye transiciones fluidas, scroll horizontal, efecto zoom y un diseño que combina modo claro y oscuro.

Características principales

  • Scroll suave con Lenis para una experiencia fluida
  • Animaciones avanzadas con GSAP y ScrollTrigger
  • Scroll horizontal para galería de imágenes
  • Efecto zoom con transición a modo oscuro
  • Menú fullscreen con animación de clip-path circular
  • Galería de obras con hover effects
  • Diseño editorial con tipografía serif e itálica
  • Transiciones entre secciones con diferentes fondos

Stack tecnológico

Next.jsReactTypeScriptTailwindGSAPFramer MotionLenis

Paleta de Colores

Background

#FDFBF7

Fondo crema editorial

Foreground

#1A1A1A

Texto negro para contraste

Dark Mode

#151515

Fondo oscuro para sección bio

Selection

#D4C5B0

Color de selección cálido

Tipografía e Iconografía

Fraunces

Google Font

Títulos principales, texto editorial en itálica

VariableSOFTWONKopsz

VISCERAL

72px300 • normal

SILENCE

72px300 • italic

Inter

Google Font

Texto del cuerpo, navegación, metadatos

Variable

Pintura Contemporánea

14px400

MENU

12px500

Stack Tecnológico

Lenis

Scroll suave nativo

  • Smooth scroll
  • Momentum natural
  • Compatible con GSAP

GSAP

Animaciones complejas

  • ScrollTrigger
  • Pinning
  • Scroll horizontal
  • Timeline

Framer Motion

Animaciones de UI

  • AnimatePresence
  • Menú overlay
  • Hover effects

Detalles Técnicos

Smooth Scroll con Lenis

Sistema de scroll suave que proporciona una experiencia fluida en toda la página

  • Integración con GSAP ScrollTrigger
  • Momentum natural en el scroll
  • Compatible con animaciones pinned

Transición Zoom

Efecto de zoom que revela la sección oscura de la página

  • Letra 'V' escala hasta 150x su tamaño
  • Cambio de color del menú dinámico
  • Transición suave entre modos claro y oscuro