@dominic_n/react-dominic-logo-animation

✨ Animated Dominic Logo Component

React component wrapping the complex Dominic logo animation built with Anime.js. It is fully responsive and safe for multiple instances on the same page.

📦 Installation

To use this component in your existing React project:

# Install the component from NPM
npm install @dominic_n/react-dominic-logo-animation

# Install the peer dependency, Anime.js
npm install animejs

💻 Usage

The component is exported as DominicLogo.

    
import DominicLogo from '@dominic_n/react-dominic-logo-animation'

function App() {
  return (
    // The logo will scale to the width of this container.
    <div style={{ maxWidth: '600px', margin: '50px auto', border: '1px solid #ddd' }}>
        <DominicLogo color="#333333" dotColor="#FF4136" />
    </div>
  );
}

⚙️ Props

| Prop Name | Type | Default Value | Description | | :--- | :--- | :--- | :--- | | color | string | #607b96 (or --primary-color) | Sets the stroke color of the letters (D, O, M, I, N, I, C). Accepts hex, RGB, or color names. | | dotColor | string | rgb(54, 196, 191) (or --secondary-color) | Sets the fill color of the bouncing dots. |

Note on Styling: If color and dotColor are not provided via props, the component will attempt to use the CSS variables --primary-color and --secondary-color from your global stylesheets before falling back to the hardcoded defaults.

🎨 Styling & Responsiveness

This component's full functionality and appearance depend on the included dominic-logo.css file.

    CSS Dependency: Ensure your build process is correctly loading the CSS file (this is handled automatically by the import inside the component in most modern React setups).

    Responsiveness: The component contains built-in logic (fitElementToParent) to automatically calculate its scale ratio and adjust its height to fit the current width of its immediate parent container.

🛠 Local Development & Building

For contributors or users who want to modify the source code:

## Local Setup (Assuming you have a test environment set up)
npm install
npm run dev

## Build (Compiles JSX into the distributable 'dist' folder)
npm run build