Skip to content

Commit c4812a2

Browse files
mdabir1203mdabir1203
authored
Merge pull request #80 from mdabir1203/codex/create-tech-explainer-video-with-motion-design2026-03-12
Add Remotion explainer workspace, docs and .gitignore entries
2 parents 042c7b7 + 4a01661 commit c4812a2

13 files changed

Lines changed: 2377 additions & 1 deletion

File tree

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,9 @@ build/
2020
# and can be added to the global gitignore or merged into this file. For a more nuclear
2121
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
2222
#.idea/
23+
24+
# Remotion / Yarn workspace artifacts
25+
remotion-explainer/node_modules/
26+
remotion-explainer/build/
27+
remotion-explainer/out/
28+
remotion-explainer/.yarn/install-state.gz

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ cargo test --workspace
3535

3636
ShadowMap now includes a minimalist, luxury-inspired landing page that mirrors the in-app experience. The Rust server renders it dynamically with localized pricing and optional Stripe checkout, while a static export in `landing-page/index.html` is ready for Vercel hosting.
3737

38+
### Tech explainer video starter (Remotion)
39+
40+
Need an enterprise-grade motion explainer for internal demos or leadership updates? Start from `remotion-explainer/` and follow `docs/video/enterprise-tech-explainer.md` for the first-principles storyboard and production checklist.
41+
3842
## Profiling benchmark
3943
The Hotpath CI workflow expects an example benchmark. You can replay the same workload locally to confirm profiling data is produced:
4044

@@ -160,4 +164,3 @@ Use the Slint-powered dashboard to launch scans, review live status messages, an
160164
- [`docs/security/slsa-whitepaper.md`](docs/security/slsa-whitepaper.md) – Executive overview of the reproducible supply chain strategy.
161165
- [`docs/org-adaptation.md`](docs/org-adaptation.md) – Roll-out guidance for large teams.
162166
- [`landing-page/`](landing-page/) – Static marketing page and Vercel deployment metadata.
163-

‎docs/video/enterprise-tech-explainer.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Enterprise Tech Explainer Blueprint (Remotion)
2+
3+
Use this when you need a rigorous, enterprise-grade explainer for how ShadowMap works.
4+
5+
## First-principles narrative model
6+
7+
1. **Observation layer** – What is happening in the external attack surface?
8+
2. **Inference layer** – What does the data imply about risk?
9+
3. **Decision layer** – What should an enterprise do next?
10+
11+
If a scene does not support one of the three layers, cut it.
12+
13+
## Mental models to enforce coherence
14+
15+
- **OODA loop** (Observe, Orient, Decide, Act): each scene should map to one or more OODA stages.
16+
- **Signal vs. noise**: every visual element must either clarify risk or be removed.
17+
- **Systems thinking**: present scanning as part of continuous governance, not a one-time task.
18+
19+
## Implementation in this repository
20+
21+
The `remotion-explainer/` project includes:
22+
23+
- A `ShadowMapTechExplainer` composition at 1920x1080, 30fps.
24+
- Four sequenced scenes using enterprise visual language and concise copy.
25+
- Source-controlled animation primitives (`spring`, `interpolate`) for reproducibility.
26+
27+
## Production checklist
28+
29+
- Validate copy with security + executive stakeholders.
30+
- Align brand styles (font, color, motion speed).
31+
- Pair each scene with voiceover line and on-screen caption.
32+
- Render draft MP4, collect feedback, iterate, and final render.
33+
34+
35+
## Verification and artifact handoff
36+
37+
- Run `cd remotion-explainer && yarn test:video` before stakeholder review.
38+
- Confirm the SHA256 digest output so distribution teams can verify integrity.
39+
- Share `remotion-explainer/out/shadowmap-tech-explainer.mp4` directly, or host `remotion-explainer/out/` via `python -m http.server` for browser-based download.

‎remotion-explainer/.yarnrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎remotion-explainer/README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# ShadowMap Tech Explainer (Remotion)
2+
3+
This workspace gives you an enterprise-style motion design baseline for a technical explainer video.
4+
5+
## Why this structure
6+
7+
Built from first principles:
8+
9+
1. **Problem framing**: One scene per decision layer (what, how, operate, next step).
10+
2. **Narrative coherence**: Each scene has one headline, one subtitle, and exactly three supporting bullets.
11+
3. **Production rigor**: All motion and typography live in source control for repeatable rendering.
12+
13+
## Quick start (Yarn 4 Berry)
14+
15+
```bash
16+
cd remotion-explainer
17+
yarn set version 4.4.1
18+
yarn install
19+
yarn dev
20+
```
21+
22+
Then render production output:
23+
24+
```bash
25+
yarn render
26+
```
27+
28+
Output file:
29+
30+
- `out/shadowmap-tech-explainer.mp4`
31+
32+
## Test + download checklist
33+
34+
Use this when you want a rigorous "does it work and can I deliver it" validation.
35+
36+
```bash
37+
cd remotion-explainer
38+
yarn test:video
39+
```
40+
41+
The command runs three quality gates:
42+
43+
1. **Build gate** (`yarn build`) → validates composition code and bundling.
44+
2. **Render gate** (`yarn render`) → validates runtime rendering.
45+
3. **Delivery gate** (file check + sha256) → proves the final MP4 exists and is ready to share.
46+
47+
If rendering fails because Chrome Headless Shell cannot be downloaded in your environment, point Remotion to a local browser:
48+
49+
```bash
50+
export REMOTION_CHROME_EXECUTABLE=/path/to/chrome-or-chromium
51+
yarn test:video
52+
```
53+
54+
### How to download/share the generated video
55+
56+
After a successful run, use one of these delivery options:
57+
58+
- Copy directly from: `remotion-explainer/out/shadowmap-tech-explainer.mp4`
59+
- Serve for browser download:
60+
61+
```bash
62+
cd remotion-explainer/out
63+
python -m http.server 8080
64+
```
65+
66+
Then open `http://localhost:8080/shadowmap-tech-explainer.mp4` and save the file.
67+
68+
## Storyboard map
69+
70+
- **Scene 1**: Value proposition in executive language.
71+
- **Scene 2**: Architecture and data flow.
72+
- **Scene 3**: Enterprise operations and governance.
73+
- **Scene 4**: Call to action with adoption path.
74+
75+
## Next upgrades
76+
77+
- Add voiceover timing markers with frame-level notes.
78+
- Add brand tokens (font, color, iconography) from design system.
79+
- Add data-driven animated charts from real ShadowMap scan exports.

‎remotion-explainer/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@shadowmap/remotion-explainer",
3+
"private": true,
4+
"version": "0.1.0",
5+
"packageManager": "yarn@4.4.1",
6+
"scripts": {
7+
"dev": "remotion studio",
8+
"build": "remotion bundle",
9+
"render": "remotion render src/index.ts ShadowMapTechExplainer out/shadowmap-tech-explainer.mp4",
10+
"test:video": "bash ./scripts/test-and-download.sh"
11+
},
12+
"dependencies": {
13+
"react": "18.3.1",
14+
"react-dom": "18.3.1",
15+
"remotion": "4.0.230"
16+
},
17+
"devDependencies": {
18+
"@remotion/cli": "4.0.230",
19+
"@types/react": "18.3.12",
20+
"typescript": "5.6.3"
21+
}
22+
}

‎remotion-explainer/remotion.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {Config} from '@remotion/cli/config';
2+
3+
Config.setVideoImageFormat('jpeg');
4+
Config.setOverwriteOutput(true);
5+
Config.setCodec('h264');

‎remotion-explainer/scripts/test-and-download.sh‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#!/usr/bin/env bash
2+
set -euo pipefail
3+
4+
# First-principles pipeline:
5+
# 1) Compile the composition (structure is valid).
6+
# 2) Render the video (runtime is valid).
7+
# 3) Verify the artifact exists (delivery is valid).
8+
9+
echo "[1/3] Building Remotion bundle..."
10+
yarn build
11+
12+
echo "[2/3] Rendering MP4..."
13+
if yarn render; then
14+
echo "Render succeeded."
15+
else
16+
echo "Render failed. If your environment cannot download Chrome Headless Shell,"
17+
echo "set REMOTION_CHROME_EXECUTABLE to a local Chrome/Chromium binary and retry."
18+
exit 1
19+
fi
20+
21+
echo "[3/3] Verifying downloadable artifact..."
22+
if [[ -f out/shadowmap-tech-explainer.mp4 ]]; then
23+
ls -lh out/shadowmap-tech-explainer.mp4
24+
shasum -a 256 out/shadowmap-tech-explainer.mp4
25+
echo "Artifact ready: remotion-explainer/out/shadowmap-tech-explainer.mp4"
26+
else
27+
echo "Expected output missing: out/shadowmap-tech-explainer.mp4"
28+
exit 1
29+
fi

‎remotion-explainer/src/Root.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Composition} from 'remotion';
2+
import {ShadowMapTechExplainer} from './ShadowMapExplainer';
3+
4+
export const RemotionRoot = () => {
5+
return (
6+
<Composition
7+
id="ShadowMapTechExplainer"
8+
component={ShadowMapTechExplainer}
9+
durationInFrames={900}
10+
fps={30}
11+
width={1920}
12+
height={1080}
13+
/>
14+
);
15+
};

‎remotion-explainer/src/ShadowMapExplainer.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from 'react';
2+
import {
3+
AbsoluteFill,
4+
Easing,
5+
Sequence,
6+
interpolate,
7+
spring,
8+
useCurrentFrame,
9+
useVideoConfig,
10+
} from 'remotion';
11+
12+
type SceneCardProps = {
13+
title: string;
14+
subtitle: string;
15+
bullets: string[];
16+
accent: string;
17+
};
18+
19+
const container: React.CSSProperties = {
20+
background:
21+
'radial-gradient(circle at 10% 15%, rgba(34, 197, 94, 0.28), rgba(10, 20, 34, 0.95) 45%), linear-gradient(135deg, #0f172a, #020617)',
22+
color: '#e2e8f0',
23+
fontFamily: 'Inter, ui-sans-serif, system-ui',
24+
};
25+
26+
const SceneCard: React.FC<SceneCardProps> = ({title, subtitle, bullets, accent}) => {
27+
const frame = useCurrentFrame();
28+
const {fps} = useVideoConfig();
29+
30+
const rise = spring({
31+
fps,
32+
frame,
33+
config: {
34+
damping: 18,
35+
stiffness: 120,
36+
mass: 0.9,
37+
},
38+
});
39+
40+
const fade = interpolate(frame, [0, 25], [0, 1], {
41+
extrapolateLeft: 'clamp',
42+
extrapolateRight: 'clamp',
43+
easing: Easing.out(Easing.cubic),
44+
});
45+
46+
return (
47+
<AbsoluteFill style={{...container, padding: 120}}>
48+
<div
49+
style={{
50+
transform: `translateY(${interpolate(rise, [0, 1], [30, 0])}px)`,
51+
opacity: fade,
52+
border: `1px solid ${accent}`,
53+
borderRadius: 28,
54+
background: 'rgba(15, 23, 42, 0.6)',
55+
backdropFilter: 'blur(6px)',
56+
padding: '56px 64px',
57+
boxShadow: `0 20px 55px ${accent}40`,
58+
}}
59+
>
60+
<p
61+
style={{
62+
color: accent,
63+
textTransform: 'uppercase',
64+
letterSpacing: '0.18em',
65+
fontWeight: 700,
66+
margin: 0,
67+
}}
68+
>
69+
Enterprise tech explainer
70+
</p>
71+
<h1 style={{fontSize: 72, margin: '20px 0 14px', lineHeight: 1.1}}>{title}</h1>
72+
<p style={{fontSize: 34, lineHeight: 1.4, marginTop: 0, color: '#cbd5e1'}}>{subtitle}</p>
73+
<ul style={{marginTop: 28, display: 'grid', rowGap: 18, fontSize: 30, paddingLeft: 28}}>
74+
{bullets.map((bullet) => (
75+
<li key={bullet}>{bullet}</li>
76+
))}
77+
</ul>
78+
</div>
79+
</AbsoluteFill>
80+
);
81+
};
82+
83+
export const ShadowMapTechExplainer: React.FC = () => {
84+
return (
85+
<AbsoluteFill>
86+
<Sequence from={0} durationInFrames={220}>
87+
<SceneCard
88+
title="ShadowMap in 30 seconds"
89+
subtitle="Start with first principles: map assets, verify risk, then act with proof."
90+
accent="#22d3ee"
91+
bullets={[
92+
'Observe all exposed internet-facing assets.',
93+
'Separate signal from noise using reproducible checks.',
94+
'Deliver executive-grade evidence with confidence.',
95+
]}
96+
/>
97+
</Sequence>
98+
<Sequence from={220} durationInFrames={230}>
99+
<SceneCard
100+
title="How the engine works"
101+
subtitle="Motion mirrors the pipeline: discovery → enrichment → reporting."
102+
accent="#38bdf8"
103+
bullets={[
104+
'Discovery: enumerate subdomains and exposed services.',
105+
'Enrichment: fingerprint technologies and security posture.',
106+
'Reporting: summarize risk for analysts and leadership.',
107+
]}
108+
/>
109+
</Sequence>
110+
<Sequence from={450} durationInFrames={230}>
111+
<SceneCard
112+
title="Enterprise operating model"
113+
subtitle="Treat security as a system, not a one-off scan."
114+
accent="#14b8a6"
115+
bullets={[
116+
'Automate scans in CI for consistent coverage.',
117+
'Attach SBOM and provenance for auditability.',
118+
'Track trends over time to prioritize remediation.',
119+
]}
120+
/>
121+
</Sequence>
122+
<Sequence from={680} durationInFrames={220}>
123+
<SceneCard
124+
title="Call to action"
125+
subtitle="Render, narrate, and ship to stakeholders in a single flow."
126+
accent="#2dd4bf"
127+
bullets={[
128+
'Open Remotion Studio for timing + typography polish.',
129+
'Record voiceover aligned with each decision point.',
130+
'Render mp4 and distribute in internal comms channels.',
131+
]}
132+
/>
133+
</Sequence>
134+
</AbsoluteFill>
135+
);
136+
};

0 commit comments

Comments
 (0)