AnimatedScrollPrompt

A div with a pulsating arrow icon promping the user to scroll-down. The div will position absolute bottom of the nearest container set to position: "relative"

AnimatedScrollPrompt @"src/components/AnimatedScrollPrompt"

Edit the props to see this component update live!

jsx

<Box sx={{ height: "150px", position: "relative", overflow: "hidden" }}>
  <AnimatedScrollPrompt color="white" background="secondary" delay="1500ms" />
</Box>

<Box sx={{ height: "150px", position: "relative", overflow: "hidden" }}>
  <AnimatedScrollPrompt color="white" background="secondary" delay="1500ms" />
</Box>