✨ Reacthub PixiTweenJS ✨

A powerful library for creating stunning animated, time-controlled canvas elements in React using PixiJS, GSAP, and more

📖 Documentation • 🎮 Live Demo • 💬 Issues • 🤝 Contributing

🌟 Features

| Feature | Description | | :--------------------------: | --------------------------------------------------- | | 🎬 Timeline Control | Precise start/end time control for all elements | | ⚡ High Performance | WebGL-accelerated rendering with PixiJS | | 🎨 Rich Media Support | Images, Videos, Audio, GIFs, SVG, Lottie animations | | ✏️ Interactive Text | Advanced typography with custom styling & effects | | 🔄 GSAP Integration | Professional-grade animations & transitions | | 🎛️ Visual Transformation | Drag, rotate, scale with intuitive transformer | | 🎨 Color Correction | Temperature, HSL, blur, vignette & more filters | | 🎭 Particle Effects | Build stunning visual effects | | 🔊 Audio Visualization | Real-time waveform rendering | | 📱 Responsive | Works seamlessly across devices | | 🔧 TypeScript | Full type safety & IntelliSense | | 🎯 Composable | Modular components for flexibility |

🚀 Quick Start

Installation

npm install reacthub-pixitweenjs

or

yarn add reacthub-pixitweenjs

Required Dependencies

Make sure to install these peer dependencies:

npm install \
  @pixi/gif@^2.1.0 \
  @pixi/react@~7.1.0 \
  @pixi/sound@^5.2.1 \
  pixi-filters@^5.2.1 \
  pixi-svg@^3.2.0 \
  pixi.js@^7.2.3 \
  [email protected] \
  howler@^2.2.3 \
  lottie-web@^5.10.2 \
  react-custom-events@^1.1.1 \
  react@^18.2.0 \
  react-dom@^18.2.0

Basic Example

import React from "react";
import { GsapPixieContextProvider } from "reacthub-pixitweenjs";
import { PixiStage } from "reacthub-pixitweenjs";
import { PixiSequence } from "reacthub-pixitweenjs";
import { PixiImageSprite } from "reacthub-pixitweenjs";

function MyAnimatedScene() {
  return (
    <GsapPixieContextProvider>
      <PixiStage
        width={1920}
        height={1080}
        options={{ backgroundColor: 0x2d2e3c }}
      >
        <PixiSequence startAt={0} endAt={10}>
          <PixiImageSprite
            uniqueId="hero-image"
            src="https://example.com/image.jpg"
            transformation={{
              x: 960,
              y: 540,
              width: 800,
              height: 600,
              anchor: 0.5,
              alpha: 1,
            }}
            startAt={0}
            endAt={10}
          />
        </PixiSequence>
      </PixiStage>
    </GsapPixieContextProvider>
  );
}

🎯 Core Components

🖼️ PixiImageSprite

Display images with advanced transformations and filters.

<PixiImageSprite
  src="path/to/image.jpg"
  transformation={{
    x: 100,
    y: 100,
    width: 400,
    height: 300,
    anchor: 0.5,
    rotation: 0,
    alpha: 1,
    scale: 1,
    colorCorrection: {
      temperature: 6500,
      contrast: 1,
      saturation: 1,
      blurRadius: 0,
    },
  }}
  startAt={0}
  endAt={5}
/>

🎬 PixiVideoSprite

Seamlessly integrate video with GSAP timeline synchronization.

<PixiVideoSprite
  src="path/to/video.mp4"
  transformation={{ x: 0, y: 0, width: 1920, height: 1080, anchor: 0 }}
  startAt={0}
  endAt={30}
/>

🎵 PixiAudioSprite

Audio playback with real-time visualization support.

<PixiAudioSprite
  src="path/to/audio.mp3"
  startAt={0}
  endAt={20}
  showWaveform={true}
/>

✏️ PixiTextSprite

Rich typography with custom fonts, colors, and effects.

<PixiTextSprite
  text="Hello, World!"
  transformation={{
    x: 500,
    y: 300,
    width: 400,
    height: 100,
    anchor: 0.5,
    fontSize: 48,
    fontFamily: "Arial",
    fill: 0xffffff,
    stroke: 0x000000,
    strokeThickness: 2,
  }}
  startAt={0}
  endAt={10}
/>

🎨 PixiSVGSprite

Vector graphics with full transformation support.

<PixiSVGSprite
  svgPath="M10,10 L100,10 L100,100 Z"
  fill={0xff5733}
  transformation={{ x: 200, y: 200, width: 100, height: 100, anchor: 0.5 }}
  startAt={0}
  endAt={10}
/>

🎪 PixiGifSprite & PixiLottieSprite

Animated GIFs and Lottie animations.

<PixiGifSprite
  src="animation.gif"
  transformation={{ x: 400, y: 400, width: 200, height: 200, anchor: 0.5 }}
  startAt={0}
  endAt={15}
/>

<PixiLottieSprite
  src="animation.json"
  transformation={{ x: 600, y: 400, width: 300, height: 300, anchor: 0.5 }}
  startAt={0}
  endAt={10}
/>

🔄 PixiSequence

Time-based composition and sequencing.

<PixiSequence startAt={0} endAt={30}>
  <PixiImageSprite ... />
  <PixiTextSprite ... />
  <PixiVideoSprite ... />
</PixiSequence>

🎛️ PixiTransformer

Interactive element manipulation with visual handles.

<PixiTransformer
  pixiTransformerRef={transformerRef}
  imageRef={imageRef}
  transformCommit={handleTransform}
  transformChange={handleChange}
/>

🎨 Advanced Features

🎞️ Timeline Composition

Create complex animations with precise timing:

<PixiSequenceWrapper startAt={0} endAt={30}>
  {/* Intro Sequence */}
  <PixiSequence startAt={0} endAt={5}>
    <PixiImageSprite startAt={0} endAt={5} ... />
  </PixiSequence>

  {/* Main Content */}
  <PixiSequence startAt={5} endAt={25}>
    <PixiVideoSprite startAt={5} endAt={25} ... />
    <PixiTextSprite startAt={10} endAt={20} ... />
  </PixiSequence>

  {/* Outro Sequence */}
  <PixiSequence startAt={25} endAt={30}>
    <PixiImageSprite startAt={25} endAt={30} ... />
  </PixiSequence>
</PixiSequenceWrapper>

🎨 Color Correction & Effects

Professional-grade image manipulation:

transformation={{
  colorCorrection: {
    temperature: 6500,    // White balance
    contrast: 1.2,        // Contrast adjustment
    saturation: 1.5,      // Color saturation
    exposure: 0,          // Brightness exposure
    hue: 0,              // Hue shift
    blurRadius: 0,       // Gaussian blur
    sharpness: 1,        // Edge sharpness
    vignette: 0          // Vignette effect
  },
  effect: {
    // Add particle effects, glows, etc.
  }
}}

🔄 GSAP Animation Integration

Leverage the full power of GSAP:

const { tl } = useContext(GsapPixieContext);

// Access the master timeline
tl.to(spriteRef, {
  x: 1000,
  y: 500,
  rotation: 360,
  duration: 5,
});

📚 Documentation & Resources

• 📖 Complete Documentation - Interactive Storybook docs
• 🎮 Live Playground - Try it online
• 💡 Installation Guide
• 🎬 Examples

🤝 Contributing

We welcome contributions! Please read our Contributing Guide before submitting PRs.

📄 License

This library is licensed under the Apache License 2.0 with additional terms. See LICENSE.md for complete terms.

📋 Quick Reference: Apache 2.0 is an open-source license that allows commercial use, modification, distribution, patent use, private use, and sublicensing. See the full license for all terms and additional restrictions.

What You Can Do

✅ Permitted:

• ✅ Commercial use in any project
• ✅ Modify and adapt the code
• ✅ Distribute and sublicense
• ✅ Private and internal use
• ✅ Patent grant included
• ✅ Place warranty

❌ Additional Restrictions:

• ❌ Must include copyright notice
• ❌ Cannot remove attribution
• ❌ Must include license file
• ❌ Commercial deployments should notify author

Commercial Use

Apache 2.0 allows commercial use. However, for large-scale enterprise deployments or white-label products, we recommend contacting [email protected] to discuss licensing options and potential support arrangements.

🌟 Inspired By

• editly - Declarative video API
• remotion - Create videos with React

📊 Stats

Made with ❤️ in 🇦🇺 Australia

Built for developers who create beautiful, interactive experiences

⬆ Back to Top