Wave Text
A wave text built with modern frontend techniques for responsive and reusable UI.
Mouse Interactions
17 snippetsWelcome to the Mouse Interactions resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-mouse-interaction
Snippets(17)
Shaders Example #15A shaders example #15 built with modern frontend techniques for responsive and reusable UI.
Hover Interaction (98/100)A hover interaction (98/100) built with modern frontend techniques for responsive and reusable UI.
Direction-Aware SVG CursorA direction-aware svg cursor built with modern frontend techniques for responsive and reusable UI.
React Animated Custom CursorA react animated custom cursor built with modern frontend techniques for responsive and reusable UI.
Interactive Physics-Based Dot GridA interactive physics-based dot grid built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Pointer Tracking, Elastic Easing, Staggered Animation
Mouse-Driven Split RevealA mouse-driven split reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 60+, Edge 79+, Firefox 52+, Safari 10+Features
Instant Feedback, Touch Compatible, Fluid Typography
Cursor Following Halftone Rings with CSS @propertyA cursor following halftone rings with css @property built with modern frontend techniques for responsive and reusable UI.
Mouse-Reactive Floating Image GalleryA mouse-reactive floating image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 48+, Safari 9+Features
Mouse Tracking, Smooth Panning, Hover Reveal, Dynamic LayoutResponsive
Yes
Adaptive Morphing Mouse Cursor TrailerA adaptive morphing mouse cursor trailer built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 48+, Safari 9+Features
Contextual Scaling, Icon Swapping, Elastic TrackingResponsive
Yes
Interactive Spectral 3D Ghost EffectA interactive spectral 3d ghost effect built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Cursor Tracking, VHS Glitch, Custom Shaders, Bloom PassResponsive
Yes
Mouse-Reactive Iridescent ButtonA mouse-reactive iridescent button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 122+, Edge 122+, Firefox 128+, Safari 16.4+Features
Mouse Tracking, Iridescent Glow, CSS @property, Display-P3 ColorsResponsive
Yes
Dynamic Twinkling Particle System with Vanilla JS and CanvasA dynamic twinkling particle system with vanilla js and canvas built with modern frontend techniques for responsive and reusable UI.
Technologies
Canvas API, JavaScriptDifficulty
IntermediateFeatures
Interactive particles, Mouse tracking, Click effectsResponsive
Yes
Interactive Canvas Liquid Image DistortionA interactive canvas liquid image distortion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 4+, Edge 12+, Firefox 3.6+, Safari 4+Features
Canvas API, Grid System, Mouse Interaction, Image SlicingResponsive
Yes
Interactive Feather Reveal 404 PageA interactive feather reveal 404 page built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 45+, Edge 12+, Firefox 31+, Safari 9+Features
Dynamic Clipping, Pattern Stamping, Event ThrottlingResponsive
Yes
Interactive Liquid SVG Wobble ButtonA interactive liquid svg wobble button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Proximity Tracking, Spline Interpolation, Vector Math, Debug ModeResponsive
Yes
Interactive Product Hotspots with GSAP and PIXI.jsA interactive product hotspots with gsap and pixi.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Canvas API, JavaScriptFeatures
Magnetic Effects, Hardware Acceleration, Interactive Hotspots