Proyecto personal · Diseño y front-endAcervo porcategoríasVista previa
en vivoCódigo
reutilizable
Un repertorio visual.Listo para crear.
Efectos, componentes y animaciones organizados para dar vida a nuevos proyectos.
Un acervo personal de 346 efectos y componentes de interfaz, cada uno en vivo y con el código listo, para elegir el mejor camino en cada proyecto.346 efectos y componentes en vivo, con el código listo.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
Proyecto personal · Diseño y front-endAcervo por categoríasVista previa en vivoCódigo reutilizableUn repertorio visual.Listo para crear.
Efectos, componentes y animaciones organizados para dar vida a nuevos proyectos.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
Un acervo personal de 346 efectos y componentes de interfaz, cada uno en vivo y con el código listo, para elegir el mejor camino en cada proyecto.346 efectos y componentes en vivo, con el código listo.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
El acervo
346 efectos, cada uno en su cajón.
Quien hace muchos sitios termina rehaciendo el mismo efecto cada vez, y olvidando dónde estaba aquel que quedó bien. La biblioteca guarda todo en un solo lugar: efectos y componentes reunidos y adaptados de bibliotecas abiertas, cada uno en vivo y con el código listo. Toca o pasa el mouse por un cajón para abrirlo.
Bordes con degradados cónicos, máscaras y efectos de cine.
Algunos de adentro- Conic Feixe Girante
- Broken Border
- Dupla Border Rotate
Inclinación 3D, imán y brillo al pasar el mouse.
Algunos de adentro- Tilt 3D com Glare
- Magnetic Effect
- Shine Sweep
Elementos que aparecen con clase: en cascada, por máscara, del desenfoque a lo nítido.
Algunos de adentro- Stagger Reveal
- Mask Reveal
- Blur-to-Sharp
Bento, masonry, scroll-snap y subgrid.
Algunos de adentro- Masonry
- Scroll-Snap Grid
- Subgrid
Pila 3D, peek, parallax y radial, para portadas y galerías.
Algunos de adentro- 3D Stack Carousel
- Peek Slider
- Parallax Carousel
Vidrio esmerilado con profundidad, en capas.
Algunos de adentro- Glass Basico
- Glass 3-Layer
- Pill Nav Glass
Partículas doradas, puntos magnéticos y fluido.
Algunos de adentro- GoldParticles
- Magnetic Dots
- tsParticles Library
Fuentes variables, texto en degradado y letras con resorte.
Algunos de adentro- Variable Fonts
- Animated Text
- Scroll-driven Text
Grano de película, líneas de barrido, RGB y trama.
Algunos de adentro- Film Grain
- Scan Lines
- RGB Split
Onda, resorte y botón que cambia de forma.
Algunos de adentro- Ripple Effect
- Spring Bounce
- Morphing Button
View Transitions, anclaje, scroll y :has(), solo en Web Full.
Algunos de adentro- Scroll-driven Animations
- View Transitions
- Anchor Positioning
Brillo que pasa, imán, confeti y clic con efecto.
Algunos de adentro- Shimmer Button
- Confetti Button
- Moving Border Button
Esqueletos con brillo, pasos, spinners y barras.
Algunos de adentro- Multi Step Loader
- Skeleton Loader
- Spinner Minimal
Barras flotantes, laterales, docks, mega menús y pestañas.
Algunos de adentro- Floating Navbar
- Sidebar Expansivel
- Animated Tabs
Portadas, FAQ, testimonios, precios, pies, login y contacto.
Algunos de adentro- FAQ Accordion
- FAQ Grid
- FAQ Categorized
Ayuda que aparece en el lugar justo, con resorte.
Algunos de adentro- Animated Tooltip
- Link Preview
- Context Menu
Art déco, polaroid, tira de película y borde dorado.
Algunos de adentro- Art Deco Card
- Wiggly Boxes
- Concentric Pseudo Frame
Caja de compra, CEP, CPF/CNPJ, Pix, cuotas y envío.
Algunos de adentro- Buy Box PDP
- CEP Auto-preenchimento
- CPF e CNPJ Toggle
346 efectos en 18 cajones
El efecto justo. En el entorno justo.
Compatibilidad con FiveM y Web para orientar cada elección.
Compatibilidad por efectoCompatibilidad por efectoReact en vivoLa estética llama la atención. La lógica sostiene la experiencia.Un efecto bonito puede simplemente no funcionar dentro del juego: el navegador integrado de FiveM es más antiguo que el Chrome de casa. Por eso cada efecto de la biblioteca viene en dos versiones, y un interruptor cambia entre ellas. Pruébalo aquí, el efecto es de verdad.
- Dónde corre
- Sí, giro por transform en las capas
- Peso
- ~1,5 kB
fivem.cssFragmento simplificado
/* FiveM: cores em hex, giro por transform */
.dupla::before, .dupla::after {
content: ""; position: absolute; inset: -50%;
}
.dupla::before {
background: conic-gradient(transparent 300deg, #d4af37 360deg);
animation: gira 4s linear infinite;
}
.dupla::after { animation-direction: reverse; }
@keyframes gira { to { transform: rotate(360deg); } }Los fragmentos de arriba son versiones cortas, para mostrar la diferencia. En la biblioteca, cada efecto trae el código entero de los dos lados.
La búsqueda
¿Lo escribiste mal? Lo encuentra igual.
Con cientos de efectos, nadie recuerda el nombre exacto de cada uno. La búsqueda de la biblioteca perdona la letra cambiada, la que falta y la que sobra. Esta usa los nombres reales del acervo: prueba uno de los ejemplos con error, o escribe el tuyo.
En la app, la misma búsqueda se abre desde cualquier pantalla con el atajo Ctrl+K y puede mirar solo la categoría abierta o el acervo entero.
Las recetas
Tres capas, un componente listo.
Un buen componente casi nunca es un solo efecto: es una forma, una reacción al toque y una manera de entrar en la pantalla. El constructor de recetas junta las tres capas y un estilo. Arma el tuyo aquí, cada elección cambia la vista al instante.
Elemento
Forma
Interacción
Movimiento
Estilo
Toca o pasa el mouse para ver la interacción
La receta
Tarjeta de producto + Borde que gira + Sube + Entra subiendo · LujoEn la app son 25 elementos, de tarjeta y botón a carrito, menú y línea de tiempo del pedido, y 6 estilos, cada combinación con el CSS listo para copiar.
Organización · Reutilización · Front-end
Cada proyecto alimenta al siguiente.
Modelos, referencias y efectos organizados para transformar repertorio en ejecución.
Modelos de páginaMapa de seccionesReferencias y códigoUna herramienta propia para evolucionar la forma de crear.Lo que convierte una biblioteca de efectos en herramienta es saber cuándo NO usar cada uno. Cada efecto tiene su prospecto: para qué sirve, cuándo queda bien, cuándo estorba, dónde corre y cuánto pesa. Estos son de verdad, sacados de la biblioteca, toca o pasa el mouse por la ficha para darla vuelta.
1.3Dupla Border Rotate
Dos bordes cónicos girando en sentidos opuestos. Un efecto hipnótico para el elemento principal.
Cuándo usar
- Tarjetas destacadas
- Avatares VIP
- Banners en evidencia
- Carga premium
1.3Dupla Border Rotate
Cuándo no usar
- Varios en la misma pantalla
- Elementos chicos
- Estética minimalista
- Texto largo
- En FiveM
- Sí, con giro por transform
- En la Web
- Chrome 85+
- Peso
- ~1,5 kB
Los textos vienen de las fichas de la propia biblioteca, solo ajustados para leer.
Los favoritos
Los que más salen, siempre a mano.
En un acervo grande, algunos efectos vuelven en cada proyecto. La estrella los guarda aparte, y un interruptor muestra solo esos. Marca los tuyos: como en la app, la elección queda guardada en este navegador.
3 favoritos en la constelación
- Bordes AvanzadosBroken Border
Borde quebrado, estilo art déco.
- Hover PremiumDepth Shift
La profundidad cambia al pasar el mouse.
- Animaciones de EntradaMask Reveal
El contenido aparece como un telón que se abre.
- Partículas y VFXMagnetic Dots
Puntos que huyen y vuelven con el cursor.
- Tipografía PremiumAnimated Text
El texto entra con movimiento.
- Texturas de CineScan Lines
Líneas de barrido de pantalla antigua.
- MicrointeraccionesMorphing Button
Un botón que cambia de forma.
- Botones y CTAsShimmer Button
Un brillo diagonal que cruza el botón.
- Loaders y SkeletonsMulti Step Loader
Pasos en secuencia, con barra y marcas de listo.
- Secciones de PáginaFAQ Accordion
Preguntas que se abren con una animación suave.
- Marcos y OrnamentosArt Deco Card
Marco con esquinas ornamentadas de los años 20.
- Carruseles y Sliders3D Stack Carousel
Tarjetas apiladas en perspectiva 3D.
Muestra de 12 de los 346 efectos.
Las tecnologías
De qué está hecho, pieza por pieza
Un sitio de una sola página exportado como archivos estáticos: abre en cualquier lugar y no necesita servidor. Elige una pieza para ver qué hace aquí y en qué archivo está.
12tecnologías, en 3 capas
Pantalla
Movimiento
Recursos
Las pantallas
El acervo en exposición.
La biblioteca por dentro, tal como es: negra y dorada, con las pestañas arriba. Las pantallas están en salas, toca o pasa el mouse por un cuadro para encender la luz y haz clic para verlo grande.
Efectos visuales
Layout y movimiento
Avanzado y estructura
Secciones y marcos
E-commerce
Pantallas reales de la app. Los valores y documentos que aparecen son de ejemplo.
Siguiente proyecto38 / 51
Herramientas de creación y desarrolloDemo Link ManagerPanel para ordenar demos de proyectos que todavía están en la computadora y mandar el enlace correcto a cada cliente, con mensaje listo y guías de ngrok, LocalTunnel y Cloudflare TunnelNext.js 14.0React 18.2TypeScript 5.3Tailwind CSS 3.4
← AnteriorUIForge