# MCP Memory Service - Technical Showcase Video Design
**Date:** 2026-01-29
**Type:** Remotion Video Production
**Duration:** 3-4 minutes (180-240 seconds)
**Format:** 1920x1080 @ 30fps
**Target Audience:** Mixed (Backend developers, Full-stack developers, AI app builders)
## Overview
A Technical Showcase video featuring the MCP Memory Service architecture, performance optimizations, AI/ML features, and developer experience. Uses a Feature Showcase Carousel approach where each major highlight gets its own visually distinct "card" with custom animation styles, color themes, and visual metaphors.
## Goals
- **Impress developers** with technical depth and visual quality
- **Demonstrate performance** with real metrics and benchmarks
- **Showcase architecture** with clear diagrams and code examples
- **Highlight AI/ML capabilities** with 3D visualizations
- **Show developer experience** with integration examples
## Video Structure
### Timeline Overview
| Section | Duration | Frames (30fps) | Focus |
|---------|----------|----------------|-------|
| 1. Hero Intro | 15s | 0-450 | What is MCP Memory Service? |
| 2. Performance Spotlight | 35s | 450-1500 | 534,628x caching, 5ms reads, benchmarks |
| 3. Architecture Tour | 40s | 1500-2700 | Storage Strategy Pattern, modular design |
| 4. AI/ML Intelligence | 45s | 2700-4050 | Embeddings, quality scoring, consolidation |
| 5. Developer Experience | 30s | 4050-4950 | Integration examples, dashboard |
| 6. Outro/CTA | 15s | 4950-5400 | GitHub link, badges, call-to-action |
**Total:** 180 seconds (5400 frames)
### Transition Style
- **Card flip transitions** between sections (3D CSS transforms)
- Each card rotates in with spring physics
- 3-second transition overlap for smooth flow
- Color gradient wash when new card appears
## Visual Design System
### Color Palette
```typescript
const colors = {
// Section themes
performance: { from: '#10B981', to: '#059669' }, // Green gradient
architecture: { from: '#3B82F6', to: '#1D4ED8' }, // Blue gradient
aiml: { from: '#8B5CF6', to: '#6D28D9' }, // Purple gradient
quality: { from: '#F59E0B', to: '#D97706' }, // Orange gradient
// Base colors
background: '#0F172A',
cardBg: '#1E293B',
textPrimary: '#F8FAFC',
textSecondary: '#94A3B8',
accent: '#F8FAFC',
};
```
### Typography System
- **Headings:** JetBrains Mono Bold, 48-72px (technical mono feel)
- **Body/Code:** JetBrains Mono Regular, 16-24px
- **Metrics/Numbers:** Inter Bold, 64-96px (large performance numbers)
- **Captions:** Inter Regular, 14-18px
### Animation Principles
Each section has distinct animation characteristics:
| Section | Animation Style | Config |
|---------|----------------|--------|
| **Performance** | Fast spring animations | `tension: 300, friction: 20` |
| **Architecture** | Geometric slide-ins | Linear with ease-out |
| **AI/ML** | Organic flowing particles | Smooth ease curves |
| **Developer Experience** | Terminal-style typing | Character-by-character |
### Card Layout System
- **Canvas:** 1920x1080 (Full HD)
- **Safe area:** 1600x900 (160px padding all sides)
- **Title zone:** Top 200px
- **Visual zone:** Center 500px (code, diagrams, 3D)
- **Metric zone:** Bottom 200px (numbers, stats)
## Detailed Section Breakdown
### Section 1: Hero Intro (0-15s)
**Visual Metaphor:** Memory nodes connecting in 3D space
**Timeline:**
- **0-3s:** Fade in from black → Logo appears center
- **3-8s:** Title animation: "MCP Memory Service" (word-by-word slide-in, 100ms stagger)
- **8-12s:** Tagline: "Semantic Memory for AI Applications" with glow effect
- **12-15s:** 3D particle background - glowing spheres connecting with lines, slow rotation
**Technical Implementation:**
- React Three Fiber for 3D particles
- 20-30 small spheres with connecting lines
- Subtle camera orbit (slow, non-distracting)
**Data Sources:**
- Logo from `/docs/assets` or generated SVG
- No code snippets yet, purely visual hook
---
### Section 2: Performance Spotlight (15-50s)
**Visual Metaphor:** Racing speedometer + data streaming
**Color Theme:** Green gradient (`#10B981` → `#059669`)
**Layout:**
- **Left 50%:** Animated SVG speedometer showing response times
- **Right 50%:** Stacked metrics with count-up animations
**Timeline:**
- **15-18s:** 3D card flip transition, green gradient wash
- **18-23s:** "Performance" title drops with spring bounce
- **23-30s:** Speedometer animates: needle 0 → 5ms with overshoot, racing particles
- **30-40s:** Metrics count up sequentially:
- "534,628x faster" - huge number with glow
- "5ms average read" - with clock icon
- "90% token reduction" - with percentage ring chart
- **40-45s:** Code snippet fades in:
```bash
MCP_MEMORY_SQLITE_PRAGMAS=journal_mode=WAL
```
- **45-50s:** Mini bar chart: SQLite vs Hybrid vs Cloudflare response times
**Technical Implementation:**
- Speedometer: SVG with interpolated rotation (0° to 120°)
- Count-up: `interpolate()` with spring config
- Particles: 50 circles moving left-to-right at varying speeds
- Bar chart: Recharts library with animated bars
**Data Sources:**
- Real benchmark numbers from test files
- Real config from `.env.example`
- Mock chart data (realistic values)
**Key Metrics:**
- 534,628x caching boost
- 5ms average read time
- 90% token reduction (HTTP API vs MCP tools)
---
### Section 3: Architecture Tour (50-90s)
**Visual Metaphor:** Blueprint/layered system diagram
**Color Theme:** Blue gradient (`#3B82F6` → `#1D4ED8`)
**Layout:**
- **Center:** 3-layer architecture diagram (vertical stack)
- **Bottom:** Code snippet carousel
**Timeline:**
- **50-53s:** Card flip to blue, blueprint grid pattern background
- **53-58s:** "Architecture" title slides in from left (geometric)
- **58-68s:** Layer-by-layer reveal (bottom-up):
- **Layer 1:** "MCP Server" - 35 tools, icon grid
- **Layer 2:** "Storage Strategy" - SQLite-Vec, Cloudflare, Hybrid boxes
- **Layer 3:** "Services" - MemoryService, Quality, Consolidation
- **68-78s:** Animated flow: Arrow from MCP → Storage → Services (glow trail)
- **78-85s:** Code snippets rotate (3s each):
```python
# BaseStorage interface
class BaseStorage(ABC):
async def store_memory(...)
```
```python
# Factory pattern
storage = create_storage(backend="hybrid")
```
- **85-90s:** Design pattern badges appear: "Strategy • Singleton • Orchestrator"
**Technical Implementation:**
- Blueprint grid: Animated scan lines (SVG)
- Layer boxes: Scale from 0 with spring bounce
- Arrows: SVG path animation (stroke-dashoffset)
- Code: Prism syntax highlighting, fade transitions
**Data Sources:**
- Real file structure from `/src/mcp_memory_service/`
- Actual LOC counts
- Real code from `storage/base.py` and `storage/factory.py`
---
### Section 4: AI/ML Intelligence (90-135s)
**Visual Metaphor:** Neural network + 3D vector space
**Color Theme:** Purple gradient (`#8B5CF6` → `#6D28D9`)
**Layout:**
- **Left 40%:** 3D visualization (React Three Fiber)
- **Right 60%:** Feature breakdown with icons
**Timeline:**
- **90-93s:** Card flip to purple, particle field background
- **93-98s:** "AI/ML Features" title with organic wave animation
- **98-110s:** 3D scene builds:
- 20-30 colored spheres (vector embeddings) float in space
- Lines connect nearby spheres (semantic similarity)
- Camera slowly orbits, spheres pulse with music
- **110-125s:** Feature list animates in (right side):
- 🧠 **Vector Embeddings** - ONNX local, 384 dimensions
- ⭐ **Quality Scoring** - 3-tier system (80-150ms)
- 🌙 **Memory Consolidation** - Dream-inspired maintenance
- 🔗 **Relationship Inference** - Automatic graph building
- **125-135s:** Code snippet:
```python
# Quality scoring tiers
Tier 1: ONNX (80-150ms) → $0
Tier 2: Groq (500ms) → $0.0015
Tier 3: Gemini (1-2s) → $0.01
```
**Technical Implementation:**
- 3D spheres: React Three Fiber + @react-three/drei
- Sphere positions: Clustered random (3 clusters)
- Connections: Lines between nearby spheres, opacity by distance
- Feature items: Staggered slide-in (150ms delay each)
- Background: Slowly shifting purple particle field
**Data Sources:**
- Mock 3D positions (clustered, realistic)
- Real timing/cost numbers from docs
- Real quality tier configuration from code
---
### Section 5: Developer Experience (135-165s)
**Visual Metaphor:** Split-screen: Code editor + Dashboard
**Color Theme:** Orange gradient (`#F59E0B` → `#D97706`)
**Layout:**
- **Top 50%:** Code integration examples
- **Bottom 50%:** Dashboard preview (animated UI)
**Timeline:**
- **135-138s:** Card flip to orange, terminal scanlines background
- **138-143s:** "Developer Experience" types in (terminal-style)
- **143-155s:** Code carousel (4s each):
**Example 1 - Claude Desktop Config:**
```json
{
"mcpServers": {
"memory": {
"command": "python",
"args": ["-m", "mcp_memory_service.server"]
}
}
}
```
**Example 2 - Python API:**
```python
# Store a memory
await memory.store_memory(
content="User prefers dark mode",
tags=["preference"]
)
```
**Example 3 - HTTP API:**
```bash
curl -X POST http://localhost:8000/api/memories \
-d '{"content": "...", "tags": [...]}'
```
- **155-165s:** Dashboard mockup animates in (bottom):
- Memory list with smooth scroll
- Quality score charts (mini bars)
- Real-time memory count ticker
- Search bar types: "semantic search..."
**Technical Implementation:**
- Code typing: Character-by-character reveal (30ms/char)
- Syntax highlighting appears after typing completes
- Dashboard: Slides up from bottom (ease-out)
- Memory cards: Staggered fade-in
- Search bar: Blinking cursor, typed text
**Data Sources:**
- Real code from `README.md` examples
- Real API endpoints
- Mock dashboard UI (matches `/web/static` style)
---
### Section 6: Outro/CTA (165-180s)
**Visual Metaphor:** Call-to-action with orbiting badges
**Layout:**
- **Center:** Large GitHub URL with star count
- **Surrounding:** Badges orbit in circle
**Timeline:**
- **165-168s:** All content fades out, back to dark background
- **168-172s:** GitHub URL appears center: `github.com/doobidoo/mcp-memory-service`
- **172-176s:** Badges orbit around URL (circular motion):
- ⭐ Star count (real from GitHub API)
- 📦 PyPI downloads badge
- ✅ Test coverage: 968 tests
- 🚀 Version: v10.4.1
- 💾 Storage: SQLite-Vec • Cloudflare • Hybrid
- **176-180s:** Final tagline: "Semantic Memory. Persistent Context. Built for AI."
- **180s:** Logo in corner, hold 2s, fade to black
**Technical Implementation:**
- Badges: Circular orbit using `Math.sin/cos` with interpolated angle
- Star count: Count-up animation with sparkle effect
- Logo: Subtle pulse/glow loop
- Background: Slow purple-to-blue gradient shift
**Data Sources:**
- Real version from `pyproject.toml`
- Real test count from pytest
- Mock/real GitHub stars (could fetch at render time)
## Technical Implementation
### Project Structure
```
mcp-memory-service/
├── video/ # New workspace
│ ├── package.json # Remotion + dependencies
│ ├── remotion.config.ts # Remotion configuration
│ ├── tsconfig.json
│ ├── src/
│ │ ├── Root.tsx # Composition registry
│ │ ├── Video.tsx # Main orchestrator
│ │ ├── scenes/ # Individual cards
│ │ │ ├── HeroIntro.tsx
│ │ │ ├── PerformanceSpotlight.tsx
│ │ │ ├── ArchitectureTour.tsx
│ │ │ ├── AIMLIntelligence.tsx
│ │ │ ├── DeveloperExperience.tsx
│ │ │ └── Outro.tsx
│ │ ├── components/ # Reusable components
│ │ │ ├── CardTransition.tsx
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CountUp.tsx
│ │ │ ├── Speedometer.tsx
│ │ │ ├── ArchitectureDiagram.tsx
│ │ │ ├── Vector3DScene.tsx
│ │ │ └── DashboardMockup.tsx
│ │ ├── data/ # Data sources
│ │ │ ├── realData.ts # Extracted from project
│ │ │ ├── mockData.ts # Generated mock data
│ │ │ └── codeSnippets.ts # Code examples
│ │ ├── styles/
│ │ │ ├── colors.ts
│ │ │ └── fonts.ts
│ │ └── utils/
│ │ ├── animations.ts
│ │ └── timing.ts
│ ├── scripts/
│ │ └── extract-project-data.ts # Extract real metrics
│ ├── public/
│ │ ├── fonts/
│ │ └── assets/
│ └── out/ # Rendered videos
```
### Key Dependencies
```json
{
"dependencies": {
"@remotion/cli": "^4.0.0",
"remotion": "^4.0.0",
"@remotion/three": "^4.0.0",
"@react-three/fiber": "^8.0.0",
"@react-three/drei": "^9.0.0",
"three": "^0.160.0",
"prism-react-renderer": "^2.0.0",
"recharts": "^2.0.0"
}
}
```
### Data Extraction Strategy
**Real Data Sources:**
- Version from `pyproject.toml`
- Test count from `pytest --collect-only`
- LOC count from `find src -name "*.py" -exec wc -l`
- Code snippets from actual files (lines 10-25, etc.)
- Git stats: commit count, last release tag
**Mock Data:**
- 3D vector positions (clustered random)
- Response time comparisons (realistic values)
- Dashboard UI memories (example content)
**Script:** `video/scripts/extract-project-data.ts`
- Runs before rendering
- Outputs to `video/src/data/realData.ts`
- Can be triggered manually or in CI
### Component Examples
#### Speedometer Component
```typescript
export const Speedometer: React.FC<{
maxValue: number;
currentValue: number;
label: string;
color: string;
}> = ({ maxValue, currentValue, label, color }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = spring({
frame,
fps,
config: { damping: 15, stiffness: 100, overshootClamping: false },
});
const angle = interpolate(progress, [0, 1], [-120, 120]);
return (
<svg width="400" height="300" viewBox="0 0 400 300">
{/* Arc, needle, value display */}
</svg>
);
};
```
#### Count-Up Component
```typescript
export const CountUp: React.FC<{
from: number;
to: number;
suffix?: string;
delay?: number;
}> = ({ from, to, suffix = '', delay = 0 }) => {
const frame = useCurrentFrame();
const adjustedFrame = Math.max(0, frame - delay);
const progress = spring({
frame: adjustedFrame,
config: { damping: 20, stiffness: 80 },
});
const value = interpolate(progress, [0, 1], [from, to]);
const formatted = Math.floor(value).toLocaleString();
return <div>{formatted}{suffix}</div>;
};
```
#### Code Block Component
```typescript
export const CodeBlock: React.FC<{
code: string;
language: string;
startFrame: number;
animationDuration: number;
}> = ({ code, language, startFrame, animationDuration }) => {
const frame = useCurrentFrame();
const relativeFrame = Math.max(0, frame - startFrame);
const progress = Math.min(1, relativeFrame / animationDuration);
const visibleChars = Math.floor(progress * code.length);
const visibleCode = code.slice(0, visibleChars);
return (
<Highlight theme={themes.nightOwl} code={visibleCode} language={language}>
{/* Syntax highlighted code */}
</Highlight>
);
};
```
#### 3D Vector Scene
```typescript
const Vector3DScene: React.FC = () => {
const spheres = useMemo(() =>
Array.from({ length: 30 }, (_, i) => ({
position: generateClusteredPosition(i),
color: interpolateColor(i / 30, ["#8B5CF6", "#EC4899"]),
})),
[]);
return (
<Canvas camera={{ position: [0, 0, 15] }}>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
{spheres.map((sphere, i) => (
<Sphere key={i} position={sphere.position} color={sphere.color} />
))}
<Connections spheres={spheres} />
<OrbitControls enableZoom={false} autoRotate autoRotateSpeed={0.5} />
</Canvas>
);
};
```
### Performance Optimization
1. **Memoization:** All heavy computations use `useMemo`
2. **Lazy Loading:** 3D scenes only load when sequence is active
3. **Asset Preloading:** Fonts and images preload in `Root.tsx`
4. **Frame Skipping:** Complex animations calculate every 2-3 frames
5. **Static Generation:** Pre-render code snippets to images
### Audio Integration
```typescript
<Audio
src={staticFile('music/tech-ambient.mp3')}
volume={(f) =>
interpolate(f, [0, 30, 5370, 5400], [0, 0.3, 0.3, 0], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
})
}
/>
```
## Build & Rendering
### Development Workflow
```bash
# Setup
cd video
npm install
npm run extract-data # Extract real project metrics
# Development
npm run dev # Remotion Studio (localhost:3000)
# Rendering
npm run build # Full 3-minute showcase
npm run build:short # 60-second vertical version
npm run build:gif # Preview GIF
```
### NPM Scripts
```json
{
"scripts": {
"extract-data": "tsx scripts/extract-project-data.ts",
"dev": "remotion studio",
"build": "remotion render MCPMemoryShowcase out/showcase.mp4",
"build:short": "remotion render MCPMemoryShowcase-Short out/showcase-short.mp4",
"build:gif": "remotion render MCPMemoryShowcase out/preview.gif --codec=gif --scale=0.5"
}
}
```
### Advanced Rendering
```bash
# High quality render
npx remotion render MCPMemoryShowcase out/showcase.mp4 \
--codec=h264 \
--crf=18 \ # Quality (lower = better, 18-23 recommended)
--concurrency=4 \ # Parallel rendering
--props='{"theme":"dark"}'
# Render specific section for testing
npx remotion render MCPMemoryShowcase out/test.mp4 \
--frames=450-1050 # Just Performance card
```
### CI/CD Integration
**GitHub Actions:** `.github/workflows/render-video.yml`
```yaml
name: Render Video
on:
push:
branches: [main]
paths:
- 'video/**'
- 'CHANGELOG.md'
- 'pyproject.toml'
workflow_dispatch:
jobs:
render:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
working-directory: ./video
run: npm ci
- name: Extract project data
working-directory: ./video
run: npm run extract-data
- name: Render video
working-directory: ./video
run: npm run build
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: showcase-video
path: video/out/showcase.mp4
retention-days: 30
```
## Deliverables
### Output Files
- **Primary:** `out/showcase.mp4` - Full 3-4 minute showcase (1920x1080)
- **Social:** `out/showcase-short.mp4` - 60s vertical version (1080x1920)
- **Preview:** `out/preview.gif` - Animated preview (smaller file)
### Additional Outputs
- **Stills:** Key frames exported as images for thumbnails
- **Chapters:** Timestamped sections for YouTube/Vimeo
- **Captions:** Optional SRT file for accessibility
## Success Metrics
### Technical Quality
- ✅ Renders without errors
- ✅ Smooth 30fps throughout
- ✅ No visual glitches in 3D scenes
- ✅ Syntax highlighting accurate
- ✅ Animations feel polished (spring physics)
### Content Quality
- ✅ All metrics are accurate (real data)
- ✅ Code examples run without errors
- ✅ Architecture diagrams are clear
- ✅ Visual hierarchy guides attention
### Performance
- ✅ Render time: <10 minutes for full video
- ✅ File size: <50MB for 1080p
- ✅ Preview loads quickly (<5MB GIF)
## Future Enhancements
### v1.1 Additions
- **Voiceover track** - Professional narration
- **Sound effects** - UI clicks, whooshes for transitions
- **Captions/Subtitles** - Accessibility + SEO
### v2.0 Ideas
- **Interactive version** - Remotion Player with clickable elements
- **Multi-language** - Translated versions
- **Theme variants** - Light mode version
- **Dynamic rendering** - Real-time data from API
## References
### Remotion Documentation
- [Animations](https://www.remotion.dev/docs/animation)
- [Three.js Integration](https://www.remotion.dev/docs/three)
- [Layout Utils](https://www.remotion.dev/docs/layout-utils)
### Design Inspiration
- Vercel product videos
- Stripe technical showcases
- GitHub Satellite talks
### Technical Resources
- React Three Fiber: https://docs.pmnd.rs/react-three-fiber
- Prism themes: https://github.com/PrismJS/prism-themes
- Recharts: https://recharts.org/
---
**Status:** Design Complete ✅
**Next Step:** Implementation (create workspace, setup project, build components)
**Estimated Implementation Time:** 2-3 days for MVP, 1 week for polished version
