Framework-agnostic web component with Telegram-inspired particle animations. Drop it into React, Vue, Svelte, or vanilla JavaScript in seconds.
import 'spoilerjs/spoiler-span';
export default function App() {
return (
<h1>
Beautiful spoiler effects
</h1>
);
}Here are a few example uses. Click any spoiler to reveal the content.
Supergiant Games • 2025 • PC
A stunning sequel that expands on everything that made the original great. Playing as
Melinoë,
Authenticate your API requests using Bearer tokens. Include your API key in the Authorization header for all requests.
curl -X GET "https://api.example.com/v1/data" \
-H "Authorization: Bearer SECRET_KEY "Built for developers who value simplicity and performance
Beautiful particle effects that enhance your UI without overwhelming it. Subtle yet engaging.
Works out of the box. Just import and use. Sensible defaults with full customization when you need it.
Built on Web Components standard. Works seamlessly with React, Vue, Svelte, Angular, or vanilla JS.
Control particle density, velocity, lifetime, and reveal animations through simple HTML attributes.
Touch-friendly interactions with responsive particle scaling. Perfect on phones, tablets, and desktops.
Automatically adapts particles to match your text color. Works beautifully in light and dark themes.
Get up and running in under 60 seconds
For modern build tools
npm install spoilerjsFor quick usage without installation
<script
type="module"
src="https://unpkg.com/spoilerjs/dist/components/spoiler-span.js">
</script>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>
);
}<script setup>
import 'spoilerjs/spoiler-span';
</script>
<template>
<div>
<h1>Spoiler Alert!</h1>
<p>
The truth is <spoiler-span>hidden</spoiler-span>
</p>
</div>
</template><script>
import 'spoilerjs/spoiler-span';
</script>
<div>
<h1>Spoiler Alert!</h1>
<p>
The truth is <spoiler-span>hidden</spoiler-span>
</p>
</div><script type="module" src="https://unpkg.com/spoilerjs/dist/components/spoiler-span.js"></script>
<div>
<h1>Spoiler Alert!</h1>
<p>
The truth is <spoiler-span>hidden</spoiler-span>
</p>
</div>Particle size multiplier
Default: 1
Particles per 100px²
Default: 8
Min particle speed (px/frame)
Default: 0.01
Max particle speed (px/frame)
Default: 0.05
Duration in frames (60fps)
Default: 120
Fade-in time (ms)
Default: 500
Enable RAF loop for tracking hover/transform effects. Better if you keep it disabled unless necessary.
Default: false