Utilities

ScrollIndicator

Animated scroll-down indicator arrow for prompting users to scroll.

Props

No props - uses internal state.

Import

import { ScrollIndicator } from '@the-vcsi/scrolly-kit';

Usage

<script>
  import { ScrollIndicator } from '@the-vcsi/scrolly-kit';
</script>

<ScrollIndicator />

Full Source

💡 Components rely on --vcsi-* tokens from tokens.css. You'd need to either need to @import '@the-vcsi/scrolly-kit/styles/tokens.css'; to access the CSS variables or define equivalent variables in your app.css. We also are using types here to provide hints when users are using the components in their project.

<script lang="ts">
	import { ArrowDown } from '@lucide/svelte';

	let { threshold = 100 }: { threshold?: number } = $props();

	let scrollY = $state(0);
	let visible = $derived(scrollY < threshold);
</script>

<svelte:window bind:scrollY />

{#if visible}
	<div class="scroll-indicator">
		<ArrowDown size={32} strokeWidth={2} />
	</div>
{/if}

<style>
	.scroll-indicator {
		position: fixed;
		bottom: 0rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		opacity: 0.7;
		animation: bounce 2s infinite;
	}

	@keyframes bounce {
		0%,
		100% {
			transform: translateX(-50%) translateY(0);
		}
		50% {
			transform: translateX(-50%) translateY(-10px);
		}
	}
</style>