ai-jiggle-video

A JavaScript library to programmatically add subtle, dynamic "jiggle" effects to video elements, enhancing visual appeal and user engagement. This package provides a simple and efficient way to breathe life into static video content.

Installation

Install the package using npm: bash npm install ai-jiggle-video

Usage Examples

Here are several examples of how to use ai-jiggle-video in your JavaScript projects.

Example 1: Basic Jiggle Effect

This example demonstrates the simplest way to apply a jiggle effect to a video element. javascript import { jiggleVideo } from 'ai-jiggle-video';

const videoElement = document.getElementById('myVideo');

// Apply a default jiggle effect to the video element jiggleVideo(videoElement);

Example 2: Customizing Jiggle Parameters

This example shows how to customize the jiggle effect by specifying parameters such as intensity and speed. javascript import { jiggleVideo } from 'ai-jiggle-video';

const videoElement = document.getElementById('myVideo');

// Apply a jiggle effect with custom intensity and speed jiggleVideo(videoElement, { intensity: 0.02, // Adjust the intensity of the jiggle (0.0 - 1.0) speed: 150, // Adjust the speed of the jiggle (milliseconds) });

Example 3: Applying Jiggle On Video Play

This example demonstrates how to trigger the jiggle effect when the video starts playing. javascript import { jiggleVideo } from 'ai-jiggle-video';

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('play', () => { jiggleVideo(videoElement, { intensity: 0.03, speed: 100, }); });

Example 4: Stopping the Jiggle Effect

This example shows how to stop the jiggle effect after a certain duration or based on a user action. javascript import { jiggleVideo, stopJiggle } from 'ai-jiggle-video';

const videoElement = document.getElementById('myVideo');

// Start the jiggle effect const jiggleInstance = jiggleVideo(videoElement, { intensity: 0.01, speed: 200, });

// Stop the jiggle effect after 5 seconds setTimeout(() => { stopJiggle(videoElement, jiggleInstance); }, 5000);

Example 5: Jiggling multiple videos

This example shows how to apply the jiggle effect to multiple videos on a page. javascript import { jiggleVideo } from 'ai-jiggle-video';

const videoElements = document.querySelectorAll('video');

videoElements.forEach(video => { jiggleVideo(video, { intensity: 0.02, speed: 120 }); });

API Summary

• jiggleVideo(videoElement: HTMLVideoElement, options?: JiggleOptions): JiggleInstance: Applies a jiggle effect to the specified video element. Returns a JiggleInstance which is needed to stop the effect.

  • videoElement: The HTMLVideoElement to apply the jiggle effect to.
  • options: (Optional) An object containing the following properties:
    • intensity: (Optional, default: 0.01) A number between 0.0 and 1.0 representing the intensity of the jiggle effect. Higher values result in more pronounced movement.
    • speed: (Optional, default: 100) A number representing the speed of the jiggle effect in milliseconds. Lower values result in faster movement.

• stopJiggle(videoElement: HTMLVideoElement, jiggleInstance: JiggleInstance): void: Stops the jiggle effect on the specified video element, using the JiggleInstance returned by jiggleVideo.

  • videoElement: The HTMLVideoElement on which the jiggle effect should be stopped.
  • jiggleInstance: The JiggleInstance returned by the jiggleVideo function when the jiggle effect was started.

License

MIT

This package is part of the ai-jiggle-video ecosystem. For advanced features and enterprise-grade tools, visit: https://supermaker.ai/video/ai-jiggle-video/