scroll hint indicator bounce ux cta hero section scroll prompt landing page scroll nudge above-the-fold navigation hint users stop at the fold and miss content below need a subtle motion cue without JavaScript
Scroll Hint
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/scroll-hint.json Preview
Background
Customize
Quick Start
<a href="#content" class="scroll-hint" aria-label="Scroll down">↓</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 550 bytes · 28 lines
- Custom Properties
-
--scroll-hint-color--scroll-hint-duration - Classes
-
.scroll-hint
scroll hint indicator bounce ux cta
Place any icon or text inside .scroll-hint — the class animates the element with a gentle up-down bounce. Automatically pauses for prefers-reduced-motion users.
With a chevron icon
<a href="#content" class="scroll-hint" aria-label="Scroll to content">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M6 9l6 6 6-6"/>
</svg>
</a>Custom color and speed
<div class="scroll-hint" style="--scroll-hint-color: oklch(60% 0.15 280); --scroll-hint-duration: 2s">
Scroll ↓
</div>