Web Components API
Framework-agnostic web component with Telegram-inspired particle animations. Drop it into React, Vue, Svelte, or vanilla JavaScript in seconds.
See it in action
Here are a few example uses. Click any spoiler to reveal the content.
Features
Built for developers who value simplicity and performance
🌸
Looks Pretty
Beautiful particle effects that enhance your UI without overwhelming it. Subtle yet engaging.
🎯
Zero Config
Works out of the box. Just import and use. Sensible defaults with full customization when you need it.
🔌
Framework Agnostic
Built on Web Components standard. Works seamlessly with React, Vue, Svelte, Angular, or vanilla JS.
🎨
Customizable
Control particle density, velocity, lifetime, and reveal animations through simple HTML attributes.
📱
Mobile Optimized
Touch-friendly interactions with responsive particle scaling. Perfect on phones, tablets, and desktops.
🌙
Theme Aware
Automatically adapts particles to match your text color. Works beautifully in light and dark themes.
Quick Start
Get up and running in under 60 seconds
📦
NPM
For modern build tools
🔗
CDN
For quick usage without installation
<script
type="module"
src="https://unpkg.com/spoilerjs/dist/components/spoiler-span.js">
</script>Examples
import 'spoilerjs/spoiler-span';
export default function App() {
return (
<div>
<h1>Spoiler Alert!</h1>
<p>
The truth is <spoiler-span>hidden</spoiler-span>
</p>
</div>
);
}Customization Attributes
scale number
Particle size multiplier
Default: 1
density number
Particles per 100px²
Default: 8
min-velocity number
Min particle speed (px/frame)
Default: 0.01
max-velocity number
Max particle speed (px/frame)
Default: 0.05
particle-lifetime number
Duration in frames
Default: 120
reveal-duration number
Fade-in time (ms)
Default: 300
fps number
Target frames per second
Default: 60
monitor-position boolean
Enable RAF loop for tracking hover/transform effects. Better if you keep it disabled unless necessary.
Default: false