Skip to content

Dulaj007/Mouse-Hover-Blur-Effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

✨ Modern Dark UI Hover Card with Cursor Glow Effect

A sleek and modern hover card component with a glowing blur cursor effect, built for dark-themed websites.

πŸ”₯ Copy-paste ready β€” Just drop it into your HTML page and enjoy the stunning interaction instantly.


Preview


πŸš€ Features

  • ⚑ Ultra-smooth cursor glow effect
  • 🎯 Cursor effect always sticks perfectly to the mouse (no lag!)
  • 🧠 Effect disappears when the user leaves the browser window
  • πŸƒ Responsive hover animation on card and buttons
  • πŸŒ‘ Fully optimized for dark themes
  • 🧩 Self-contained β€” no frameworks or dependencies
  • βœ… Modern UX just like top React/Next.js landing pages

πŸ› οΈ Tech Stack

Language Use
HTML5 Structure of the card and cursor effect
CSS3 Styling, transitions, glow effect, hover states
JavaScript (Vanilla) Real-time mouse tracking and interaction logic

πŸ’‘ How to Use

  1. Copy the full HTML code into your dark-themed web page.
  2. Customize the title, buttons, or glow size if needed.
  3. Done! Your UI now has a beautiful card with cursor experience.

πŸ“„ License

Free to use in personal or commercial projects. Attribution appreciated but not required.


πŸ’¬ Contribute

Feel free to fork and enhance the card with:

  • More cards
  • Tilt/3D effects
  • React or Next.js versions

Pull requests are welcome!


About

This is written using vanilla html, css, js to demonstrate customized mouse-follow blur effect

Topics

Resources

License

Stars

Watchers

Forks

Languages