2 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
spoilerjs is a web component for hiding spoiler text that reveals itself with a particle effect when clicked. Itβs easy to implement with no dependencies and works in any modern browser. You can customize the appearance and behavior of the spoiler using various attributes.
If you do, here's more
spoilerjs is a lightweight web component designed to create spoiler text with an engaging particle effect. Built without dependencies, it allows users to hide text until a click reveals it, accompanied by customizable particle animations reminiscent of those in the Telegram app. The component aims for high performance and ease of use, functioning seamlessly across modern browsers.
To implement spoilerjs, you simply wrap your spoiler text in a `<spoiler-span>` tag. Customization options include attributes for particle size, velocity, and density, as well as control over the text's fade-in duration. For example, you can set a higher particle density or extend the reveal duration for a more dramatic effect. The library also prioritizes accessibility and works with any framework or no framework at all, enhancing its versatility.
The article mentions another library, spoiled, which also draws inspiration from Telegram's effect but is limited to React and relies on the CSS Houdini API, which isn't fully supported everywhere yet. This makes spoilerjs a viable alternative for a wider audience. Installation is straightforward through npm, and the project encourages contributions, providing clear guidelines through a CONTRIBUTING.md file. The component is licensed under the MIT License, making it accessible for developers to use and modify.
Questions about this article
No questions yet.