1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas brandinganimationoverlay

Entrance Splash

Capa de presentación animada que da la bienvenida al usuario en su primera visita.

Astro Kit Components

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { EntranceSplash } from 'astro-component-kit';
---

<SplashIntroOverlay>Content</SplashIntroOverlay>
--- import { EntranceSplash } from 'astro-component-kit'; --- <SplashIntroOverlay>Content</SplashIntroOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/EntranceSplash.astro:

astro 
---
---
<div class="splash">
  <div class="logo-anim">Astro Components</div>
</div>
<style>
  .splash { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; animation: fade-out 1s forwards 2s; }
  .logo-anim { font-size: 3rem; font-weight: 900; color: #fff; animation: scale-pulse 1.5s infinite linear; background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  @keyframes fade-out { to { opacity: 0; pointer-events: none; } }
  @keyframes scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
</style>
--- --- <div class="splash"> <div class="logo-anim">Astro Components</div> </div> <style> .splash { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; animation: fade-out 1s forwards 2s; } .logo-anim { font-size: 3rem; font-weight: 900; color: #fff; animation: scale-pulse 1.5s infinite linear; background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes fade-out { to { opacity: 0; pointer-events: none; } } @keyframes scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
EntranceSplash.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
brandinganimationoverlay