title: Letter Pullup
description: Staggered letter pull up text animation.
---

```vue
<template>
  <LetterPullup
    words="Staggered Letter Pull Up"
    :delay="0.05"
    class="text-black dark:text-white"
  />
</template>

```

## Install using CLI

```vue
<InstallationCli component-id="letter-pullup" />
```

## Install Manually

Copy and paste the following code

```vue
<template>
  <div class="flex justify-center">
    <div
      v-for="(letter, index) in letters"
      :key="letter"
    >
      <Motion
        as="h1"
        :initial="pullupVariant.initial"
        :animate="pullupVariant.animate"
        :transition="{
          delay: index * (props.delay ? props.delay : 0.05),
        }"
        :class="
          cn(
            'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem]',
            props.class,
          )
        "
      >
        <span v-if="letter === ' '">&nbsp;</span>
        <span v-else>{{ letter }}</span>
      </Motion>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Motion } from "motion-v";
import { cn } from "@/lib/utils";

interface LetterPullupProps {
  class?: string;
  words: string;
  delay?: number;
}

const props = defineProps<LetterPullupProps>();

const letters = props.words.split("");

const pullupVariant = {
  initial: { y: 100, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
  },
};
</script>

```

## API

| Prop Name | Type     | Default                    | Description                                        |
| --------- | -------- | -------------------------- | -------------------------------------------------- |
| `class`   | `string` | `-`                        | The class to be applied to the component.          |
| `words`   | `string` | `Staggered Letter Pull Up` | Text to animate.                                   |
| `delay`   | `number` | `0.05`                     | Delay each letter's animation by this many seconds |

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.
- Inspired from [Magic UI](https://magicui.design/docs/components/letter-pullup).