Mouse Scroll Indicator
The classic mouse outline at the bottom of a hero, its wheel dot rolling down three times, fading away as soon as the page scrolls.
for loud ideas.
Build a mouse scroll-down indicator for the bottom of a hero section. Structure: centered near the bottom of the hero (about 12px up), a small mouse outline (20px by 32px, 1.8px border in the text color, fully rounded) with a wheel dot inside (3.5px by 6px, rounded, accent color, 5px from the top). Under it, the word "Scroll" in a small monospace font, uppercase, letter-spacing about 0.22em. The stroke: the dot moves down 9px while fading to 0 (first 55% of a 1.5s cycle), stays hidden until 70%, then reappears at the top. Use keyframes y [0, 9, 9, 0] and opacity [1, 0, 0, 1] with times [0, 0.55, 0.7, 1], ease in-out, starting after a 300ms delay. Play it THREE times and stop. A cue that loops forever turns into background noise. Hiding: listen to the page (or the scroll container). When scrollTop goes past 12px, fade the cue out and move it down 10px over 300ms, disable pointer events, and set tabindex -1. When the reader returns to the top, bring it back and restart a fresh set of three strokes (change a key on the dot element to restart the animation). Action: the whole cue is a button with aria-label "Scroll to content". Clicking it smoothly scrolls to the first section after the hero. Accessibility: the mouse drawing and the word are aria-hidden inside the labelled button. Under prefers-reduced-motion, the dot stays still, the fade has no movement, and the click scrolls instantly instead of smoothly. Colors as tokens: text color for the outline, the accent for the wheel dot (the one moving thing gets the one accent), muted for the "Scroll" label. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.