{"id":51464698,"url":"https://github.com/simplearyan/kinetix","last_synced_at":"2026-07-06T09:31:51.797Z","repository":{"id":328135318,"uuid":"1114335159","full_name":"simplearyan/kinetix","owner":"simplearyan","description":"Kinetix turns your ideas into professional motion graphics, charts, and diagrams instantly. Export as MP4/WebM for premiere, Resolve, or social media.","archived":false,"fork":false,"pushed_at":"2026-01-29T04:54:13.000Z","size":2474,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-29T21:13:27.557Z","etag":null,"topics":["animation","astrojs","mediabunny","typescript"],"latest_commit_sha":null,"homepage":"https://simplearyan.github.io/kinetix/","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":"CONTRIBUTING.md","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-12-11T08:21:59.000Z","updated_at":"2026-01-29T04:59:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/simplearyan/kinetix","commit_stats":null,"previous_names":["simplearyan/kinetix"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/simplearyan/kinetix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkinetix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkinetix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkinetix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkinetix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplearyan","download_url":"https://codeload.github.com/simplearyan/kinetix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fkinetix/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":["animation","astrojs","mediabunny","typescript"],"created_at":"2026-07-06T09:31:51.448Z","updated_at":"2026-07-06T09:31:51.744Z","avatar_url":"https://github.com/simplearyan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kinetix\n\nKinetix is an advanced educational platform and content creation studio aimed at making learning engaging through interactive components and a dedicated creative environment. It leverages the power of Astro, React, and modern web technologies to deliver a seamless, performant, and visually rich user experience.\n\n## 🌟 Features\n\n- **🎨 Kinetix Studio**: A powerful in-browser content creation tool.\n    - **Layer-based Editing**: Manage scenes with a familiar professional workflow.\n    - **Animated Components**: Drag-and-drop elements including Progress Bars, Typewriter Code, and Counters.\n    - **Client-Side Video Export**: Export creations as WebM/MP4 directly from the browser using Remotion technology.\n    - **Real-time Preview**: Smooth playback and scrubbing capabilities.\n- **📚 Education Hub**: Structured learning environment with courses, lessons, and progress tracking.\n- **✍️ Interactive Blog**: Engaging technical content enhanced with custom interactive components.\n- **📊 Rich Visualization**: Integrated charts, diagrams (Mermaid, Markmap), and mathematical rendering (KaTeX).\n- **🌓 Dark Mode**: Fully supported dark/light theme toggle with persistent preferences.\n- **⚡ Performance**: Built on Astro for blazing fast performance and low TBT.\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+ and npm\n- Git\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/kinetix.git\ncd kinetix\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nVisit `http://localhost:4321` to see your site.\n\n## 📁 Project Structure\n\n```text\nkinetix/\n├── public/                  # Static assets\n├── src/\n│   ├── components/          # Reusable UI library\n│   │   ├── studio/          # Studio-specific components (Layers, Timeline)\n│   │   ├── charts/          # Data visualization components\n│   │   ├── animator/        # Animation logic and wrappers\n│   │   ├── scribble/        # Hand-drawn effects\n│   │   ├── vox/             # VOX-style documentary components\n│   │   └── ui/              # General UI elements\n│   ├── content/             # Content collections (Blog, Education)\n│   ├── layouts/             # Page layouts\n│   ├── pages/               # Application routes\n│   ├── styles/              # Global styles and tailwind config\n│   └── utils/               # Helper functions and engine logic\n└── package.json\n```\n\n## 🎨 Design System\n\n### Color Palette\n\n**Primary (Blue):**\n- Default: `#3B82F6`\n- Hover: `#2563EB`\n\n**Accent (Yellow):**\n- Default: `#EAB308`\n- Hover: `#CA8A04`\n\n**Surfaces:**\n- Dark: `#141414` (Background), `#1C1C1C` (Surface)\n- Light: `#FFFFFF` (Background), `#F9FAFB` (Surface)\n\n### Typography\n\n- **Headings/Body**: [Inter](https://fonts.google.com/specimen/Inter)\n- **Hand-drawn**: [Kalam](https://fonts.google.com/specimen/Kalam)\n\n## 🔧 Technology Stack\n\n- **Framework**: [Astro v5](https://astro.build/)\n- **UI Library**: [React 19](https://react.dev/)\n- **Styling**: [Tailwind CSS](https://tailwindcss.com/)\n- **State Management**: [Nanostores](https://github.com/nanostores/nanostores) \u0026 [Zustand](https://github.com/pmndrs/zustand)\n- **Video Engine**: [Remotion](https://www.remotion.dev/)\n- **Animations**: [Framer Motion](https://www.framer.com/motion/)\n- **Icons**: [Lucide React](https://lucide.dev/)\n- **Diagrams**: Mermaid, Markmap\n- **Math**: KaTeX\n\n## 🌐 Deployment\n\nThe site is built to be deployed as a static site or with an SSR adapter.\n\n```bash\n# Build the project\nnpm run build\n\n# Preview locally\nnpm run preview\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our development workflow, code style, and submission process.\n\n## 📄 License\n\nThis project is open source and available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Fkinetix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplearyan%2Fkinetix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Fkinetix/lists"}