konfeti - v0.6.0
    Preparing search index...

    Type Alias ShapeStyle

    Common Particle Style. Shared by every shape. Values set in paper also act as the base for all other shapes in shapes, so a single paper: { colors } recolors stars, hearts and text too. Bitmap shapes (emoji, image, spritesheet) ignore color and stroke keys.

    type ShapeStyle = {
        backColor?: ColorSource | "auto";
        backShade?: Ratio;
        blendMode?: GlobalCompositeOperation;
        colorMode?: ColorMode;
        colorOverLife?: ColorOverLifeOptions | false;
        colors?: ColorSource;
        fadeIn?: Ratio;
        fadeOut?: boolean | FadeOutOptions;
        flip?: boolean | FlipOptions;
        gradient?: GradientOptions | false;
        opacity?: Range<Ratio>;
        rotation?: Range<Degrees>;
        rotationSpeed?: Range<DegreesPerSecond>;
        scale?: Range<Multiplier>;
        scaleOverLife?: ScaleOverLifeOptions | false;
        shadow?: ShadowOptions | false;
        shine?: Ratio;
        stroke?: StrokeOptions | false;
        tilt?: Range<Degrees>;
        trail?: boolean | TrailOptions;
        wobble?: boolean | WobbleOptions;
    }
    Index
    backColor? backShade? blendMode? colorMode? colorOverLife? colors? fadeIn? fadeOut? flip? gradient? opacity? rotation? rotationSpeed? scale? scaleOverLife? shadow? shine? stroke? tilt? trail? wobble?
    backColor?: ColorSource | "auto"

    Back Side Colors. Shown while the 3D flip turns the particle away from the viewer. "auto" uses the front color darkened by backShade. A color list picks independently of the front color.

    "auto"

    paper: { colors: "gold", backColor: "silver" }
    backShade?: Ratio

    Back Side Darkening. How much darker the back side is when backColor is "auto". 0 = same as front, 1 = black.

    0.3

    blendMode?: GlobalCompositeOperation

    Canvas Blend Mode. For example "lighter" for glowing additive colors.

    "source-over"

    colorMode?: ColorMode

    Color Pick Strategy.

    "random"

    ColorMode

    colorOverLife?: ColorOverLifeOptions | false

    Color Transition over Lifetime. false (or omitted) keeps the color constant.

    false

    ColorOverLifeOptions

    colors?: ColorSource

    Front Colors.

    ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"]

    ColorSource

    fadeIn?: Ratio

    Fade-In Duration. Fraction of the lifetime spent fading in from transparent. 0 appears instantly.

    0

    fadeOut?: boolean | FadeOutOptions

    Fade Out near End of Life. true uses the default fade, false keeps particles opaque until they disappear, an object customizes it.

    { start: 0.7, easing: "linear" }

    FadeOutOptions

    flip?: boolean | FlipOptions

    3D Flip. true uses the default flip, false keeps the particle flat, an object customizes it.

    { frequency: [0.6, 1.8], axis: "x" }

    FlipOptions

    gradient?: GradientOptions | false

    Gradient Fill. false (or omitted) uses flat colors.

    false

    GradientOptions

    opacity?: Range<Ratio>

    Starting Opacity. 1 is fully opaque, 0 is invisible.

    1

    rotation?: Range<Degrees>

    Initial Rotation.

    [0, 360]

    rotationSpeed?: Range<DegreesPerSecond>

    Spin Speed. Negative values spin counter-clockwise.

    [-240, 240]

    scale?: Range<Multiplier>

    Uniform Size Multiplier. Scales every size-related value (size, width, height, radius, stroke) together.

    1

    scaleOverLife?: ScaleOverLifeOptions | false

    Size Transition over Lifetime. false (or omitted) keeps the size constant.

    false

    ScaleOverLifeOptions

    shadow?: ShadowOptions | false

    Drop Shadow. false (or omitted) draws no shadow.

    false

    ShadowOptions

    shine?: Ratio

    Specular Shine. Brightens the particle while it faces the viewer during the flip. 0 disables it, 1 is a strong glint. Only visible when flip is enabled; ignored by emoji, image and spritesheet shapes.

    0

    Costs one extra fill per visible particle.

    stroke?: StrokeOptions | false

    Outline. false (or omitted) draws no outline.

    false

    Stroking costs roughly one extra draw call per particle.

    tilt?: Range<Degrees>

    Perspective Tilt. Maximum oscillating skew, synced to the wobble, that makes flat pieces look like they catch the air. 0 disables it.

    0

    paper: { tilt: 25 }
    trail?: boolean | TrailOptions

    Motion Trail. true draws the default streak behind each particle, false disables it, an object sets length, width, opacity and color.

    false

    Konfeti.fire({ paper: { trail: { length: 14, color: "#ffd000" } } });

    Costs about one extra draw call per trail point per particle.

    TrailOptions

    wobble?: boolean | WobbleOptions

    Side-to-Side Flutter. true uses the default wobble, false disables it, an object customizes it.

    { amplitude: [2, 8], frequency: [0.4, 1.2] }

    WobbleOptions

    Settings
    Member Visibility

    On This Page
    Properties