Nightly Panic Munchies

    tsparticles-preset-fountain
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.4 • Public • Published

    banner

    tsParticles Fountain Preset

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles preset creating random positioned falling colored particles that break when hitting the ground.

    Slack Discord Telegram

    tsParticles Product Hunt

    Sample

    demo

    How to use it

    CDN / Vanilla JS / jQuery

    The first step is installing tsParticles following the instructions for vanilla javascript in the main project here

    Once installed you need one more script to be included in your page (or you can download that from jsDelivr:

    <script src="https://cdn.jsdelivr.net/npm/tsparticles-engine@2/tsparticles.engine.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-move-base@2/tsparticles.move.base.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-plugin-emitters@2/tsparticles.plugin.emitters.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-circle@2/tsparticles.shape.circle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-color@2/tsparticles.updater.color.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-opacity@2/tsparticles.updater.opacity.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-out-modes@2/tsparticles.updater.out-modes.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-size@2/tsparticles.updater.size.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fountain@2/tsparticles.preset.fountain.min.js"></script>

    This script MUST be placed after the tsParticles one.

    Bundle

    A bundled script can also be used, this will include every needed plugin needed by the preset.

    <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fountain@2/tsparticles.preset.fountain.bundle.min.js"></script>

    Usage

    Once the scripts are loaded you can set up tsParticles like this:

    (async () => {
      await loadFountainPreset(tsParticles); // this is required only if you are not using the bundle script
    
      await tsParticles.load("tsparticles", {
        preset: "fountain",
      });
    })();

    Customization

    Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

    tsParticles.load("tsparticles", {
      particles: {
        shape: {
          type: "square", // starting from v2, this require the square shape script
        },
      },
      preset: "fountain",
    });

    Like in the sample above, the circles will be replaced by squares.

    React.js / Preact / Inferno

    The syntax for React.js, Preact and Inferno is the same.

    This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

    import Particles from "react-particles";
    import type { Engine } from "tsparticles-engine";
    import { loadFountainPreset } from "tsparticles-preset-fountain";
    
    export class ParticlesContainer extends React.PureComponent<IProps> {
      // this customizes the component tsParticles installation
      async customInit(engine: Engine): Promise<void> {
        // this adds the preset to tsParticles, you can safely use the
        await loadFountainPreset(engine);
      }
    
      render() {
        const options = {
          preset: "fountain",
        };
    
        return <Particles options={options} init={this.customInit} />;
      }
    }

    Vue (2.x and 3.x)

    The syntax for Vue.js 2.x and 3.x is the same

    <Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
    const particlesOptions = {
      preset: "fountain",
    };
    
    async function particlesInit(engine: Engine): Promise<void> {
      await loadFountainPreset(engine);
    }

    Angular

    <ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
    const particlesOptions = {
      preset: "fountain",
    };
    
    async function particlesInit(engine: Engine): Promise<void> {
      await loadFountainPreset(engine);
    }

    Svelte

    
    <Particles
            id="tsparticles"
            options={particlesOptions}
            particlesInit={particlesInit}
    />
    
    let particlesOptions = {
      preset: "fountain",
    };
    
    let particlesInit = async (engine) => {
      await loadFountainPreset(engine);
    };

    flowchart TD
    
    subgraph m [Movers]
    mb[Base]
    end
    
    e[tsParticles Engine] --> m
    
    subgraph pl [Plugins]
    ple[Emitters]
    end
    
    e --> pl
    
    subgraph s [Shapes]
    sc[Circle]
    end
    
    e --> s
    
    subgraph u [Updaters]
    uc[Color]
    uop[Opacity]
    uou[Out Modes]
    usi[Size]
    end
    
    e --> u
    
    subgraph pr [Presets]
    prfo[Fountain]
    end
    
    e --> pr
    
    mb & ple & sc & uc & uop & uou & usi --> prfo
    

    Install

    npm i tsparticles-preset-fountain

    DownloadsWeekly Downloads

    189

    Version

    2.3.4

    License

    MIT

    Unpacked Size

    675 kB

    Total Files

    25

    Last publish

    Collaborators

    • ar3s
    • matteobruni