k-celebrate-slogan 🎉

A festive, animated slogan component for React applications.
Features spinning pinwheels and customizable text/colors.
Remember, everyone is worthy of celebration, for no reason at all!

🎨 Try the Live Demo →

Preview

Installation

npm i k-celebrate-slogan

Note: react, react-dom, and framer-motion are peer dependencies.
If your project does not have them installed yet:

npm i k-celebrate-slogan framer-motion react react-dom

Usage

import { KCelebrateSlogan } from 'k-celebrate-slogan';

function App() {
    return (
        <div className="flex items-center justify-center min-h-screen bg-gray-50">
            <KCelebrateSlogan />
        </div>
    );
}

Props

Prop	Type	Default	Description
text1	string	"축하합니다"	The top small text.
text2	string	"김준호"	The main large text.
text3	string	"아무 이유 없음"	The bottom tagline.
text1Color	string	"#1c89bf"	Color for text1.
text2Color	string	"#222222"	Color for text2.
text3Color	string	"#111827"	Color for text3.
text2StrokeColor	string	"#222222"	Stroke color for text2.
text2StrokeWidth	string	"2.5px"	Stroke width for text2.
pinwheelColors	string[]	undefined	Custom colors for the pinwheel blades. Pass 12 colors or fewer for interpolation.
animate	boolean	true	Whether to animate the entrance and spin.
scale	number	1	Overall scale factor.
emblemScale	number	0.75	Scale factor for the emblem sections.

Themes

Default Theme

The default pinwheel colors transition from warm colors (red/orange) to cool colors (sky blue).

Custom Theme Example: Pastel Dream 🌸

You can customize the pinwheelColors prop to match your brand or theme. We also export preset themes!

import { KCelebrateSlogan, PASTEL_THEME } from 'k-celebrate-slogan';

<KCelebrateSlogan
    text1="Happy Birthday"
    text2="Dear Friend"
    text3="Best Wishes"
    text1Color="#FF6B6B"
    text2Color="#4ECDC4"
    pinwheelColors={PASTEL_THEME}
/>;

Or provide your own array:

const myColors = ['#FF0000', '#00FF00', ...]; // up to 12 colors
<KCelebrateSlogan pinwheelColors={myColors} />

Use as a GitHub Profile Badge

Generate your own badge at k-celebrate-slogan.vercel.app and paste the result!

Markdown:

[![k-celebrate-slogan](https://k-celebrate-slogan.vercel.app/api?text1=%EC%B6%95%ED%95%98%ED%95%A9%EB%8B%88%EB%8B%A4&text2=%EA%B9%80%EC%A4%80%ED%98%B8&text3=%EC%95%84%EB%AC%B4+%EC%9D%B4%EC%9C%A0+%EC%97%86%EC%9D%8C)](https://github.com/GHeeJeon/k-celebrate-slogan)

HTML:

<a href="https://github.com/GHeeJeon/k-celebrate-slogan">
    <img
        src="https://k-celebrate-slogan.vercel.app/api?text1=%EC%B6%95%ED%95%98%ED%95%A9%EB%8B%88%EB%8B%A4&text2=%EA%B9%80%EC%A4%80%ED%98%B8&text3=%EC%95%84%EB%AC%B4+%EC%9D%B4%EC%9C%A0+%EC%97%86%EC%9D%8C"
        alt="k-celebrate-slogan"
    />
</a>

Inspiration

This project was inspired by a famous Korean meme.

A celebratory slogan photographed in Korea.
It says "Congratulations, Jun-ho Kim, for no reason at all." (축하합니다 김준호 아무 이유 없음)

License

MIT