spoilerjs

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.

Installation

npm install spoilerjs

Quick Start

import 'spoilerjs/spoiler-span';

<p>
    Be careful, here's a spoiler:
    <spoiler-span>
        Snape kills Dumbledore.
    </spoiler-span>
</p>

Customization

| 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. | 500 | | spawn-stop-delay | Delay in milliseconds before stopping particle spawning after click. | 0 | | monitor-position | Continuously monitor position for hover effects and transforms. | false |

Example

<spoiler-span
    density="15"
    particle-lifetime="200"
    reveal-duration="1000"
>
    This spoiler has a higher particle density and a longer reveal time.
</spoiler-span>

Documentation

For full documentation, examples, and demos, visit: https://spoilerjs.sh4jid.me

License

MIT