1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas onboardinghighlightoverlay

Step Spotlight

Foco luminoso interactivo para guiar la atención del usuario a elementos específicos.

Uso

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

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

<SpotlightIndicator>Content</SpotlightIndicator>
--- import { StepSpotlight } from 'astro-component-kit'; --- <SpotlightIndicator>Content</SpotlightIndicator>

Instalación Manual

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

astro 
---
---
<div class="spot-mask"></div>
<style>
  .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; }
</style>
--- --- <div class="spot-mask"></div> <style> .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; } </style>

Información Rápida

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