{"id":30046543,"url":"https://github.com/yuis-ice/molecular","last_synced_at":"2026-04-18T19:31:07.666Z","repository":{"id":306279567,"uuid":"1025630406","full_name":"yuis-ice/molecular","owner":"yuis-ice","description":"🧬 Interactive web application for visualizing and animating molecular structures. Built with React, TypeScript, and modern web technologies for chemistry education and research.","archived":false,"fork":false,"pushed_at":"2025-07-24T15:30:34.000Z","size":381,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-29T07:25:29.214Z","etag":null,"topics":["animation","chemistry","education","interactive","molecular-structure","molecular-visualization","react","science","typescript","web-app"],"latest_commit_sha":null,"homepage":"http://molecular.pages.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuis-ice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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}},"created_at":"2025-07-24T14:48:45.000Z","updated_at":"2025-07-24T15:30:38.000Z","dependencies_parsed_at":"2025-07-24T20:24:12.901Z","dependency_job_id":null,"html_url":"https://github.com/yuis-ice/molecular","commit_stats":null,"previous_names":["yuis-ice/molecular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yuis-ice/molecular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuis-ice%2Fmolecular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuis-ice%2Fmolecular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuis-ice%2Fmolecular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuis-ice%2Fmolecular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuis-ice","download_url":"https://codeload.github.com/yuis-ice/molecular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuis-ice%2Fmolecular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31982431,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T17:30:12.329Z","status":"ssl_error","status_checked_at":"2026-04-18T17:29:59.069Z","response_time":103,"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":["animation","chemistry","education","interactive","molecular-structure","molecular-visualization","react","science","typescript","web-app"],"created_at":"2025-08-07T08:15:59.236Z","updated_at":"2026-04-18T19:31:07.630Z","avatar_url":"https://github.com/yuis-ice.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧬 Molecular Structure Animation\n\nAn interactive web application for visualizing and animating molecular structures, built with React, TypeScript, and modern web technologies.\n\n[![Demo](https://img.shields.io/badge/Demo-Live-green.svg)](http://molecular.pages.dev/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-18.3+-blue.svg)](https://reactjs.org/)\n\n## 📸 Preview\n\n![Molecular Structure Animation](public/app_screenshot.png)\n\n*Interactive visualization of Rutin (C27H30O16) with animation controls and molecular information display*\n\n## ✨ Features\n\n- 🎨 **Interactive Molecular Visualization**: Explore molecular structures with smooth, real-time animations\n- 🔄 **Dynamic Animation Controls**: Adjust rotation speed, direction, and animation parameters\n- 📱 **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices\n- 🎯 **Educational Focus**: Perfect for students, educators, and chemistry enthusiasts\n- 🌟 **Screensaver Mode**: Beautiful molecular animations for ambient display\n- ⚙️ **Customizable Settings**: Personalize your viewing experience with various options\n- 🎭 **Multiple Molecules**: Pre-loaded library of common molecular structures\n- 🔬 **Scientific Accuracy**: Accurate representation of molecular geometry and bonds\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js (v16.0.0 or higher)\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/yuis-ice/molecular-structure-animation.git\n   cd molecular-structure-animation\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173` to see the application running.\n\n## 🛠️ Available Scripts\n\n- `npm run dev` - Start the development server with hot reload\n- `npm run build` - Build the project for production\n- `npm run preview` - Preview the production build locally\n- `npm run lint` - Run ESLint to check code quality\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── components/           # React components\n│   ├── MolecularDisplay.tsx    # Main molecular visualization component\n│   ├── MolecularScreensaver.tsx # Screensaver mode component\n│   └── SettingsPanel.tsx       # Settings and controls panel\n├── data/                # Static data and configurations\n│   └── molecules.ts           # Molecular structure definitions\n├── hooks/               # Custom React hooks\n│   └── useLocalStorage.ts     # Local storage management hook\n├── types/               # TypeScript type definitions\n│   └── molecule.ts            # Molecular structure types\n├── App.tsx              # Main application component\n├── main.tsx             # Application entry point\n└── index.css            # Global styles and Tailwind imports\n```\n\n## 🧬 Molecular Data Structure\n\nThe application uses a standardized format for molecular data:\n\n```typescript\ninterface Molecule {\n  id: string;\n  name: string;\n  formula: string;\n  atoms: Atom[];\n  bonds: Bond[];\n  description?: string;\n}\n\ninterface Atom {\n  id: string;\n  element: string;\n  position: [number, number, number];\n  color?: string;\n}\n\ninterface Bond {\n  id: string;\n  atomIds: [string, string];\n  type: 'single' | 'double' | 'triple';\n}\n```\n\n## 🎮 Usage\n\n### Basic Navigation\n- **Rotation**: Molecules automatically rotate for optimal viewing\n- **Settings Panel**: Click the settings icon to access customization options\n- **Screensaver Mode**: Enable for continuous ambient molecular animations\n\n### Customization Options\n- Adjust rotation speed and direction\n- Toggle between different molecular structures\n- Customize visual appearance and colors\n- Enable/disable various display elements\n\n## 🤝 Contributing\n\nWe welcome contributions from the community! Please see our [Contributing Guide](CONTRIBUTING.md) for details on how to get started.\n\n### Quick Contributing Steps\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Make your changes\n4. Commit your changes (`git commit -m 'Add some amazing feature'`)\n5. Push to the branch (`git push origin feature/amazing-feature`)\n6. Open a Pull Request\n\n## 🐛 Bug Reports \u0026 Feature Requests\n\n- **Bug Reports**: Please use our [Bug Report Template](.github/ISSUE_TEMPLATE/bug_report.yml)\n- **Feature Requests**: Please use our [Feature Request Template](.github/ISSUE_TEMPLATE/feature_request.yml)\n- **General Discussion**: Visit our [GitHub Discussions](https://github.com/yuis-ice/molecular-structure-animation/discussions)\n\n## 🧪 Technology Stack\n\n- **Framework**: React 18.3+\n- **Language**: TypeScript 5.5+\n- **Build Tool**: Vite 5.4+\n- **Styling**: Tailwind CSS 3.4+\n- **Icons**: Lucide React\n- **Linting**: ESLint with TypeScript support\n\n## 📚 Educational Applications\n\nThis project is perfect for:\n\n- **Chemistry Education**: Visualizing molecular structures and chemical bonds\n- **Interactive Learning**: Hands-on exploration of molecular geometry\n- **Presentations**: Engaging visual aids for chemistry lessons\n- **Research**: Quick visualization of molecular compounds\n- **Self-Study**: Independent learning and exploration\n\n## 🌟 Supported Molecules\n\nThe application includes pre-configured data for common molecules:\n\n- Water (H₂O)\n- Carbon Dioxide (CO₂)\n- Methane (CH₄)\n- Ammonia (NH₃)\n- Benzene (C₆H₆)\n- Caffeine (C₈H₁₀N₄O₂)\n- And many more...\n\n## 🚀 Deployment\n\nThe application is deployed and available at: [http://molecular.pages.dev/](http://molecular.pages.dev/)\n\n### Building for Production\n\n```bash\nnpm run build\n```\n\nThe built files will be in the `dist/` directory, ready for deployment to any static hosting service.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Thanks to the chemistry education community for inspiration\n- Built with modern web technologies and best practices\n- Designed for accessibility and cross-platform compatibility\n\n## 📞 Support\n\nIf you encounter any issues or have questions:\n\n1. Check the [existing issues](https://github.com/yuis-ice/molecular-structure-animation/issues)\n2. Join our [discussions](https://github.com/yuis-ice/molecular-structure-animation/discussions)\n3. Create a new issue using the appropriate template\n\n---\n\n**Made with ❤️ for the chemistry education community**\n\n*Explore the fascinating world of molecular structures through interactive visualization!*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuis-ice%2Fmolecular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuis-ice%2Fmolecular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuis-ice%2Fmolecular/lists"}