Canvas Glowing Effect

A modern, interactive web application featuring beautiful canvas-based glowing effects and animations. This project implements an elegant cursor-following animation that creates colorful, flowing trails as you move your cursor across the screen.

Features

• Interactive canvas-based glowing animations
• Responsive design that works on both desktop and mobile devices
• Touch support for mobile devices
• Modern UI with Tailwind CSS
• Built with Next.js 15 and React 19

Demo

Visit the live demo at https://github.com/abhishekabysm/glowing-effect

Getting Started

Prerequisites

• Node.js 18.0 or later
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/abhishekabysm/glowing-effect.git
   cd glowing-effect
   

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   

4. Open http://localhost:3000 with your browser to see the result.

Tech Stack

• Next.js - React framework
• React - UI library
• Tailwind CSS - CSS framework
• TypeScript - Type safety
• HTML5 Canvas - For animations

Implementation Details

The project uses HTML5 Canvas and JavaScript to create beautiful, flowing animations that follow cursor movements. The key implementation is in the components/ui/canvas.tsx file, which manages the interactive animation effects.

Customization

You can customize various aspects of the animation by modifying the parameters in the canvas.tsx file:

• Number of trails
• Colors
• Speed and fluidity
• Trail length

Authors

• Abhishek - @abhishekabysm (Instagram: @abhishekabysm)
• Coding Tutor - @coding.tutor (Instagram: @coding.tutor)

Project Link

https://github.com/abhishekabysm/glowing-effect

License

This project is open source and available under the MIT License.

Acknowledgments

• Inspired by various canvas-based animation techniques
• Thanks to all contributors who have helped improve this project