Stacking Words

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add stacking-words

Import the component

Import the component into your Svelte file:

import { StackingWords } from "$lib/motion-core";

import { StackingWords } from "$lib/motion-core";

Usage

Scroll Down

We craft interfaces where motion carries meaning, guiding each transition with rhythm, contrast, and intention so every section unfolds with clarity as you scroll.

You Made It

<script lang="ts">
	import { StackingWords } from "motion-core";
	import { onMount } from "svelte";

	let scrollElement = $state<HTMLElement | null>(null);

	onMount(() => {
		scrollElement = document.getElementById("component-preview-live");
	});
</script>

<div
	class="flex h-full min-h-150 w-full items-center justify-center text-center"
>
	<p class="text-3xl font-medium tracking-tight text-foreground">Scroll Down</p>
</div>

<StackingWords
	{scrollElement}
	class="mx-auto w-sm p-4 text-2xl md:w-3xl md:text-5xl"
>
	<p>
		We craft interfaces where motion carries meaning, guiding each transition
		with rhythm, contrast, and intention so every section unfolds with clarity
		as you scroll.
	</p>
</StackingWords>

<div
	class="flex h-full min-h-150 w-full items-center justify-center text-center"
>
	<p class="text-3xl font-medium tracking-tight text-foreground">You Made It</p>
</div>

Props

StackingWords

Prop	Type	Default
`class`	`string`	`""`
`start`	`string`	`"top 90%"`
`end`	`string`	`"top 30%"`
`scrub`	`booleannumber`	`1.234`
`stagger`	`number`	`0.21`
`ease`	`string`	`"power3.out"`
`scrollElement`	`stringHTMLElementnull`	`undefined`