Chromatic Aberration Logo Effect on Hover
A chromatic aberration logo effect on hover built with modern frontend techniques for responsive and reusable UI.
Cursors
22 snippetsWelcome to the Cursors 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-cursors
Snippets(22)
Direction-Aware SVG CursorA direction-aware svg cursor built with modern frontend techniques for responsive and reusable UI.
- Dynamic Custom Cursor with GSAP
A dynamic custom cursor with gsap built with modern frontend techniques for responsive and reusable UI.
- Ghost Cursor Effect
A ghost cursor effect built with modern frontend techniques for responsive and reusable UI.
- Hero Section with Cursor Trail Effects
A hero section with cursor trail effects built with modern frontend techniques for responsive and reusable UI.
Navigation Button InteractionA navigation button interaction built with modern frontend techniques for responsive and reusable UI.
Next-Gen Tic-Tac-Toe Game (Shiny Edges)A next-gen tic-tac-toe game (shiny edges) built with modern frontend techniques for responsive and reusable UI.
Selected Demos 2019-2020A selected demos 2019-2020 built with modern frontend techniques for responsive and reusable UI.
- Sticky Stretching Cursor
A sticky stretching cursor built with modern frontend techniques for responsive and reusable UI.
Three.js Glowing Noise Cursor EffectsA three.js glowing noise cursor effects built with modern frontend techniques for responsive and reusable UI.
Yet Another SliderA yet another slider built with modern frontend techniques for responsive and reusable UI.
Cinematic Masked Video HeroA cinematic masked video hero built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Firefox 89+, Safari 15+Features
SVG Masking, Layered Text, Custom Cursor, Intro Loader
Cinematic Context-Aware Video CursorA cinematic context-aware video cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
Context Awareness, Pointer Tracking, Logic-less CSS State
Hover Image Reveal Custom CursorA hover image reveal custom cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 16+, Firefox 54+, Safari 10.1+Features
Custom Cursor, Image Reveal, State Delegation, Blend Modes
Slider #2A slider #2 built with modern frontend techniques for responsive and reusable UI.
Simple Full-Screen Slideshow With Vanilla JavaScriptA simple full-screen slideshow with vanilla javascript built with modern frontend techniques for responsive and reusable UI.
Staggered Particle Blob EffectA staggered particle blob effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 79+, Edge 79+, Firefox 71+, Safari 13+Features
Cursor Tracking, Staggered Animation, Auto-simulation, Blend Modes
Dynamic Article Hover CursorA dynamic article hover cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
Custom Cursor, CSS :has(), Blend Modes, Grid LayoutResponsive
Yes
Spotlight Cursor on Responsive ImageA spotlight cursor on responsive image built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS3Difficulty
IntermediateFeatures
Custom Cursor, Color Inversion, Interactive GradientResponsive
Yes
Smart Animated Custom Mouse CursorA smart animated custom mouse cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
Web Animations API, CSS Transform, JavaScriptDifficulty
intermediateFeatures
Custom Cursor, Dynamic Scaling, Interactive Hover EffectsResponsive
Yes
Web Animations, Sound, and Custom Cursor MixA web animations, sound, and custom cursor mix built with modern frontend techniques for responsive and reusable UI.
Technologies
Web Animations API, Web Audio API, JavaScriptDifficulty
AdvancedFeatures
Custom Cursor, Kinetic Animation, Audio Feedback, Mouse TrackingResponsive
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