animated-interactive-diagram

v1.0.0

Published

10 months ago

A React component library featuring an animated interactive diagram with connecting lines, dots, text labels, and icons

0High
0Medium
0Low

devdragon75

react animation diagram framer-motion interactive svg

Animated Interactive Diagram

A React component library featuring an animated interactive diagram with connecting lines, dots, text labels, and icons.

Features

Animated Lines: Smooth drawing animations with staggered timing
Interactive Dots: Scattered dots with spring animations
Text Labels: Animated text appearing with delays
Icons: Animated icons with hover effects
Loading Animation: Pulsing center dot with continuous animation
Responsive Design: Works across different screen sizes

Installation

For Development (Standalone)

npm install
npm run dev

For Use in Other React Projects

Build the library:

npm run build

Copy the dist folder to your React project's public directory or serve it from your project.
Install required dependencies in your React project:

npm install framer-motion react react-dom

Usage

Method 1: Direct Import (Recommended)

import React from 'react';
import AnimatedInteractiveDiagram from './path/to/dist/animated-interactive-diagram.es.js';

function App() {
  return (
    <div className="App">
      <AnimatedInteractiveDiagram />
    </div>
  );
}

export default App;

Method 2: UMD Build

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/framer-motion@12/dist/framer-motion.js"></script>
  <script src="./dist/animated-interactive-diagram.umd.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const { AnimatedInteractiveDiagram } = window.AnimatedInteractiveDiagram;
    ReactDOM.render(
      React.createElement(AnimatedInteractiveDiagram),
      document.getElementById('root')
    );
  </script>
</body>
</html>

Animation Timeline

The diagram animates automatically with the following sequence:

Lines Drawing (0.5s - 1.3s): Connecting lines draw with staggered delays
Dots Appearing (1.0s - 1.35s): Scattered dots animate in with spring effects
Text Labels (2.5s - 3.1s): Text labels fade in with delays
Icons (2.7s - 4.5s): Icons appear with hover effects
Loading Animation (4.5s+): Continuous pulsing effect on center dot

Customization

The component uses CSS custom properties for theming:

:root {
  --stroke-0: black;
  --fill-0: #D9D9D9;
  --fill-1: #DF5530;
  --fill-2: #E6795D;
}

Build Output

The build creates two formats:

ES Module (animated-interactive-diagram.es.js): For modern bundlers
UMD (animated-interactive-diagram.umd.js): For direct browser use

Dependencies

React 18+
React DOM 18+
Framer Motion 12+

Development

npm run dev    # Start development server
npm run build  # Build for production
npm run preview # Preview production build

License

MIT