Supercharge your projects with premium, beautiful love-themed
& celebratory canvas particle effects.
npm i @sarthak03dot/romantic-animations
Live Engine Tweaks
Density / Intensity0.12
Min Particle Size14px
Max Particle Size32px
Movement SpeedMedium
Palette Scheme
Glowing Soft Particles
☀️ PLAY
Active Effect:
Floating Hearts
Implementation Code
Loading...
📚 Interactive Developer Portal
Explore the full API specifications, package options, modular
frameworks, and integration tutorials in our interactive workspace.
/Introduction/Getting Started
Version 2.0.2
🚀 Getting Started
Install the lightweight, zero-dependency library using your
favorite package manager to get fully compiled UMD and
tree-shakable ES modules.
1. Package Installation
npm / node package manager
npm install @sarthak03dot/romantic-animations
pnpm / performant npm
pnpm add @sarthak03dot/romantic-animations
yarn / classic package manager
yarn add @sarthak03dot/romantic-animations
2. Quick Usage Example
Import the desired effect and trigger it in your application
entry point. Make sure you have a target absolute or fixed
container div prepared in your DOM:
import { startFloatingHearts } from'@sarthak03dot/romantic-animations';
// Trigger the effect on a fixed global canvasconst session = startFloatingHearts('my-canvas-container', {
count: 0.15,
minSize: 18,
maxSize: 32,
glow: true
});
✨ Library Features
Designed with professional modular mechanics and
ultra-performance render loops to guarantee high-fidelity
animations:
To support advanced Single Page Applications (React, Next.js),
the library assigns a unique cryptographic or timestamp
identifier to every launched animation container. This enables
perfect garbage cleanup on page transitions.
1. Stopping a Specific Session
Store the returned Session ID when launching an animation, then
pass it to the teardown method:
To safely manage active canvas nodes in React components,
perform canvas initialization inside React's `useEffect` hook
and return a cleanup teardown trigger to prevent double-render
leaks.
import { useEffect, useRef } from'react';
import { startFloatingHearts, stopAnimation } from'@sarthak03dot/romantic-animations';
export default function HeartOverlay() {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current) return;
// Initialize passing the container DOM Node referenceconst id = startFloatingHearts(containerRef.current, {
count: 0.1,
colors: ['#ff4d6d', '#c77dff']
});
// Clean up on component unmountreturn () => stopAnimation(id);
}, []);
return<divref={containerRef} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 999 }} />;
}
🛡️ Next.js SSR Hydration Guard
Next.js pre-renders components on the server where the global
`window` browser context is unavailable. Shield initialization
inside dynamic imports inside Client-Components.
'use client';
import { useEffect, useRef } from'react';
export default function NextHeartOverlay() {
const ref = useRef(null);
useEffect(() => {
let id = null;
// Safely load and initialize only in the browser contextimport('@sarthak03dot/romantic-animations').then((mod) => {
if (ref.current) {
id = mod.startFloatingHearts(ref.current, { count: 0.12 });
}
});
return () => {
if (id !== null) {
import('@sarthak03dot/romantic-animations').then(m => m.stopAnimation(id));
}
};
}, []);
return<divref={ref} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 999 }} />;
}
💗 startFloatingHearts
Customizable heart nodes rising with sinusoidal horizontal
drift.
startFloatingHearts(container, {
count: 0.15, // Particle spawn frequency
minSize: 15, // Min size in pixels
maxSize: 30, // Max size in pixels
colors: ['#ff4d6d', '#ff758f'], // Glowing color array
wobble: true, // Wobble side to side
glow: true// Shadow blur neon effect
});
💘 startHeartTrail
Floating heart trails that track touch moves or mouse cursor
coordinates.
