https://github.com/theoddysey/nextjs-confetti-effect
NextJs Confetti Effect App
https://github.com/theoddysey/nextjs-confetti-effect
confetti nextjs react tailwindcss typescript
Last synced: 4 months ago
JSON representation
NextJs Confetti Effect App
- Host: GitHub
- URL: https://github.com/theoddysey/nextjs-confetti-effect
- Owner: TheODDYSEY
- Created: 2024-03-21T15:47:11.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-22T07:28:49.000Z (over 1 year ago)
- Last Synced: 2025-01-31T08:43:29.731Z (9 months ago)
- Topics: confetti, nextjs, react, tailwindcss, typescript
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Confetti Button Component**
This React component creates a button that, when clicked, activates a confetti effect. It utilizes CSS animations and dynamic DOM manipulation to generate colorful confetti shapes that fall from the top of the screen to the bottom.
### Usage
1. Install dependencies:
- React
- Next.js
- Tailwind CSS
2. Import the `ConfettiButton` component into your application.
3. Place the `ConfettiButton` component within your desired page or component to enable the confetti effect.
### Example
```jsx
// Import the ConfettiButton component
import ConfettiButton from '@/components/confetti-button';
// Create a page or component
export default function HomePage() {
return (
{/* Add the ConfettiButton component */}
);
}
```
### Dependencies
- React: "^17.0.2"
- Next.js: "^12.0.7"
- Tailwind CSS: "^3.0.5"
### Components
#### `ConfettiButton`
This component creates a button that, when clicked, activates a confetti effect.
- Props:
- None
### CSS Styles
The component utilizes Tailwind CSS for styling, including global styles defined in `globals.css` and custom styles for the confetti effect.
### Implementation Details
- The confetti effect is triggered when the button is clicked.
- Confetti shapes (squares and triangles) are dynamically generated and animated using CSS.
- Each confetti element is positioned randomly within the viewport and falls from top to bottom.
- Confetti elements are removed from the DOM after a set duration (4 seconds).