Spotlight Logo
SVG logo with a cursor-tracking gradient highlight and tactile press.
- Dependencies (1)
- Registry (1)
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.
- 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.
Use cases
- Brand mark in a hero section or footer.
- Logo on a 404 or coming soon page.
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 />Accessibility
- With
prefers-reduced-motion, the highlight stops tracking the cursor.
Credits
References
License and usage
- Free to use and modify in both personal and commercial projects.
- Attribution is appreciated but not required.
- Released under the MIT License.