{"id":51464694,"url":"https://github.com/simplearyan/text-editor","last_synced_at":"2026-07-06T09:31:51.580Z","repository":{"id":317680347,"uuid":"1062416909","full_name":"simplearyan/text-editor","owner":"simplearyan","description":"Pro Text Animation Editor","archived":false,"fork":false,"pushed_at":"2025-10-02T10:19:36.000Z","size":116,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-02T12:26:32.392Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://simplearyan.github.io/text-editor/","language":"HTML","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":"2025-09-23T08:22:57.000Z","updated_at":"2025-10-02T10:19:39.000Z","dependencies_parsed_at":"2025-10-02T12:27:24.247Z","dependency_job_id":"3f86b5e5-d125-43c7-8f0d-0e7817c514d5","html_url":"https://github.com/simplearyan/text-editor","commit_stats":null,"previous_names":["simplearyan/text-editor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/simplearyan/text-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Ftext-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Ftext-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Ftext-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Ftext-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplearyan","download_url":"https://codeload.github.com/simplearyan/text-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Ftext-editor/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":[],"created_at":"2026-07-06T09:31:51.125Z","updated_at":"2026-07-06T09:31:51.547Z","avatar_url":"https://github.com/simplearyan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pro Text Animation Editor: Features \u0026 Changelog\n\nThis document provides a comprehensive overview of the features, functionality, and development history of the Pro Text Animation Editor.\n\n*Last Updated: October 2, 2025*\n\n---\n\n## 1. Core Architecture \u0026 UI/UX\n\nThe editor is built as a single-page application using HTML, CSS (via Tailwind CSS), and vanilla JavaScript. It features a modern, responsive three-column layout designed for an intuitive workflow.\n\n### Main Layout:\n\n* **Left Panel:** Manages project-level elements like clips, subtitles, and export settings.\n* **Center Panel:** Contains the live animation preview (Canvas) and timeline controls.\n* **Right Panel:** A context-aware properties editor for selected elements.\n\n### Visual Design:\n\n* A dark, professional theme is used throughout to reduce eye strain.\n* A consistent color palette provides clear visual cues for interactive elements, selections, and different types of timeline tracks.\n\n### Custom Modals:\n\n* All native browser `prompt()` and `confirm()` dialogs have been replaced with a custom, non-blocking modal for a seamless user experience when saving presets or confirming actions.\n\n---\n\n## 2. Timeline System\n\nThe timeline is the heart of the editor, providing precise control over the timing and sequencing of all elements.\n\n### Layout:\n\n* **Track Headers:** A dedicated, fixed panel on the left displays clear labels for each track (e.g., \"Clip 1\", \"Subtitles\"), preventing UI overlap and improving organization.\n* **Horizontal Scrolling:** The timeline is housed within a scrollable container, preventing long animation durations from overflowing and breaking the main application layout.\n\n### Interactivity:\n\n* **Zoom:** A dedicated slider allows the user to zoom in for precise edits or zoom out for an overview of the entire project.\n* **Scrubbing:** The playhead can be clicked and dragged along the ruler to manually scrub through the animation.\n\n### Clip Manipulation:\n\n* **Dragging:** Clips can be dragged horizontally to adjust their start time.\n* **Resizing:** Both the start and end edges of a clip can be dragged to change its duration.\n\n### Playback Controls:\n\n* Play/Pause button for controlling the live preview.\n* A clear timecode display showing the current playhead position and the total duration.\n\n---\n\n## 3. Clip Management (Text Animations)\n\nText clips are the primary animated elements in the editor.\n\n### Clip Panel (Left):\n\n* **Add, Duplicate, Delete:** Easily manage the number of clips in your project.\n* **Selection:** Supports single-click, `Ctrl+Click` (for multi-selection), and `Shift+Click` (for range selection).\n\n### Right Panel (Contextual Editor):\n\nWhen a clip is selected, three main tabs appear:\n\n* **Inspector Tab:**\n    * **Style:** Controls the visual appearance, including text content, font, size, color, border, and text wrapping.\n    * **Layout:** Controls the positioning (X/Y coordinates) and rotation.\n    * **Effects:** Controls the drop shadow properties (X/Y offset, blur, and color).\n* **Animation Tab:**\n    * Controls the timing (Start Time, Stay Duration) and motion.\n    * **In/Out Animations:** Separate controls for entrance and exit animations, each with a style selector (e.g., Typewriter, Fade In Word, Bounce), an easing function selector, and a duration input.\n* **Presets Tab:** A powerful system for saving and reusing settings.\n\n---\n\n## 4. Subtitle System\n\nA dedicated system for adding and styling text overlays like captions and lower thirds.\n\n### Subtitle Panel (Left):\n\n* **Add/Delete:** Manually create and remove subtitle entries.\n* **SRT Import:** A key feature allowing users to import standard `.srt` subtitle files, which are automatically parsed and placed on the timeline.\n\n### Timeline Track:\n\n* Subtitles appear on a distinct, color-coded track below the main clips.\n* A visibility toggle allows the user to show or hide the subtitle track on the canvas.\n\n### Full Customization:\n\nWhen a subtitle is selected, the right-hand panel provides full control, just like for clips:\n\n* **Inspector Tab:** Edit text content, timing, style (font, color, border), layout (position), and effects (shadow). A special toggle allows for enabling or disabling the semi-transparent background.\n* **Animation Tab:** Apply simple In/Out animations (e.g., Fade, Slide Up) and control their duration.\n* **Presets Tab:** A complete, granular preset system identical to the one for clips is available for subtitles.\n\n---\n\n## 5. Preset System (Granular \u0026 Full)\n\nThe preset system has been designed for maximum workflow efficiency, allowing both broad and specific settings to be saved and reused. This system is available for both Text Clips and Subtitles.\n\n### Four Preset Categories:\n\n* **Style:** Saves only properties related to text appearance (font, color, border, etc.).\n* **Layout \u0026 Effects:** Saves only properties related to position, rotation, and drop shadow.\n* **Animation:** Saves only properties related to keyframing and motion (timings, animation styles, easing).\n* **Full Clip/Subtitle:** Saves all properties from the above three categories into a single preset.\n\n### Functionality:\n\nWithin the \"Presets\" tab for a selected element, users can Save, Apply, and Delete presets for each category independently.\n\n---\n\n## 6. Exporting\n\nThe editor provides robust options for rendering the final animation.\n\n### Format Selection:\n\nUsers can choose to export their video in multiple formats:\n\n* MP4 (where supported by the browser).\n* WebM (with high-quality VP9 or high-compatibility VP8 codecs).\n\n### Resolution:\n\n* Standard video resolutions from 360p up to 1080p are available.\n\n### Background Color:\n\n* Users can set a final background color for the exported video, which can be different from the background color used in the live previewer for better contrast checking.\n\n---\n\n## Changelog Summary\n\n* **Initial Version:** Basic text animation with a single timeline and property editor.\n* **Update 1 (Timeline Overhaul):** Introduced resizable clips, animation easing controls, and direct on-canvas manipulation. Replaced browser alerts with custom modals.\n* **Update 2 (Subtitle Integration):** Added a dedicated Subtitles tab, SRT import functionality, and a separate timeline track for subtitles.\n* **Update 3 (Subtitle Customization):** Enabled full styling, positioning, and animation controls for subtitles via the Inspector panel.\n* **Update 4 (Bug Fixes):** Addressed critical JavaScript errors that were preventing the application from initializing correctly.\n* **Update 5 (UI/UX Redesign):** Implemented a major visual overhaul with a new color scheme, improved timeline layout with track headers, and reorganized the Inspector into logical sub-tabs (Style, Layout, Effects).\n* **Update 6 (Granular Presets):** Deployed the advanced preset system, splitting presets into Style, Layout, Animation, and Full Clip categories for both clips and subtitles, and fixed associated bugs.\n* **Update 7 (Final Polish):** Fixed remaining subtitle animation and preset bugs. Added a dedicated viewer background color control and implemented horizontal overflow scrolling for the timeline to handle long projects gracefully.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Ftext-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplearyan%2Ftext-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Ftext-editor/lists"}