@app-studio/components 0.10.17

package/dist/files/media/Title.mdx

@@ -0,0 +1,1081 @@
+# 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 (
+    <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</Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={48}>
+      {/* Title with single play animation (default) */}
+      <Title
+        animate={{
+          from: { opacity: 0, transform: 'translateY(-20px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
+          duration: '1s',
+          timingFunction: 'ease-out',
+        }}
+        animationLoop={1}
+        highlightText="Once"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+      >
+        Animation Plays Once (Default)
+      </Title>
+
+      {/* Title with animation that plays 3 times */}
+      <Title
+        animate={{
+          from: { transform: 'scale(0.8)' },
+          to: { transform: 'scale(1)' },
+          duration: '0.8s',
+          timingFunction: 'ease-in-out',
+        }}
+        animationLoop={3}
+        highlightText="Three"
+        highlightStyle="gradient"
+        highlightColor="theme-primary"
+        highlightSecondaryColor="theme-secondary"
+      >
+        Animation Plays Three Times
+      </Title>
+
+      {/* Title with infinite animation loop */}
+      <Title
+        animate={{
+          from: { transform: 'translateX(-10px)' },
+          to: { transform: 'translateX(10px)' },
+          duration: '2s',
+          timingFunction: 'ease-in-out',
+          direction: 'alternate',
+        }}
+        animationLoop="infinite"
+        highlightText="Infinite"
+        highlightStyle="glow"
+        highlightColor="theme-primary"
+      >
+        Animation Loops Infinitely
+      </Title>
+
+      {/* Highlight animation with different loop control */}
+      <Title
+        highlightAnimate={{
+          from: { transform: 'rotate(-5deg)' },
+          to: { transform: 'rotate(5deg)' },
+          duration: '1s',
+          timingFunction: 'ease-in-out',
+          direction: 'alternate',
+        }}
+        highlightAnimationLoop="infinite"
+        highlightText="Wiggling"
+        highlightStyle="outline"
+        highlightColor="theme-warning"
+      >
+        Title with Wiggling Highlight
+      </Title>
+
+      {/* Both title and highlight with different loop controls */}
+      <Title
+        animate={{
+          from: { opacity: 0.5 },
+          to: { opacity: 1 },
+          duration: '2s',
+          timingFunction: 'ease-in-out',
+          direction: 'alternate',
+        }}
+        animationLoop="infinite"
+        highlightAnimate={{
+          from: { backgroundColor: 'theme-primary' },
+          to: { backgroundColor: 'theme-secondary' },
+          duration: '1.5s',
+          timingFunction: 'ease-in-out',
+          direction: 'alternate',
+        }}
+        highlightAnimationLoop="infinite"
+        highlightText="Pulsing"
+        highlightStyle="background"
+      >
+        Title with Pulsing Background and Highlight
+      </Title>
+
+      {/* Bounce animation with limited loops */}
+      <Title
+        animate={{
+          from: { transform: 'translateY(0)' },
+          '20%': { transform: 'translateY(-30px)' },
+          '40%': { transform: 'translateY(0)' },
+          '60%': { transform: 'translateY(-15px)' },
+          '80%': { transform: 'translateY(0)' },
+          to: { transform: 'translateY(0)' },
+          duration: '2s',
+          timingFunction: 'ease-in-out',
+        }}
+        animationLoop={2}
+        highlightText="Bounce"
+        highlightStyle="background"
+        highlightColor="theme-success"
+      >
+        Bounce Animation (2 Times)
+      </Title>
+
+      {/* Typewriter with infinite highlight animation */}
+      <Title
+        highlightAnimate={{
+          from: { textShadow: '0 0 5px theme-primary' },
+          to: { textShadow: '0 0 20px theme-primary' },
+          duration: '1.5s',
+          timingFunction: 'ease-in-out',
+          direction: 'alternate',
+        }}
+        highlightAnimationLoop="infinite"
+        highlightText="glowing"
+        highlightStyle="glow"
+        highlightColor="theme-primary"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={2000}
+      >
+        Typewriter with glowing highlight
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      {/* Using the new responsive prop - automatically adapts based on size */}
+      <Title
+        size="xl"
+        responsive={true}
+        highlightText="Responsive"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+      >
+        Responsive XL Title (H1 scale)
+      </Title>
+
+      <Title
+        size="lg"
+        responsive={true}
+        highlightText="Responsive"
+        highlightStyle="gradient"
+        highlightColor="theme-primary"
+        highlightSecondaryColor="theme-secondary"
+      >
+        Responsive LG Title (H2 scale)
+      </Title>
+
+      <Title
+        size="md"
+        responsive={true}
+        highlightText="Responsive"
+        highlightStyle="underline"
+        highlightColor="theme-primary"
+      >
+        Responsive MD Title (H3 scale)
+      </Title>
+
+      <Title
+        size="sm"
+        responsive={true}
+        highlightText="Responsive"
+        highlightStyle="glow"
+        highlightColor="theme-primary"
+      >
+        Responsive SM Title (T1 scale)
+      </Title>
+
+      <Title
+        size="xs"
+        responsive={true}
+        highlightText="Responsive"
+        highlightStyle="outline"
+        highlightColor="theme-secondary"
+      >
+        Responsive XS Title (S1 scale)
+      </Title>
+
+      {/* Legacy example using manual media queries */}
+      <Title
+        media={{
+          mobile: {
+            fontSize: 32,
+          },
+          tablet: {
+            fontSize: 48,
+          },
+          desktop: {
+            fontSize: 64,
+          },
+        }}
+        highlightText="Manual"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+      >
+        Manual Media Queries Title
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={48}>
+      <Title
+        highlightText="changing"
+        alternateHighlightText={[
+          'innovative',
+          'powerful',
+          'flexible',
+          'intuitive',
+        ]}
+        alternateAnimation={true}
+        alternateDuration={2000}
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        size="xl"
+      >
+        Our changing solution for your business
+      </Title>
+
+      <Text
+        fontSize={14}
+        color="color-gray-500"
+        marginTop={8}
+        marginBottom={24}
+      >
+        The word &quot;changing&quot; will cycle through &quot;innovative&quot;,
+        &quot;powerful&quot;, &quot;flexible&quot;, and &quot;intuitive&quot;
+        every 2 seconds
+      </Text>
+
+      <Title
+        highlightText="rotating"
+        alternateHighlightText={['React', 'Vue', 'Angular', 'Svelte']}
+        alternateAnimation={true}
+        alternateDuration={1500}
+        highlightStyle="gradient"
+        highlightColor="theme-primary"
+        highlightSecondaryColor="theme-secondary"
+        highlightAnimate={{
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+          duration: '0.5s',
+        }}
+        size="xl"
+      >
+        Build with rotating and other modern frameworks
+      </Title>
+
+      <Text
+        fontSize={14}
+        color="color-gray-500"
+        marginTop={8}
+        marginBottom={24}
+      >
+        The word &quot;rotating&quot; will cycle through framework names with a
+        gradient style and fade-in animation
+      </Text>
+
+      <Title
+        highlightText="cycling"
+        alternateHighlightText={['fast', 'reliable', 'secure', 'scalable']}
+        alternateAnimation={true}
+        alternateDuration={3000}
+        highlightStyle="glow"
+        highlightColor="theme-primary"
+        size="xl"
+      >
+        Our platform is cycling and built for performance
+      </Title>
+
+      <Text fontSize={14} color="color-gray-500" marginTop={8}>
+        The word &quot;cycling&quot; will cycle through attributes with a glow
+        effect every 3 seconds
+      </Text>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={48}>
+      <Title
+        animate={{
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+          duration: '1.5s',
+          iterationCount: '1',
+        }}
+      >
+        Fade In Animation
+      </Title>
+
+      <Title
+        animate={{
+          from: { transform: 'translateX(-100%)' },
+          to: { transform: 'translateX(0)' },
+          duration: '1s',
+          iterationCount: '1',
+        }}
+      >
+        Slide In From Left
+      </Title>
+
+      <Title
+        animate={{
+          from: { transform: 'translateX(100%)' },
+          to: { transform: 'translateX(0)' },
+          duration: '1s',
+          iterationCount: '1',
+        }}
+      >
+        Slide In From Right
+      </Title>
+
+      <Title
+        animate={{
+          from: { transform: 'translateY(-100%)' },
+          to: { transform: 'translateY(0)' },
+          duration: '1s',
+          iterationCount: '1',
+        }}
+      >
+        Slide In From Top
+      </Title>
+
+      <Title
+        animate={{
+          from: { transform: 'translateY(100%)' },
+          to: { transform: 'translateY(0)' },
+          duration: '1s',
+          iterationCount: '1',
+        }}
+      >
+        Slide In From Bottom
+      </Title>
+
+      <Title
+        animate={{
+          from: { clipPath: 'polygon(0 0, 0 0, 0 100%, 0% 100%)' },
+          to: { clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' },
+          duration: '1.5s',
+          iterationCount: '1',
+        }}
+      >
+        Reveal Animation
+      </Title>
+
+      <Title
+        animate={{
+          from: { transform: 'translateY(0)' },
+          '20%': { transform: 'translateY(-30px)' },
+          '40%': { transform: 'translateY(0)' },
+          '60%': { transform: 'translateY(-15px)' },
+          '80%': { transform: 'translateY(0)' },
+          to: { transform: 'translateY(0)' },
+          duration: '1s',
+          iterationCount: '1',
+        }}
+      >
+        Bounce Animation
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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
+      views={{
+        container: {
+          fontFamily: 'Georgia, serif',
+          letterSpacing: '0.05em',
+          textTransform: 'uppercase',
+        },
+        highlight: {
+          borderRadius: '8px',
+          padding: '0 12px',
+        },
+      }}
+      highlightText="Custom"
+      highlightStyle="background"
+      highlightColor="color-purple-500"
+    >
+      Title with Custom Styling
+    </Title>
+  );
+};
+```
+
+### **DirectAnimation**
+
+```tsx
+import React from 'react';
+import { Title } from '../Title';
+
+/**
+ * Example of Title with direct animation props
+ */
+export const DirectAnimationExample = () => {
+  return (
+    <Title
+      animate={{
+        from: { opacity: 0, transform: 'translateY(20px)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        duration: '1s',
+        timingFunction: 'ease-out',
+      }}
+      highlightText="animated"
+      highlightStyle="background"
+      highlightColor="theme-primary"
+      highlightAnimate={{
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+        duration: '1.5s',
+        delay: '0.5s',
+      }}
+    >
+      This title is directly animated with custom animation
+    </Title>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      <Text fontSize={14} color="color-gray-500" marginBottom={16}>
+        The highlighted words below should appear with gradient text effects
+      </Text>
+
+      <Title
+        highlightText={['primary', 'secondary']}
+        highlightStyle="gradient"
+        highlightColor="theme-primary"
+        highlightSecondaryColor="theme-secondary"
+        size="xl"
+      >
+        Gradient from primary to secondary
+      </Title>
+
+      <Title
+        highlightText={['specific', 'colors']}
+        highlightStyle="gradient"
+        highlightColor="color-blue-500"
+        highlightSecondaryColor="color-purple-500"
+        size="xl"
+      >
+        Gradient with specific system colors color-blue-500 to color-purple-500
+      </Title>
+
+      <Title
+        highlightText={['blue', 'purple']}
+        highlightStyle="gradient"
+        highlightColor="color-blue-500"
+        highlightSecondaryColor="color-purple-500"
+        size="xl"
+      >
+        Gradient from blue to purple
+      </Title>
+
+      <Title
+        highlightText={['orange', 'red']}
+        highlightStyle="gradient"
+        highlightColor="color-orange-500"
+        highlightSecondaryColor="color-red-500"
+        size="xl"
+      >
+        Gradient from orange to red
+      </Title>
+
+      <Title
+        highlightText={['green', 'teal']}
+        highlightStyle="gradient"
+        highlightColor="color-green-500"
+        highlightSecondaryColor="color-teal-500"
+        size="xl"
+      >
+        Gradient from green to teal
+      </Title>
+
+      <Title
+        highlightStyle="gradient"
+        highlightColor="color-purple-500"
+        highlightSecondaryColor="color-pink-500"
+        size="xl"
+      >
+        This entire title has a gradient with no specific highlight
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <View
+      backgroundColor="color-gray-50"
+      padding={48}
+      borderRadius={8}
+      width="100%"
+    >
+      <Vertical gap={24} maxWidth={800} marginX="auto">
+        <Title
+          size="xl"
+          animate={{
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+            duration: '1s',
+            iterationCount: '1',
+          }}
+          highlightText="Platform"
+          highlightStyle="gradient"
+          highlightColor="theme-primary"
+          highlightSecondaryColor="theme-secondary"
+          centered
+        >
+          Welcome to Our Platform
+        </Title>
+
+        <Text
+          textAlign="center"
+          color="color-gray-600"
+          fontSize={20}
+          lineHeight={28}
+        >
+          Build beautiful, responsive, and interactive user interfaces with our
+          powerful component library.
+        </Text>
+
+        <Horizontal gap={16} justifyContent="center" marginTop={16}>
+          <Button size="lg">Get Started</Button>
+          <Button variant="outline" size="lg">
+            Learn More
+          </Button>
+        </Horizontal>
+      </Vertical>
+    </View>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      <Title
+        highlightText="animated highlight"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightAnimate={{
+          from: { opacity: 0, transform: 'scale(0.9)' },
+          to: { opacity: 1, transform: 'scale(1)' },
+          duration: '0.5s',
+          delay: '0.2s',
+        }}
+      >
+        Text with animated highlight
+      </Title>
+
+      <Title
+        highlightText={['first', 'second', 'third']}
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightAnimate={[
+          {
+            from: { opacity: 0, transform: 'translateY(-10px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+            duration: '0.5s',
+            delay: '0.1s',
+          },
+          {
+            from: { opacity: 0, transform: 'translateY(-10px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+            duration: '0.5s',
+            delay: '0.3s',
+          },
+          {
+            from: { opacity: 0, transform: 'translateY(-10px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+            duration: '0.5s',
+            delay: '0.5s',
+          },
+        ]}
+      >
+        This text has first, second, and third highlighted words with staggered
+        animations
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      <Text fontSize={14} color="color-gray-500" marginBottom={16}>
+        Different highlight styles applied to entire titles (no highlightText
+        prop)
+      </Text>
+
+      <Title
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        size="xl"
+      >
+        Background Highlight Style
+      </Title>
+
+      <Title
+        highlightStyle="underline"
+        highlightColor="theme-secondary"
+        size="xl"
+      >
+        Underline Highlight Style
+      </Title>
+
+      <Title
+        highlightStyle="gradient"
+        highlightColor="color-blue-500"
+        highlightSecondaryColor="color-purple-500"
+        size="xl"
+      >
+        Gradient Highlight Style
+      </Title>
+
+      <Title highlightStyle="outline" highlightColor="theme-primary" size="xl">
+        Outline Highlight Style
+      </Title>
+
+      <Title highlightStyle="glow" highlightColor="theme-primary" size="xl">
+        Glow Highlight Style
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      <Title
+        highlightText="background"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+      >
+        Text with background highlight
+      </Title>
+
+      <Title
+        highlightText="underlined"
+        highlightStyle="underline"
+        highlightColor="theme-secondary"
+      >
+        Text with underlined highlight
+      </Title>
+
+      <Title
+        highlightText="gradient"
+        highlightStyle="gradient"
+        highlightColor="theme-primary"
+        highlightSecondaryColor="theme-secondary"
+      >
+        Text with gradient highlight
+      </Title>
+
+      <Title
+        highlightText="outline"
+        highlightStyle="outline"
+        highlightColor="theme-primary"
+      >
+        Text with outline highlight
+      </Title>
+
+      <Title
+        highlightText="glow"
+        highlightStyle="glow"
+        highlightColor="theme-primary"
+      >
+        Text with glow highlight
+      </Title>
+
+      <Title
+        highlightText={['multiple', 'highlights']}
+        highlightStyle="background"
+        highlightColor="theme-primary"
+      >
+        Text with multiple highlights in the same sentence
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      <Text fontSize={14} color="color-gray-500">
+        Slide effect on highlighted text
+      </Text>
+
+      {/* Single highlighted word with slide effect */}
+      <Title
+        highlightText="slide"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightSlide={true}
+        highlightSlideDuration={500}
+        highlightSlideStagger={500}
+        alternateDuration={4000}
+        size="xl"
+      >
+        This text has a slide effect on the highlighted word
+      </Title>
+
+      {/* Alternating text with slide effect */}
+      <Title
+        highlightText="changing solution"
+        alternateHighlightText={[
+          'innovative the future',
+          'powerful the future',
+          'flexible the future',
+          'intuitive the future',
+        ]}
+        alternateAnimation={true}
+        alternateDuration={6000}
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightSlide={true}
+        highlightSlideDuration={500}
+        highlightSlideStagger={500}
+        highlightSlideSequential={true}
+        size="xl"
+      >
+        Our changing solution for your business
+      </Title>
+
+      {/* Alternating text with gradient and slide effect */}
+      <Title
+        highlightText="Amazing"
+        alternateHighlightText={['Incredible', 'Fantastic', 'Wonderful']}
+        alternateAnimation={true}
+        alternateDuration={2000}
+        highlightStyle="gradient"
+        highlightColor="color-blue-500"
+        highlightSecondaryColor="color-purple-500"
+        highlightSlide={true}
+        highlightSlideDuration={500}
+        size="xl"
+      >
+        Build Amazing things together
+      </Title>
+    </Vertical>
+  );
+};
+```
+
+### **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 (
+    <Vertical gap={32}>
+      <Horizontal
+        justifyContent="space-between"
+        alignItems="center"
+        marginBottom={16}
+      >
+        <Text fontSize={14} color="color-gray-500">
+          Typewriter effect on highlighted text
+        </Text>
+        <Button variant="outline" size="sm" onClick={resetTypewriters}>
+          Reset Animations
+        </Button>
+      </Horizontal>
+
+      {/* Single highlighted word with typewriter effect */}
+      <Title
+        key={`single-${resetKey}`}
+        highlightText="typewriter"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={1500}
+        size="xl"
+      >
+        This text has a typewriter effect on the highlighted word
+      </Title>
+
+      {/* Multiple highlighted words with typewriter effect */}
+      <Title
+        key={`multiple-${resetKey}`}
+        highlightText={['multiple', 'highlighted', 'words']}
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={2500}
+        size="xl"
+      >
+        This text has multiple highlighted words with typewriter effect
+      </Title>
+
+      {/* Gradient highlight with typewriter effect */}
+      <Title
+        key={`gradient-${resetKey}`}
+        highlightText="gradient"
+        highlightStyle="gradient"
+        highlightColor="color-blue-500"
+        highlightSecondaryColor="color-purple-500"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={1000}
+        size="xl"
+      >
+        This text has a gradient highlight with typewriter effect
+      </Title>
+
+      {/* Full title with typewriter effect */}
+      <Title
+        key={`full-${resetKey}`}
+        highlightStyle="gradient"
+        highlightColor="color-blue-500"
+        highlightSecondaryColor="color-purple-500"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={3000}
+        size="xl"
+      >
+        This entire title has a gradient with typewriter effect
+      </Title>
+
+      {/* Typewriter with highlight animation */}
+      <Title
+        key={`animated-${resetKey}`}
+        highlightText="animated"
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={1500}
+        highlightAnimate={{
+          from: { opacity: 0.5, transform: 'scale(0.95)' },
+          to: { opacity: 1, transform: 'scale(1)' },
+          duration: '0.5s',
+          delay: '1.5s', // Start animation after typewriter completes
+        }}
+        size="xl"
+      >
+        This highlight has typewriter followed by animation
+      </Title>
+
+      {/* Alternating text with typewriter */}
+      <Title
+        key={`alternating-${resetKey}`}
+        highlightText="changing"
+        alternateHighlightText={[
+          'innovative',
+          'powerful',
+          'flexible',
+          'intuitive',
+        ]}
+        alternateAnimation={true}
+        alternateDuration={3000}
+        highlightStyle="background"
+        highlightColor="theme-primary"
+        highlightTypewriter={true}
+        highlightTypewriterDuration={1000}
+        size="xl"
+      >
+        Our changing solution for your business
+      </Title>
+
+      <Text fontSize={14} color="color-gray-500" marginTop={8}>
+        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.
+      </Text>
+    </Vertical>
+  );
+};
+```
+