Stacking Words

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/stacking-words.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/stacking-words.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/stacking-words.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/stacking-words.json

---
import "@/components/motion-kit/stacking-words-element.ts";
---

<motion-stacking-words
  text="Every word arrives on its own."
  start="top 90%"
  end="top 30%"
></motion-stacking-words>

import "@/components/motion-kit/stacking-words-element.ts";

export default function Page() {
  return (
    <motion-stacking-words
      text="Every word arrives on its own."
      start="top 90%"
      end="top 30%"
    />
  );
}

<script setup>
import "@/components/motion-kit/stacking-words-element.ts";
</script>

<template>
  <motion-stacking-words
    text="Every word arrives on its own."
    start="top 90%"
    end="top 30%"
  />
</template>

<script>
  import "@/components/motion-kit/stacking-words-element.ts";
</script>

<motion-stacking-words
  text="Every word arrives on its own."
  start="top 90%"
  end="top 30%"
/>

<script type="module" src="/components/motion-kit/stacking-words-element.js"></script>

<motion-stacking-words
  text="Every word arrives on its own."
  start="top 90%"
  end="top 30%"
></motion-stacking-words>