README

SNL Typed.js - Laravel Typing Animation Component

A Laravel Blade component package for creating beautiful typing animations using the Typed.js library.

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)

Requirements

PHP 8.1 or higher
Laravel 10.x, 11.x, or 12.x

Installation

Install the package via Composer:

composer require sticknologic/snl-typed-js

The package will be automatically discovered by Laravel.

Usage

Basic Example

Using the :strings attribute:

<x-snl-type :strings="['Hello World!', 'Welcome to Laravel!', 'Enjoy typing animations!']" />

Using slot content (inner child):

<x-snl-type>
    <p>Hello World!</p>
    <p>Welcome to Laravel!</p>
    <p>Enjoy typing animations!</p>
</x-snl-type>

Advanced Example

With :strings attribute:

<x-snl-type 
    :strings="['First string', 'Second string', 'Third string']"
    :type-speed="50"
    :back-speed="30"
    :back-delay="1000"
    :start-delay="500"
    :loop="true"
    :shuffle="false"
    :show-cursor="true"
    :smart-backspace="true"
    font-size="2rem"
    color="#3490dc"
    cursor="_"
    class="text-center my-4"
/>

With slot content:

<x-snl-type 
    :type-speed="50"
    :back-speed="30"
    :back-delay="1000"
    :start-delay="500"
    :loop="true"
    :shuffle="false"
    :show-cursor="true"
    :smart-backspace="true"
    font-size="2rem"
    color="#3490dc"
    cursor="_"
>
    <p>First string</p>
    <p>Second string</p>
    <p>Third string</p>
</x-snl-type>

Available Options

Option	Type	Default	Description
`id`	string	auto-generated	Unique 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 div

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

Multiple Instances

You can use multiple typing animations on the same page:

<div class="hero">
    <h1>I am a 
        <x-snl-type 
            :strings="['Developer', 'Designer', 'Creator']"
            :loop="true"
            color="#e3342f"
        />
    </h1>
</div>

<div class="tagline">
    <x-snl-type 
        :strings="['Building amazing things...', 'One line of code at a time.']"
        :loop="false"
        :type-speed="40"
    />
</div>

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 (<p>, <div>, <h1>, etc.)
Text NOT enclosed in an element will not be rendered
Elements like <h1>, <h2>, etc. will render as normal text, not as headers
Use <span> inside the elements to style specific parts of the text

Example showing all cases:

<x-snl-type :loop="true">
    <p>First string - renders normally</p>
    <h1>This will be normal text, NOT a header</h1>
    <p>Text with <span style="color: red;">red color</span> styling</p>
    This text will NOT render because it's not enclosed in an element
    <div>You can also use div elements</div>
</x-snl-type>

Result: The typing animation will display:

"First string - renders normally"
"This will be normal text, NOT a header" (as plain text)
"Text with red color styling" (with "red color" in red)
"You can also use div elements"

The standalone text will be ignored completely.

Styling example:

<x-snl-type :loop="true">
    <p>Welcome to <strong>Laravel</strong></p>
    <p>Build <em>amazing</em> applications</p>
    <p>With <span style="color: red;">SNL Typed.js</span></p>
</x-snl-type>

Dynamic Content Example

<x-snl-type :type-speed="40" :loop="true">
    @foreach($features as $feature)
        <p>{{ $feature }}</p>
    @endforeach
</x-snl-type>

Custom Styling

<div style="text-align: center; padding: 2rem;">
    <x-snl-type 
        :strings="['Welcome!', 'Explore our features', 'Get started today']"
        font-size="3rem"
        color="linear-gradient(to right, #667eea 0%, #764ba2 100%)"
        :show-cursor="false"
    />
</div>

License

This package is open-sourced software licensed under the GPL-3.0 license.

Credits

Built with Typed.js
Maintained by SticknoLogic

Technical Details

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

For issues, questions, or contributions, please visit the GitHub repository.

sticknologic / snl-typed-js

Maintainers

Package info

Fund package maintenance!

Statistics

Security