A fast, lightweight web component for creating spoiler text with particle effects.
spoilerjs is a dependency-free web component that lets you hide text with a spoiler warning. When a user clicks on the spoiler, the text is revealed with a configurable particle effect inspired by the Telegram app. It's performant, easy to use, and works in any modern browser.
- Lightweight and Performant: No dependencies, just pure Web Components.
- Easy to Use: Simply wrap your text in a
<spoiler-span>tag. - Customizable: Control the particle effects, colors, and more.
- Accessible: Designed with accessibility in mind.
- Framework Agnostic: Works with any framework or no framework at all.
After creating this, I discovered spoiled, another excellent spoiler text library also inspired by Telegram's spoiler effect. However, this project is still viable because spoiled is only for React, and uses the CSS Houdini API which may not be completely supported yet.
You can install spoilerjs from npm:
npm install spoilerjs-
Import the component:
import 'spoilerjs/spoiler-span';
-
Use it in your HTML:
<p> Be careful, here's a spoiler: <spoiler-span> It was a missing semicolon all along. </spoiler-span> </p>
That's it! You now have a working spoiler.
You can customize the appearance and behavior of the spoiler using attributes on the <spoiler-span> element.
| Attribute | Description | Default |
|---|---|---|
scale |
Scale factor for particle size. | 1 |
min-velocity |
Minimum velocity for particles (pixels per frame). | 0.01 |
max-velocity |
Maximum velocity for particles (pixels per frame). | 0.05 |
particle-lifetime |
Particle lifetime in frames (e.g., 60 frames = 1 second). | 120 |
density |
Target particle density (particles per 100 square pixels). | 8 |
reveal-duration |
Text fade-in duration in milliseconds when revealing. | 300 |
spawn-stop-delay |
Delay in milliseconds before stopping particle spawning after click. | 0 |
monitor-position |
Continuously monitor position for hover effects and transforms. | false |
fps |
Target frames per second for particle animation. Lower values improve performance on slower devices. | 60 |
<spoiler-span
density="15"
particle-lifetime="200"
reveal-duration="1000"
>
This spoiler has a higher particle density and a longer reveal time.
</spoiler-span>Contributions are welcome! Please see the CONTRIBUTING.md file for more information.
spoilerjs is licensed under the MIT License.
- The particle reveal effect is inspired by the spoiler effect in the Telegram messaging app.
- The documentation website was built with help from these amazing open-source projects: