lightweight-confetti
Reactive icon

Lightweight Confetti

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 20 Mar (2 weeks ago)
 by 
EONE TECHNOLOGIES PRIVATE LIMITED
0.0
 (0 ratings)
lightweight-confetti

Lightweight Confetti

Documentation
1.0.0

Public Interface (Inputs)

Define the following as public input parameters in your OutSystems block/module.

1 Animation Configuration

  • AnimationType (Text or Static Entity)
    Selects the base animation preset.
    Options:
    • Burst – Explosion effect from origin
    • Fall – Snow-like effect from top
    • Wave – Oscillating, matrix-like effect
  • ParticleCount (Integer)
    Total number of particles generated per trigger.
    Range: 10 – 2000
    Recommended: 50 – 500
  • DurationMs (Integer)
    Duration of the animation in milliseconds.
    Range: 500 – 20000
  • SpeedMultiplier (Decimal)
    Global speed multiplier for particle velocity.
    Range: 0.1 – 5 (default = 1)
  • SpreadDegrees (Integer)
    Angular spread of particles.
    Range: 10 – 360
    Note: Applies only to Burst
  • GravityPull (Decimal)
    Gravity applied to particles.
    Range: -2 – 5
    • Negative → upward motion
    • Positive → downward motion

2 Origin Configuration

  • OriginX (Decimal)
    Horizontal origin (0 = left, 1 = right)
    • 0 → left
    • 0.5 → center
    • 1 → right
  • OriginY (Decimal)
    Vertical origin (0 = top, 1 = bottom)
    • 0 → top
    • 0.7 → near bottom (recommended)
    • 1 → bottom

2.3 Visual Configuration

  • Colors (Text)
    Comma-separated HEX color values.
    Example:
    #FF5E7E, #88FF5A, #26CCFF, #A25AFD, #FFC107
  • ShapeCircleEnabled (Boolean)
  • ShapeSquareEnabled (Boolean)
  • ShapeStarEnabled (Boolean)
    Enables/disables particle shapes.
    Note: At least one must be enabled
  • IsInfiniteLoop (Boolean)
    Enables continuous looping of the animation until stopped or screen is destroyed

3. Usage in OutSystems Screens

3.1 Basic Usage

  1. Drag the ConfettiAnimation block onto the screen
  2. Configure inputs:

AnimationType = Entities.ConfettiAnimationType.Burst

ParticleCount = 150

DurationMs = 3500

SpeedMultiplier = 1.5

SpreadDegrees = 120

GravityPull = 1.2

OriginX = 0.5

OriginY = 0.7

Colors = "#FF5E7E, #88FF5A, #26CCFF, #A25AFD, #FFC107"

ShapeCircleEnabled = True

ShapeSquareEnabled = True

ShapeStarEnabled = True

IsInfiniteLoop = False

  1. Trigger the animation:
  • Use a button or event
  • Call a client action or toggle a bound variable

Suggested Defaults:

  • AnimationType = Burst
  • ParticleCount = 150
  • DurationMs = 3500
  • SpeedMultiplier = 1.5
  • SpreadDegrees = 120
  • GravityPull = 1.2
  • OriginX = 0.5
  • OriginY = 0.7
  • All shapes enabled

5. Performance and Limitations

  • Keep ParticleCount ≤ 5000 for consistent performance
  • Avoid long durations with high particle counts
  • Test carefully when using multiple instances on the same screen
  • Mobile devices may experience FPS drops under heavy load