Effects that answer the pointer make a page feel alive without demanding anything from the visitor. These elements respond to hover, focus and mouse movement, and each one also works from the keyboard or drifts on its own on touch screens, so nothing depends on a mouse.
Pointer interaction elements
Rule sweep listA line sweeps across a menu row on hover or focus and exits through the opposite side.
Depth parallax cardLayered shapes shift by different amounts as the pointer moves, drifting on touch screens.
3D ring carouselCards on a CSS 3D ring that rotates one step at a time, with buttons, arrow keys and autoplay.
Blend-mode cursorA custom cursor dot that inverts what is beneath it and grows over links, for fine pointers only.
Hover font variantsA text index whose rows flip through serif, mono, outline, wide and italic styles while hovered or focused.
Depth map shaderA WebGL shader that shifts an image by its own depth and the pointer, so near parts move more than far ones.
How to choose
- Rule sweep list: menu hover, nav hover effect, list hover line.
- Depth parallax card: mouse parallax, depth effect hero, layered hero.
- 3D ring carousel: 3d carousel, rotating gallery, cylinder carousel.
- Blend-mode cursor: custom cursor, cursor follower, mix blend mode cursor.
- Hover font variants: menu hover font change, project index hover, text list hover effect.
- Depth map shader: depth map parallax, 3d photo effect, image depth hover.
Check how a real site does it
Not sure which technique a site you like uses? Run it through the animation library checker or open the gallery of site breakdowns.
Animation library checkerFind out whether a site runs GSAP, Three.js, Lenis or Framer Motion.
Website font finderThe fonts a page really loads, from just a URL.
Color palette from URLThe colors a site really uses, ranked, as copy-ready CSS.
Design token extractorPull a site's CSS variables and tokens as JSON or Tailwind.