I built a visual frontend asset library so I can stop losing my own UI snippets

As a web developer, I often build or collect small frontend assets that are useful later: buttons, gradients, loaders, hover effects, CTAs, footers, bento grids, layout fragments and product UI patterns.

The problem is that these assets usually end up scattered across old projects, screenshots, notes, CodePens, local folders or random files. When I need one, I know I already made something similar, but finding it takes too long.

So I built UI IP Toolkit: a static visual catalog for fast access to my copy-ready frontend assets.

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

What it is

UI IP Toolkit is a public, static frontend asset library. It is designed to be browsed visually, not as a package install.

It includes sections for:

• Buttons and interaction states
• Gradients and color systems
• Loading patterns
• Text effects
• Hover treatments
• Glass surfaces
• CTAs and pricing blocks
• Footers
• Bento grids
• Navigation patterns
• 404 and recovery pages
• Product UI patterns
• Layout fragments and reusable CSS utilities

Every card is meant to be practical: open the site, scan visually, copy the snippet, adapt it, and move on.

Why I made it static

I wanted the toolkit to be simple, fast and easy to publish:

• No backend
• No runtime framework dependency
• No account required
• No build step needed for browsing
• Self-hosted fonts and assets
• Deployed as a static site on Vercel

The goal was not to create a huge npm package or a rigid design system. I wanted a personal working library that feels visual and fast enough to use during real frontend work.

The main use case

When I am building a new page or feature, I can open the toolkit and quickly find a starting point:

• Need a loader? Go to Loading States.
• Need a CTA? Open CTA Blocks or Purchase CTAs.
• Need a footer? Open Footer Systems.
• Need a visual layout idea? Open Bento Systems.
• Need a small CSS utility? Open the utilities section.

It is basically a visual memory layer for reusable frontend work.

Tech stack

The project is intentionally simple:

• HTML
• CSS
• Vanilla JavaScript
• Local fonts
• Local media assets
• Vercel static hosting

The repository is public here:

https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

The live version is here:

https://ui-ip-toolkit.vercel.app/

What I learned

The biggest improvement was not adding more components. It was making the catalog easier to navigate.

Once the toolkit had many sections, a long top nav became useless. I replaced it with a compact section menu grouped by category. That made the site feel much more like a real working tool instead of a long landing page.

I also learned that previews matter a lot. If every card looks too similar, the library feels bigger than it is useful. So I spent time making the previews more varied and more realistic while keeping the site lightweight.

Feedback welcome

I am sharing this because I think other frontend developers might have the same problem: useful assets scattered everywhere, but no quick visual way to reuse them.

Would you use a personal visual asset catalog like this in your own workflow? And what sections would you add next?

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

I’ve always liked those glowing animated border effects you see on fancy landing pages.

But for a long time, I avoided them because they often felt a bit too hacky. Either you had to stack weird extra markup, use SVG tricks, or reach for JavaScript just to make a gradient move.

So I tried rebuilding the effect with modern CSS only.

The final version uses:

a pseudo-element for the border layer
a conic-gradient() for the colors
@ property to make the angle animatable
a second blurred layer for the glow
and a prefers-reduced-motion fallback so it does not force animation on everyone

What I like about this approach is that the HTML stays almost boring. Just a card. All the visual work happens in CSS.

Not claiming this is something you should put everywhere. It can get visually loud pretty fast. But for featured cards, pricing blocks, hero sections, or small “look here” UI moments, I think it’s a nice little pattern.

I’m sure there are other ways to do it, so I’d be curious to see how people here would build the same effect.

He creado E36 Scroll Cine, una experiencia web cinematográfica fan-made sobre el BMW 318is Coupé Pack M (E36).

Web: https://e36.vercel.app/
GitHub: https://github.com/ikerperez12/e36

La idea no era hacer una landing normal, sino algo que se sintiera más como una pieza visual vertical. Empiezas en una pantalla de entrada con vídeo y después avanzas por siete escenas usando scroll, teclado o gestos en móvil.

Cada escena está centrada en una parte del coche:

• la generación E36
• Hellrot 314
• Pack M / M-Technic
• interior
• motor M44B19
• carácter de conducción
• cierre con el capó abierto

He intentado que el contenido hable del coche de verdad, no de frases genéricas. La ficha y el HUD incluyen datos del 318is: M44B19, 1.895 cc, 16 válvulas DOHC, Bosch Motronic M5.2, admisión DISA, Getrag 250G, reparto 50/50, suspensión Pack M, etc.

En la parte técnica, la web es bastante simple:

• HTML/CSS/JavaScript sin framework
• deploy en Vercel
• navegación por scroll, teclado y swipe
• posters para evitar pantallas negras en vídeo
• service worker
• tests con Playwright + axe
• auditoría para no subir rutas locales, secretos ni carpetas privadas
• media fuera del repo público

No es una web oficial de BMW. Es una fanpage y un experimento web alrededor de un coche que me gusta mucho.

Me encantaría recibir feedback:

¿La experiencia se siente bien en móvil? Y si conocéis bien el E36/318is, ¿qué dato añadiríais o corregiríais?

Been experimenting with UX improvements on a large PDF tools project and recently added:

• PDF → Flashcards generator

• Tool Finder so users can instantly search tools instead of browsing huge menus

Biggest challenge wasn’t the AI part honestly — it was organizing hundreds of tools without making the UI feel overwhelming.

A few things I learned:

•	Search-based navigation works way better once tool count gets large

•	Students prefer quick revision cards over long summaries

•	Small UX tweaks improve engagement more than flashy features

Still improving the flashcard quality + speed.

Curious:

If you had 500+ utility pages, how would you structure discovery/navigation?