Build a Dynamic Lightning Effect
In this free tutorial, we'll build a complete lightning effect using Rive scripting and the AI agent. Fast-paced and hands-on, end-to-end in one sitting.
Draw a Simple Line
Goal: In this step we'll get the simplest version of a lightning bolt working: a straight line that draws on click. We start simple to verify the script wires up before adding the zigzag, glow, and flicker.
Setup: Create a 500x500 artboard. Open the AI agent panel and set the model to Smart.
How:
Creates a Node Script with three inputs (width, height, speed)
Draws a white line from a random X at the top to wherever you click
Animates with trim path and fades out
Create a Node Script for a simple lightning prototype.
On click: draw a straight white line from the top edge (Y=0) to the click position.
- Start X: random across artboard width
- End: exact click position
- Animate with trim path toward click, then fade out
Inputs:
- artboardWidth (default 500)
- artboardHeight (default 500)
- Animation speed
Style: white, thickness 1. No glow, no zigzag.
Adjust the result
Turn It Into Lightning
Goal: In this step we'll turn the straight line into a zigzag shape that looks like real lightning. Same inputs, same animation, just a sharper visual.
How:
Breaks the line into connected segments that shift left and right
Adds a lightningRandomness input to control the chaos
Start with a value around 20. Too high and it goes wild.
Update the lightning script.
Change the straight line into a zigzag shape:
- Break the line into connected segments
- Each segment shifts left or right randomly
- Still starts at top edge, ends at click position
New input:
- lightningRandomness (controls how far segments shift sideways)
Keep the animation and fade the same. No glow or color changes yet.
Adjust the result
Style It With Glow
Goal: In this step we'll add the visual that makes lightning feel real: color, thickness, and a soft glow behind the bolt.
How:
Renders two strokes: a soft glow behind and a sharp core on top
Adds inputs for color, thickness, feather, glow color, and opacity
After running this, lower the lightningFeather and raise the lightningGlowOpacity to make the glow visible.
Update the lightning script. Keep all existing behavior.
Add two-stroke rendering:
1. Glow stroke (behind): uses lightningFeatherColor, softened with lightningFeather, opacity = lightningGlowOpacity
2. Core stroke (on top): uses lightningColor, lightningThickness, full opacity
New inputs:
- lightningColor (default #FFFFFF)
- lightningThickness
- lightningFeather (default 50)
- lightningFeatherColor (default #B4C8FF)
- lightningGlowOpacity (default 0.5)
Don't change the zigzag shape or animation.
Adjust the result
Add a Screen Flash
Goal: In this step we'll add a screen flash when the bolt strikes, so the whole scene reacts and the lightning lands harder.
How:
Creates a full-artboard rectangle that briefly brightens the screen
Triggers with a short delay after the bolt starts drawing
Flickers once, then fades out
The flash appears behind the bolt so the lightning stays visible.
Update the lightning script. Keep all existing behavior.
Add a screen flash: a rectangle covering the full artboard that briefly brightens the screen.
Timing:
- Short delay after lightning starts drawing
- Quick brighten, small flicker, then fade out
The flash appears behind the lightning bolt. Don't change the lightning itself.
Make It Flicker
Goal: In this step we'll add a tiny flicker to the bolt as it appears, the kind of subtle energy that makes lightning feel alive.
How:
Regenerates the zigzag shape a few times during the animation
Each variation uses slightly different offsets
After a short moment, settles and fades out
After this step, play with the inputs. Try different randomness, thickness, and glow combinations until it feels right.
Update the lightning script.
When a bolt appears, briefly regenerate the zigzag shape a few times during the animation. Each variation uses slightly different random offsets, creating a flickering electrical effect.
After a short moment, settle and fade out.
The Full Scene
What we built:
A dynamic zigzag line that draws on click
Customizable color, thickness, and glow
A screen flash triggered by each strike
A flicker animation that makes the bolt feel alive
You can drop this script into any scene. In the tutorial, we placed it in a storm scene with clouds and a rain script. In the scripting course, this same lightning becomes a weapon system for a spaceship. Dynamic cannon positions, fuel cost per shot, and a full game loop.