Part 4: Add Sliders, Input Fields & Debug the Wiggle Panel

Part 4: Add Sliders, Input Fields & Debug the Wiggle Panel

Welcome to Part 4 of this free 4-part mini-course!

In this Part 4…we open our project folder from Part 3 and use Cursor AI to take our wiggle panel to the next level by adding sliders and input fields for Frequency & Amplitude and we do some debugging and tweaking.

🧱 What You’ll Learn:

* Use Cursor AI to add sliders to Wiggle Panel
* Update the existing .jsx file in ScriptUI panel
* Use Cursor AI to add value input fields to Wiggle Panel
* Use Cursor AI to fix decimal place issue
* Use Cursor AI to make the Tab Key work properly
* How to make your very own Wiggle Panel for After Effects!

📺 WATCH THE FULL MINI-COURSE

▶️ Part 4: [your are here]

🧭 ABOUT THIS SERIES
This is a mini-course designed for content creators and educators who want to use AI tools like Cursor AI to vibe code, build digital products, and create smart tools using Adobe After Effects.

🛠 Tools & Effects Used
* App: Adobe After Effects CC 2025

⌨️Keyboard Shortcuts:
Cmd/Ctrl + i: Jump to Chat Panel
Reveal All Expressions: End of Part 3

💾 ScriptUI Install Path (Mac):
* Applications…Adobe After Effects [version]…Scripts…ScriptUI Panels

📦 RESOURCES & DOWNLOADS

🛠️ How To Modify Code & Add Wiggle Sliders Using Cursor AI

* Open Cursor
* Open Project Folder
* Press Cmd/Ctrl + i to jump cursor to Chat Panel
* Type in Text Prompt in Cursor or,
* Copy ChatGPT prompt to clipboard
* Paste Prompt in text field
* Press Return/Enter
* Accept File generated by Cursor

🛠️ How To Add Code (.jsx) to After Effects Script UI Panel
* Open Project Folder
* Open ‘dev’ folder
* Copy .jsx file (Cmd/Ctrl + D)
* Click on Applications
* Click on Adobe After Effects [latest version]
* Click on ‘Scripts’
* Click on ‘ScriptsUI Panel’ and drag to Sidebar for shortcut
* Paste copied .jsx file in ScriptsUI Panel
* Press ‘Replace’
* Enter Mac Password
🛠️ How To Test Wiggle Sliders & Debug in After Effects
* Open After Effects
* Go to Window Menu
* Select Layer
* Tap ‘P’ for Position
* Press Wiggle Button
* Values of Position Property should turn red
* Tap ‘EE’ to view wiggle(5,20) expression
* Deselect all (F2)
* Press ‘Wiggle’ Button
* Error Message should appear
* Drag Sliders to confirm they are working
* Enter values for Frequency & Amplitude
* Note bugs or issues such as decimals & tab button
* Return to Cursor to Debug (state problem and tell Cursor to fix)
* Replace .jsx file after Cursor debugs file
* Re-open After Effects
* Pat yourself on the back for a job well done!
* Enjoy your new Wiggle Panel and keep adding stuff to it!

⏱ TIMESTAMPS
00:00 Introduction To Part 4
00:56 Open Project Folder in Cursor
01:30 Chat GPT Prompt
02:24 Use Prompts or Vibe Code
02:54 Using Chat Assistants
03:27 Cursor Chat History
04:41 Paste Slider Prompt Into Cursor
05:08 Highlighted Code (Green or Red)
05:55 Learning From Cursor (Chat)
06:22 Replace .jsx File
06:41 Current Status of Wiggle Panel (AE)
07:33 Select Composition Alert
08:06 Open Folder & Replace .jsx File
09:24 Test Wiggle Panel in After Effects
10:58 Debugging Sliders (Decimals & Inputs)
11:50 Bonus Tip: Dictation
12:52 Creating Debug Prompt Using Dictation
13:56 Add Debug Prompt To Cursor
14:52 Replace .jsx File
15:30 Testing Wiggle + Sliders
16:43 Debug: Slider Decimals + Tab
17:01 Debug Prompt in Cursor
18:00 Replace .jsx File & Test AE
20:00 Debug: Tab Functionality
20:45 Enter Debug Prompt in Cursor
21:35 ScriptUI Panels Folder Location
23:14 Nice Job...You did it!

📬 STAY IN THE LOOP

🧭 Mike Murphy Tutorials
Learn AI. Build digital products. Make a living as a content creator.

🌹 Powered by Project Rosebud

[MikeMurphyCo]

🚀 Congrats! You made it to Part 4 of 4!

Please leave a comment and let me know if you were able to build your own Wiggle Panel!!


📋Full Playlist Here: