Una zapatilla bañada a mano cae sobre el logotipo DIPPED que chorrea, y luego te sigue por la página y gira al hacer scroll.
Debound · Portafolio de diseño
72 sitios, cada uno mostrado en movimiento tal como se comporta en vivo: al hacer scroll, pasar el cursor o arrastrar. 8 de ellos los diseñamos y construimos nosotros, y 64 son plantillas. Haz clic en cualquier marco para abrir el sitio real y probarlo tú mismo.
01 · Proyectos de clientes
Proyectos de clientes
Diseños que hicimos para negocios y marcas reales, renombrados aquí como copias de demostración. Falcon Motorcycles y Leederville Dental son conceptos de rediseño de sitios existentes, hechos sin la participación de esos negocios. Cada marco es una grabación del sitio en vivo.
Una G sellada, rayas en blanco y negro y un duotono rojo abren la página; la lista de precios gira como un disco y los paquetes se deslizan hacia un lado.
Una bicicleta de acero con juntas se desarma en sus piezas etiquetadas al hacer scroll y luego se vuelve a armar sola.
Perfume unisex de lotes pequeños de Oporto: tu cursor abre un agujero de tinta en la página y un frasco te sigue hacia abajo.
El contorno del estado de una agencia de seguros se dibuja solo y se abre a una foto del desierto; las tarjetas de cobertura se apilan y las etiquetas de descuento se estampan.
Planos de ampliación de casas: un dibujo a lápiz se traza solo y luego una línea de lápiz lo barre hasta convertirlo en el edificio terminado.
Un constructor de motos a medida en Los Ángeles: líneas de cotas se dibujan alrededor de cada moto y cuentan hacia arriba, y un halcón peregrino vuela entre secciones.
Una clínica dental en Perth: el arco de sonrisa del logotipo recorre la página, y las 84 páginas del original se reconstruyen con él.
02 · Plantillas
Plantillas
64 plantillas de sitios en movimiento con contenido de ejemplo: puntos de partida que adaptamos a cada marca, de dos tipos, motion graphics y cinematográficas. Todas están en vivo, así que ábrelas y mueve el cursor.
Motion graphics 47
Tipografía, formas y objetos animados con el scroll, el arrastre y el cursor. Sin video, solo código e imágenes fijas.
Tora Studio (abre el sitio en vivo en una pestaña nueva)
Un tigre de porcelana blanca se alza sobre una nube de acuarela color brasa; tu cursor deja sobre ella rastros de rayas de brasa y vetas doradas de reparación.
Lavenhill (abre el sitio en vivo en una pestaña nueva)
La página de una granja de lavanda: un talud curvo de lavanda en 3D que tu cursor peina hacia los lados, y los tallos vuelven a su sitio.
Lumen Atelier (abre el sitio en vivo en una pestaña nueva)
Un monolito de cristal frente a un enorme titular amplía y divide las letras que hay detrás al arrastrarlo.
Emberspire (abre el sitio en vivo en una pestaña nueva)
Dos agujas de arenisca roja en un cañón del desierto; el rastro de un cursor abre un agujero hacia el mismo cañón en flor.
Kasumi (abre el sitio en vivo en una pestaña nueva)
Una cortina de kanji cuelga de hilos bajo el techo de un templo; los hilos se abren alrededor de tu cursor, se pueden tirar y hacen sonar una nota.
Hoppenbit (abre el sitio en vivo en una pestaña nueva)
Una rana se planta frente a un titular gigante HOPPENBIT, y sus ojos siguen tu cursor.
Acid Lion (abre el sitio en vivo en una pestaña nueva)
Un león dibujado como una cuadrícula de glifos; el rastro del cursor revela una capa de color verde lima ácido celda por celda.
Tidal Stickers (abre el sitio en vivo en una pestaña nueva)
Ocho stickers troquelados del océano forman un horizonte bajo el encabezado y se pueden recoger y mover.
Pompom Club (abre el sitio en vivo en una pestaña nueva)
Una criatura de fieltro rojo tomate abraza una estrella detrás del texto de contacto, con sus ojos saltones siguiendo tu cursor.
Moulin Verdelle (abre el sitio en vivo en una pestaña nueva)
Una botella de aceite de oliva se mantiene en pantalla durante cuatro estados mientras una tira de etiquetas rueda a su alrededor.
Frostline (abre el sitio en vivo en una pestaña nueva)
Un logotipo gigante de píxeles aparece con efecto glitch mientras entra una gafa de esquí, y luego ambos se encogen hasta la sección de beneficios.
Fizzleaf (abre el sitio en vivo en una pestaña nueva)
Escenas de papel rasgado se deslizan unas sobre otras mientras las botellas de té espumoso se inclinan, se alinean en podios y se acercan para el final.
Poke Ahoy (abre el sitio en vivo en una pestaña nueva)
Un bol de poke sobre un plato turquesa da paso a ingredientes voladores y luego se asienta sobre un nuevo color al hacer scroll.
Olea Atelier (abre el sitio en vivo en una pestaña nueva)
La cámara atraviesa un arco dibujado hasta una sala de color oliva que se encoge hasta un panel mientras suben el título y tres retratos.
Trekar (abre el sitio en vivo en una pestaña nueva)
Una bota de senderismo vuela y rota entre tres escenas mientras cambia la palabra y una segunda bota sube bajo las agujas de arenisca.
KYRO (abre el sitio en vivo en una pestaña nueva)
Un casco de moto entra girando, sale de golpe y aparece la interfaz; cada clic mueve el casco, las especificaciones y las miniaturas una fila.
Skyloft (abre el sitio en vivo en una pestaña nueva)
Un logotipo se acerca hasta un valle al atardecer, y luego tres escenas de un chalet alpino: el titular enmascarado sube, las líneas finas se dibujan y las tarjetas de cristal se deslizan.
Ligure (abre el sitio en vivo en una pestaña nueva)
Una portada de la Riviera ligur que recorre el paisaje pueblo a pueblo, con escenas de paralaje en capas y barcos a la deriva.
Chronis (abre el sitio en vivo en una pestaña nueva)
Dos arcos verde bosque sobre arena y un reloj de arena de escritorio: un carrusel de cuatro estados con resorte, rodillos de texto y una tarjeta de miniaturas.
Lombok Stay (abre el sitio en vivo en una pestaña nueva)
Paredes de hojas de plátano enmarcan una laguna al amanecer; el título se parte, las hojas se apartan, las palmeras suben y una costa aérea se eleva bajo Book Now.
Sandbar (abre el sitio en vivo en una pestaña nueva)
Una historia de laguna vista desde arriba: la marea barre la arena y las sombrillas, caen canoas y un muelle de teca se levanta al hacer scroll.
Villa Nova (abre el sitio en vivo en una pestaña nueva)
Un logotipo serif gigante sube desde una máscara y se asienta abajo a la izquierda mientras dos tarjetas de fotos de gres se deslizan.
Pressd (abre el sitio en vivo en una pestaña nueva)
Un carrusel de jugos prensados en frío: una rueda enorme trae la siguiente botella y su color detrás de un logotipo gigante.
Kettle Dusk (abre el sitio en vivo en una pestaña nueva)
Una secuencia de seis escenas para una marca de té en hebras: una bolsa cae sobre el titular, el fondo se vuelve atardecer y la estación de infusión se desliza.
Smashhaus (abre el sitio en vivo en una pestaña nueva)
Una hamburguesa smash doble se arma a partir de cinco capas que caen, y luego la navegación, el titular y las tarjetas del menú se deslizan a su alrededor.
Alpen Ridge (abre el sitio en vivo en una pestaña nueva)
Una diminuta ventana de cueva de hielo entre Traverse y Engadin se abre con el scroll hasta un atardecer de alpenglow a pantalla completa con picos de paralaje que suben.
Maison Aubrey (abre el sitio en vivo en una pestaña nueva)
Una portada de casa de perfumes: un flacón cae tras un cargador de puntos, se inclina junto al titular y se endereza cuando entran dos más.
Torrent Gear (abre el sitio en vivo en una pestaña nueva)
Un titular en versalitas partidas sobre un cielo al alba, dos botas entran rodando, y luego un scroll levanta el cielo y posa una sobre un podio de granito.
Dough Bros (abre el sitio en vivo en una pestaña nueva)
Una pared de estudio azul cobalto con podios de travertino donde pretzels blandos ruedan y giran en un carrusel.
Zestwell (abre el sitio en vivo en una pestaña nueva)
Arrastra para cambiar una botella de jugo de dos sabores: una escena de ciruela lila se desliza para revelar un mango aguamarina mientras la fruta se acomoda en su lugar.
Ironbark Skin (abre el sitio en vivo en una pestaña nueva)
Cinco botellas sobre pedestales de piedra; un arrastre barre la sala hasta un azul tinta en tiras, y luego sube un sérum con gotero y cuatro cifras cuentan hacia arriba.
Hanabi Studio (abre el sitio en vivo en una pestaña nueva)
Un ryokan de arces otoñales con una larga intro de carga, un título que se parte, una cascada de tarjetas y un cambio de día a noche.
Aurelle (abre el sitio en vivo en una pestaña nueva)
Una inmersión con scroll por un campo de dunas en capas hasta ingredientes botánicos, un vaso que recoge pétalos y tres botellas de sérum.
Hirekart (abre el sitio en vivo en una pestaña nueva)
Una portada de alquiler de karts donde los karts derrapan dentro y fuera de un panel de pista inclinado mientras el nombre, el contador y las especificaciones ruedan como carretes.
Chiang Trails (abre el sitio en vivo en una pestaña nueva)
Una pared de terracota con un arco de piedra se abre a un sendero de arrozales en terrazas entre la niebla; las capas de follaje se desplazan con tu cursor alrededor de un título partido.
Stillform (abre el sitio en vivo en una pestaña nueva)
Una palabra gigante tras una bailarina recortada en una galería soleada, tarjetas de clases con arco fijadas que se desplazan hacia un lado y un panel de reservas que se acerca.
Fledge (abre el sitio en vivo en una pestaña nueva)
Una página de app de IA divertida: intro de arranque tecleada, pájaros de peluche de fieltro, una burbuja WebGL que cambia de forma, un marquee de teselas y tarjetas que se abren en abanico con el scroll.
Amberhive (abre el sitio en vivo en una pestaña nueva)
Una marca retro de miel donde una botella de colmena se planta en un titular gigante que se descifra, y una abeja sigue tu cursor.
Puff Studio (abre el sitio en vivo en una pestaña nueva)
Una página de inicio de estudio con una mascota de cara de puntos, una nube de partículas que cambia de forma y paneles de servicios que se apilan al hacer scroll.
Pursuit Gallery (abre el sitio en vivo en una pestaña nueva)
Un anillo 3D de pases de galería con láminas inclinadas que se nivelan con el scroll, tarjetas curvadas a través de letras gigantes y un marquee.
Egret AI (abre el sitio en vivo en una pestaña nueva)
Un sitio de hoja de dibujo donde renders a lápiz punteados de un yate se construyen pared a pared en un scroll fijado.
Cuya Mate (abre el sitio en vivo en una pestaña nueva)
Una lata de mate espumoso sale rodando de una portada ilustrada, se abre con un chasquido, lanza tarjetas de beneficios y recorre un titular en arco.
Palate Labs (abre el sitio en vivo en una pestaña nueva)
Una rueda 3D de pósters de comida, especias y vino gira a través de una lente de octágono redondeado, con una red de nodos y un juego de deslizar.
Copy Foundry (abre el sitio en vivo en una pestaña nueva)
Una inmersión en espiral de tipografía con costuras de sección de glifos-píxel para una página de aterrizaje de una herramienta para desarrolladores.
Nudge Coffee (abre el sitio en vivo en una pestaña nueva)
Un enorme logotipo de café rotulado a mano se escribe solo sobre un campo azul cobalto, seguido de bandas de color planas en mono mayúsculas.
Scrappy Pay (abre el sitio en vivo en una pestaña nueva)
Una app de pagos para freelancers donde tu cursor deja un rastro de stickers sobre un breve video de ciudad en bucle.
Pilot AI (abre el sitio en vivo en una pestaña nueva)
Una caricatura contada con scroll: un titular tecleado en una computadora retro, una transición líquida y luego una mascota aviadora por un laberinto y una cabina.
Cinematográficos 17
Video en movimiento o secuencias de fotogramas y fotografía sostienen la página.
tideFORUM (abre el sitio en vivo en una pestaña nueva)
Una ciudad portuaria de anime se queda quieta hasta que haces scroll, y luego avanza de la hora dorada a la noche.
Kitsu AI (abre el sitio en vivo en una pestaña nueva)
Los ojos de un robot zorro brillante siguen tu cursor, eligiendo entre 72 fotogramas calibrados de un mismo clip.
Harbour Kiln (abre el sitio en vivo en una pestaña nueva)
Una bahía dibujada a tinta se extiende tras el texto del pie de página mientras dos veleros se deslizan en un bucle continuo.
Halo Glass (abre el sitio en vivo en una pestaña nueva)
Tu cursor abre agujeros de tinta en una página de papel para mostrar la misma palabra debajo como vidrio soplado que cambia de forma.
Clovera (abre el sitio en vivo en una pestaña nueva)
Cuencos de cerámica con orejas de conejo y un conejo de orejas caídas en un campo de lavanda al atardecer, que se descubren al alejarse la portada con el scroll.
Waymark (abre el sitio en vivo en una pestaña nueva)
Un acueducto romano impreso en tinta índigo sobre papel arena, con una caravana de camellos que cruza en un bucle continuo.
Gallop AI (abre el sitio en vivo en una pestaña nueva)
Un busto de caballo de cristal sube desde el borde inferior y da una vuelta completa de 360 al mover el mouse hacia los lados.
High Country (abre el sitio en vivo en una pestaña nueva)
Veintiuna fotografías de montaña flotan en una esfera 3D que giras arrastrando; haz clic en una para llevarla volando a un lightbox.
Ducato (abre el sitio en vivo en una pestaña nueva)
Un ducado veneciano de plata gira, sigue al lector por la página y se acopla en arcos pintados.
Glazery (abre el sitio en vivo en una pestaña nueva)
Una dona glaseada flota sobre un cielo pintado; el scroll dispersa el título, desplaza el prado y da la vuelta a la dona.
Sela (abre el sitio en vivo en una pestaña nueva)
Un film de moda de dos clips se desplaza tras una página editorial blanca al hacer scroll, con recortes de materiales que pasan deslizándose.
Lustre.Co (abre el sitio en vivo en una pestaña nueva)
Una pickup turquesa de los años 50 en un estudio blanco, y al mover el mouse la cámara da la vuelta a su alrededor.
Stratum House (abre el sitio en vivo en una pestaña nueva)
Un vuelo de dron por un cañón a pantalla completa se reproduce tras una secuencia de título en bucle de 13 segundos de líneas en cascada y un avance de cámara.
Zephyra (abre el sitio en vivo en una pestaña nueva)
Un video de catamarán en la hora dorada llena la pantalla tras líneas finas, un titular enmascarado y tarjetas de cristal que se deslizan hasta una sección de deslizamiento.
Kaelo (abre el sitio en vivo en una pestaña nueva)
Una página de inicio de reloj de buceo con una placa de video en bucle tras una interfaz que sube y se desvanece por etapas, y luego una sección de piezas desmontadas con una esfera de anillo de marcas.
Lumora Home (abre el sitio en vivo en una pestaña nueva)
Un preloader de láminas de ola se encoge hasta una tesela de cuadrícula sobre un video de una casa al atardecer, y luego una construcción fijada de tres pasos y paneles de fotos de invierno apilados.
Famished Owl (abre el sitio en vivo en una pestaña nueva)
Un frasco de miel picante cae y se derrama a lo largo de un recorrido de ocho pantallas controlado por el scroll.
Contacto
¿Quieres un sitio como uno de estos?
Cuéntanos a qué se dedica tu negocio. Lo diseñamos, lo construimos y automatizamos el trabajo que lo rodea.
Contáctanos