Develop Reference

How To Give Effect Particle while mouse move and Luminous while hover in canvas

I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect

Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.

javascript - Drag and drop with intelligent snap guides

I am currently building a widget that will allow users to design a layout for an application-specific task. And I would like to provide a powerpoint/keynote-esque interface (a la 280slides) for the users. However, I would also like to provide "snap guides" (sorry, I do not have any better words to describe them) which are basically guides taht help users align multiple elements on the page.
An example of this can be seen in the Flash IDE where, upon dragging the IDE automatically calculates the dimension and position of peripheral objects and attempts to align them. The mockingbird application (https://gomockingbird.com/mockingbird/) achieves something similar. (Hint: try dragging some objects and see how there are guides which attempt to align the object in their bounding boxes).
I believe a similar effect could be achived by caching an array of elements on the viewport and calculating the position and dimension of each element to find the best-fit snap. However, how do I calculate the most-probable position of the element being dragged? Are there any alternative solutions?
With someone with better knowledge, please enlighten me! :)

I suggest using a library that has already been written to accomplish this. For example, jQuery UI's Draggable does exactly this and is very customizable.

Having the user draw a box around a portion of an image

I'm not fluent in more than basic javascript, but I am looking to have a way that the user can draw a box around a certain portion of image, and then have the coordinates accessible so I can save them. Something similar to tagging photos in Facebook. Does anybody know of any libraries I can reuse? Any tips to get started?
Thanks in advance.

Check out the jQuery image crop plugin. It's the most usable and beautiful plugin for the requirement that I know.
Here are some examples. You should be able to fetch the coordinates as shown in the event handler demo.

jQuery UI Draggable snap rulers

I am setting up a drag and drop interface using jquery and jquery-ui. I've got element snapping working, which is nice, but now I'm trying to get elements to snap at a distance, using some sort of automatic temporary guide rulers.
A very good implementation is on the mac version of Powerpoint. Here's a screenshot of a drag in progress:
Is there some sort of jQuery plugin that exists for this? If there isn't a plugin, is there some easy way to draw lines that would be snap-able? Is there algorithm for dealing with calculating points and working out which lines to create?

You could always copy/paste the snap-part of the draggable.js and change some css values. That would be the easiest way to implement it, since the base is already written in jquery-ui.

Can this type of flash dragging, dropping, and animation be done in a javascript library?

Sorry. I don't know a good title for this, but please look here:
http://joshblog.net/projects/logic-gate-simulator/Logicly.html
I saw this from delicious over the weekend. It is in flash and I wondered if something like this, as far as the graphics and interaction goes, could be done in javascript (jquery or other library, not rolling my own.)
Again, I do not mean logic gates specifically but more the dragging, dropping and the drawing lines between objects, moving them around, etc.
Does anyone know of a website that has something like this in javascript? It kind of reminds me of dragging and dropping points on google maps but nicer. Thank you.

Looks like someone has recently made a Logic Gate Thing that might interest you, though it doesn't quite have the level of animation that the Flash version has. (Here is an explanation from the author.)

http://javascript.neyric.com/wireit/ and jQuery draggables is what you want.
Too bad the wire-it library is YUI. Would be nice if it were jQuery.

jQuery UI has some effects such as dragging and animations. There are some demos at http://jqueryui.com/demos/

Im sure you could work something similar with jQuery. Checkout the jQuery UI, they have demos of its capabilities.

Mootools can also do this - they have some pretty slick demos on their website.