@systaliko-ui

Animated menu, with orchestrated children animation, fully customizable.

Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view.

Transforming Shadcn navigation menu into a full screen menu.

Globe map with optional map pins.

Bento Grid, layout with multiple variants and displays.

Responsive Header, with a logo and navigation links, supporting both desktop and mobile layouts, and toggles on scroll.

Create your own image player GIF/video, with image player component.

Shader component with two variants for gradient and hurricane both can be configured.

Display the active image and activate the next image with hovering the text indicator.

Simillar to IG story, Story is a component that allows you to display a collection of components in a single view.

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

Card component with variants.

Interactive card component with open curtain to see content on hover gesture.

An interactive card component that flips on hover with smooth 3D transitions.

Animated card with gesture animations, Reveals hidden content and scale main image on hover.

Card Testimonial, with rating, block quote, and author's informations.

Stack of cards to showcase a related set of element, like your services, your work, features, process of work, timeline, etc.

Stack of cards rotated by a defined index value to rotate in sequence, it show one card at a time depending on the scroll position.

Checkbox field with label.

Turn your cursor into any element your want, text, image, video, or a shape.

Pulse effect for attracting user attention.

Stars rating component with customizable color, depending on average rating.

reveal mask animation effect.

Spotlight list, when hovering an item it will highlight it by decreasing the visiblity of the other items.

Demo showing animated menu component.

another demo showing animated menu component.

another demo showing animated menu component in full screen mode.

Demo showing stagger container component.

Demo showing another use case for container stagger with your motion components.

Demo showing Full screen navigation component.

Demo showing Globe component.

Grid Bento Demo with multiple variants.

Grid Bento Demo with multiple variants.

Demo showing another variant of grid bento component.

Demo showing Header component.

Demo showing how to use image player component.

Demo showing shader component.

Demo showing hurricane shader component.

Demo showing how to use slideshow component.

Demo showing how to use story component.

Demo showing timeline component.

Demo showing Card Curtain Reveal Component.

Demo showing Flip Card Component.

Demo showing Card Hover Reveal Component.

Demo showing another usecase of Card Hover Reveal Component.

Demo showing Card Testimonial Component.

Demo showing Card Testimonial Component.

Demo of sticky cards stack.

Demo showing different usecase of Cards Stack component with smaller cards.

Demo showing Cards Stack Rotated component.

Demo showing different usecase of Cards Rotated Stack component.

Demo showing different usecase of Cards Stack component.

Demo showing usage of hover preview component.

Demo showing Input field component.

Demo showing Custom Cursor component.

Demo showing another usecase of Custom Cursor component.

Demo showing Rating stars component.

Demo showing Reveal mask component.

Demo showing Spotlight list component.

Demo showing Spotlight list component.

Demo showing custom pricing component for a design service.

Demo showing expandable product grid component.

Demo showing image zoom component.

Demo showing infinite scroll component.

Demo showing price component.

Demo showing pricing component.

Demo showing pricing-2 component.

Demo showing product carousel component.

Another Demo showing product carousel component.

Another Demo showing product carousel component with different thumbs.

Demo showing Quantity component.

Demo showing toggle layout view component.

Demo showing circle cards component.

Demo showing distributed cards component.

Another Demo showing distributed cards component.

Demo showing parallax component.

Demo showing scroll-animation-combo component.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Demo showing how to use scroll animations.

Demo showing how to use scroll rotate animations.

Demo showing how to use scroll rotate animations.

Demo showing how to use scroll rotate animations.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Demo showing scroll-autoplay component.

Demo scroll animations component.

Demo showing how to use scroll x carousel component.

another Demo showing how to use scroll x carousel component in a reversed.

Demo showing team component.

Demo showing Wavy Block component.

Demo showing another usage of Wavy Block component.

Demo showing Sliding number component.

Demo showing Text scroll read component.

Demo showing a split text with stagger animation on hover.

Demo showing text with stagger animation interval.

Demo showing a split text with stagger animation.

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

Demo showing a vertical text.

Demo showing text wavy component.

Demo showing how to use animation-variants hook.

Demo showing how to use set-stagger-direction utility.

Flexible custom pricing component with with set of tools that allow to update the price depending on quantity unit and if or not is checked.

expandable grid for previewing clicked item.

zoom in and out with detect touch event.

infinite scroll container instead of pagination, for large lists and fetching data.

Flexible price component with customizable features and options to display the amount and currency.

Flexible pricing component with customizable features and options.

Showcase your products with preview image for each product and display your different product colors.

Quantity config for ecommerce products.

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

circle cards, animated on scroll with circle movement.

Distributed cards, same as soliter, starts all at one position then animates to its position.

Parallax block, creates a parallax effect.

Collection of scroll triggered animations, Triggering the animation by scroll event.

Collection of scroll rotation animations, Triggering the animation by scroll event.

Displaying different content depending on order and scroll position.

Scroll carousel on x axis, with optional progress indicator.

block animates its children in waves pattern.

avatar component with variants.

Badge component with variants.

Button component with variants.

Dialog component.

drawer component.

empty component.

field component.

input component with variants.

label component.

avatar component with variants.

Scroll Area component.

Select component with variants.

slider component with variants.

spinner component with variants.

switch component with variants.

Number value with splitted animation.

Flipped text animation, flips the text

Text component allows you to read the text by scrolling.

Splitted text animation with staggered effect triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, b…

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

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

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

Infinite text animation with wavy effect.

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…

animation variants, for your motion components, allows to animate component with transforms, opacity, and blur.

Custom pricing utils types and reducer store.

stagger direction, Allow to animate in orchestrated order depending on the order, can animate from the start item, middle item, last item.

split text utility function, allows to split text into characters, words, returns (characters, words, characterCount, wordCount).

Svg globe path.

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

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).