Famara Web Studio · Laboratorio

La biblia del movimiento y la interfaz

Todo nuestro repertorio de movimiento e interacción, técnica a técnica: animación, navegación, formularios, feedback, datos y galerías. Nuestra guía interna — y una muestra de lo que tu web puede hacer. Pasa el ratón (o toca en móvil) y pulsa ↻ para repetir.

Cada estilo del muestrario trae ya las suyas; esto es el catálogo completo — una biblia viva, en crecimiento constante: sumamos técnicas nuevas en cada proyecto.

Revelados de scroll Al entrar Texto / kinético Cursor Hover / micro SVG / draw 3D / perspectiva Ambiente / motion Cursores personalizados Tipografías Entradas hero/CTA Loaders y progreso Tipografía premium Superficie premium Navegación & menús Formularios & inputs Feedback & estados Data & stats Galería & media Acordeón & disclosure Interactivo & producto Transiciones de página Scroll-driven Accesibilidad & foco E-commerce / tienda
01

Revelados de scroll

12 técnicas
card
Fade upEl básico elegante
card
Pop con reboteNeubrutalism
card
Wipe / cortinaSwiss
card
RespiraOrgánico
card
Desenfoque→nítidoDark Tech
card
Glitch-inRetro
Veloque sube
Velo / cortinaLuxury
card
Skew nerviosoCAOS
card
Clip verticalPersiana
card
Flip 3DVuelco en X
card
Scale inZoom de entrada
card
Rotate inGira al entrar
02

Al entrar en pantalla

7 técnicas
0
ContadorCuenta ascendente
0
OdómetroNúmeros que ruedan
Typing terminalSe escribe solo
Máscarade textopor líneas
Máscara de textoLíneas que suben
  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento cuatro
Lista escalonadaStagger
Draw-on SVGTrazo que se dibuja
Kinético
Split por letrasChar stagger
03

Texto / kinético

10 técnicas
Gradiente
Gradiente animadoBucle
auto
Diseño con criterio
Máquina de escribirBucle
auto
SENSORIAL
Scramble / decodeSe descifra
ONDA
Texto ondulanteBucle por letra
auto
Peso
Peso variableFina → negra
hover
EXPANDE
Tracking expandEspaciado al hover
hover
GLITCH
Glitch de textoDistorsión
auto
DESTELLO
Shine / brilloBarrido de luz
auto
DISEÑO✦MARCA✦WEB✦DISEÑO✦MARCA✦WEB✦
Marquee de textoCinta infinita
auto
0
Número scrubCuenta al entrar
04

Cursor

5 técnicas
Spotlight
Spotlight cursorDark Tech
hover
Botón magnéticoSigue al cursor
hover
Tilt 3D
Tilt al punteroParallax
hover
Pasa el ratónVer →
Cursor personalizadoEtiqueta "Ver →"
hover
FondoFrente
Parallax capasProfundidad
hover
05

Hover / microinteracciones

12 técnicas
Fill slideEl de Famara
hover
Botón que se hundeNeubrutalism
clic
Subrayado
Subrayado que creceSwiss / Luxury
hover
Ver más →
Flecha que avanzaCTAs
hover
card
Card que se elevaUniversal
hover
Glow
Glow que sigueDark Tech
hover
Ripple al clicOnda material
clic
Icono morphPlay / pause
clic
Gradiente
Cambio de gradienteHover suave
hover
Zoom
Image zoomFoto que acerca
hover
Borde
Borde que se dibujaStroke draw
hover
Brillo
Shine sweepDestello diagonal
hover
06

SVG / draw

6 técnicas
Draw-on líneaTrazo continuo
Check dibujadoConfirmación
Blob que mutaMorph orgánico
auto
Líneas que fluyenSensorial
auto
Icono line-drawLogo animado
Onda SVGSeparador vivo
auto
07

3D / perspectiva

5 técnicas
Frente
Detrás
Flip cardVuelco en Y
hover
Cubo 3DRotación continua
auto
Push Z
Perspective pushSe acerca en 3D
hover
123
Capas de profundidadStack 3D
hover
Tilt
Tilt 3DInclina al puntero
hover
08

Ambiente / motion

8 técnicas
Aurora / meshGlassmorphism
auto
PartículasPuntos que flotan
auto
Rejilla synthwaveRetro / Motion
auto
Blobs flotandoOrgánico / CAOS
auto
Formas flotantesAscienden
auto
Gradiente animadoFondo vivo
auto
Onda ambienteMovimiento suave
auto
NEÓN
Flicker neónRetro / CAOS
auto
09

Cursores personalizados

6 técnicas
Mueve el ratón
Punto seguidorReemplaza el cursor
hover
Mueve el ratón
Estela de puntosTrail con inercia
hover
Mueve el ratón
Anillo elásticoCrece al pasar
hover
Invertido
Invertido (blend)mix-blend difference
hover
Mueve el ratón
ElásticoSigue con retardo
hover
Gooey
GooeyFiltro SVG que funde
hover
10

Tipografías

31 fuentes
Famara Web Studio
Aa
Marca web
Satoshi
Famara · titulares
Aa
Marca web
Inter
Famara · cuerpo
Aa
Marca web
IBM Plex Mono
Famara · detalles
Estilos de web
Aa
Marca web
Archivo Black
Neubrutalism
Aa
Marca web
Space Grotesk
Neubrutalism · Dark Tech
Aa
Marca web
Gloock
Orgánico
Aa
Marca web
Newsreader
Orgánico · cuerpo
Aa
Marca web
Caveat
Orgánico · acento
Aa
Marca web
JetBrains Mono
Dark Tech
Aa
Marca web
Orbitron
Retro / Y2K
Aa
Marca web
Press Start 2P
Retro · píxel
Aa
Marca web
Rajdhani
Retro · cuerpo
Aa
Marca web
Cormorant Garamond
Editorial Luxury
Aa
Marca web
Jost
Editorial Luxury · cuerpo
Aa
Marca web
Unbounded
CAOS / Neón
Aa
Marca web
Space Mono
CAOS · Texturizado
Aa
Marca web
Playfair Display
Dark Cinematic
Aa
Marca web
Plus Jakarta Sans
Glassmorphism
Aa
Marca web
Fraunces
Texturizado
Aa
Marca web
Syne
Sensorial
Aa
Marca web
Atkinson Hyperlegible
Accesible · baja visión
Casos reales y demos
Aa
Marca web
Zilla Slab
Da Mario
Aa
Marca web
Spectral
Cofradía
Aa
Marca web
Bodoni Moda
Bella J
Aa
Marca web
Oswald
O'Sullivan's
Aa
Marca web
Bebas Neue
Brutal Burger
Aa
Marca web
Big Shoulders
ROSSO
Aa
Marca web
Bricolage Grotesque
MAREA · DERIVA
Aa
Marca web
Anton
FORJA
Aa
Marca web
Archivo
Élite
Aa
Marca web
Nunito Sans
Farmacia
11

Entradas de hero / CTA

9 técnicas
Rebote
Emerge con reboteTitular del hero
Ver planesQuiero mi web
CTAs izquierda / derechaEntrada en móvil
UnoDos
CTAs escalonadosStagger pop
Presupuesto →
Glow que respiraCTA primaria
auto
Cubo 3DAmbiente inmersivo
auto
Ken BurnsZoom lento de foto
auto
+2.000 negocios confían
Badge de confianzaPrueba social
—
02hrs
47min
15seg
Contador regresivoUrgencia de oferta
auto
12

Loaders y progreso

7 técnicas
SpinnerAnillo giratorio
auto
PuntosRebote en secuencia
auto
Barra de progresoIndeterminada
auto
SkeletonCarga con shimmer
auto
Progreso circularArco giratorio
auto
EcualizadorBarras de audio
auto
Bienvenido
Famara
Splash / introCortina de entrada
auto
13

Tipografía premium

8 técnicas
Relleno
Contorno → rellenoEl trazo se llena
auto
DiseñoMarcaMotionArteDiseño
Palabras rotativasCarrusel vertical
auto
Enfoque por letraDesenfoque en onda
auto
Relieve
Texto 3D extruidoProfundidad + flota
auto
Iris
Texto iridiscenteMatiz que gira
auto
Revelar
Revelado circularClip-path círculo
Espacio
Espaciado que respiraTracking vivo
auto
Subrayado
Subrayado elásticoCrece con rebote
hover
14

Superficie premium

8 técnicas
Borde
Borde gradiente giratorioConic rotando
auto
Brillo de tarjetaGlare que barre
auto
Radar / sonarOndas que emanan
auto
Mueve el ratónOCULTO
Foco reveladorTexto bajo el cursor
hover
Color al pasarGris → color
hover
Anillo de progresoTrazo SVG
auto
Frente
Dorso
Volteo 3DFlip de tarjeta
hover
HolográficoIridiscente + sheen
auto
15

Navegación & menús

12 técnicas
Hamburguesa → XMorph del icono
clic
Drawer lateralOff-canvas
clic
Tabs con indicadorPíldora deslizante
clic
Subrayado de navCrece al pasar
hover
Menú ▾
Opción AOpción BOpción C
DropdownDespliega al pasar
hover
MarcaMenú · Contacto
Header que encogeAl hacer scroll
auto
FAB radialBotones que se abren
clic
Productos ▾
Mega-menúPanel en rejilla
hover
InicioBuscarCestaPerfil
Bottom-nav móvilBarra inferior
—
BreadcrumbRuta de navegación
—
↑
Back to topAparece al bajar
auto
Reservar ahora →
CTA fijoSube al hacer scroll
auto
16

Formularios & inputs

11 técnicas
Floating labelSube al enfocar
clic
Toggle switchOn / off suave
clic
Checkbox dibujadoEl check se traza
clic
Radio pillsSelección tipo píldora
clic
Slider de rangoRelleno que sigue
desliza
Foco con glowHalo al enfocar
clic
✕ Campo requerido
Validación / errorVibra en rojo
auto
Fuerza de contraseña
Fuerza de contraseñaDébil → fuerte
auto
Código OTPAvanza solo
clic
0/120
Contador de caracteresLímite en vivo
clic
Arrastra un archivo
o toca para subir
Dropzone de subidaÁrea de arrastre
hover
17

Feedback & estados

12 técnicas
Check de éxitoSe dibuja
✓ Guardado correctamente
Toast / avisoEntra y sale
✕ Algo salió mal
Error / shakeVibra al fallar
Like / me gustaLate al pulsar
clic
Copiar → copiadoConfirma al clic
clic
✓
Progreso → completoBarra y check
auto
9
Badge / contadorRebote al llegar
auto
Valoración estrellasHover + selección
hover
ConfetiCelebración
auto
Elemento eliminadoDeshacer
Snackbar "Deshacer"Acción reversible
Guardando…✓ Guardado
Guardando → GuardadoEstado inline
auto
Nada por aquí todavía
Empty stateSin resultados
—
18

Data & stats

7 técnicas
Barras que crecenGráfico animado
Línea que se dibujaTrazo de datos
auto
Medidor / gaugeArco que llena
auto
SparklineMini-tendencia
auto
2.4k▲ +18% este mes
KPI / métricaNúmero + tendencia
auto
68%
Donut / anilloPorcentaje que llena
auto
Barras apiladasSeries superpuestas
19

Galería & media

7 técnicas
CarruselSlides automáticos
auto
Antes / despuésComparador deslizante
desliza
LightboxAmplía al pulsar
clic
Masonry revealMosaico escalonado
Zoom en hoverImagen que acerca
hover
Miniaturas → principalCambia la imagen
clic
Blur-up / lazy loadBorrosa → nítida
auto
20

Acordeón & disclosure

6 técnicas
¿Qué incluye?
Diseño, código, copy y SEO — todo hecho a medida.
Acordeón<details> nativo
clic
Pregunta 1
Respuesta breve a la primera.
Pregunta 2
Solo una abierta a la vez.
FAQ exclusivoUna abierta a la vez
clic
TérminoDefinición al vuelo
TooltipBurbuja al pasar
hover
PopoverTarjeta al pulsar
clic
Este texto es más largo de lo que se ve al principio y se expande de forma suave al pulsar, para revelar el resto sin recargar la página.
Leer más / menosExpande el texto
clic
Spoiler / blurOculto hasta pulsar
clic
21

Interactivo & producto

5 técnicas
Pregunta de 3

¿Tu prioridad?

¿Cuántas páginas?

¿Idiomas?

✓ ¡Listo!
Tenemos tu plan.
Quiz multi-pasoCon barra de progreso
clic
Producto / carritoAñadir con confirmación
clic
PDF
Manual 72 Horas
Descarga / PDFProgreso de descarga
auto
¿Qué necesita tu web?
Ver diagnóstico completo (Corso) →
Diagnóstico guiadoResultado según respuesta
clic
Jugar ahoraRincón del Peregrino · caso real
Mini-juegosJugable en Anduriñas
abrir
22

Transiciones de página

6 técnicas
Contenido
Wipe de páginaCortina que barre
Página B
Página A
Fundido cruzadoCross-fade
auto
Modal / diálogoBackdrop + escala
clic
Actual
Nueva
Slide / empujeEntra deslizando
auto
Revelado
Iris / círculoAbre en círculo
Contenido
Cortina dobleSe abre en dos
23

Scroll-driven

6 técnicas
FONDO
Primer plano
Parallax por capasDistintas velocidades
auto
Progreso de lecturaBarra que avanza
auto
Título fijo
Pin / stickySe queda fijo
auto
Scroll horizontalDesplaza en X
auto
Zoom al hacer scrollEscala ligada
auto
Aparición por scrollEntra en secuencia
auto
24

Accesibilidad & foco

5 técnicas
Anillo de focoFoco visible y claro
clic
Saltar al contenido
Pulsa Tab para ver el enlace de salto.
Skip linkAparece al tabular
tab
Texto de muestra legible.
Alto contrasteModo accesible
clic
✓
44px mín. vs pequeño
Objetivo táctilTamaño accesible
guía
Animación
Respeta reduce-motionSe detiene si procede
auto
25

E-commerce / tienda

8 técnicas
Cuaderno Ante Lucem
24€
+ Añadir
Tarjeta de productoQuick-add al pasar
hover
1
Stepper de cantidad− 1 +
clic
Drawer de carritoPanel lateral
clic
3
Badge de carritoRebota al añadir
auto
Precio mensual / anualToggle con ahorro
clic
★★★★★128 reseñas
Rating con reseñasPrueba social
—
NuevoAgotado
Badges de productoNuevo · Agotado
—
WishlistGuardar favorito
clic

¿Buscas algo diferente?

Estas son las que tenemos catalogadas — pero inventamos nuevas en cada proyecto. Cuéntanos qué imaginas y lo hacemos realidad.

Consúltanos por WhatsApp →

¿Prefieres verlo en producción? Todo esto ya vive en webs reales — Método Corso · Finca Anduriñas · Manual 72 Horas.

← Volver a las demos Inicio →