Introduction
Z-Flux is an open-source collection of beautifully crafted, event-driven web components designed to make interfaces feel alive. Every component is built to respond naturally to user interactions—from scrolling and cursor movement to clicks, gestures, and viewport changes—creating experiences that are both engaging and intuitive.
Unlike traditional UI libraries focused on standard interface elements, Z-Flux is dedicated to motion, interaction, and visual storytelling. Whether you're adding immersive text effects, seamless page transitions, interactive cursors, or dynamic content animations, every component is designed to elevate the way users experience your website.
Install what you need, customize it to fit your design system, or simply copy and paste the code into your own project. It's open source, framework-friendly, and built with modern browser capabilities, Z-Flux gives developers the freedom to create interfaces that don't just look beautiful—they respond, adapt, and come alive.
Vision
Components
Texts
Transform static text into engaging experiences with animations triggered by scroll, hover, clicks, typing, cursor movement, and more. From elegant reveals to dynamic effects, create content that captures attention and guides users naturally through your interface.
Transitions
Create seamless transitions between pages, layouts, sections, and UI states. Whether navigating between routes or revealing new content, these animations add continuity, improve user flow, and make interactions feel smooth and intentional. (upcoming...)
Sliders
Build interactive sliders and carousels with fluid motion, gesture support, autoplay, infinite looping, and customizable controls. Showcase images, testimonials, products, or content with animations that feel responsive across every device. (upcoming...)
Cursor
Enhance user interactions with custom animated cursors that respond to movement, clicks, hover states, scrolling, and interactive elements. Add personality and visual feedback without sacrificing performance or usability. (upcoming...)
More
This is just the beginning. We're continuously building new event-driven components, interactive effects, layouts, navigation patterns, and creative UI experiences to help developers craft more engaging websites with less effort.
Installation
How to install dependencies and structure your app.
Note: You can use the z-flux-react package, or use shadcn intallation process, or copy the raw code of any of the component you want to use. (Go with what works best for you.)
1
Install z-flux-react or Intialize shadcn/ui
Install the Z_Flux_React package
npm i z-flux-reactOr use shadcn
Run the init command to create a new project with shadcn/ui
npx shadcn@latest init2
Add Components (For shadcn)
Run the add command to include a component to your project (If you're using shadcn).
For example, the Z_Text component
npx shadcn add https://z-flux.vercel.app/r/Z_Text.json3
Import and use Components
Import and use the component to your project.
1import {Z_Text} from "z-flux-react"
2 or
3import Z_Text from '@/Z_Text';
4
5<Z_Text
6 trigger="onscroll"
7 text="This text responds directly to your scrolling"
8/>Built by Akinola Victor. The source code is available on GITHUB