Spotlight Logo
SVG logo with a cursor-tracking gradient highlight and tactile press.
Features
- A radial-gradient highlight tracks the cursor and traces the SVG outline.
- Pressing the mark morphs its paths with a spring and plays a tactile click.
- Respects reduced motion and skips pointer tracking on touch devices.
This is my SVG logomark, provided for reference only. Please replace it with your own SVG logo before using this component in production.
Installation
pnpm dlx shadcn@latest add @ncdai/spotlight-logo
Usage
The mark renders its own SVG, so bring your own artwork by replacing the paths inside the component. Wrap it in a sized container to control the layout.
import { SpotlightLogo } from "@/components/spotlight-logo"<SpotlightLogo />