Creates a character-by-character typing effect with support for action queues, character entrance effects, and text deletion. Perfect for hero sections, terminal interfaces, and storytelling.

// Basic usage
Domma.effects.scribe('.hero-title', {
  actions: [
    { render: 'Hello, World!' }
  ]
});

// Complex sequence with effects
const tw = Domma.effects.scribe('.element', {
  speed: 50,              // ms per character (typing)
  deleteSpeed: 30,        // ms per character (deletion)
  cursor: true,           // show blinking cursor
  cursorChar: '|',        // cursor character
  loop: true,             // loop infinitely
  actions: [
    { render: 'Hello', effect: 'bounce' },
    { wait: '2s' },
    { undoRender: true },  // delete all from last render
    { render: 'Welcome to Domma', effect: 'fade' },
    { wait: '3s' },
    { undoRender: 5 },     // delete last 5 characters
    { render: 'ma!', effect: 'glow' }
  ]
});

// Control methods
tw.pause();
tw.resume();
tw.stop();
tw.restart();
tw.destroy();

Action Types

• { render: 'text', effect: 'none|fade|bounce|glow' } - Type text with optional entrance effect
• { wait: '2s' } - Pause for duration (supports '2s', '500ms', or number)
• { undoRender: true } - Delete all characters from last render
• { undoRender: N } - Delete last N characters
• { undoRender: 'all' } - Delete all characters

Simple typing animation with control methods.

Domma.effects.scribe('#scribe-demo-1', {
  speed: 50,
  deleteSpeed: 30,
  actions: [
    { render: 'Hello, World!' },
    { wait: '2s' },
    { undoRender: 'all' },
    { wait: '500ms' },
    { render: 'Welcome to DommaJS', effect: 'fade' }
  ]
});

Compare different character entrance effects.

// Demonstrate each effect type
Domma.effects.scribe('#demo', {
  speed: 40,
  actions: [
    { render: `Effect: ${effect}`, effect: effect }
  ]
});

Complex sequence with render, wait, and undo actions.

Start Sequence

Domma.effects.scribe('#scribe-demo-3', {
  speed: 50,
  deleteSpeed: 30,
  actions: [
    { render: 'Hello', effect: 'bounce' },
    { wait: '1.5s' },
    { undoRender: true },
    { render: 'Welcome to Domma', effect: 'fade' },
    { wait: '2s' }
  ]
});

Control rendering granularity with mode: character-by-character, word-by-word, or sentence-by-sentence.

Character Mode (default)

Start Character Mode

Domma.effects.scribe('#demo', {
  mode: 'typewriter',  // Character-by-character
  actions: [{ render: 'Hello World!' }]
});

Word Mode

Start Word Mode

Domma.effects.scribe('#demo', {
  mode: 'word',  // Word-by-word
  speed: 100,    // Per word, not per character
  actions: [{ render: 'Welcome to the Domma framework!', effect: 'bounce' }]
});

Sentence Mode

Start Sentence Mode

Domma.effects.scribe('#demo', {
  mode: 'sentence',  // Sentence-by-sentence
  speed: 200,        // Per sentence
  actions: [{ render: 'First sentence. Second sentence! Third sentence?', effect: 'fade' }]
});

Demonstrate selective unit deletion. In word mode, undoRender deletes words. In sentence mode, it deletes sentences.

Start Partial Undo

Domma.effects.scribe('#scribe-demo-4', {
  speed: 50,
  deleteSpeed: 30,
  actions: [
    { render: 'Domma Framework', effect: 'fade' },
    { wait: '1s' },
    { undoRender: 9 },  // Delete "Framework"
    { wait: '500ms' },
    { render: 'Effects!', effect: 'glow' },
    { wait: '2s' }
  ]
});

Infinite looping scribe for hero sections.

Domma.effects.scribe('#scribe-demo-5', {
  speed: 60,
  deleteSpeed: 40,
  loop: true,
  loopDelay: 2000,
  actions: [
    { render: 'Build Faster', effect: 'bounce' },
    { wait: '2s' },
    { undoRender: 'all' },
    { wait: '500ms' },
    { render: 'Code Smarter', effect: 'fade' },
    { wait: '2s' },
    { undoRender: 'all' },
    { wait: '500ms' }
  ]
});

Different cursor styles with smooth fade animation.

// Different cursor styles
Domma.effects.scribe('#demo', {
  speed: 50,
  cursorType: 'caret',  // or 'block', 'underline'
  cursorChar: '|',       // or '█', '_'
  cursorBlink: true,     // or false
  actions: [
    { render: 'Cursor type: caret' }
  ]
});