Pardon Dance

A lightweight JavaScript utility for generating stylized video animations, inspired by the popular "Pardon Dance" effect. Easily integrate engaging visual elements into your web applications and Node.js projects.

Installation

Install the package using npm: bash npm install pardon-dance

Usage Examples

Here are a few examples demonstrating how to use pardon-dance in different scenarios:

1. Basic Text Animation: javascript const pardonDance = require('pardon-dance');

const animation = pardonDance.createAnimation({ text: "Hello, World!", font: "Arial", fontSize: 48, color: "white", backgroundColor: "black" });

// 'animation' now contains the data for the animated video. // You can then use this data to render the animation to a canvas or save it as a video file. // (Implementation details for rendering/saving depend on your environment.) console.log(animation); // Output: The data representing the animation

2. Customizing the Animation: javascript const pardonDance = require('pardon-dance');

const customAnimation = pardonDance.createAnimation({ text: "Important Announcement!", font: "Verdana", fontSize: 60, color: "#FFD700", // Gold color backgroundColor: "#4682B4", // Steel Blue color duration: 5, // Animation duration in seconds rotationSpeed: 0.1, // Rotation speed easing: 'easeInOutQuad' // Easing function for smooth transitions });

// Use customAnimation to render or save the video. console.log(customAnimation);

3. Server-Side Video Generation (Node.js):

This example outlines the concept; actual video encoding requires additional libraries like FFmpeg. javascript const pardonDance = require('pardon-dance'); //Requires a library like fluent-ffmpeg to convert frames to video //const ffmpeg = require('fluent-ffmpeg');

const animationData = pardonDance.createAnimation({ text: "Server-Generated Video", font: "Times New Roman", fontSize: 36, color: "red", backgroundColor: "transparent", duration: 3 });

// Hypothetical function to convert animationData frames to a video file. // This would involve iterating through frames, drawing them on a canvas, // and then using a library like fluent-ffmpeg to encode the frames into a video. //convertToVideo(animationData, 'output.mp4') // .then(() => console.log('Video generated successfully!')) // .catch(err => console.error('Error generating video:', err)); console.log(animationData);

4. Using with a Canvas Element in a Browser: html

const animation = pardonDance.createAnimation({
  text: "Canvas Animation!",
  font: "Helvetica",
  fontSize: 32,
  color: "blue",
  backgroundColor: "lightgray",
  duration: 2
});

// Implement the animation loop to draw frames onto the canvas.
// This requires iterating through the animation data and drawing each frame.
// (Details depend on the specific structure of the animation data returned by pardonDance)
console.log(animation);

API Summary

• createAnimation(options): Generates animation data based on the provided options.

  • options: An object containing the following properties:
    • text (string, required): The text to display in the animation.
    • font (string, optional, default: "Arial"): The font family to use.
    • fontSize (number, optional, default: 24): The font size in pixels.
    • color (string, optional, default: "black"): The text color (e.g., "white", "#00FF00").
    • backgroundColor (string, optional, default: "white"): The background color.
    • duration (number, optional, default: 3): The animation duration in seconds.
    • rotationSpeed (number, optional, default: 0.05): The rotation speed of the text.
    • easing (string, optional, default: 'linear'): The easing function to use for animations (e.g., 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad').

License

MIT

This package is part of the pardon-dance ecosystem. For advanced features and enterprise-grade tools, visit: https://supermaker.ai/video/blog/unlocking-the-magic-of-pardon-dance-the-viral-video-effect-taking-over-social-media/