title: Text Reveal
description: Animate text line-by-line using GSAP's SplitText for smooth word or line entrance effects.
---

```vue
<template>
  <div class="p-8 flex items-center justify-center">
    <TextReveal class="text-4xl font-semibold leading-relaxed text-center">
      With Inspira UI, you can build beautiful websites powered by Vue and Nuxt in record time.
    </TextReveal>
  </div>
</template>

```

## API

| Prop Name        | Type     | Default | Description                                      |
| ---------------- | -------- | ------- | ------------------------------------------------ |
| `class`          | `string` | `-`     | Additional classes for the inner text container. |
| `containerClass` | `string` | `-`     | Additional classes for the outer container.      |
| `duration`       | `number` | `0.6`   | Animation duration for line reveal.              |
| `delay`          | `number` | `0.2`   | Initial delay before animation starts.           |
| `stagger`        | `number` | `0.1`   | Animation delay between each line reveal.        |

## Installation

This component depends on **GSAP** and **GSAP SplitText**.

::pm-install{name="gsap"}
::

## Install using CLI

```vue
<InstallationCli component-id="text-reveal" />
```

## Install Manually

Copy and paste the following code:

```vue
<template>
  <div :class="['overflow-hidden', props.containerClass]">
    <div
      ref="textContainer"
      :class="[props.class]"
    >
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import type { HTMLAttributes } from "vue";

interface Props {
  class?: HTMLAttributes["class"];
  containerClass?: HTMLAttributes["class"];
  duration?: number;
  delay?: number;
  stagger?: number;
}

gsap.registerPlugin(SplitText);

const props = withDefaults(defineProps<Props>(), {
  duration: 0.6,
  delay: 0.2,
  stagger: 0.1,
});

const textContainer = ref<HTMLElement | null>(null);
let split: gsap.core.Tween;

onMounted(() => {
  if (!textContainer.value) return;

  gsap.set(textContainer.value, { opacity: 1 });

  SplitText.create(textContainer.value, {
    type: "words,lines",
    linesClass: "line",
    autoSplit: true,
    mask: "lines",
    onSplit: (splitText) => {
      split = gsap.from(splitText.lines, {
        duration: props.duration,
        delay: props.delay,
        yPercent: 100,
        opacity: 0,
        stagger: props.stagger,
        ease: "expo.out",
      });
    },
  });
});

onUnmounted(() => {
  split?.kill();
});
</script>

<style scoped>
.line {
  overflow: hidden;
}
</style>

```

## Features

- **Line-by-line animation**: Automatically splits and animates lines of text.
- **Staggered entry**: Smooth entrance with staggered reveal timing.
- **Scoped styling**: Ensures each line is masked for clean transitions.
- **Customizable timing**: Control animation duration and delay.

## Credits

- Powered by [GSAP](https://gsap.com/) and [GSAP SplitText](https://gsap.com/docs/v3/Plugins/SplitText/).