konfeti - v0.6.0
    Preparing search index...

    Type Alias CreateOptions

    Options for a Konfeti Instance.

    const konfeti = KonfetiFactory.create(myCanvas, {
      maxParticles: 800,
      defaults: { paper: { colors: ["gold", "white"] } },
    });
    type CreateOptions = {
        adaptiveQuality?: boolean;
        defaults?: FireOptions;
        disableForReducedMotion?: boolean;
        fixedTimestep?: boolean;
        frameScheduler?: FrameScheduler;
        maxDevicePixelRatio?: number;
        maxParticles?: number;
        resize?: boolean;
        zIndex?: number;
    }
    Index
    adaptiveQuality? defaults? disableForReducedMotion? fixedTimestep? frameScheduler? maxDevicePixelRatio? maxParticles? resize? zIndex?
    adaptiveQuality?: boolean

    Adaptive Quality. Watches the frame rate while particles animate. When frames stay slow (below about 50 fps) and konfeti's own drawing is a real part of the cost, the quality steps down one level at a time: 1 renders at CSS resolution, 2 also drops shadows, shine and trails, 3 also spawns 60% of the requested particles. After a few seconds of smooth frames it steps back up.

    false (always full quality)

    const stage = KonfetiFactory.create(null, { adaptiveQuality: true }); // fullscreen, like Konfeti
    stage.fire(KonfetiPresets.FIREWORKS);
    stage.getQualityLevel(); // 0 on a fast device

    A busy page or a screen locked at 30 Hz (e.g. a phone's low-power mode) does not lower the quality, since drawing less would not help there. With fixedTimestep, level 3 is skipped so replays spawn the same particles.

    defaults?: FireOptions

    Instance Default Burst Options. Merged under every fire() call on this instance (fire options win). Nested groups such as paper and physics are merged key by key.

    {}

    disableForReducedMotion?: boolean

    Respect Reduced Motion. When true and the user has prefers-reduced-motion: reduce, fire() draws nothing and its handle resolves immediately.

    false

    fixedTimestep?: boolean

    Fixed Time Step. Simulate in fixed 1/60 s steps instead of the real frame time. A burst fired again with the same seed (and the same options and canvas size) then replays exactly, particle for particle, on any display and at any frame rate. Motion updates 60 times per second, also on faster screens.

    false (each frame simulates the real time since the last one)

    const stage = KonfetiFactory.create(canvas, { fixedTimestep: true });
    const seed = stage.fire().getSeed();
    stage.fire({ seed }); // exactly the same burst again

    Useful for replays, demos and visual tests. Without it, the same seed still gives the same particles, but their paths can differ slightly with the frame timing.

    frameScheduler?: FrameScheduler

    Custom Frame Scheduler. Replaces requestAnimationFrame. Intended for tests and custom render loops.

    window.requestAnimationFrame

    maxDevicePixelRatio?: number

    Device Pixel Ratio Cap. Limits canvas resolution on very dense screens to save GPU time. 1 renders at CSS resolution.

    2

    maxParticles?: number

    Maximum Live Particles. When a new burst would exceed it, the oldest particles are removed first.

    1500

    resize?: boolean

    Automatic Canvas Resize. Keeps the canvas' pixel size in sync with its CSS size (and the window, for the built-in overlay canvas). Disable if you manage the canvas size yourself.

    true

    zIndex?: number

    Overlay Canvas z-index. Only used by the built-in fullscreen canvas (when no canvas is passed to KonfetiFactory.create()).

    100

    Settings
    Member Visibility

    On This Page
    Properties