Experience FlowTypeWriter in action!
Animated GIF Demo:
Full Video Demo (MP4):
For a more detailed look at the features and fluidity, you can watch or download the full MP4 video:
➡️ Watch/Download flow_type_writer.mp4
(Depending on your browser and GitHub's rendering, this link might play the video directly or prompt a download.)
Live Demo: (Suggestion: Deploy this project to GitHub Pages or a similar service to provide a live preview link here!)
- Example:
[Live Demo](https://your-username.github.io/FlowTypeWriter/)(Replaceyour-usernamewith your actual GitHub username)
Run Locally: Clone this repository and open index.html in your browser to see the effect with the example configuration.
- Dynamic Typing Effect: Simulates natural, human-like typing.
- Variable Speed & Pauses: Typing speed can vary randomly, with additional pauses for punctuation, creating an "AIGC soul-like" rhythm.
- Full HTML Support: Renders HTML tags within the text as elements, not typed out character by character. Style your text with
<strong>,<em>,<span>with colors, etc. - Highly Customizable: Control base speed, speed variance, punctuation pauses, cursor character, cursor blink speed, and an on-complete callback.
- Modern Aesthetics: Easily styleable. The example
index.htmldemonstrates a sleek dark theme with "high-order design sense." - Lightweight & Vanilla JS: No external dependencies required.
- Easy Integration: Simple to set up and use in any web project.
- HTML5
- CSS3 (for styling the container and demo page)
- Vanilla JavaScript (ES6+)
-
Download or Clone: Get the
typewriter.jsfile and include it in your project. If you've cloned the repository, it's at the root. -
Include the Script: Add the
typewriter.jsscript to your HTML file, typically before the closing</body>tag or in the<head>withdefer.<script src="path/to/typewriter.js"></script>
If
typewriter.jsis in the same directory as yourindex.html, you can use:<script src="typewriter.js"></script>
-
Prepare an HTML Container: Create an HTML element where the typewriter effect will display the text.
<div id="myTypewriter"></div>
-
Initialize the Script: Call the
streamPrintAdvancedfunction after the DOM is loaded, providing the target element's ID, the text to type, and optional configuration.document.addEventListener('DOMContentLoaded', () => { const myText = "Hello, <strong style='color: #00AFFF;'>world</strong>! This is FlowTypeWriter writing with an <em style='color: #2ecc71;'>AIGC soul</em>."; const typewriterOptions = { speed: 60, // Base speed in ms per character speedVariance: 40, // Speed variation (e.g., 40 means +/- 20ms) punctuationPause: 350, // Extra pause for punctuation in ms cursorChar: '▋', // Cursor character cursorBlinkSpeed: 500, // Cursor blink cycle in ms onComplete: () => { console.log('Typing complete!'); } }; // Ensure the streamPrintAdvanced function is available globally or imported if using modules if (typeof streamPrintAdvanced === 'function') { streamPrintAdvanced('myTypewriter', myText, typewriterOptions); } else { console.error('streamPrintAdvanced function not found. Ensure typewriter.js is loaded correctly.'); } });
The streamPrintAdvanced function accepts three arguments: elementId, textToPrint, and an optional options object.
| Parameter | Type | Default | Description |
|---|---|---|---|
elementId |
string |
Required | The ID of the HTML element where the text will be typed. |
textToPrint |
string |
Required | The text string to be typed. Can include HTML tags. |
options |
object |
{} |
An optional object for configuration. |
options.speed |
number |
70 |
Base typing speed in milliseconds per character. |
options.speedVariance |
number |
0 |
Random variance added/subtracted from base speed (e.g., 50 results in speed +/- 25ms). Humanizes typing. |
options.punctuationPause |
number |
200 |
Additional pause in milliseconds after typing common punctuation marks (e.g., , . ? ! ; : ()). |
options.cursorChar |
string |
'▋' |
The character used for the blinking cursor. |
options.cursorBlinkSpeed |
number |
500 |
The duration of one cursor blink cycle in milliseconds. |
options.onComplete |
function |
()=>{} |
A callback function that executes when all text has been typed. |
##🎨 Styling
The typewriter.js script injects minimal essential CSS for the cursor's blinking animation.
For advanced styling, including the dark theme, container appearance, fonts, and other visual enhancements demonstrated in the index.html example, you will need to add your own CSS. Refer to the <style> section in the provided index.html for a comprehensive example of how to achieve a "high-order design sense" and dark theme. You can adapt or expand upon this CSS to match your project's specific design requirements.
Key elements to style in your CSS:
- The container element (e.g.,
#myTypewriter) for background, text color, font, padding, borders, shadows, etc. - Any specific HTML elements you use within the typed text (e.g.,
strong,em,span.highlight-blue).
Contributions, issues, and feature requests are welcome! Feel free to check the issues page (replace your-username/FlowTypeWriter with your actual repository path).
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
A copy of the MIT License should be included in your repository in a file named LICENSE or LICENSE.md. You can easily add one on GitHub when creating the repository or add it manually. The text for the MIT license can be found at opensource.org/licenses/MIT.
This README aims to be a comprehensive guide for FlowTypeWriter. Feel free to customize it further to best suit your project!