Fase Rem ← Volver al sitio
Escribinos

LABORATORIO DE EFECTOS · FASE REM

Efectos que se sienten, no que se ven de plantilla.

Veinte efectos para sitios de alto impacto, funcionando en vivo: animaciones, 3D, scroll interactivo y detalles que reaccionan al mouse. Cada ficha cuenta cómo se hace, cuánto pesa y para qué tipo de negocio conviene. Si te gusta uno, tocá "Lo quiero en mi sitio" y lo charlamos. En un sitio usamos de 3 a 5, elegidos según lo que tu marca necesita contar.

liviano · CSS/JSmedio · GSAPpesado · WebGL
01

Pantalla de carga con contador y revelado por bloques

medioCSS · JS

Cómo se genera

  1. Cada dígito es una columna con 0-9 apilados; se mueve con translateY como un odómetro.
  2. El porcentaje sigue la carga real de imágenes y modelos (en el demo, un tiempo fijo).
  3. Al llegar a 100, una grilla de bloques desaparece en orden aleatorio con gsap.to(..., {stagger:{from:"random"}}).

Para sitios con mucho 3D o video: disimula la carga y crea expectativa. En una web chica sobra.

Lo quiero en mi sitio →
02

Scroll suave (inercia)

livianoLenis

Está activo en toda esta página. Scrolleá con la rueda: la página frena con inercia en lugar de saltar.

Cómo se genera

  1. new Lenis() intercepta la rueda y anima la posición con easing.
  2. Se conecta a GSAP: lenis.on('scroll', ScrollTrigger.update) para que los efectos de scroll queden sincronizados.

Base de casi todos los sitios premium. Barato y con mucho impacto. En celular se deja el scroll nativo.

Lo quiero en mi sitio →
03

Texto que se revela palabra por palabra

medioGSAP ScrollTrigger

Una web no se mira, se recorre. Cada palabra aparece cuando el ojo llega, como si el sitio te estuviera hablando a vos.

scrolleá despacio

Cómo se genera

  1. El texto se parte en palabras (span con overflow:hidden).
  2. Cada palabra sube desde abajo y pasa de gris a blanco, atada al scroll (scrub:true).

Manifiestos, "quiénes somos" y frases de marca. Que sean párrafos cortos.

Lo quiero en mi sitio →
04

Tipografía gigante con video dentro de la frase

medioCSS · JS

Diseñamos experiencias que se quedan en la memoria de la gente.

Cómo se genera

  1. Una "pastilla" con video (acá, un gradiente animado en canvas) metida en el texto como un inline-block.
  2. Su ancho pasa de 0 a 3,5em con el scroll, y empuja las palabras.

Hero o "about" de estudios, marcas de moda y gastronomía con buen material de video.

Lo quiero en mi sitio →
05

Objeto que gira con el scroll (secuencia de imágenes)

medioCanvas · 3D
Web · Diseño
fotograma 1/72
la sección se fija y el scroll mueve los fotogramas

Cómo se genera

  1. El objeto se renderiza en 3D (Blender o C4D) y se exportan entre 60 y 160 fotos en .webp. Para un producto real se usan entre 100 y 160.
  2. Se precargan, y el scroll elige qué foto dibujar en un canvas.
  3. En el demo los 72 fotogramas se generan al cargar con Three.js, para no depender de archivos.

Productos (perfumes, zapatillas, joyas), packaging y maquetas de obra. Se ve perfecto porque no se calcula en vivo.

Lo quiero en mi sitio →
06

Objeto 3D en tiempo real que sigue al mouse

pesadoThree.js · shader
mové el mouse arriba del objeto

Cómo se genera

  1. Una esfera de Three.js cuya superficie se deforma con ruido en el vertex shader.
  2. El color es iridiscente: depende del ángulo de la cámara (efecto Fresnel).
  3. El mouse rota el objeto y aumenta la deformación; el scroll lo escala.

Marcas tech, IA, música, eventos. El objeto puede ser el logo en 3D (modelo .glb).

Lo quiero en mi sitio →
07

Túnel 3D de proyectos

pesadoThree.js
la sección se fija: el scroll te mete en el túnel

Cómo se genera

  1. Anillos y tarjetas distribuidas a lo largo del eje Z, con niebla para dar profundidad.
  2. La cámara avanza en Z según el progreso del scroll (sección fijada con ScrollTrigger).
  3. En un sitio real el túnel puede ser un modelo .glb y cada tarjeta mostrar el video del proyecto.

Portfolios, inmobiliarias (recorrer emprendimientos), lanzamientos.

Lo quiero en mi sitio →
08

Galería en anillo con reflejo

livianoCSS 3D
arrastrá para girar

Cómo se genera

  1. Cada tarjeta se rota 360/N grados y se empuja hacia afuera con translateZ: queda un cilindro.
  2. El contenedor gira con el arrastre y la inercia; el reflejo es -webkit-box-reflect.

Equipo de trabajo, colecciones, galerías de obras o productos.

Lo quiero en mi sitio →
09

Cartas en cascada

medioGSAP

Cada carta,
un servicio.

01 / 05
scrolleá: las cartas caen una por una

Cómo se genera

  1. Las cartas están apiladas con position:absolute.
  2. Una línea de tiempo atada al scroll saca la de arriba (sube, rota y se desvanece) y la siguiente queda al frente.

Servicios, pasos de un proceso, planes, menú de platos destacados.

Lo quiero en mi sitio →
10

Slider coverflow con profundidad

livianoCSS 3D

Cómo se genera

  1. La activa queda al frente; las vecinas se corren, rotan ±45° y se alejan en Z.
  2. Transición con cubic-bezier suave y arrastre táctil.

Productos (anteojos, ropa), casos de éxito, testimonios.

Lo quiero en mi sitio →
11

Columnas que se expanden

livianoCSS
pasá el mouse o tocá

Cómo se genera

  1. Fila flex de paneles. El activo pasa a flex-grow:5 y el título entra con retraso.
  2. Transición de 0,8 s con curva suave: nada de JS pesado.

Categorías, ambientes de un depto, líneas de producto, equipo.

Lo quiero en mi sitio →
12

Scroll horizontal fijado

medioGSAP pin
Scroll vertical,
viaje horizontal.

Cómo se genera

  1. La sección se fija (pin:true) mientras el scroll vertical mueve la pista en X.
  2. La distancia de scroll = ancho de la pista − ancho de pantalla.

Línea de tiempo, proyectos, etapas de obra, carta de un restaurante.

Lo quiero en mi sitio →
13

Imagen que se deforma con el mouse

pesadoWebGL shader
pasá el mouse rápido por la imagen

Cómo se genera

  1. La imagen es una textura sobre un plano WebGL.
  2. El fragment shader desplaza los píxeles cerca del mouse (onda) y separa los canales rojo/azul según la velocidad (RGB shift).

Fotos de portfolio, moda, gastronomía, hover de proyectos. Con una o dos imágenes alcanza.

Lo quiero en mi sitio →
14

Fondo de gradiente vivo

pesadoshader · Gradients

Color que respira

Cómo se genera

  1. Un rectángulo a pantalla completa con un fragment shader de ruido "domain warping".
  2. La paleta se define con 3 o 4 colores de la marca (acá, los azules de Fase Rem con un toque cálido); el mouse empuja el flujo.

Heros de tecnología, salud y bienestar. Reemplaza al video de fondo y pesa mucho menos.

Lo quiero en mi sitio →
15

Cursor propio, botones magnéticos y tipografía que reacciona

livianoJS

Pasá el mouse

Cómo se genera

  1. Cursor: un punto y un aro que siguen al mouse con retraso (lerp); el aro crece sobre lo clickeable.
  2. Magnéticos: el botón se mueve hacia el mouse dentro de un radio y vuelve con efecto elástico.
  3. Tipografía: fuente variable; cada letra cambia su peso según la distancia al mouse.

Cualquier sitio de estudio, marca personal o portfolio. Solo en compu: en celular no hay mouse.

Lo quiero en mi sitio →
16

Contadores y cinta infinita que acelera con el scroll

livianoJS
0años trabajando (desde 2012)
0trabajos publicados
0de entrega del Plan PRO

Cómo se genera

  1. Contadores: cuentan de 0 al valor cuando entran en pantalla (IntersectionObserver).
  2. Cinta: dos copias del texto que se desplazan en bucle; la velocidad del scroll la acelera e inclina.

Logros, clientes, servicios, frases de marca. Los números tienen que ser reales.

Lo quiero en mi sitio →
17

Transiciones entre páginas

medioGSAP · Barba / View Transitions

Cómo se genera

  1. Al tocar un link se tapa la pantalla con una capa animada, se cambia el contenido y se destapa.
  2. En un sitio real se hace con Barba.js o con la API nativa View Transitions.

Sitios de varias páginas que se quieren sentir como una sola. Le da tono "cine".

Lo quiero en mi sitio →
18

Grano de película

livianocanvas

Está sobre toda la página: un ruido suave que se mueve y le saca lo "plástico" a los fondos planos. Apagalo arriba a la derecha (botón grano) para comparar.

Cómo se genera

  1. Se dibuja ruido en un canvas chico, se usa como fondo repetido y se mueve unos píxeles varias veces por segundo.
  2. Opacidad entre 5 y 8 %. Es casi imperceptible, pero se nota cuando no está.

Todo sitio oscuro o con gradientes. Es el antídoto barato contra el look de "diseño de IA".

Lo quiero en mi sitio →
19

Texto que se decodifica al pasar

livianoJS
  • Desarrollo web01
  • Identidad de marca02
  • Reels y video03
  • Marketing digital04

Cómo se genera

  1. Al pasar el mouse, cada letra cambia por caracteres al azar durante unos milisegundos hasta "fijarse" en la correcta, de izquierda a derecha.

Menús, listas de servicios, marcas tech. Sutil y muy barato.

Lo quiero en mi sitio →
20

Líneas que se dibujan con el scroll

livianoSVG

Cómo se genera

  1. Trazos SVG con stroke-dasharray igual a su largo; el scroll baja el stroke-dashoffset a 0.
  2. Funciona muy bien con arcos gigantes detrás de fotos o títulos.

Arquitectura (planos, arcos), mapas, recorridos, firmas.

Lo quiero en mi sitio →

¿Cuáles van con tu marca?

No hace falta usar todos. Elegimos de 3 a 5 según lo que tenés para mostrar: un producto que gira, tus trabajos en un recorrido 3D, tu equipo en un anillo o simplemente un scroll que se siente bien. Todo se adapta al celular y respeta a quien prefiere menos movimiento.

Contame tu proyectoEscribinos por WhatsApp