1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capasbrandinganimationoverlay

Entrance Splash

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

React Kit Components

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { SplashIntroOverlay } from 'react-component-kit-ui/overlays';

<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/SplashIntroOverlay.tsx + SplashIntroOverlay.css:

SplashIntroOverlay.tsx
'use client';

import LogoWithGalaxy from '../LogoWithGalaxy';
import './SplashIntroOverlay.css';

/** SplashIntroOverlay — ported from astro-component-kit. */
export interface SplashIntroOverlayProps {
}

export function SplashIntroOverlay({}: SplashIntroOverlayProps) {
  return (
    <>
      <div className="splash" data-rk-ccfb24="">
        <div className="logo-anim" data-rk-ccfb24="">
          <LogoWithGalaxy size="large" />
        </div>
      </div>
    </>
  );
}

export default SplashIntroOverlay;
SplashIntroOverlay.css
/* SplashIntroOverlay — ported from astro-component-kit (overlays/SplashIntroOverlay.astro) */

.splash:where([data-rk-ccfb24]) { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; animation: splash-intro-overlay-fade-out 1s forwards 2s; }
.logo-anim:where([data-rk-ccfb24]) { animation: splash-intro-overlay-scale-pulse 1.5s infinite linear; }
@keyframes splash-intro-overlay-fade-out { to { opacity: 0; pointer-events: none; } }
@keyframes splash-intro-overlay-scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
SplashIntroOverlay.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
brandinganimationoverlay