React Recipe • Production Pattern
Scroll Down Mouse Animation in React: Smooth Hero Wheel & Chevron Prompts
Landing page heroes and fullscreen showcase sections often require a subtle, elegant visual prompt encouraging visitors to scroll. ExodeUI’s scroll down mouse animation combines a minimalist vector mouse chassis, a vertically bouncing wheel indicator, and trailing chevrons. The animation automatically fades out as soon as user scroll begins, ensuring it never obscures primary webpage content.
Runnable ExodeUI React Code Example
Production ReadyImport the ExodeUICanvas component directly into your React application tree. Wire states, triggers, and parameters declaratively:
import React, { useState, useEffect } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function ScrollPrompt() {
const [hasScrolled, setHasScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 80) setHasScrolled(true);
else setHasScrolled(false);
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div
className={`scroll-prompt ${hasScrolled ? 'opacity-0 pointer-events-none' : 'opacity-100'} transition-opacity duration-500`}
aria-hidden="true"
>
<ExodeUICanvas
src="/scenes/scroll-mouse.json"
stateMachine="ScrollPromptMachine"
inputs={{
"isScrolling": hasScrolled
}}
/>
</div>
);
}Frequently Asked Questions about scroll down mouse animation
Why use a vector scroll prompt instead of a repeating GIF?
A repeating GIF cannot respond to scroll events, consumes more memory, and appears blurry on high-resolution Retina displays. ExodeUI renders razor-sharp vector curves and smoothly responds to user scrolling.
Can the mouse animation be clicked to smoothly scroll down the page?
Yes. You can attach an onClick handler to window.scrollTo({ top: window.innerHeight, behavior: "smooth" }) to turn the indicator into an interactive navigation shortcut.
Does the indicator disappear once the user begins scrolling?
Yes. By binding window scroll position to the ExodeUI input or CSS opacity, the indicator fades away smoothly as soon as the visitor scrolls down.
Is the mouse scroll prompt responsive across mobile and desktop?
Yes. You can configure constraints to scale the mouse frame appropriately or conditionally replace it with a compact touch swipe indicator on mobile screens.