Create a **30-minute high-quality animated educational explainer video about Salesforce Lightning Web Components (LWC)**.
The visual style should be inspired by **modern conceptual explainer videos such as “How The Economic Machine Works”** — use animated diagrams, moving objects, characters/icons, arrows, flows, layers, and visual metaphors to explain how things work.
**Do NOT make this look like a normal software tutorial, slideshow, or talking-head video.**
### CORE VISUAL STYLE
Use a clean 2D animated infographic style.
The video should continuously show concepts being built visually:
- Salesforce represented as a large platform/system
- A user interacting with a Salesforce screen
- Data represented as cards or objects moving between systems
- LWC represented as a modular building block/component
- HTML, JavaScript, CSS and XML represented as separate pieces that combine into one component
- Arrows showing communication and data flow
- Animated UI screens appearing as the explanation progresses
- Components connecting to Salesforce data
- Parent and child components communicating with each other
- Apex represented as a backend/server layer
- Database represented as a data store
- Visual cause-and-effect animations
Use **zoom-ins, zoom-outs, camera movement, transitions, layering and animated diagrams** to maintain visual interest.
Avoid excessive text on screen. Let the animation explain the concept, with short labels appearing only when necessary.
### STORY STRUCTURE
Start with a simple question:
**“How does Salesforce turn data and business logic into an interactive user interface?”**
Show a Salesforce user opening a Salesforce application.
Explain that the screen the user interacts with is made from **components**.
Then introduce:
**“One of the modern ways Salesforce lets developers build these components is Lightning Web Components — LWC.”**
Visually transform a blank screen into an LWC component.
---
### PART 1 — WHAT IS LWC?
Explain LWC in extremely simple terms.
Use a visual metaphor:
Imagine a large LEGO-like Salesforce application.
Each button, form, table, card, modal, calendar, etc. can be a reusable building block.
Show multiple blocks combining to create a complete Salesforce page.
Explain:
**“An LWC is a reusable UI component that can display information, accept user interaction, and communicate with Salesforce.”**
---
### PART 2 — WHAT IS INSIDE AN LWC?
Show one component opening up into four layers:
**HTML → Structure**
**JavaScript → Behaviour**
**CSS → Appearance**
**XML → Salesforce configuration**
Animate these pieces assembling together into one LWC.
Show a simple example such as a button and message.
When the user clicks the button, visually show:
User → Button → JavaScript → Updated UI
---
### PART 3 — HOW LWC WORKS
Show the complete flow visually:
**User**
↓
**LWC UI**
↓
**JavaScript**
↓
**Apex / Salesforce APIs**
↓
**Salesforce Database**
Then animate the response travelling back:
**Database → Apex → JavaScript → LWC → User**
Make this feel like watching information travel through a system.
---
### PART 4 — REACTIVE DATA
Show a Salesforce record changing.
For example:
**Status: Pending**
Then change it to:
**Status: Completed**
Animate the Salesforce data changing and the LWC UI automatically updating.
Explain the idea of reactive properties visually rather than relying on code.
---
### PART 5 — EVENTS
Show a user clicking a button.
Animate the click becoming an event that travels through the component.
Explain:
**“Events allow components to communicate that something happened.”**
Use a simple example:
Child component → event → Parent component
---
### PART 6 — PARENT AND CHILD COMPONENTS
Create a visual hierarchy:
**Parent Component**
↓
**Child Component**
↓
**Grandchild Component**
Show information travelling downward from parent to child.
Then show an event travelling upward from child to parent.
Clearly visualize:
**Parent → Child = data**
**Child → Parent = event**
---
### PART 7 — LWC AND APEX
Show LWC on the front end and Apex behind a server boundary.
The user clicks:
**“Load Customer”**
Animate a request leaving the browser/LWC and travelling to Apex.
Apex retrieves Salesforce data.
The response travels back.
Show the customer information appearing inside the component.
Explain that Apex is commonly used when the LWC needs server-side Salesforce logic or data access.
---
### PART 8 — @WIRE VS IMPERATIVE APEX
Explain this visually using two different roads.
Road 1:
**@wire**
Show Salesforce data automatically flowing into the component when the wired data source changes.
Road 2:
**Imperative Apex**
Show the user clicking a button and explicitly triggering the request.
Keep the explanation simple and visual.
---
### PART 9 — REAL-WORLD EXAMPLE
Build a complete mini application from scratch.
Example:
**Service Appointment Dashboard**
Show:
- Appointment list
- Technician
- Date
- Status
- Customer
- “View Details” button
Start with an empty Salesforce page.
Then assemble the application using multiple LWCs.
Show the components communicating with each other.
Show the LWC requesting Salesforce data through Apex.
Show the data returning and appearing in the UI.
---
### PART 10 — WHY LWC?
End by visually comparing:
**Old approach**
Large, tightly connected application
vs.
**Component-based approach**
Small reusable components that can be combined.
Show the benefits:
- Reusable
- Modular
- Interactive
- Maintainable
- Fast
- Works naturally with Salesforce
- Components can communicate with each other
Finish with the complete system appearing on screen:
**USER → LWC → JAVASCRIPT → APEX → SALESFORCE DATA**
Then zoom out and reveal that all of these pieces work together to create a Salesforce application.
### IMPORTANT
The video should feel like a **story about how LWC works**, not like someone reading documentation.
Use **visual metaphors and animation to explain every technical concept**.
When code is shown, keep it extremely short — only show the few lines necessary to support the visual explanation.
Prioritize:
**Animation > diagrams > visual storytelling > narration > code**
The viewer should be able to understand the basic architecture of LWC **even if they don't read every line of code.**
Use a professional, modern, polished educational-video aesthetic with smooth transitions, clean illustrations, subtle motion, and engaging visual storytelling.
just like this for referebece https://www.youtube.com/watch?v=PHe0bXAIuk0
