📹 Demo: Frontend plugins (ork-react, ork-ui-design, ork-frontend-*)

[yonatangross]

Overview

Create a 60 second demo video showcasing the frontend plugins: ork-react, ork-ui-design, and ork-frontend-*.

Specifications

Property	Value
Duration	60 seconds
Format	MP4
Resolution	1920x1080
FPS	60
Layout	Split-screen: Code (left) + Browser Preview (right)
Theme	Dark with vibrant UI accents (React blue, gradients)

Scene Breakdown

Scene 1: Intro (5s)

    ⚛️ Frontend Plugins
    
    React 19 • Design Systems • Performance
    
    "Modern UI at Light Speed"

• React logo animation with orbital electrons
• Plugin categories fade in
• Gradient background pulse

Scene 2: Component Generation (20s)

User: "Create a data table with sorting and pagination"

┌─────────────────────────────┐  ┌─────────────────────────────┐
│ CODE PANEL                  │  │ BROWSER PREVIEW             │
│                             │  │                             │
│ // DataTable.tsx            │  │ ┌─────────────────────────┐ │
│                             │  │ │ Users              🔍   │ │
│ export function DataTable() │  │ ├───────┬───────┬────────┤ │
│ {                           │  │ │ Name▼ │ Email │ Role   │ │
│   const [sort, setSort] =   │  │ ├───────┼───────┼────────┤ │
│     useState<SortConfig>(); │  │ │ Alice │ a@... │ Admin  │ │
│                             │  │ │ Bob   │ b@... │ User   │ │
│   const { data, isLoading } │  │ │ Carol │ c@... │ Editor │ │
│     = useQuery({...});      │  │ ├───────┴───────┴────────┤ │
│                             │  │ │    ◀ 1 2 3 4 5 ▶       │ │
│   return (                  │  │ └─────────────────────────┘ │
│     <Table>                 │  │                             │
│       ...                   │  │ Showing 1-10 of 47 users   │
│     </Table>                │  │                             │
│   );                        │  │                             │
│ }                           │  │                             │
└─────────────────────────────┘  └─────────────────────────────┘

Animations:

• Code types in with syntax highlighting
• Browser preview builds progressively
• Click animation on sort header (Name▼ → Name▲)
• Pagination click with smooth data transition

Scene 3: Performance Optimization - Lighthouse Before/After (20s)

User: "Optimize the page for Core Web Vitals"

📊 Lighthouse Audit

         BEFORE                           AFTER
┌─────────────────────────┐     ┌─────────────────────────┐
│                         │     │                         │
│    Performance          │     │    Performance          │
│        ┌───┐            │     │        ┌───┐            │
│        │45 │            │     │        │98 │            │
│        └───┘            │     │        └───┘            │
│      🔴 Poor            │     │      🟢 Good            │
│                         │     │                         │
│ LCP:  4.2s   🔴         │ ──▶ │ LCP:  1.1s   🟢         │
│ INP:  350ms  🔴         │     │ INP:  45ms   🟢         │
│ CLS:  0.25   🟡         │     │ CLS:  0.02   🟢         │
│                         │     │                         │
└─────────────────────────┘     └─────────────────────────┘

Optimizations Applied:
✓ Image lazy loading
✓ Code splitting (routes)
✓ Font display: swap
✓ Preconnect hints

Animations:

• Performance score animates from 45 → 98
• Circle fills with color transition (red → green)
• Metrics morph to new values
• Optimization checkmarks pop in sequence

Scene 4: View Transitions API (15s)

User: "Add smooth page transitions"

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  ┌──────────────┐          ┌──────────────┐                │
│  │   List View  │   ───▶   │  Detail View │                │
│  │              │  (fade)  │              │                │
│  │ • Item 1     │          │   📄 Item 1  │                │
│  │ • Item 2 ←───│──────────│───           │                │
│  │ • Item 3     │ (morph)  │   Lorem...   │                │
│  │              │          │              │                │
│  └──────────────┘          └──────────────┘                │
│                                                             │
│  view-transition-name: item-card                           │
│  ::view-transition-old { animation: fade-out 0.3s }        │
│  ::view-transition-new { animation: slide-in 0.3s }        │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Animations:

• Actual view transition demonstration
• Code snippet appears below
• Cross-fade and morph effects

Scene 5: CTA (5s)

     Build Beautiful, Fast UIs

 /plugin install orchestkit

 React 19 • TanStack Query • Zustand • Tailwind

Claude Code Prompt Template

Using Remotion skills, create a 60-second demo video for frontend plugins:

1. Intro with React orbital animation (5s)
2. Split-screen component generation with live preview (20s)
3. Lighthouse before/after with score animation (20s)
4. View Transitions API demonstration (10s)
5. CTA with frontend tech stack (5s)

Style: Dark theme with React blue gradients
Layout: Split-screen code + browser preview
Transitions: View transition effects, spring curves
Audio: Upbeat electronic, 120 BPM

Content Checklist

ork-react-core

• React Server Components setup
• TanStack Query patterns
• Zustand state management
• Suspense boundaries

ork-ui-design

• Design system generation
• Shadcn component setup
• Motion animations
• Theme switching

ork-frontend-performance

• Core Web Vitals optimization
• Lazy loading patterns
• Image optimization
• Bundle analysis

ork-frontend-advanced

• PWA setup
• View Transitions API
• Scroll-driven animations
• Dashboard patterns

Acceptance Criteria

• Split-screen layout matches VS Code + browser
• Code syntax highlighting accurate (TypeScript/TSX)
• Browser preview looks realistic
• Lighthouse scores animate smoothly
• View transitions demo is clear
• File size < 60MB

Dependencies

• Blocked by: 🎬 Setup: Initialize Remotion Project with Agent Skills #209 (Remotion Setup)
• Parallel with: 📹 Demo: AI/LLM plugins (ork-rag, ork-langgraph, ork-llm) #191, 📹 Demo: Backend plugins (ork-fastapi, ork-database, ork-async) #192, 📹 Demo: Testing, Security, DevOps plugins #194

Deliverables

• assets/demos/ork-frontend-demo.mp4 (full video)
• assets/demos/ork-frontend-lighthouse.gif (performance excerpt)
• assets/demos/ork-frontend-transitions.gif (view transitions excerpt)

[yonatangross]

Dependencies

Blocked by:

• 🎬 Setup: Initialize Remotion Project with Agent Skills #209 - Remotion project must be initialized first
• 📹 Demo: Core plugins (ork-core, ork-context, ork-memory) #190 - Video template pattern must be established

Parallel with: #191, #192, #194

Priority: MEDIUM - Can run in parallel after #190 completes.

[yonatangross]

Superseded by interactive playground approach

Frontend plugins (ork-react-core, ork-ui-design, ork-frontend) are represented in the docs/playgrounds/ demo gallery. See #190 for details on the pivot from Remotion videos to interactive HTML playgrounds.

Recommend closing in favor of the playground approach.

[yonatangross]

Superseded by Milestone #55 (Video Pipeline v2 — Kling Unification). Per-plugin demos replaced by unified Kling-powered pipeline.