Anime System · Showcase 1
11 patrones · 14 animaciones · Máscaras degradadas · Product Cards
Todos los tramados
11 patrones SVG base. Pasa el cursor sobre cada card para resaltarlo.
Variantes de tamaño y diseño
Mismos patrones con distinta escala o forma, para mayor libertad creativa.
Profundidad: el patrón se desvanece
Máscara mask-image con gradiente a transparente.
Textos con animación sutil
Botones
Sólidos, outline, ghost. El patrón aparece en hover.
.anime-btn-ptrn — botón con patrón que aparece en hover:
.anime-btn--sm / --lg
Edición Especial
Hero card con figura decorativa, patrón animado con deriva y máscara radial.
Nueva Colección
Patrón hatch con desplazamiento vertical y máscara.
Oferta Relámpago
Diamantes que escalan + máscara radial.
Edición Limitada
Checkerboard que rota continuamente + máscara.
Caos Controlado
Zigzag con caos multi-eje.
Vibración Energética
Tremor de alta frecuencia sobre punteado fino.
Formas decorativas con textura
Patrones animados en componentes reales
Cada card tiene un patrón distinto con animación diferente.
Dots + Pulse
Puntos que laten suavemente.
Diamond + Scale
Rombos que crecen y encogen.
Checker + Spin-Scale
Tablero que rota y escala.
Wave + Chaos + Mask
Ondas con movimiento caótico.
Triangle + Wobble
Triángulos que bambolean.
Vert + Float + Mask
Líneas que flotan ingrávidamente.
Cross + Elastic
Cruzado que se estira como goma.
Fine + Tremor
Punteado que vibra a alta frecuencia.
Cards con patrón + máscara
Filtrado por categoría
Variantes de card
Cuatro variantes: Classic, Layered, Minimal, Carousel. Hover solo con sombra radiante, sin zoom ni movimiento.
Megan Frame
Marco decorativo con ilustración de Megan.
Stella Tote Bag
Bolsa ecológica. Patrón dots aparece en hover + máscara radial.
Luna Pack
Set de stickers. Sin bordes, sombra sutil.
Megan × Luna
Pasa el cursor: la imagen cambia suavemente a la segunda.
Productos en cuadrícula
8 productos en grid responsivo 4-columnas. Sin zoom, solo glow en hover.
Megan Frame
Marco decorativo con ilustración original.
Luna Tote Bag
Bolsa ecológica diseño exclusivo.
Sticker Pack
Set de stickers brillantes estilo anime.
Poster A2
Poster tamaño A2 estilo anime.
Pins Set
Pins de metal esmalte suave.
Keychain
Llavero acrílico con diseño original.
Art Print
Impresión artística en papel premium.
Coaster Set
Set de posavasos con estampado anime.
Card con dos imágenes (hover swap)
Al pasar el cursor, la imagen frontal se desvanece y muestra la segunda. Sin zoom, solo transición de opacidad.
Megan Frame Duo
Hover: frente → dorso. Transición suave.
Poster Duo
Dos diseños en una sola card.
Luna Pack Duo
Muestra el interior al hacer hover.
Estados de producto
Disponible, pocas unidades, agotado, próximo, descontinuado. Badges superiores únicamente.
Megan Frame
Megan Frame
Megan Frame
Megan Frame V2
Megan Frame (v1)
Carrusel de imágenes
Scroll-snap nativo con flechas y paginación. Imágenes reales de los personajes.
Encabezados de sección
Tres tipos de header con patrones animados.
Productos Destacados
Los favoritos de la comunidad Baburu.
Colección Anime
Personajes, ilustraciones y diseños originales.
Hover activado vs deshabilitado
La card derecha usa .prod-card--no-hover. Sin zoom ni movimiento en ningún caso.
Megan Frame
Glow radiante al hover. Sin movimiento.
Luna Tote Bag
Sin efectos. Ideal para táctil o estático.
Sistema de modales
<dialog> nativo · 4 tamaños · 8 animaciones de entrada. Elige el efecto abajo.
TamañosNotificaciones
Feedback tipo snackbar. 4 variantes. Auto-dismiss con JS.
Mini carrito lateral
Panel deslizable desde la derecha. Toggle con botón o data-toggle="cart-drawer".
Paginación
Tres tamaños: --sm, default, --lg. Con ellipsis para rangos largos.
Migas de pan
Navegación jerárquica con separador chevron. Responsivo: en móvil colapsa a últimos niveles.
Pestañas (CSS-only)
Navegación por pestañas con radio buttons. Sin JavaScript.
Marco decorativo 20×25 cm con ilustración original de Megan. Papel fine art 300g, acabado satinado con relieve. Incluye soporte de pared.
Tamaño: 20×25 cm · Material: Papel fine art 300g · Acabado: Satinado · Marco: Madera de pino.
⭐ 4.8 — 24 reseñas. "Excelente calidad" · "Los detalles en relieve se ven preciosos" · "Llegó bien empaquetado"
Acordeón
Preguntas frecuentes, filtros colapsables. Toggle con clase --open.
Select / Dropdown
Select estilizado con ícono de chevron via pseudo-elemento.
Estrellas de valoración
Rating interactivo (clic) y estático (display). 3 tamaños.
Stepper / Checkout
Indicador de progreso para flujo de compra. 3 estados: pendiente, activo, completado.
Estados vacíos
Para carrito vacío, sin resultados, etc.
Sin resultados
Intenta con otros términos.
Inicio de sesión / Registro
Formulario completo con login, registro y divisores sociales.
Crear cuenta
Únete a Baburu y recibe ofertas exclusivas
Banner promocional
Barra horizontal para promociones, envío gratis, etc.
Suscripción
Input + botón para capturar correos.
Testimonios de clientes
Card con avatar + opinión + autor.
Los marcos son hermosos, la calidad de impresión es increíble. Llegaron antes de lo esperado.
Compré la tote bag de regalo y le encantó. El diseño es precioso y la tela de buena calidad.
Cuadrícula de características
Icono + título + descripción. Ideal para landing pages.
Diseño único
Ilustraciones originales creadas por artistas mexicanos.
Eco-friendly
Materiales sustentables y empaques biodegradables.
Envío seguro
Empaquetado especial para proteger tu pedido.
Hecho con amor
Cada producto está hecho con dedicación y cariño.
Tooltips con tippy.js
Tooltips con data-tippy-content. Requiere @popperjs/core + tippy.js.
Favoritos / Wishlist
Botón de corazón con toggle. Usa clase --active.
Contadores / Estadísticas
Grid de métricas con valor destacado. 4 variantes de color.
Subida de archivos
Dropzone para imágenes. Arrastra o haz clic.