Build a Dynamic Lightning Effect
In this free lesson, we'll build a complete lightning effect using Rive scripting and the AI agent. It's fast-paced and hands-on. In the full course, we break everything down step by step.
Draw a Simple Line
Goal: Click the artboard and a line draws from the top edge down to the click position.
Setup: Create a 500x500 artboard. Open the AI agent panel and set the model to Smart.
What this does:
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.
Show More…
Adjust the result
Nothing happens on click
Line starts in the wrong place
TIP
Describe the behavior, not the math. The AI agent figures out the logic. Your job is to clearly describe what you want to see.
Turn It Into Lightning
Goal: Turn the straight line into a zigzag shape that looks like real lightning.
What this does:
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.
Show More…
Adjust the result
Too chaotic
TIP
If the default value doesn't show up right away, refresh the input. Defaults sometimes need a quick refresh to update.
Style It With Glow
Goal: Add color, thickness, and a glow behind the lightning bolt.
What this does:
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.
Show More…
Adjust the result
Glow not visible
TIP
The glow works best when the blur is tight and the opacity is high. If it looks invisible, lower the feather and push the opacity up.
Add a Screen Flash
Goal: Add a quick screen flash when the lightning strikes.
What this does:
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.
Show More…
TIP
The slight delay is what makes it feel real. Lightning strikes first, then the sky reacts.
Make It Flicker
Goal: Make the bolt vibrate slightly as it appears, like real electrical energy.
What this does:
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.
Show More…
TIP
This is the workflow. You go back and forth with the agent, one prompt at a time, refining until you get the result you want.
The Full Scene
What you 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.
TIP
Same approach works for anything. Describe the behavior, let the AI generate the logic, test, refine. One layer at a time.
Instructor
A free, fast-paced intro to Rive scripting. We'll build a complete lightning effect using the AI agent. In the full course, we break everything down step by step.