Animated Arrow
A bouncing directional arrow that gently bobs up and down to draw attention to the next action or scroll target. Perfect for onboarding CTAs, scroll cues, or guiding users to important content below.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
arrowbouncepointingdirectioncta
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A bouncing directional arrow for drawing attention to the next action or scroll target.
CSS
css
.arrow { animation: bounce 1.2s ease-in-out infinite; }
.arrow svg { width: 48px; height: 48px; stroke: #6366f1; }
@keyframes bounce { 0%,100%{transform: translateY(0)} 50%{transform: translateY(8px)} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.arrow { animation: bounce 1.2s ease-in-out infinite; }
.arrow svg { width: 48px; height: 48px; stroke: #6366f1; }
@keyframes bounce { 0%,100%{transform: translateY(0)} 50%{transform: translateY(8px)} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body><div class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div></body></html>