# Title

Displays customizable titles with highlighting, responsive sizing, animation effects, and multi-line support.

### **Import**
```tsx
import { Title } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '@app-studio/web';

export const DefaultTitle = () => {
  return (
    <Vertical gap={32}>
      <Title size="xs">Extra Small Title (xs)</Title>
      <Title size="sm">Small Title (sm)</Title>
      <Title size="md">Medium Title (md)</Title>
      <Title size="lg">Large Title (lg)</Title>
      <Title size="xl">Extra Large Title (xl)</Title>
    </Vertical>
  );
};
```

### **Line Breaks**
Use the pipe character `|` to force a line break within the title text.

```tsx
import React from 'react';
import { Title } from '@app-studio/web';

export const MultiLineTitle = () => (
  <Title size="lg" highlightText="Breaking">
    This title is | Breaking Lines | manually
  </Title>
);
```



### **highlightText & Style**
Highlight specific words within the title text.

- **highlightText:** `string | string[]` - Text to match and highlight.
- **highlightStyle:** `HighlightStyle` - Visual style (`background`, `gradient`, `underline`, `glow`, `outline`).
- **highlightColor:** `string` - Primary highlight color-
- **highlightSecondaryColor:** `string` - Secondary color for gradients.

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '@app-studio/web';

export const HighlightStyles = () => (
  <Vertical gap={20}>
    <Title highlightText="Background" highlightStyle="background">
      Background Highlight
    </Title>
    <Title 
      highlightText="Gradient" 
      highlightStyle="gradient"
      highlightColor="#705CFF"
      highlightSecondaryColor="#FFC75C"
    >
      Gradient Highlight
    </Title>
    <Title highlightText="Underline" highlightStyle="underline">
      Underline Highlight
    </Title>
    <Title highlightText="Glow" highlightStyle="glow" highlightColor="#10B981">
      Glow Highlight
    </Title>
  </Vertical>
);
```

### **animationLoop**
Controls the loop behavior of title and highlight animations.

- **Type:** `number | 'infinite'`
- **Default:** `1`

```tsx
import React from 'react';
import { Title } from '@app-studio/web';

export const AnimatedLoopTitle = () => (
  <Title
    animate={{
      from: { transform: 'translateY(10px)', opacity: 0 },
      to: { transform: 'translateY(0)', opacity: 1 },
      duration: '1s'
    }}
    animationLoop="infinite"
  >
    Infinitely Bouncing Title
  </Title>
);
```

### **highlightTypewriter**
Adds a typewriter effect to the highlighted text.

- **Type:** `boolean`
- **Default:** `false`
- **related:** `highlightTypewriterDuration` (ms)

```tsx
import React from 'react';
import { Title } from '@app-studio/web';

export const TypewriterTitle = () => (
  <Title
    highlightText="Typewriter output"
    highlightTypewriter
    highlightTypewriterDuration={2000}
    highlightStyle="background"
  >
    Displaying: Typewriter output
  </Title>
);
```

### **highlightSlide**
Adds a sliding entry effect to the highlighted text words.

- **Type:** `boolean`
- **Default:** `false`
- **related:** `highlightSlideDuration`, `highlightSlideStagger`, `highlightSlideSequential`

```tsx
import React from 'react';
import { Title } from '@app-studio/web';

export const SlideTitle = () => (
  <Title
    highlightText={["Slide", "Effect", "Demo"]}
    highlightSlide
    highlightSlideSequential={true}
    highlightStyle="underline"
  >
    Welcome to the Slide Effect Demo
  </Title>
);
```

### **responsive**
Enables automatic responsive sizing adjustments based on screen width.

- **Type:** `boolean`
- **Default:** `false`

```tsx
<Title size="xl" responsive>
  Responsive Title
</Title>
```

### **alternateHighlightText**
Cycles through an array of strings, replacing the highlighted text.

- **Type:** `string[]`
- **related:** `alternateAnimation`, `alternateDuration`

```tsx
import React from 'react';
import { Title } from '@app-studio/web';

export const RotatingTitle = () => (
  <Title
    highlightText="Design"
    alternateHighlightText={['Develop', 'Deploy', 'Scale']}
    alternateAnimation
    highlightStyle="gradient"
  >
    We help you Design better apps.
  </Title>
);
```