{"id":49394778,"url":"https://github.com/ashref-dev/openmotion","last_synced_at":"2026-04-28T15:03:30.590Z","repository":{"id":345632744,"uuid":"1154650561","full_name":"Ashref-dev/openmotion","owner":"Ashref-dev","description":"Convert screenshots into cinematic animated videos using Remotion","archived":false,"fork":false,"pushed_at":"2026-03-20T00:33:02.000Z","size":1213,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-20T15:57:41.447Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ashref-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-10T16:20:20.000Z","updated_at":"2026-03-20T00:33:06.000Z","dependencies_parsed_at":"2026-03-20T16:01:24.897Z","dependency_job_id":null,"html_url":"https://github.com/Ashref-dev/openmotion","commit_stats":null,"previous_names":["ashref-dev/openmotion"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Ashref-dev/openmotion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashref-dev%2Fopenmotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashref-dev%2Fopenmotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashref-dev%2Fopenmotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashref-dev%2Fopenmotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ashref-dev","download_url":"https://codeload.github.com/Ashref-dev/openmotion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashref-dev%2Fopenmotion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32385943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T14:34:11.604Z","status":"ssl_error","status_checked_at":"2026-04-28T14:32:37.009Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-28T15:03:00.248Z","updated_at":"2026-04-28T15:03:30.583Z","avatar_url":"https://github.com/Ashref-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenMotion\n\n**Convert screenshots into cinematic animated videos** — Production-ready Next.js application powered by Remotion.\n\n[![Next.js](https://img.shields.io/badge/Next.js-15.1.6-black)](https://nextjs.org/)\n[![Remotion](https://img.shields.io/badge/Remotion-4.0.407-blue)](https://www.remotion.dev/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)\n[![Drizzle ORM](https://img.shields.io/badge/Drizzle_ORM-0.45.1-green)](https://orm.drizzle.team/)\n\n---\n\n## Overview\n\n**OpenMotion** transforms your product screenshots, landing pages, or brand assets into professional animated videos using pre-built templates. This is **Milestone 1: Template Mode** — 12 carefully crafted templates optimized for different use cases.\n\n### Key Features\n\n[DONE] **12 Pre-built Templates** across 4 categories  \n[DONE] **Drag-and-drop asset management** with deduplication  \n[DONE] **Real-time preview** with Remotion Player  \n[DONE] **Customizable properties** (aspect ratio, duration, FPS, colors)  \n[DONE] **Background rendering** with progress tracking  \n[DONE] **Local file storage** (no cloud dependencies)  \n[DONE] **Type-safe** with TypeScript strict mode  \n[DONE] **Production-ready** build (verified)\n\n---\n\n## \u003e\u003e Quick Start\n\n### Prerequisites\n\n- **Bun** (\u003e= 1.0) — [Install Bun](https://bun.sh/)\n- **PostgreSQL** (\u003e= 14) — [Install PostgreSQL](https://www.postgresql.org/download/)\n- **Node.js** (\u003e= 18) — Only needed for certain Remotion operations\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/openmotion.git\ncd openmotion\n\n# Install dependencies\nbun install\n\n# Set up environment variables\ncp .env.example .env.local\n# Edit .env.local with your database credentials\n\n# Create database\ncreatedb openmotion\n\n# Push schema and seed templates\nDATABASE_URL=\"postgresql://user@localhost:5432/openmotion\" bun run db:push\nDATABASE_URL=\"postgresql://user@localhost:5432/openmotion\" bun run db:seed\n\n# Start development server\nDATABASE_URL=\"postgresql://user@localhost:5432/openmotion\" bun run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n---\n\n##  Available Scripts\n\n```bash\n# Development\nbun run dev              # Start dev server with Turbopack\nbun run build            # Production build\nbun run start            # Start production server\nbun run lint             # Run ESLint\n\n# Database\nbun run db:generate      # Generate migrations\nbun run db:migrate       # Run migrations\nbun run db:push          # Push schema to database (quick)\nbun run db:studio        # Open Drizzle Studio\nbun run db:seed          # Seed 12 templates\n\n# Type Checking\nbunx tsc --noEmit        # Check TypeScript errors\n```\n\n---\n\n##  Template Categories\n\nOpenMotion includes **12 templates** across **4 categories**:\n\n### 1. Minimal Hero (T1-T3)\n**Best for**: Hero sections, single-screen highlights  \n**Assets needed**: 1-2 images  \n**Duration**: 3-5 seconds\n\n- **Hero Drift** — Subtle pan with elegant fade\n- **Hero Copy** — Dynamic text reveal with image\n- **Hero ZoomCut** — Cinematic zoom with cut transition\n\n### 2. Landing Showcase (T4-T6)\n**Best for**: Multi-screen flows, landing pages  \n**Assets needed**: 3-6 images  \n**Duration**: 8-12 seconds\n\n- **Smooth Carousel** — Seamless horizontal carousel\n- **Stack Reveal** — Layered card reveal effect\n- **Split Showcase** — Side-by-side split transitions\n\n### 3. Brand Product (T7-T9)\n**Best for**: Product launches, brand identity  \n**Assets needed**: Logo + 2-5 screenshots  \n**Duration**: 10-15 seconds\n\n- **Logo → Hero** — Logo intro to product showcase\n- **Brand Carousel** — Branded carousel with logo overlay\n- **Clean End Card** — Professional ending with logo\n\n### 4. Fast Reels (T10-T12)\n**Best for**: Social media (Instagram, TikTok)  \n**Assets needed**: 3-6 images  \n**Duration**: 7-15 seconds  \n**Optimized for**: 9:16 (vertical)\n\n- **7-Second Reel** — Quick-cut vertical carousel\n- **Feature Beats** — Rhythmic feature highlights\n- **Dark Premium** — Premium dark theme with gold accents\n\n---\n\n## Architecture Architecture\n\n```\nopenmotion/\n├── app/                      # Next.js App Router\n│   ├── actions/              # Server actions (projects, assets, drafts, export)\n│   ├── projects/             # Main application routes\n│   │   ├── page.tsx          # Projects list\n│   │   └── [id]/\n│   │       ├── page.tsx      # Project detail (upload, templates)\n│   │       ├── editor/       # Timeline editor\n│   │       └── render/       # Render status\n│   ├── layout.tsx            # Root layout\n│   └── globals.css           # Tailwind v4 styles\n│\n├── components/               # React components\n│   ├── ui/                   # shadcn/ui primitives\n│   ├── video-editor.tsx      # Remotion Player + controls\n│   ├── render-status-client.tsx  # Progress polling\n│   ├── asset-gallery.tsx     # Image grid\n│   ├── asset-upload.tsx      # File upload\n│   └── template-selector.tsx # Template picker\n│\n├── lib/\n│   ├── db/\n│   │   ├── schema.ts         # Drizzle schema (5 tables)\n│   │   ├── seed/             # Template seeds\n│   │   └── index.ts          # DB connection\n│   ├── rendering/\n│   │   ├── render-engine.ts  # Main render function\n│   │   ├── browser-manager.ts # Chromium helpers\n│   │   └── logger.ts         # Structured logging\n│   └── storage/\n│       ├── local.ts          # File operations\n│       └── image-processor.ts # Sharp processing\n│\n├── remotion/\n│   ├── scenes/               # 6 scene primitives\n│   │   ├── carousel.tsx\n│   │   ├── drift.tsx\n│   │   ├── logo-intro.tsx\n│   │   ├── split-screen.tsx\n│   │   ├── stack-reveal.tsx\n│   │   └── zoom-cut.tsx\n│   ├── utils/\n│   │   └── motion.ts         # Constrained animations\n│   ├── DynamicVideo.tsx      # Main composition\n│   └── Root.tsx              # Remotion root\n│\n├── workflows/\n│   ├── render-video.ts       # Main workflow\n│   └── render-steps.ts       # 7 step functions\n│\n└── public/uploads/           # Local storage\n    ├── original/\n    ├── processed/\n    └── renders/\n```\n\n---\n\n##  Tech Stack\n\n### Frontend\n- **Next.js 15.1.6** — App Router, Server Actions, RSC\n- **React 19** — Latest React features\n- **Remotion 4.0.407** — Video rendering and preview\n- **Tailwind CSS v4** — Utility-first styling\n- **shadcn/ui** — High-quality component library\n- **TypeScript 5.9** — Strict type checking\n\n### Backend\n- **Drizzle ORM** — Type-safe database queries\n- **PostgreSQL** — Primary database\n- **Sharp** — Image processing (resize, optimize)\n- **Vercel Workflow** — Durable background jobs (beta)\n\n### Build \u0026 Dev Tools\n- **Bun** — Fast JavaScript runtime and package manager\n- **Turbopack** — Next.js dev server (faster than Webpack)\n- **ESLint** — Code linting\n- **PostCSS** — CSS processing\n\n---\n\n## 📊 Database Schema\n\n```typescript\n// 5 tables: projects, assets, templates, videoDrafts, renderJobs\n\nprojects\n  id: uuid (PK)\n  name: string\n  userId: string (future: auth)\n  createdAt, updatedAt\n\nassets\n  id: uuid (PK)\n  projectId: uuid (FK → projects)\n  originalS3Key: string (local path)\n  processedS3Key: string (local path)\n  hash: string (deduplication)\n  aspectRatio: decimal\n  width, height: integer\n  createdAt\n\ntemplates\n  id: string (PK, e.g., \"t1-hero-drift\")\n  name: string\n  category: enum (4 categories)\n  aspectRatio: enum (16:9, 9:16, 1:1, 4:5)\n  durationSeconds: integer\n  fps: integer (30 or 60)\n  minAssets, maxAssets: integer\n  propsSchema: json (Zod schema)\n\nvideoDrafts\n  id: uuid (PK)\n  projectId: uuid (FK → projects)\n  templateId: string (FK → templates)\n  propsJson: json (Remotion props)\n  status: enum (draft, rendering, complete, failed)\n  ratio: enum\n  fps: integer\n  createdAt, updatedAt\n\nrenderJobs\n  id: uuid (PK)\n  videoDraftId: uuid (FK → videoDrafts)\n  workflowRunId: string (Vercel workflow)\n  status: enum (pending, bundling, rendering, complete, failed)\n  progress: decimal (0-100)\n  stage: string (current step)\n  logsJson: json (structured logs)\n  outputS3Key: string (when complete)\n  sizeInBytes: bigint\n  createdAt, updatedAt\n```\n\n---\n\n##  How It Works\n\n### 1. Project Creation\nUser creates a project → stored in `projects` table.\n\n### 2. Asset Upload\n- User uploads screenshots (JPG/PNG/WebP)\n- Sharp processes images (resize, optimize, hash)\n- Deduplicated by hash → stored in `assets` table\n- Files saved to `public/uploads/original/` and `public/uploads/processed/`\n\n### 3. Template Selection\n- User selects from 12 templates\n- System validates: min/max asset requirements\n- Creates `videoDraft` with initial props\n\n### 4. Timeline Editor\n- Remotion Player previews video in real-time\n- User adjusts properties (colors, duration, fps)\n- Changes saved to `videoDraft.propsJson`\n\n### 5. Video Export\n- User clicks \"Export Video\"\n- Creates `renderJob` with unique `workflowRunId`\n- Triggers Vercel workflow (background)\n\n### 6. Render Workflow\n```typescript\n// workflows/render-video.ts\n\"use workflow\";  // Vercel durable workflow\n\n1. Load draft + assets from DB\n2. Bundle Remotion project (webpack)\n3. Select composition (template)\n4. Render video (Chromium headless)\n5. Save result to public/uploads/renders/\n6. Update job status → complete\n7. Cleanup temp files\n```\n\n### 7. Render Status\n- User redirected to `/projects/[id]/render/[runId]`\n- Page polls every 2 seconds for updates\n- Displays: progress bar, current stage, logs\n- When complete: download button appears\n\n---\n\n##  API Routes \u0026 Server Actions\n\n### Server Actions (app/actions/)\n\n```typescript\n// projects.ts\ncreateProject(name: string) → { id, name, userId }\ngetProjects() → Project[]\ngetProject(id: string) → Project\n\n// assets.ts\nuploadAssets(projectId: string, files: File[]) → Asset[]\ngetAssets(projectId: string) → Asset[]\n\n// video-drafts.ts\ncreateVideoDraft(data: CreateDraftInput) → VideoDraft\nupdateVideoDraft(id: string, propsJson: object) → VideoDraft\ngetVideoDraft(id: string) → VideoDraft\n\n// export.ts\nstartExport(videoDraftId: string) → { success, runId, jobId }\ngetRenderStatus(runId: string) → RenderJob\ncancelRender(runId: string) → { success }\n```\n\n---\n\n##  Customization\n\n### Adding New Templates\n\n1. **Create scene primitive** in `remotion/scenes/`\n2. **Define props schema** with Zod\n3. **Add template seed** to `lib/db/seed/templates.ts`\n4. **Test with Remotion Player**\n5. **Seed database**: `bun run db:seed`\n\nExample:\n```typescript\n// lib/db/seed/templates.ts\n{\n  id: 't13-custom',\n  name: 'Custom Template',\n  category: 'minimal-hero',\n  aspectRatio: '16:9',\n  durationSeconds: 5,\n  fps: 30,\n  minAssets: 1,\n  maxAssets: 1,\n  propsSchema: {\n    type: 'object',\n    properties: {\n      primaryColor: { type: 'string', default: '#FF0000' },\n      // ...\n    },\n  },\n}\n```\n\n### Modifying Scene Animations\n\nAll animations use **constrained motion** (`remotion/utils/motion.ts`):\n\n```typescript\nimport { drift, easeInOut } from '@/remotion/utils/motion';\n\n// Horizontal drift (constrained to 5% of width)\nconst x = drift(frame, fps, durationInFrames, 0.05);\n\n// Smooth easing\nconst opacity = easeInOut(frame, 0, 30, 0, 1);\n```\n\n---\n\n##  Testing\n\n### Manual Testing (Completed [DONE])\n- **7/7 flows passed** (100% pass rate)\n- **0 critical bugs** found\n- **Full report**: `docs/openmotion/E2E_Test_Report_20260122.md`\n\n### Automated Testing (TODO)\n```bash\n# Unit tests (future)\nbun test\n\n# Integration tests (future)\nbun test:integration\n```\n\n---\n\n## \u003e\u003e Deployment\n\n### Environment Variables\n\n```bash\n# .env.local\nDATABASE_URL=postgresql://user:password@localhost:5432/openmotion\nNODE_ENV=production\n```\n\n### Production Build\n\n```bash\n# Build and verify\nbun run build\nbun run start  # Test production build locally\n\n# Deploy to Vercel (recommended)\nvercel --prod\n```\n\n### Vercel Configuration\n\n```json\n// vercel.json\n{\n  \"buildCommand\": \"bun run build\",\n  \"env\": {\n    \"DATABASE_URL\": \"@database-url\"\n  }\n}\n```\n\n---\n\n## Security Security Notes\n\n- **No authentication** in Milestone 1 (single-user mode)\n- **Local file storage** (no AWS S3 credentials needed)\n- **SQL injection protected** by Drizzle ORM parameterization\n- **File upload validation** (type, size, hash)\n\n**For production**:\n- Add authentication (Clerk, NextAuth, etc.)\n- Move to cloud storage (S3, R2)\n- Add rate limiting\n- Implement CSRF protection\n\n---\n\n## Roadmap Roadmap\n\n### Milestone 1: Template Mode [DONE] (Current)\n- [x] 12 pre-built templates\n- [x] Asset management\n- [x] Timeline editor\n- [x] Background rendering\n- [x] E2E testing\n\n### Milestone 2: AI Agent (Future)\n- [ ] Natural language → video generation\n- [ ] AI template selection\n- [ ] Smart asset cropping\n- [ ] Voice-over integration\n\n### Milestone 3: Advanced Features (Future)\n- [ ] Multi-user authentication\n- [ ] Team collaboration\n- [ ] Custom fonts and branding\n- [ ] Audio track support\n- [ ] Batch rendering\n\n---\n\n##  Contributing\n\nContributions welcome! Please:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n---\n\n##  License\n\nMIT License — See [LICENSE](LICENSE) for details.\n\n---\n\n##  Acknowledgments\n\n- **Remotion** — Incredible video rendering library\n- **Next.js** — Best React framework\n- **shadcn/ui** — Beautiful component library\n- **Drizzle** — Developer-friendly ORM\n\n---\n\n##  Support\n\n- **Documentation**: [docs/](docs/)\n- **Issues**: [GitHub Issues](https://github.com/yourusername/openmotion/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/yourusername/openmotion/discussions)\n\n---\n\n**Built with  by [Your Name]**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashref-dev%2Fopenmotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashref-dev%2Fopenmotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashref-dev%2Fopenmotion/lists"}