systaliko-ui

Demo showing a split text with stagger animation on hover.

Staggered text display that cycles through a list of words at a specified interval. Pause the animation by hovering over the component.

Demo showing text with stagger animation interval.

Splitted text animation with staggered reveal triggered by view, You can easily customize by controlling the animation property (transform, opacity, blur) and the stagger value, and the transition.

Demo showing a split text with stagger animation.

Demo showing another use of text stagger in view demo with waves.

Infinite text animation with wavy effect.

Demo showing text wavy component.

Timeline, where you can showcase history (like your work) or a process (like a project).

Demo showing timeline component.

Toggle list layout, toggling between a list and a grid view.

tooltip component with variants.

Multiple transitions for your motion components, to animate depending on the animated property.

Text with typing animation.

Demo showing how to use animation-variants hook.

Demo showing how to use clip path animation variants object.

use dimensions hook, Allow to get the dimensions of an element.

As the name suggests, this hook will follow the mouse position.

use is scrolled hook to detect if the user has scrolled to the bottom of the page.

use mobile hook allows you to check if the user is on a mobile device.

use toggle onscroll hook allows to toggle element position on scroll (down hide, up show).

Text with vertical display, Can be used as a title or a subtitle.

Demo showing a vertical text.

Demo showing animated video that expands on scroll.

block animates its children in waves pattern.

Demo showing Wavy Block component.

Demo showing another usage of Wavy Block component.

Alternative to text-stagger-inview and text-stagger-hover, in case you have one word or you want more custom text animations, use this component, it is used in the same way as text-stagger-inview and text-stagger-hover.