Components

1. Manual Inline Mode

Use Case: You have a paragraph where you want some initial content visible, and the rest hidden until the user clicks the More... link

<p>
  This is a very long paragraph, that is truncated here, 
  <More>
    so that only viewers who want to see all of the content...
  </More>
</p>

2. Auto-Block Mode

Use Case: You have a long section (like a bio or a list) and you want to cap it at a specific height (e.g., 3 lines) with a fade-out effect.

<More lines={3}>
  <p>Jane Doe is a senior engineer...</p>
</More>

<More lines={3} label="Full bio" labelExpanded="Close bio">
  <p>Jane Doe is a senior engineer...</p>
</More>

3. Simple Link Mode

Use Case: A standard link styled consistently with the expanders.

<p>
  Interested in learning more about our company?
  <More href="/about" />
</p>

1. SmartDebt Entities

Showcase all $MART DEBT entities with typewriter effect. The S→$ animation runs independently while entity names cycle. Cursor is hidden for a cleaner look.

<h1>
  <Typewriter
    dynamicText={["Coach", "Insights", "Strategies", "Community", "Myths", "App", "Academy"]}
    typingDelay={100}
    dynamicTextDuration={2000}
    dynamicTextClass="smart-debt-entity"
    showCursor={false}
  >
    <SmartDebt delay={0} />
  </Typewriter>
</h1>

2. Hero Title

Use in hero sections with static initial text and dynamic phrases.

<h1>
  Build wealth with
  <Typewriter
    dynamicText={["smart strategies", "proven methods", "expert guidance"]}
  />
</h1>