Interactive components library for Webflow - React Showcase
npm install flowbitz
> Production-ready motion components for Webflow. Drop in a script, add a few attributes, and ship premium animations in minutes.
---
---
wb-* attributes inside Webflow---
shimmer-button, hover-zoom---
split-text | ✅ | Character/word/line splits with stagger control |gradient-text | ✅ | Animated gradients + optional border |text-type | ✅ | Typewriter effect with cursor states |blur-text | ✅ | Blur-to-clear entrances |shiny-text | ❌ | CSS shimmer sweep |count-up | ✅ | Number animations with separators |decrypted-text | ✅ | Matrix-style decoding |scramble-text | ✅ | Character scramble with hover retrigger |variable-proximity | ✅ | Mouse-driven variable font control |rotating-text | ✅ | Rotating phrases with pause/resume API |text-pressure | ✅ | Variable font modulation (weight/width/italic) |shuffle | ✅ | Sliding character shuffle |tooltip-text | ❌ | Hover tooltips (CSS only) |roll-text | ✅ | Vertical rolling text reveal |gradient-button | ❌ | Animated gradient background |ripple-button | ❌ | Material-style click ripple |pulse-button | ❌ | Attention pulse |shimmer-button | ❌ | Shimmer effect with customizable direction and color |magnetic-button | ✅ | Cursor-follow magnetism |smart-animate | ✅ | Scroll-driven reveal engine |3d-card-hover | ❌ | CSS perspective tilt |outline-gradient | ❌ | Animated gradient outlines |image-trail | ✅ | Mouse-following image trails (8 variants) |hover-zoom | ❌ | Zoom effect with parallax movement on hover |> Components marked ❌ are CSS-only and ship without GSAP for minimal bundles.
---
html
Create Amazing Websites with Powerful Animations
`$3
bash
npm install flowbitz
`javascript
import FlowBitz from 'flowbitz';await FlowBitz.init({
components: ['splitText', 'magneticButton'],
debug: false,
});
`---
Usage Examples
$3
html
`$3
html
wb-variant="6"
wb-images='["portrait1.webp","portrait2.webp","portrait3.webp"]'
style="height: 360px; cursor: pointer;">
$3
javascript
const countUp = FlowBitz.getComponent('countUp');
const el = document.querySelector('[wb-component="count-up"]');countUp.updateConfig(el, {
to: 1500,
duration: 2.4,
separator: ',',
});
countUp.startCountUp(el);
`---
Bundles & CDN Options
- — newest stable build
- @2.4.4 — pinned release
- @beta — beta channel`html
`| Bundle | v1 | v2.4 | Improvement |
|--------|----|------|-------------|
| UMD (gzipped) | 300 KB | 85 KB | −72% |
| ES entry | 300 KB | 15 KB + lazy chunks | −95% |
| npm install | 828 KB | 319 KB | −61% |
---
Local Development
$3
- Node.js 16+
- npm 8+ (or pnpm/yarn equivalent)$3
bash
git clone https://github.com/Slabpixel/FlowBitz.git
cd FlowBitz
npm install
`$3
| Command | Purpose |
|---------|---------|
| | Start Vite dev server (showcase app) |
| npm run build:library | Build distributable library bundles |
| npm run build:app | Build marketing/showcase site |
| npm run build:all | Build library + app together |
| npm run build:beta | Generate beta package artifacts |
| npm run preview | Preview production output |Project layout:
`
src/
├── app/ # React showcase
└── library/ # Core FlowBitz code
├── components/
├── core/
├── data/
└── utils/
Deployments run on Vercel (
) with immutable, versioned CDN paths like flowbitz.dev/v2.4.3/.---
Contributing
We love community contributions—bug fixes, docs, and new components all welcome.1. Fork the repo and create a feature branch
2. Implement your change and run
npm run build:library
3. Update documentation / metadata as needed
4. Open a PR describing the change, usage, and testing stepsAdding a component? Remember to:
- Implement it in
- Register it inside
- Document attributes in ---
---
Made with ❤️ for creative Webflow builders.