mouse-discover-scene

An Astro component that reveals a hidden background scene using a mouse-driven spotlight effect. The scene is uncovered through a dynamic clip-path mask that follows cursor movement, blending an image background with interactive motion

Installation 📖

# You can intall with npm
npm install mouse-discover-scene
# or with yarn
yarn add mouse-discover-scene
# or with pnpm
pnpm add mouse-discover-scene

Usage ⚙️

---
const {
  innerText = "人生は美しいです",
  imageBackground = "https://20essentials.github.io/project-1291/assets/paisaje.avif",
  colorBackground = "#030",
  letterStrokeColor = "#fff"
} = Astro.props;
---

<MouseDiscoverScene
  innerText={innerText}
  imageBackground={imageBackground}
  colorBackground={colorBackground}
  letterStrokeColor={letterStrokeColor}
/>

Demo 📹