Guide
Text Engines
Z Text
76
FilmRoll
Overlay
Fade
FadeUp
FadeDown
FadeFromRight
FadeFromLeft
FadeBlur
FadeUpBlur
FadeDownBlur
FadeFromRightBlur
FadeFromLeftBlur
BendRight
BendLeft
BendFromBottom
BendFromTop
ScaleXY
CameraPush
CinematicFocus
DispersedFocus
PerspectiveFlipLeft
PerspectiveFlipRight
ElasticScale
GalaxySpin
RotateClockwise
RotateCounterClockwise
RotateSmallLeft
RotateSmallRight
RotateScaleIn
UpsideDown
FlapRotate
FlapLock
FlapRoll
FlapRoll2
FlapTwist
FlapTwist2
SpinIn
SpinOut
PrismRotate
FoldOpen
OrbitDrop
CinematicZoom
CinematicZoomBlur
CinematicZoom_5x
CinematicZoom_8x
CinematicZoom_20x
CinematicZoom_50x
DistortedZoom
EpicTitle
FilmFocus
JustAppear
LensZoom
FinalReveal
horizonRise
Camera_1996
AnamorphicReveal
SlashEntrance
CenterExpand
CenterShrink
AncientTimes
FlowTopLeft
FlowTopRight
FlowBottomLeft
FlowBottomRight
HorizontalSlit
VerticalSlit
IrisReveal
SpotlightLeft
SpotlightRight
HourglassReveal
WaveMask
ExpandingHexagon
StarBurstReveal
CinematicLetterbox
SoftMaskReveal
GlitchIn
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.
Built by Akinola Victor. The source code is available on GITHUB