soroush.asadi
d830c56ea0
Turns a template into an ordered list of editable scene blocks instead of one monolithic composition — the foundation for the scene-based template engine (all Renderforest-style types, per-scene editable duration, add/duplicate/ delete/reorder). Render-side only; backend wiring is Phase 2. - src/scenes/types.ts: SceneInstance/BlockProps/SceneBlock + withDefaults/clamp. - src/scenes/chrome.tsx: shared 2.5D Three.js backdrop (parallax camera, blobs, particles, optional 3D confetti) + grain/vignette/progress/kicker/transition. - src/scenes/blocks/*: Core 6 blocks — TitleCard, CharacterScene (full room + vendored CC0 character behind a desk), ImageCaption, KineticQuote, Slideshow, OutroCTA — each with editable fields + its own duration range. - src/scenes/registry.ts: the block registry (blockId -> block). - src/compositions/FlexStory.tsx: the sequencer — stacks blocks in <Sequence>, clamps per-scene duration, and computes composition length dynamically via calculateMetadata (so add/delete/reorder/duration all flow to the render). - StoryScenes.tsx: the 2.5D story proof this productizes; docs/TEMPLATE_BRIEF.md: the guided creator flow + Template Spec. Verified: all 6 blocks render via FlexStory in 16:9/1:1/9:16; a custom props override (reordered scenes, custom characters/durations/colors) renders correctly and the total length tracks Σ per-scene durations. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
FlatRender
AI-powered video and image creation platform. Create professional videos and images with templates, a drag-and-drop studio, and one-click export.
Products
- Video Maker — timeline editor, Konva canvas, scene browser, transitions, audio, nexrender export
- Image Editor — Konva canvas, filters, crop, background removal, layer system
- Video Trimmer — ffmpeg.wasm in-browser trim + crop + export
- Templates — browsable marketplace with category sidebar
Quick Start
npm install
cp .env.example .env.local # fill in your credentials
npm run dev # http://localhost:3000
Related Repos
| Repo | Path | Purpose |
|---|---|---|
| flatrender | D:\Projects\flatrender |
This repo — Next.js app |
| flatrender-admin | D:\Projects\flatrender-admin\admin-api |
.NET 10 Admin API |
| flatrender-admin | D:\Projects\flatrender-admin\admin-ui |
React Admin SPA |
Stack
- Next.js 15 App Router · TypeScript · Tailwind CSS · shadcn/ui
- Supabase — auth, database, storage
- Stripe — subscription payments
- React-Konva — canvas editor (video + image)
- next-intl — Persian (default) + English i18n
- ffmpeg.wasm — browser-side video trimming
- nexrender — server-side After Effects rendering
Environment Variables
See .env.example for the full list. Minimum required to run:
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
Without Supabase the app runs in mock mode (studio uses localStorage).
Database Migrations
Run in order in Supabase SQL Editor:
supabase/migrations/001_profiles.sqlsupabase/migrations/002_render_jobs.sqlsupabase/migrations/003_projects.sql
Admin Panel
The admin panel at D:\Projects\flatrender-admin manages templates, categories, and media. When ADMIN_API_URL=http://localhost:5000 is set, the Next.js app fetches live data from it. Without it, hardcoded fallback data is used.
See CLAUDE.md for full development guide.