ScrollHint

Show the vertical movement used to explore content.

Move vertically to explore.

Preview settings

Size112px

Duration2400ms

Iterations

React

import { ScrollHint } from "@gestik/react";

<ScrollHint
  size={112}
  duration={2400}
  iterations="infinite"
  playing={true}
/>

Props

Prop	Default	Purpose
icon	Built-in scroll cue	Static decorative artwork in a 32px box; the whole box moves vertically.
size	112	Scene width in pixels; artwork and movement scale with it.
duration	2400	A complete down-and-up cycle in milliseconds.
iterations	"infinite"	Total number of complete cycles, or infinite.
playing	true	Pause or resume at the current frame.
className	—	A class for styling the hint.
style	—	Inline styles and `--gestik-*` CSS variables on the outer span.

Example

Scroll to explore more. A sky-blue mouse cue moves vertically with the gesture.

import { ScrollHint } from "@gestik/react";
import { MouseIcon } from "@phosphor-icons/react";

<ScrollHint
  className="custom-scroll-hint"
  size={144}
  icon={<MouseIcon weight="duotone" />}
/>

.custom-scroll-hint {
  --gestik-scroll-hint-color: #0369a1;
}

Accessibility

ScrollHint is decorative and ignores pointer events. Pair it with visible instructions and accessible navigation in your application. The loop suggests vertical movement in both directions; accompanying text should explain what the user can explore. Under reduced motion, the cue stays still. Your application handles the interaction and decides when to show the animation. Custom artwork stays inside an inert, hidden subtree and should be static.