# ๐ŸŽ‰ CelebrationFlip A beautiful animated flip text component for celebrating milestones with customizable text and hearts. Perfect for social media celebrations, milestone announcements, and achievement showcases.
[![npm version](https://badge.fury.io/js/celebration-flip.svg)](https://badge.fury.io/js/celebration-flip) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/celebration-flip)](https://bundlephobia.com/package/celebration-flip) [![Downloads](https://img.shields.io/npm/dm/celebration-flip)](https://www.npmjs.com/package/celebration-flip)
## โœจ Features - ๐ŸŽฌ **Smooth flip animations** with CSS transforms and 60fps performance - ๐ŸŽจ **Fully customizable** - Colors, text, duration, and styling - ๐Ÿ“ฑ **Responsive design** - Works perfectly on mobile, tablet, and desktop - โšก **Ultra lightweight** - Less than 5KB minified + gzipped - ๐Ÿ”ง **Zero configuration** - Works out of the box with sensible defaults - ๐ŸŒ **Framework agnostic** - React, Vue, Svelte, or vanilla HTML/CSS - โ™ฟ **Accessibility first** - Respects `prefers-reduced-motion` and screen readers - ๐ŸŽฏ **TypeScript ready** - Full type definitions included - ๐Ÿ“ฆ **Multiple formats** - ESM, CommonJS, and UMD builds - ๐ŸŽจ **Retro aesthetic** - Uses the beautiful "Sixtyfour" pixel font ## ๐Ÿ“ฆ Installation ```bash # npm npm install celebration-flip # yarn yarn add celebration-flip # pnpm pnpm add celebration-flip # bun bun add celebration-flip ``` Or use it directly from CDN (no installation required): ```html ``` ## ๐Ÿš€ Quick Start ### React Component ```jsx import { CelebrationFlip } from "celebration-flip"; import "celebration-flip/dist/styles.css"; function App() { return (
); } ``` ### Vanilla HTML/CSS ```html
4000 SUSCRIPTORES
โ™ฅโ™ฅโ™ฅโ™ฅ ยกGRACIAS! โ™ฅโ™ฅโ™ฅโ™ฅ
``` ## ๐Ÿ“– API Reference ### Props (React) | Prop | Type | Default | Description | | ---------------- | -------- | -------------- | ------------------------------------------------ | | `mainText` | `string` | **required** | Main text to display (e.g., "4000 SUSCRIPTORES") | | `secondaryText` | `string` | **required** | Secondary text to display (e.g., "ยกGRACIAS!") | | `primaryColor` | `string` | `"dodgerblue"` | Primary color for main text | | `secondaryColor` | `string` | `"hotpink"` | Secondary color for hearts and secondary text | | `duration` | `number` | `3` | Animation duration in seconds | | `className` | `string` | `""` | Custom CSS class name | ### CSS Custom Properties (Vanilla) | Property | Default | Description | | ------------ | ------------ | --------------------------------------------- | | `--clr-1` | `dodgerblue` | Primary color for main text | | `--clr-2` | `hotpink` | Secondary color for hearts and secondary text | | `--duration` | `3s` | Animation duration | ## ๐ŸŽจ Examples ### Different Milestones ```jsx // 1000 Followers // 1M Views // 10K Likes ``` ### Custom Styling ```jsx ``` ```css .my-custom-celebration { filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.5)); } ``` ## ๐ŸŽฏ Use Cases - ๐Ÿ“Š **Social Media Milestones** - Celebrate follower counts, likes, shares - ๐Ÿ† **Achievement Announcements** - App downloads, user registrations - ๐Ÿ’ฐ **Business Metrics** - Revenue goals, customer milestones - ๐ŸŽ“ **Educational Platforms** - Course completions, student enrollments - ๐ŸŽฎ **Gaming** - High scores, level completions - ๐Ÿ“ˆ **Analytics Dashboards** - KPI celebrations ## ๐ŸŒ Browser Support - โœ… Chrome 60+ - โœ… Firefox 55+ - โœ… Safari 12+ - โœ… Edge 79+ ## โ™ฟ Accessibility The component respects the `prefers-reduced-motion` media query. Users who have requested reduced motion will see a static version without animations. ## ๐Ÿค Contributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request ## ๐Ÿ“„ License MIT ยฉ [Formmy Team](https://github.com/formmy) ## ๐Ÿ”— Links - [GitHub Repository](https://github.com/blissito/celebration-flip) - [NPM Package](https://www.npmjs.com/package/celebration-flip) - [Report Issues](https://github.com/blissito/celebration-flip/issues) --- Made with โค๏ธ by the [Formmy](https://formmy.ai) team