PHPackages sticknologic/snl-typed-js - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. sticknologic/snl-typed-js ActiveLibrary[Templating & Views](/categories/templating) sticknologic/snl-typed-js ========================= Blade component to render typing animation using Typed.js library v1.0.1(5mo ago)03GPL-3.0-or-laterPHPPHP ^8.1CI failing Since Jan 17Pushed 5mo agoCompare [ Source](https://github.com/STICKnoLOGIC/snl-typed-js)[ Packagist](https://packagist.org/packages/sticknologic/snl-typed-js)[ Fund](https://www.buymeacoffee.com/STICKnoLOGIC)[ Fund](https://paypal.me/yhalSTICKnoLOGIC)[ RSS](/packages/sticknologic-snl-typed-js/feed)WikiDiscussions main Synced today READMEChangelog (2)Dependencies (3)Versions (3)Used By (0) SNL Typed.js - Laravel Typing Animation Component ================================================= [](#snl-typedjs---laravel-typing-animation-component) A Laravel Blade component package for creating beautiful typing animations using the Typed.js library. Features -------- [](#features) - 🎨 Easy-to-use Blade component syntax - ⚡ Lightweight and performant - 🎯 Full Typed.js configuration support - 🔧 Customizable styling and behavior - 📦 Auto-discovery for Laravel - ♻️ Optimized with reusable initialization function (loaded once via @once directive) #### ads [](#ads) [![Sponsored by GitAds](https://camo.githubusercontent.com/0cb8882e645edf073c108ea867bc24c09df84da8d86f125939c691c63f64ac90/68747470733a2f2f6769746164732e6465762f76312f61642d73657276653f736f757263653d737469636b6e6f6c6f6769632f736e6c2d74797065642d6a7340676974687562)](https://gitads.dev/v1/ad-track?source=sticknologic/snl-typed-js@github) Requirements ------------ [](#requirements) - PHP 8.1 or higher - Laravel 10.x, 11.x, or 12.x Installation ------------ [](#installation) Install the package via Composer: ``` composer require sticknologic/snl-typed-js ``` The package will be automatically discovered by Laravel. Usage ----- [](#usage) ### Basic Example [](#basic-example) **Using the `:strings` attribute:** ``` ``` **Using slot content (inner child):** ``` Hello World! Welcome to Laravel! Enjoy typing animations! ``` ### Advanced Example [](#advanced-example) **With `:strings` attribute:** ``` ``` **With slot content:** ``` First string Second string Third string ``` Available Options ----------------- [](#available-options) OptionTypeDefaultDescription`id`stringauto-generatedUnique identifier for the element`strings`array/string`[]`Array of strings to type`type-speed`int`60`Type speed in milliseconds`start-delay`int`0`Delay before typing starts (ms)`back-speed`int`60`Backspacing speed in milliseconds`back-delay`int`700`Delay before backspacing (ms)`smart-backspace`bool`true`Only backspace what doesn't match`shuffle`bool`false`Shuffle the strings`loop`bool`true`Loop the animation`show-cursor`bool`true`Show blinking cursor`cursor`string`|`Custom cursor character`font-size`string`1rem`CSS font-size value`color`string`inherit`CSS color value`class`string`null`CSS class names for the container divPublishing Views ---------------- [](#publishing-views) If you need to customize the component views, you can publish them: ``` php artisan vendor:publish --tag=snl-type-views ``` The views will be published to `resources/views/vendor/snl-type`. Examples -------- [](#examples) ### Multiple Instances [](#multiple-instances) You can use multiple typing animations on the same page: ``` I am a ``` ### Using Slot Content (Inner Child) [](#using-slot-content-inner-child) The slot content approach is useful when you want to include HTML or dynamic content. **Important Notes:** - Each text string must be wrapped in a block element (``, ``, ``, etc.) - Text NOT enclosed in an element will **not be rendered** - Elements like ``, ``, etc. will render as **normal text**, not as headers - Use `` inside the elements to style specific parts of the text **Example showing all cases:** ``` First string - renders normally This will be normal text, NOT a header Text with red color styling This text will NOT render because it's not enclosed in an element You can also use div elements ``` **Result:** The typing animation will display: 1. "First string - renders normally" 2. "This will be normal text, NOT a header" (as plain text) 3. "Text with red color styling" (with "red color" in red) 4. "You can also use div elements" The standalone text will be ignored completely. **Styling example:** ``` Welcome to Laravel Build amazing applications With SNL Typed.js ``` ### Dynamic Content Example [](#dynamic-content-example) ``` @foreach($features as $feature) {{ $feature }} @endforeach ``` ### Custom Styling [](#custom-styling) ``` ``` License ------- [](#license) This package is open-sourced software licensed under the [GPL-3.0 license](LICENSE). Credits ------- [](#credits) - Built with [Typed.js](https://github.com/mattboldt/typed.js/) - Maintained by [SticknoLogic](https://sticknologic.is-a.dev) Technical Details ----------------- [](#technical-details) ### Optimization [](#optimization) The component uses a reusable `initSnlTyped()` function defined in the `@once` directive. This means: - The function is loaded only once per page, regardless of how many typing animations you use - Each component instance simply calls the function with its specific configuration - Reduces code duplication and improves page load performance Support ------- [](#support) For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/sticknologic/snl-typed-js). ### Health Score 33 — LowBetter than 72% of packages Maintenance72 Regular maintenance activity Popularity3 Limited adoption so far Community6 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 167d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/21287ef8b0a07dbf3d43063860ee496580806e2e62688769d16afa91e11b48e2?d=identicon)[STICKnoLOGIC](/maintainers/STICKnoLOGIC) --- Top Contributors [![STICKnoLOGIC](https://avatars.githubusercontent.com/u/65322242?v=4)](https://github.com/STICKnoLOGIC "STICKnoLOGIC (25 commits)") --- Tags laravelbladecomponenttypedtyping-animation ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/sticknologic-snl-typed-js/health.svg) ``` [![Health](https://phpackages.com/badges/sticknologic-snl-typed-js/health.svg)](https://phpackages.com/packages/sticknologic-snl-typed-js) ``` ### Alternatives [djl997/blade-shortcuts Blade Shortcuts is a library of handy Laravel Blade Directives. 411.0k3](/packages/djl997-blade-shortcuts) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)