Introduction
WebFlux 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, WebFlux 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, WebFlux gives developers the freedom to create interfaces that don't just look beautiful—they respond, adapt, and come alive.
Vision
Mission
The mission of WebFlux is to make beautiful, interactive web experiences accessible to every developer by providing open-source, event-driven components that are effortless to use, customize, and extend.
We believe interfaces should do more than display content — they should respond, communicate, and delight through meaningful motion and interaction.
To make that happen, the project is committed to the following principles:
Open by Default
Every component is fully open source. Install it, modify it, learn from it, or simply copy and paste the code into your own project.
Modular by Nature
Install only what you need. Every component is independent, lightweight, and optimized to avoid unnecessary dependencies.
Event-Driven by Design
Components respond naturally to user interactions such as scrolling, pointer movement, clicks, focus, gestures, and viewport changes, creating interfaces that feel alive.
Built on Modern Web APIs
Designed around native browser capabilities and emerging web standards to deliver smooth interactions with minimal overhead.
Framework-Friendly
Built for React today, with a long-term vision of supporting other modern frameworks. WebFlux is designed with portability in mind, making it easier to expand beyond React as the project evolves.
Crafted for Delight
Every animation has a purpose. We prioritize fluid motion, thoughtful interactions, accessibility, and performance to create experiences users remember.
Approach
WebFlux is built on a simple belief: motion should be meaningful, performant, and effortless to use. Every component is designed to enhance user experience through purposeful interactions—not decorative animations.
Browser-Native First
Leverage modern browser APIs and web standards to deliver smooth, performant interactions with minimal overhead.
Event-Driven by Design
Components respond naturally to scrolling, pointer movement, clicks, focus, gestures, viewport changes, and other browser events.
Developer-First
Simple APIs, sensible defaults, clear documentation, and components that are easy to install, customize, understand, or copy directly into your project.
Performance
Lightweight, efficient, and optimized for real-world applications. Components are built to deliver fluid interactions without compromising responsiveness or adding unnecessary bloat.
Purposeful Motion
Animations should guide, communicate, or provide feedback. Every effect exists to improve the user experience.
This is not your typical component library, which means you won't find a set of generic buttons, inputs, or other common UI elements here.
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.
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.
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.
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: We use installation process as shadcn/ui.
Note: You can also use the raw code manually by copying and pasting it (from the component page) to your project
1
Intialize shadcn/ui
Run the init command to create a new project with shadcn/ui or add it to existing one.
npx shadcn@latest init2
Add Components
Run the add command to add a component to your project.
For example, the TextFade component
npx shadcn add https://webflux-rouge.vercel.app/r/TextFade.json3
Import Components
Import the component to your project.
1import TextFade from '@/TextFade';
2
3<TextFade
4 playOnScroll
5 text="This text responds directly to your scrolling"
6/>Built by victor_olaleykan. The source code is available on GITHUB