Mouse Scroll Cue

An animated "scroll down" hint in a single SVG file, with no JavaScript. It implements Mouse scroll tooltip Microinteraction by Airat.

Any size

It is a vector, so it stays crisp at every size. Keep the 92 by 106 ratio.

46 × 53
92 × 106 (native)
184 × 212

Use it

Pick whichever fits your project. See the README for details.

From a CDN

<img src="https://cdn.jsdelivr.net/npm/mouse-scroll-cue@1/mouse-scroll-cue.svg"
     width="92" height="106" alt="">

From npm

npm install mouse-scroll-cue

With a bundler

import scrollCueUrl from 'mouse-scroll-cue/mouse-scroll-cue.svg';

As a CSS background

.scroll-cue {
  width: 92px;
  aspect-ratio: 92 / 106;
  background: url('mouse-scroll-cue.svg') center / contain no-repeat;
}

Good to know

  • Dark backgrounds only. The arrows are white, as in the original design.
  • Decorative. Use alt="" on an image, or aria-hidden="true" on inline markup.
  • Reduced motion. A prefers-reduced-motion rule stops the animation when the visitor asks for less motion.
  • Faithful motion. The Figma prototype's spring is sampled into a CSS linear() easing, with a cubic-bezier() fallback for older browsers.