Vanilla Breeze

Scroll-Down Indicator

Animated chevron at the bottom of a hero nudging readers to scroll. Pure CSS, reduced-motion aware.

Overview

A small chevron pinned to the bottom of a hero section, gently bouncing to hint that more content lives below the fold. Used by countless marketing sites; recognised instantly by readers.

Anatomy:

  • A link inside the hero, absolutely positioned at inset-block-end
  • A ::after pseudo-element renders the chevron glyph
  • A keyframe animation bounces the chevron on a continuous loop
  • Anchors to the section below for keyboard users — clicking it scrolls to the next anchor
  • prefers-reduced-motion stops the bounce

HTML

CSS

Notes

  • Use an <a> rather than a button — the destination is content, not an action. Keyboard users get free Enter-to-scroll behaviour and you don't need any JavaScript.
  • The hero needs position: relative (or any non-static positioning) so the absolute indicator anchors to it.
  • An alternative glyph: use VB's <icon-wc name="chevron-down"> instead of the unicode arrow for a sharper look.