— Referencias

Scroll, transiciones
y efectos que hacemos.

25 webs premiadas internacionalmente, agrupadas por técnica. Cada una demuestra un efecto concreto que sabemos implementar: filtra por familia, abre la que encaje con el proyecto y usa lo que se explica debajo para decidir qué queremos conseguir.

Captura de Exo ApeAbrir y recorrerla
01 · Scroll fluido & transiciones

Exo Ape

  • Scroll con inercia (smooth scroll)
  • Transición entre páginas sin recarga
  • Imágenes con parallax por capas

La referencia base de “fluidez”. Ideal para estudios, arquitectura y marcas premium.

Captura de Darkroom (creadores de Lenis)Abrir y recorrerla
02 · Scroll fluido & transiciones

Darkroom (creadores de Lenis)

  • Motor de scroll Lenis — el mismo que usamos
  • Sincronía perfecta scroll/animación
  • Cambios de color por sección

Demostrar que la fluidez no es magia: es el motor que ya usamos en nuestras webs.

Captura de CubertoAbrir y recorrerla
03 · Scroll fluido & transiciones

Cuberto

  • Cursor personalizado con preview
  • Transiciones de página con máscara
  • Textos que se revelan línea a línea

Muy comercial: se entiende en tres segundos en una reunión.

Captura de LocomotiveAbrir y recorrerla
04 · Scroll fluido & transiciones

Locomotive

  • Scroll suave con velocidades distintas por bloque
  • Ritmo editorial de secciones
  • Aparición escalonada de elementos

Corporativo con movimiento y sin ruido. Consultoras, despachos, industria.

Captura de Unseen StudioAbrir y recorrerla
05 · Scroll fluido & transiciones

Unseen Studio

  • Tipografía enorme revelándose por scroll
  • Texto con máscara de recorte
  • Espacios en negativo muy amplios

Cuando el mensaje manda sobre la imagen: marcas de servicios y consultoría.

Captura de 14islandsAbrir y recorrerla
08 · Scroll fluido & transiciones

14islands

  • Fluidez muy limpia y sobria
  • Micro-interacciones en botones y enlaces
  • Grid que se recompone al entrar

Cliente corporativo que quiere movimiento sin parecer una agencia creativa.

Captura de Active TheoryAbrir y recorrerla
11 · Narrativa 3D

Active Theory

  • Experiencias inmersivas de marca
  • Transiciones tridimensionales entre secciones
  • Sonido e interacción combinados

Lanzamientos de producto y campañas con presupuesto de marca grande.

Captura de basement.studioAbrir y recorrerla
13 · Narrativa 3D

basement.studio

  • Secciones que se transforman al scrollear
  • Escenas 3D integradas en el layout
  • Estética técnica y moderna

Tecnológicas, startups y software: transmite producto y capacidad.

Captura de Bruno SimonAbrir y recorrerla
15 · Narrativa 3D

Bruno Simon

  • Portfolio jugable en 3D
  • Física de vehículo en el navegador
  • Navegación sin menús tradicionales

El “wow” instantáneo en reunión y la puerta a proyectos interactivos.

Captura de MoooiAbrir y recorrerla
17 · Producto & marca

Moooi

  • Transición de experiencia de marca sobre catálogo real
  • Producto destacado con parallax
  • Paso fluido de marca a tienda

Ecommerce y catálogo que quiere sentirse editorial, no plantilla.

Captura de GentlerainAbrir y recorrerla
18 · Producto & marca

Gentlerain

  • Parallax por capas muy ligero
  • Ilustración animada al entrar en pantalla
  • Movimiento sutil y constante

Software y servicios: moderno, rápido y fácil de mantener.

Captura de Apple · AirPods ProAbrir y recorrerla
19 · Producto & marca

Apple · AirPods Pro

  • Producto que gira controlado por el scroll
  • Secuencia de imágenes fotograma a fotograma
  • Texto sincronizado con la animación

La referencia que TODO cliente reconoce. Perfecta para explicar el scroll-driven.

Captura de SennepAbrir y recorrerla
20 · Producto & marca

Sennep

  • Interacción sutil y muy cuidada
  • Hover con desplazamiento suave
  • Transiciones cortas y limpias

Cuando el cliente pide “elegante y sin exagerar”.

Captura de Make ReignAbrir y recorrerla
21 · Producto & marca

Make Reign

  • Corporativo con movimiento contenido
  • Bloques que entran escalonados
  • Tipografía en gran tamaño

Consultoría, financiero y B2B: seriedad con vida.

Captura de Epic AgencyAbrir y recorrerla
22 · Producto & marca

Epic Agency

  • Transiciones limpias entre casos
  • Imagen que se escala al abrir proyecto
  • Navegación horizontal puntual

Páginas de proyectos y portfolios de empresa.

Captura de Aristide BenoistAbrir y recorrerla
23 · Editorial & galería

Aristide Benoist

  • Galería con arrastre e inercia
  • Imágenes con distorsión al mover
  • Cursor que indica dirección

Fotografía, arquitectura, interiorismo: la imagen como protagonista.

Captura de Buzzworthy StudioAbrir y recorrerla
25 · Editorial & galería

Buzzworthy Studio

  • Movimiento enérgico y colorido
  • Elementos que rebotan al aparecer
  • Secciones con formas recortadas

Marcas jóvenes, ocio, deporte y fitness.

— Cómo usar esta página

Esta página es un muestrario de recursos: sirve para que veas qué se puede hacer y nos digas qué quieres en tu web y dónde.

  1. 01

    Ábrelas y recórrelas

    Entra en las que te llamen y baja despacio hasta el final. Lo importante no es la web entera, sino el momento concreto que te gusta: cómo entra un texto, cómo se mueve una imagen, cómo pasa de una sección a otra.

  2. 02

    Guarda la sección exacta

    Cuando algo te guste, haz una captura de esa sección y apunta la URL de la web donde lo viste. Con eso sabemos exactamente de qué estamos hablando.

  3. 03

    Dinos dónde lo quieres

    Mándanos la captura y la URL junto con en qué parte de tu web lo querrías (portada, servicios, proyectos, contacto…), con qué contenido y con qué matices: más rápido, más sobrio, sin texto encima, solo en ordenador…

  4. 04

    Suma las tuyas

    Si encuentras otras webs por tu cuenta que no están aquí, perfecto: mándalas igual — captura, URL y dónde lo aplicarías.

Un aviso importante: la mayoría de estas webs no son nuestras. Son referencias internacionales premiadas que usamos para hablar el mismo idioma. No se trata de copiar ninguna, sino de que nos señales el efecto o el detalle que te gusta de cada una para llevarlo a tu web con tu identidad y tu contenido.

BrainLabs
Studio · Madrid84