BemoUI is a comprehensive React animation component library designed for building modern web applications with rich visual effects and interactive experiences. It combines powerful animation libraries like React Spring, Framer Motion, and GSAP with a clean, scalable architecture that supports multiple implementation variants.
- Multi-Version Support: Each component is available in 4 variants (JS+CSS, JS+Tailwind, TS+CSS, TS+Tailwind) to suit different project needs
- High-Performance Animations: Built with industry-standard libraries including React Spring, Framer Motion, GSAP, and Three.js
- Fully Customizable: Rich props and configuration options for every component, allowing complete customization
- Responsive Design: All components are optimized for different screen sizes and device types
- Complete TypeScript Support: Full type definitions for excellent development experience and type safety
- 3D Effects: Integrated Three.js support for creating stunning 3D interactive effects
- Production-Ready: Thoroughly tested and optimized for performance and reliability
# Using npm
npm install bemo-ui
# Using yarn
yarn add bemo-ui
# Using pnpm
pnpm add bemo-uiimport { AnimatedContent, Waves } from 'bemo-ui';
import 'bemo-ui/styles.css'; // Import styles (for CSS version)
function App() {
return (
<div>
<AnimatedContent>
<h1>Hello BemoUI!</h1>
</AnimatedContent>
<div style={{ height: '300px', position: 'relative' }}>
<Waves lineColor="#ffffff" />
</div>
</div>
);
}
export default App;BemoUI provides a diverse collection of animation components:
- BlurText - Blur effect animation
- GradientText - Gradient color animation
- LetterGlitch - Glitch effect animation
- ShinyText - Shiny/gloss effect
- SplitText - Text split animation
- AnimatedContent - Content reveal animation
- AnimatedList - List item animations
- FadeContent - Fade in/out effect
- SpotlightCard - Spotlight lens effect
- StarBorder - Star-shaped border effect
- Magnet - Magnetic attraction effect
- FlowingMenu - Flowing menu animation
- GridMotion - Grid motion background
- MatrixCode - Matrix rain effect
- Squares - Square pattern background
- Waves - Wave animation background
Full component documentation and live demos available on the official website.
- Node.js 16 or higher
- npm 7+ / yarn 1.22+ / pnpm 7+
# Clone the repository
git clone https://github.com/your-org/bemo-ui.git
cd bemo-ui
# Install dependencies
npm install
# or
yarn install
# or
pnpm install# Start development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Create a new component (generates all 4 variants)
npm run new:component ComponentName
# Delete a component
npm run delete:component ComponentName
# Synchronize component versions
npm run sync:component ComponentName [--source=variant]
# Run ESLint checks
npm run lintBemoUI provides automated scripts to scaffold new components:
npm run new:component MyComponentThis command automatically generates:
src/content/Components/MyComponent/MyComponent.jsx- JS+CSS variantsrc/content/Components/MyComponent/MyComponent.css- CSS stylessrc/tailwind/Components/MyComponent/MyComponent.jsx- JS+Tailwind variantsrc/ts-default/Components/MyComponent/MyComponent.tsx- TS+CSS variantsrc/ts-default/Components/MyComponent/MyComponent.css- TS CSS stylessrc/ts-tailwind/Components/MyComponent/MyComponent.tsx- TS+Tailwind variantsrc/demo/Components/MyComponentDemo.jsx- Component demo pagesrc/constants/code/Components/myComponentCode.js- Code examples for showcase
The sync:component script helps maintain consistency across all component variants:
# Sync from content version to all other variants
npm run sync:component ShinyText --source=content
# Sync from TypeScript version
npm run sync:component ShinyText --source=ts-defaultbemo-ui/
├── src/
│ ├── components/ # UI components (navigation, layout, etc.)
│ ├── content/Components/ # JS+CSS components
│ ├── tailwind/Components/ # JS+Tailwind components
│ ├── ts-default/Components/ # TS+CSS components
│ ├── ts-tailwind/Components/ # TS+Tailwind components
│ ├── demo/Components/ # Component demonstrations
│ ├── constants/ # Configuration constants
│ ├── hooks/ # Custom React hooks
│ ├── css/ # Global styles
│ └── utils/ # Utility functions
├── scripts/
│ ├── generateComponent.js # Component generator
│ ├── deleteComponent.js # Component remover
│ ├── syncComponent.js # Component synchronizer
│ └── ...
├── package.json
├── vite.config.js
└── README.md
All components follow a consistent design philosophy:
- Performance First: Optimized animations with minimal re-renders
- Accessibility: ARIA-compliant components with keyboard support
- Customization: Flexible props and CSS/Tailwind integration
- Consistency: Uniform naming conventions and API design
For detailed documentation and interactive component demos, visit:
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
BemoUI is built upon these excellent libraries: