Overlays brandinganimationoverlay

Entrance Splash

Temporary full-screen intro animation for brand reveal.

Astro Kit Components

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/EntranceSplash.astro and paste the following code:

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>

Quick Info

Category
Overlays
Filename
EntranceSplash.astro
Dependencies
None — pure Astro + CSS
Tags
brandinganimationoverlay