# Title
A versatile component for displaying headlines and text with various styling and animation options.
### **Import**
```tsx
import { Title } from '@app-studio/web';
```
### **Default**
```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '../Title';
/**
* Default Title examples showing different sizes
*/
export const DefaultTitle = () => {
return (
Extra Small Title (xs)Small Title (sm)Medium Title (md)Large Title (lg)Extra Large Title
);
};
```
### **animationLoop**
Controls how many times the main animation should loop, or 'infinite' for continuous looping.
- **Type:** `number | 'infinite'`
- **Default:** `1`
- **Possible Values:** ``
```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with different animation loop controls
*/
export const AnimationLoopTitle = () => {
return (
{/* Title with single play animation (default) */}
Animation Plays Once (Default)
{/* Title with animation that plays 3 times */}
Animation Plays Three Times
{/* Title with infinite animation loop */}
Animation Loops Infinitely
{/* Highlight animation with different loop control */}
Title with Wiggling Highlight
{/* Both title and highlight with different loop controls */}
Title with Pulsing Background and Highlight
{/* Bounce animation with limited loops */}
Bounce Animation (2 Times)
{/* Typewriter with infinite highlight animation */}
Typewriter with glowing highlight
);
};
```
### **responsive**
Enables or disables responsive behavior for the title, adapting its appearance to different screen sizes.
- **Type:** `boolean`
- **Default:** `undefined`
- **Possible Values:** ``
```tsx
import React from 'react';
import { Title } from '../Title';
import { Vertical } from 'app-studio';
/**
* Example of responsive Title using the new responsive prop
*/
export const ResponsiveTitle = () => {
return (
{/* Using the new responsive prop - automatically adapts based on size */}
Responsive XL Title (H1 scale)
Responsive LG Title (H2 scale)
Responsive MD Title (H3 scale)
Responsive SM Title (T1 scale)
Responsive XS Title (S1 scale)
{/* Legacy example using manual media queries */}
Manual Media Queries Title
);
};
```
### **Alternating**
```tsx
import React from 'react';
import { Vertical, Text } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with alternating highlight text
*/
export const AlternatingTitle = () => {
return (
Our changing solution for your business
The word "changing" will cycle through "innovative",
"powerful", "flexible", and "intuitive"
every 2 seconds
Build with rotating and other modern frameworks
The word "rotating" will cycle through framework names with a
gradient style and fade-in animation
Our platform is cycling and built for performance
The word "cycling" will cycle through attributes with a glow
effect every 3 seconds
);
};
```
### **Animated**
```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with different animation types
*/
export const AnimatedTitle = () => {
return (
Fade In Animation
Slide In From Left
Slide In From Right
Slide In From Top
Slide In From Bottom
Reveal Animation
Bounce Animation
);
};
```
### **Custom**
```tsx
import React from 'react';
import { Title } from '../Title';
/**
* Example of Title with custom styling using the views prop
*/
export const CustomTitle = () => {
return (
Title with Custom Styling
);
};
```
### **DirectAnimation**
```tsx
import React from 'react';
import { Title } from '../Title';
/**
* Example of Title with direct animation props
*/
export const DirectAnimationExample = () => {
return (
This title is directly animated with custom animation
);
};
```
### **Gradient**
```tsx
import React from 'react';
import { Vertical, Text } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with gradient highlight styles
*/
export const GradientTest = () => {
return (
The highlighted words below should appear with gradient text effects
Gradient from primary to secondary
Gradient with specific system colors color-blue-500 to color-purple-500
Gradient from blue to purple
Gradient from orange to red
Gradient from green to teal
This entire title has a gradient with no specific highlight
);
};
```
### **Hero**
```tsx
import React from 'react';
import { View, Vertical, Horizontal, Text } from 'app-studio';
import { Title } from '../Title';
import { Button } from '../../Button/Button';
/**
* Example of Title in a hero section context
*/
export const HeroTitle = () => {
return (
Welcome to Our Platform
Build beautiful, responsive, and interactive user interfaces with our
powerful component library.
);
};
```
### **Highlight**
```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with different highlight animations
*/
export const HighlightTest = () => {
return (
Text with animated highlight
This text has first, second, and third highlighted words with staggered
animations
);
};
```
### **HighlightStyles**
```tsx
import React from 'react';
import { Vertical, Text } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with different highlight styles applied to the entire title
*/
export const HighlightStylesDemo = () => {
return (
Different highlight styles applied to entire titles (no highlightText
prop)
Background Highlight Style
Underline Highlight Style
Gradient Highlight Style
Outline Highlight Style
Glow Highlight Style
);
};
```
### **Highlighted**
```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with different highlight styles
*/
export const HighlightedTitle = () => {
return (
Text with background highlight
Text with underlined highlight
Text with gradient highlight
Text with outline highlight
Text with glow highlight
Text with multiple highlights in the same sentence
);
};
```
### **Index**
```tsx
export * from './default';
export * from './highlighted';
export * from './animated';
export * from './animationLoop';
export * from './hero';
export * from './responsive';
export * from './custom';
export * from './directAnimation';
export * from './gradient';
export * from './highlight';
export * from './alternating';
export * from './highlightStyles';
export * from './typewriterHighlight';
export * from './slideHighlight';
```
### **SlideHighlight**
```tsx
import React from 'react';
import { Vertical, Text } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with slide effect on highlighted text
*/
export const SlideHighlightDemo = () => {
return (
Slide effect on highlighted text
{/* Single highlighted word with slide effect */}
This text has a slide effect on the highlighted word
{/* Alternating text with slide effect */}
Our changing solution for your business
{/* Alternating text with gradient and slide effect */}
Build Amazing things together
);
};
```
### **TypewriterHighlight**
```tsx
import React, { useState } from 'react';
import { Vertical, Text, Button, Horizontal } from 'app-studio';
import { Title } from '../Title';
/**
* Examples of Title with typewriter effect on highlighted text
*/
export const TypewriterHighlightDemo = () => {
const [resetKey, setResetKey] = useState(0);
// Function to reset all typewriter animations
const resetTypewriters = () => {
setResetKey((prev) => prev + 1);
};
return (
Typewriter effect on highlighted text
{/* Single highlighted word with typewriter effect */}
This text has a typewriter effect on the highlighted word
{/* Multiple highlighted words with typewriter effect */}
This text has multiple highlighted words with typewriter effect
{/* Gradient highlight with typewriter effect */}
This text has a gradient highlight with typewriter effect
{/* Full title with typewriter effect */}
This entire title has a gradient with typewriter effect
{/* Typewriter with highlight animation */}
This highlight has typewriter followed by animation
{/* Alternating text with typewriter */}
Our changing solution for your business
The typewriter effect adds a blinking cursor while typing and has a
natural typing rhythm. This implementation is based on a more robust
TypewriterEffect component that handles the animation directly in the
view.
);
};
```