Saltearse al contenido
The Vault

🎨 Bienvenido a Components & UI

Los componentes aquí no son solo código, son interactivos. Puedes probarlos, cambiar configuraciones y ver cómo funcionan por dentro.

Algunos incluyen un modo preview, donde verás el componente en acción con un panel de configuración (config). Ahí puedes modificarlo, activar el modo explode para analizar su estructura o usar debug para ver su funcionamiento interno.

Aquí tienes un ejemplo de un componente interactivo:

Gradient Text with longer HUE Preview

Loading...

Código
.html
<p class="gradient-text" data-text="Hello, World!">
  Hello, World!
</p>
.css
.gradient-text {
  font-size: 4rem;
  position: relative;
  &::after {
    content: attr(data-text);
    mix-blend-mode: plus-lighter;
    filter: blur(0.5rem);
    position: absolute;
    inset: 0;
  }
}


.gradient-text, .gradient-text::after {
  background: linear-gradient(90deg in lch longer hue, #FF62F5 0 0);
  background-size: 500% 100%;
  animation: blend 30s infinite linear;
  color: transparent;
  background-clip: text;
}


@keyframes blend {
  to { background-position: 500% 100%; }
}

🖥️ Explora los Componentes

UI Elements

Botones, loaders y otros elementos de UI listos para usar.

Infinite Scroll

Effects & Animations

Agrega interactividad con efectos de hover, parallax y más.

Hover Effects

🔎 ¿Qué puedes encontrar aquí?

  • 3D Elements → Tarjetas, cubos y otros efectos tridimensionales.
  • UI Elements → Botones, sliders y elementos de interfaz.
  • Effects & Animations → Efectos de hover, scroll y más.

🚀 ¿Qué sigue?

Explora los componentes, usa el modo preview y prueba sus configuraciones. Si tienes ideas o mejoras, dime. ¡Siempre hay espacio para más cosas interesantes! 🎯