{"id":51464667,"url":"https://github.com/simplearyan/kenichi-solid","last_synced_at":"2026-07-06T09:31:51.267Z","repository":{"id":357160268,"uuid":"1235248039","full_name":"simplearyan/kenichi-solid","owner":"simplearyan","description":"A high-performance, professional web-based video editor prototype inspired by macOS aesthetics. Built with SolidJS, TypeScript, and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2026-05-11T14:56:25.000Z","size":2481,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-11T16:40:55.090Z","etag":null,"topics":["canvas","mediabunny","solidjs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://simplearyan.github.io/kenichi-solid/","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/simplearyan.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-05-11T06:33:00.000Z","updated_at":"2026-05-11T15:09:42.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/simplearyan/kenichi-solid","commit_stats":null,"previous_names":["simplearyan/kenichi-solid"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/simplearyan/kenichi-solid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkenichi-solid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkenichi-solid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkenichi-solid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkenichi-solid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplearyan","download_url":"https://codeload.github.com/simplearyan/kenichi-solid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkenichi-solid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35185688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["canvas","mediabunny","solidjs","tailwindcss","typescript"],"created_at":"2026-07-06T09:31:50.124Z","updated_at":"2026-07-06T09:31:51.232Z","avatar_url":"https://github.com/simplearyan.png","language":"TypeScript","funding_links":["https://ko-fi.com/simplearyan"],"categories":[],"sub_categories":[],"readme":"# Kenichi Studio\n\n[![Support on Ko-fi](https://img.shields.io/badge/Support%20me%20on%20Ko--fi-F16061?style=for-the-badge\u0026logo=ko-fi\u0026logoColor=white)](https://ko-fi.com/simplearyan)\n\nA high-performance, professional web-based video editor prototype inspired by macOS aesthetics. Built with **SolidJS**, **TypeScript**, and **Tailwind CSS**.\n\n## 🌐 Live Preview\n**[Launch Latest Version](https://simplearyan.github.io/kenichi-solid/)**\n\n## 📚 Version Archive\n**[Explore Previous Versions (Selection Portal)](https://simplearyan.github.io/kenichi-solid/archive/)**\n\n## ✨ Features\n\n-   **Modular UI Architecture**: A responsive three-panel workspace with toggleable sidebars and a bottom-docked timeline.\n-   **High-Performance Rendering**: Decoupled Canvas engine with a dedicated requestAnimationFrame loop for smooth 60fps previews.\n-   **Advanced Export Engine**: Background video rendering (HD, 2K, 4K) using Web Workers and WebCodecs via `mediabunny`.\n-   **Export Control Center**: Full control over the rendering process with **Stop, Pause, and Resume** capabilities.\n-   **Professional Toolset**: \n    -   **Source Modal**: Interactive media trimming with touch-friendly scrubbers.\n    -   **Hierarchical Tracks**: Advanced track management with reordering, locking, and muting.\n    -   **Ripple Editing**: Intelligent clip shifting and automatic splitting for seamless edits.\n-   **Mobile-First Workspace**: Adaptive layout with a scrollable navigation bar for editing on any device.\n-   **Multi-Track Audio Mixdown**: Offline audio rendering using `OfflineAudioContext` for perfectly synced multi-track exports.\n-   **Media Ingestion**: Support for importing Video, Audio, and Images with automatic metadata extraction.\n-   **Chroma Key \u0026 Pixel FX**: Real-time green screen removal and color correction filters (brightness, contrast).\n-   **Motion Graphics**: Keyframeless animation system with `In`, `Out`, and `Loop` states (Fade, Slide, Zoom, Rotate, etc.).\n-   **Advanced Styling \u0026 HUD**:\n    *   **Styling**: Hardware-accelerated Border Radius and multi-parameter Drop Shadows for all visual layers.\n    *   **Performance Monitoring**: Real-time FPS counter and dynamic resolution tracking in the preview window.\n    *   **Customization**: Global Canvas background control (Transparent, Solid, Custom Colors).\n-   **Cinematic Color Grading**: Professional-grade **Exposure, Whites, Blacks, Saturation, Temperature, and Tint** controls with hardware-accelerated rendering.\n-   **Flicker-Free Scrubbing**: Advanced **Frame Ghosting** engine that eliminates black-frame glitches during timeline seeking and scrubbing.\n-   **Pro Typography**: Granular control over **Letter Spacing**, **Font Weight** (300-900), and emoji-safe text animations.\n\n## 🚀 Tech Stack\n\n-   **Frontend**: [SolidJS](https://solidjs.com/) (Reactive UI)\n*   **Language**: [TypeScript](https://www.typescriptlang.org/) (Type Safety)\n-   **Styling**: [Tailwind CSS](https://tailwindcss.com/) (Modern Aesthetics)\n-   **Encoding**: [mediabunny](https://github.com/v8paddy/mediabunny) (WebCodecs/WASM Video Muxing)\n-   **Archiving**: [JSZip](https://stuk.github.io/jszip/) (PNG Sequence Generation)\n-   **Icons**: [Lucide Solid](https://lucide.dev/guide/packages/lucide-solid)\n-   **Build Tool**: [Vite](https://vitejs.dev/)\n\n## 🏗️ Project Structure\n\n```text\nkenichi-studio/\n├── src/\n│   ├── components/\n│   │   ├── layout/       # Main workspace panels (Header, Panels, Grid)\n│   │   └── modals/       # UI modals (Export, Source Ingestion)\n│   ├── engine/\n│   │   ├── Renderer.ts       # Core rendering loop (Main \u0026 Offscreen)\n│   │   ├── ExportEngine.ts   # Background export orchestration\n│   │   ├── AudioEngine.ts    # WebAudio context management\n│   │   ├── LayerManager.ts   # Layer manipulation logic\n│   │   └── LayerRegistry.ts  # DOM-to-Canvas node mapping\n│   ├── store/                # Global SolidJS stores (projectStore)\n│   ├── workers/              # Background Web Workers\n│   │   ├── mediabunny.worker.ts # Video encoding (MP4/WebM/MOV)\n│   │   └── zip.worker.ts        # PNG sequence archiving\n│   ├── utils/                # Resizer, Math, and UI helpers\n│   ├── assets/               # Static assets and fonts\n│   └── index.tsx             # App entry point\n├── public/                   # Public static files (Favicon, etc.)\n└── index.html                # HTML template with SEO optimizations\n```\n\n## 🎞️ Export Capabilities\n\nThe **Kenichi Export Engine** is designed for pro-grade background rendering:\n- **Headless Pipeline**: Renders to `OffscreenCanvas` without blocking the main UI thread.\n- **Live Controls**: Interactive Stop/Pause/Resume during the rendering loop.\n- **Formats**: Supports `MP4` (H.264), `WebM` (VP9), `MOV`, and lossless `PNG Sequences` (ZIP).\n- **Resolutions**: Preset support for `720p`, `1080p`, `1440p (2K)`, and `2160p (4K)`.\n\n## 📦 Version History\n\n### **v1.5.3 - Vector Shapes \u0026 Text-First Layering** (Current)\n-   **Text-First Layering System**: Implemented automated top-track routing for text clips with dedicated \"Text Track\" auto-insertion at the absolute top of the timeline (index 0).\n-   **Vector Shapes Engine**: Added high-performance rendering for Rectangle and Circle primitives with full support for transforms, animations, and hardware-accelerated shadows.\n-   **Contextual UX Optimization**: Reprioritized the properties panel to surface text and shape styling at the very top, eliminating scroll time for content and typography adjustments.\n-   **Timeline Identity System**: Integrated color-coded clip identities, using a distinct Indigo identity for vector shapes to visually differentiate them from media and text clips.\n\n### **v1.5.2 - Pro Pitch Black \u0026 Multi-Version Portal**\n\n### **v1.5.1 - Cinematic Engine \u0026 Grading Suite** (Stable)\n-   **Professional Grading Suite**: Full control over Exposure, Whites, Blacks, Saturation, and white balance (Temperature \u0026 Tint).\n-   **Frame Ghosting Engine**: Implemented persistent per-layer buffering to eliminate visual flickers during timeline scrubbing and seeking.\n-   **Timeline UX Overhaul**: \n    -   **Active Track Highlighting**: Dynamic visual feedback for selected tracks and lanes.\n    -   **Content-Aware Labels**: Timeline clips now dynamically display text content as titles.\n    -   **Playback Persistence**: Automatic resumption of playback after seeking or clip manipulation.\n-   **High-Fidelity Typography**: Added support for Letter Spacing and granular Font Weight (300-900) selection.\n-   **Performance HUD v2**: Consolidated filter pipeline into a single hardware-accelerated pass for smoother 60fps previews and mobile-safe exports.\n\n### **v1.5 - Stylist \u0026 Performance HUD**\n-   **Advanced Styling**: Customizable Border Radius and granular Drop Shadows (Blur, Offset, Color) for Video, Image, and Text.\n-   **Canvas Customization**: Global support for Transparent, Solid presets, and Custom hex backgrounds.\n-   **Performance HUD**: Real-time FPS counter and dynamic resolution metadata tracking in the preview window.\n-   **Rendering Refinement**: Implemented 'Shadow Caster' logic for rounded corners and flicker-free pausing via drift tolerance.\n-   **Custom UI Components**: Replaced native browser dropdowns with premium, high-fidelity `PropSelect` and `HeaderSelect` components.\n\n### **v1.4 - Mobile Studio \u0026 Export Control**\n-   **Interactive Export**: Added Stop, Pause, and Resume buttons to the Export Modal.\n-   **Mobile Workspace**: Scrollable navigation bar for small screens (Timeline, Media, Clips, Props, Text, Shapes).\n-   **Unified Support**: Integrated Ko-fi support for project sustainability.\n-   **Toolbar Optimization**: Context-aware timeline tools that adapt to screen size.\n\n### **v1.3 - Professional Toolset**\n-   **Source Modal**: Interactive media trimming with zoom-aware scrubbers.\n-   **Track Hierarchy**: Drag-and-drop track reordering and track-level controls.\n-   **Ripple Mode**: Intelligent clip shifting and professional splitting logic.\n-   **Audio Mastery**: Advanced trim views and volume normalization.\n\n### **v1.2 - Aesthetic Overhaul**\n-   Professional macOS-inspired dark mode design.\n-   Responsive three-panel architecture with resizable dividers.\n-   Animated sidebar transitions and dock-style timeline.\n\n### **v1.1 - Stability \u0026 Resilience**\n-   Self-healing media registry for reliable rendering.\n-   Wait-for-ready pipeline to prevent \"Black Frame\" glitches.\n-   Improved async media loading and progress tracking.\n\n### **v1.0 - Initial Foundation**\n-   Multi-track timeline supporting Video, Audio, Image, and Text.\n-   Media Pool for asset management and ingestion.\n-   Basic clip properties (Scale, Position, Rotation).\n-   Core Browser-based rendering engine.\n\n## 🛠️ Getting Started\n\n### Installation\n```bash\nnpm install\n```\n\n### Development\n```bash\nnpm run dev\n```\n\n### Build\n```bash\nnpm run build\n```\n\n## 📜 License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Fkenichi-solid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplearyan%2Fkenichi-solid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Fkenichi-solid/lists"}