{"id":49416953,"url":"https://github.com/raw-fun-gaming/cosmic-ui-lite","last_synced_at":"2026-04-29T03:11:39.129Z","repository":{"id":312497702,"uuid":"1047697701","full_name":"Raw-Fun-Gaming/cosmic-ui-lite","owner":"Raw-Fun-Gaming","description":"A lightweight, futuristic, space-themed UI component library built with TypeScript and vanilla JavaScript. Features SVG-based components with animated gradients, cosmic effects, and responsive design.","archived":false,"fork":false,"pushed_at":"2025-10-29T11:10:17.000Z","size":8961,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-29T12:42:17.509Z","etag":null,"topics":["animations","components","cosmic","css","frontend","futuristic","game-ui","lightweight","lite","sci-fi","space","svg","typescript","ui","vanilla-js","zero-dependencies"],"latest_commit_sha":null,"homepage":"https://raw-fun-gaming.github.io/cosmic-ui-lite/","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/Raw-Fun-Gaming.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-31T02:35:38.000Z","updated_at":"2025-10-29T11:10:20.000Z","dependencies_parsed_at":"2025-08-31T04:29:59.966Z","dependency_job_id":null,"html_url":"https://github.com/Raw-Fun-Gaming/cosmic-ui-lite","commit_stats":null,"previous_names":["fur-gaming/cosmic-ui-lite","raw-fun-gaming/cosmic-ui-lite"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Raw-Fun-Gaming/cosmic-ui-lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raw-Fun-Gaming%2Fcosmic-ui-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raw-Fun-Gaming%2Fcosmic-ui-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raw-Fun-Gaming%2Fcosmic-ui-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raw-Fun-Gaming%2Fcosmic-ui-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raw-Fun-Gaming","download_url":"https://codeload.github.com/Raw-Fun-Gaming/cosmic-ui-lite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raw-Fun-Gaming%2Fcosmic-ui-lite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32408563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T02:37:21.628Z","status":"ssl_error","status_checked_at":"2026-04-29T02:36:50.947Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["animations","components","cosmic","css","frontend","futuristic","game-ui","lightweight","lite","sci-fi","space","svg","typescript","ui","vanilla-js","zero-dependencies"],"created_at":"2026-04-29T03:11:24.329Z","updated_at":"2026-04-29T03:11:39.124Z","avatar_url":"https://github.com/Raw-Fun-Gaming.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cosmic UI Lite\n\n[![npm version](https://img.shields.io/npm/v/cosmic-ui-lite?style=for-the-badge\u0026logo=npm\u0026color=00d4ff)](https://www.npmjs.com/package/cosmic-ui-lite)\n[![npm downloads](https://img.shields.io/npm/dm/cosmic-ui-lite?style=for-the-badge\u0026logo=npm\u0026color=ff6b35)](https://www.npmjs.com/package/cosmic-ui-lite)\n[![GitHub release](https://img.shields.io/github/v/release/raw-fun-gaming/cosmic-ui-lite?style=for-the-badge\u0026logo=github\u0026color=00ff88)](https://github.com/raw-fun-gaming/cosmic-ui-lite/releases)\n[![License](https://img.shields.io/github/license/raw-fun-gaming/cosmic-ui-lite?style=for-the-badge\u0026color=ffaa00)](https://github.com/raw-fun-gaming/cosmic-ui-lite/blob/main/LICENSE)\n\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Vanilla JS](https://img.shields.io/badge/Vanilla%20JS-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![Zero Dependencies](https://img.shields.io/badge/Zero%20Dependencies-00d4ff?style=for-the-badge\u0026logo=npm\u0026logoColor=white)](https://www.npmjs.com/package/cosmic-ui-lite)\n[![Game Ready](https://img.shields.io/badge/Game%20Ready-ff6b35?style=for-the-badge\u0026logo=gamepad\u0026logoColor=white)](https://github.com/raw-fun-gaming/cosmic-ui-lite/wiki/Complete-Examples)\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/raw-fun-gaming/cosmic-ui-lite/ci.yml?style=for-the-badge\u0026logo=github-actions)](https://github.com/raw-fun-gaming/cosmic-ui-lite/actions)\n[![GitHub Pages](https://img.shields.io/github/deployments/raw-fun-gaming/cosmic-ui-lite/github-pages?style=for-the-badge\u0026logo=github\u0026label=Demo%20Site\u0026color=00ff88)](https://raw-fun-gaming.github.io/cosmic-ui-lite/)\n[![Wiki](https://img.shields.io/badge/Wiki-Documentation-00ff88?style=for-the-badge\u0026logo=gitbook\u0026logoColor=white)](https://github.com/raw-fun-gaming/cosmic-ui-lite/wiki)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/cosmic-ui-lite?style=for-the-badge\u0026logo=webpack\u0026color=purple)](https://bundlephobia.com/package/cosmic-ui-lite)\n\nA lightweight, futuristic, space-themed UI component library built with TypeScript and vanilla JavaScript. Features SVG-based components with animated gradients, cosmic effects, and responsive design.\n\n\u003e 🌟 **[Live Demo](https://raw-fun-gaming.github.io/cosmic-ui-lite/) - Try all components interactively!**\n\u003e 📸 **See the [Visual Showcase](#-visual-showcase) below for component screenshots and examples!**\n\u003e 📚 **[Complete Documentation](../../wiki) | [Local Docs](docs/wiki/) | [Architecture Guide](docs/wiki/wiki-architecture-overview.md)**\n\n## 🚀 Motivation\n\nI needed a cosmic/sci-fi style UI for my game project, and I found [cosmic-ui](https://github.com/rizkimuhammada/cosmic-ui) pretty cool, but it requires React and my game is built with vanilla TypeScript. I didn't need most of the features there, so I decided to create this lightweight alternative that:\n\n- **Zero Framework Dependencies** - Works with vanilla JavaScript/TypeScript\n- **Lightweight \u0026 Focused** - Only the essential cosmic UI components\n- **Game-Ready** - Optimized for interactive applications and games\n- **Self-Contained** - Single CSS file + TypeScript class, no build process required\n\n## 🚀 Features\n\n- **Zero Dependencies**: Pure TypeScript/JavaScript with no external dependencies\n- **SVG-Based**: Scalable vector graphics for crisp rendering at any size\n- **Animated Effects**: Pulsing borders, particle animations, and gradient flows\n- **Responsive Design**: Adapts to different screen sizes with media queries\n- **TypeScript Support**: Full type safety with comprehensive interfaces\n- **Modular Architecture**: Individual components with shared utilities\n- **Cosmic Theme**: Futuristic space-inspired visual design\n\n## ⚠️ Constraints \u0026 Limitations\n\nWhile Cosmic UI Lite is designed for simplicity and game-ready performance, there are some design trade-offs to be aware of:\n\n### SVG Border Scaling\nThe SVG borders are scaled as a single piece, which means on components with unusual aspect ratios (especially tall/narrow or wide/short), the borders may appear over-scaled or distorted. This is similar to how image scaling works without nine-slice functionality.\n\n**Technical Note**: This could be solved by implementing a nine-slice system (similar to Unity's NineSlicedSprite or Pixi.js nine-slice textures) that scales corners, edges, and center independently. However, this would significantly increase complexity and goes against the project's goal of remaining lightweight and simple.\n\n**Recommendation**: For best visual results, use components within reasonable aspect ratios. The default sizing and responsive breakpoints are optimized for typical UI use cases.\n\n## 📦 Components\n\n### Core Components\n\n- **Button** - Animated buttons with multiple variants\n- **Modal** - Full-featured modals with backdrop and animations\n- **Card** - Content cards with cosmic borders\n- **Info** - Overlay popups with customizable titles\n- **Tag** - Location tags with flip animations\n- **Notification** - Toast-style notifications\n- **Error** - Error dialogs with confirmation\n- **Confirmation** - Confirmation dialogs with callbacks\n\n## 📸 Visual Showcase\n\n### Component Gallery\n\n**Cosmic Modal**\n![Cosmic Modal](screenshots/screenshot-cosmic-modal.png)\n\n**Cosmic Info Popup**\n![Cosmic Info](screenshots/screenshot-cosmic-info.png)\n\n**Cosmic Card**\n![Cosmic Card](screenshots/screenshot-cosmic-card.png)\n\n**Cosmic Tag**\n![Cosmic Tag](screenshots/screenshot-cosmic-tag.png)\n\n## 🎨 Visual Design\n\nThe components feature:\n- **Angled corners** using SVG clip paths\n- **Animated gradient borders** with color transitions\n- **Particle flash effects** with dynamic backgrounds\n- **Cosmic color scheme** with blues, cyans, and accent colors\n- **Responsive scaling** for different screen sizes\n- **Hover animations** with transform and glow effects\n\n## 🖼️ Credits\n\n**Inspiration**: [cosmic-ui](https://github.com/rizkimuhammada/cosmic-ui) by rizkimuhammada -  React-based cosmic UI library\n\n**SVG Graphics**: [HUD futuristic frame](https://www.vecteezy.com/vector-art/21909955-hud-futuristic-frame-border-game-swag-elements-pack-yellow-line-cyber-sci-fi-icon-symbol-cyberpunk-interface-editable) by [luqman firdau](https://www.vecteezy.com/members/lluuffyy)\n\n## 📁 File Structure\n\n```\ncosmic-ui-lite/\n├── README.md               # This file\n├── package.json           # Package configuration\n├── rollup.config.js       # Build configuration\n├── src/                   # Source code\n│   ├── index.ts           # Main entry point\n│   ├── components/        # Individual component classes\n│   │   ├── CosmicButton.ts\n│   │   ├── CosmicModal.ts\n│   │   ├── CosmicCard.ts\n│   │   ├── CosmicInfo.ts\n│   │   └── CosmicTag.ts\n│   ├── utils/             # Shared utilities\n│   │   ├── svg.ts         # SVG creation helpers\n│   │   └── gradients.ts   # Gradient definitions\n│   ├── types/             # TypeScript definitions\n│   │   └── index.ts\n│   ├── styles/            # CSS and styling\n│   │   └── cosmic-ui.css\n│   └── demo/              # Demo system\n│       └── index.ts\n├── dist/                  # Built output (generated)\n│   ├── index.esm.js       # ES Module build\n│   ├── index.cjs.js       # CommonJS build\n│   ├── index.umd.js       # UMD build\n│   ├── index.d.ts         # TypeScript declarations\n│   └── cosmic-ui.css      # Processed styles\n└── screenshots/           # Component screenshots\n    ├── screenshot-cosmic-modal.png\n    ├── screenshot-cosmic-info.png\n    ├── screenshot-cosmic-card.png\n    └── screenshot-cosmic-tag.png\n```\n\n## 📦 Installation\n\n### NPM (Recommended)\n\n```bash\nnpm install cosmic-ui-lite\n```\n\n```typescript\nimport { CosmicUI } from 'cosmic-ui-lite';\nimport 'cosmic-ui-lite/dist/cosmic-ui.css';\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/cosmic-ui-lite@latest/dist/index.umd.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/cosmic-ui-lite@latest/dist/cosmic-ui.css\"\u003e\n```\n\n### Source Build\n\n```bash\ngit clone https://github.com/raw-fun-gaming/cosmic-ui-lite.git\ncd cosmic-ui-lite \u0026\u0026 npm install \u0026\u0026 npm run build\n```\n\n## 🚀 Quick Example\n\n```typescript\n// 1. Install and import\nimport { CosmicUI } from 'cosmic-ui-lite';\nimport 'cosmic-ui-lite/dist/cosmic-ui.css';\n\n// 2. Create cosmic components\nconst button = CosmicUI.createButton({\n  text: 'Launch Sequence',\n  variant: 'primary',\n  onClick: () =\u003e console.log('🚀 Launched!')\n});\n\nconst modal = CosmicUI.createModal({\n  title: 'Mission Control',\n  content: 'Ready for deployment?',\n  buttons: [\n    { text: 'Cancel', variant: 'secondary' },\n    { text: 'Deploy', variant: 'primary', onClick: () =\u003e console.log('Deployed!') }\n  ]\n});\n\n// 3. Add to your app\ndocument.body.appendChild(button);\nmodal.show();\n```\n\n**🎮 Perfect for games, ⚡ zero dependencies, 📱 mobile-ready!**\n\n## 📖 Component Documentation\n\n### CosmicButton\n\nCreates animated buttons with cosmic styling.\n\n```typescript\ninterface CosmicButtonOptions {\n  text: string;                                    // Button text\n  variant?: 'default' | 'primary' | 'secondary' | 'danger'; // Visual style\n  onClick?: () =\u003e void;                           // Click handler\n  disabled?: boolean;                             // Disabled state\n  className?: string;                             // Additional CSS classes\n}\n\nconst button = CosmicUI.createButton({\n  text: 'Fire Laser',\n  variant: 'danger',\n  onClick: () =\u003e fireLaser()\n});\n```\n\n**Variants:**\n- `default` - Standard cosmic blue theme\n- `primary` - Enhanced blue with stronger effects\n- `secondary` - Orange accent theme\n- `danger` - Red warning theme\n\n### CosmicModal\n\nFull-featured modals with backdrop blur and animations.\n\n```typescript\ninterface CosmicModalOptions {\n  title: string;                                  // Modal title\n  content: string | HTMLElement;                  // Modal body content\n  showCloseButton?: boolean;                      // Show X button\n  buttons: CosmicButtonOptions[];                 // Footer buttons (required)\n  onClose?: () =\u003e void;                          // Close callback\n  className?: string;                             // Additional CSS classes\n}\n\nconst modal = CosmicUI.createModal({\n  title: 'Orbital Strike',\n  content: 'Select target coordinates',\n  buttons: [\n    { text: 'Cancel', variant: 'secondary' },\n    { text: 'Fire', variant: 'danger', onClick: () =\u003e fire() }\n  ],\n  onClose: () =\u003e console.log('Modal closed')\n});\n\n// Show the modal\nmodal.show();\n\n// Or close it programmatically\nmodal.close();\n```\n\n### CosmicCard\n\nContent cards with animated borders.\n\n```typescript\ninterface CosmicCardOptions {\n  title?: string;                                 // Optional card title\n  content: string | HTMLElement;                  // Card content\n  className?: string;                             // Additional CSS classes\n}\n\nconst card = CosmicUI.createCard({\n  title: 'Ship Status',\n  content: '\u003cp\u003eAll systems operational\u003c/p\u003e'\n});\n```\n\n### CosmicInfo\n\nOverlay information popups with customizable styling.\n\n```typescript\ninterface CosmicInfoOptions {\n  title?: string;                                 // Optional title\n  titleColor?: 'yellow' | 'green' | 'blue' | 'purple' | 'golden-red'; // Title theme\n  content: string | HTMLElement;                  // Info content\n  className?: string;                             // Additional CSS classes\n  onClose?: () =\u003e void;                          // Close callback\n  showOverlay?: boolean;                         // Show backdrop overlay\n}\n\nconst info = CosmicUI.createInfo({\n  title: 'Mission Briefing',\n  titleColor: 'golden-red',\n  content: '\u003cp\u003eTarget acquired. Proceed with caution.\u003c/p\u003e',\n  showOverlay: true\n});\n```\n\n**Title Colors:**\n- `yellow` - Golden yellow gradient with shimmer\n- `green` - Bright green sci-fi theme\n- `blue` - Electric blue cyberpunk theme\n- `purple` - Mystic purple gradient\n- `golden-red` - Fiery golden-red blend\n\n### CosmicTag\n\nLocation tags with flip animations and auto-dismiss.\n\n```typescript\ninterface CosmicTagOptions {\n  title?: string;                                 // Optional tag title\n  content: string | HTMLElement;                  // Tag content\n  className?: string;                             // Additional CSS classes\n  flipped?: boolean;                             // Horizontal flip\n}\n\nconst tag = CosmicUI.createTag({\n  title: 'TARGET ACQUIRED',\n  content: '\u003cdiv\u003e\u003ch4\u003eNew York\u003c/h4\u003e\u003cp\u003ePopulation: 8.4M\u003c/p\u003e\u003c/div\u003e',\n  flipped: false\n});\n```\n\n### Utility Methods\n\n```typescript\n// Show error dialog\nCosmicUI.showError('System Failure', 'Unable to connect to mothership');\n\n// Show confirmation dialog\nCosmicUI.showConfirmation(\n  'Destroy Planet',\n  'Are you sure? This cannot be undone.',\n  () =\u003e destroyPlanet(),\n  () =\u003e console.log('Cancelled')\n);\n\n// Show notification toast\nCosmicUI.showNotification('Success', 'Target eliminated');\n\n// Direct modal control\nconst modal = CosmicUI.createModal({\n  title: 'Custom Modal',\n  content: 'Content here',\n  buttons: [{ text: 'OK', variant: 'primary' }]\n});\nmodal.show();  // Show the modal\nmodal.close(); // Close it programmatically\n```\n\n## 🎭 Demo System\n\nUse the demo system to test all components:\n\n```typescript\nimport { createCosmicDemo } from './dist/index.esm.js';\n\n// Add demo panel to page\ncreateCosmicDemo();\n```\n\nOr build and run the demo:\n\n```bash\nnpm run demo\n```\n\nThis creates a floating demo panel with buttons to test:\n- Card Demo - Shows content cards with borders\n- Modal Demo - Interactive modal with buttons  \n- Error Demo - Error dialog with alien theme\n- Confirm Demo - Confirmation with callbacks\n- Info Demo - Information popup with overlay\n- Tag Demo - Multiple location tags with animations\n\n## 🎨 Customization\n\n### CSS Variables\n\nThe components use CSS custom properties for easy theming:\n\n```css\n:root {\n  --cosmic-primary: #00d4ff;      /* Primary blue */\n  --cosmic-secondary: #ff6b35;    /* Orange accent */\n  --cosmic-danger: #ff4444;       /* Red warning */\n  --cosmic-background: #000;      /* Background */\n  --cosmic-text: #ffffff;         /* Text color */\n}\n```\n\n### Animation Timing\n\nCustomize animation speeds:\n\n```css\n.cosmic-border {\n  animation-duration: 2s; /* Slower pulse */\n}\n\n.cosmic-btn-wrapper:hover {\n  transition: all 0.5s ease; /* Slower transitions */\n}\n```\n\n### Responsive Breakpoints\n\nComponents automatically adapt to screen sizes:\n\n- **Desktop**: Full size and effects\n- **Tablet**: Scaled components (580px height)\n- **Mobile**: Compressed layout (480px height)  \n- **Small**: Ultra-compact mode (430px height)\n\n## 🔧 Architecture\n\n### Component Structure\n\nEach component follows a consistent pattern:\n\n1. **Wrapper Element** - Container with positioning\n2. **SVG Background** - Animated gradient fill\n3. **SVG Border** - Animated outline with effects\n4. **Content Layer** - Text and interactive elements\n\n### SVG System\n\nComponents use shared SVG utilities:\n\n```typescript\n// Shared path definitions\nprivate static readonly PATHS = {\n  MODAL_BACKGROUND: 'M 265.95318,319.32816 H 448.53221...',\n  MODAL_BORDER: 'M 265.95318,319.32816 H 448.53221...',\n  // ...\n};\n\n// Reusable creation methods\nprivate static createSvgElement(className: string, viewBox: string): SVGElement;\nprivate static createGradient(id: string, stops: GradientStop[]): SVGLinearGradientElement;\nprivate static createPath(d: string, fill?: string): SVGPathElement;\n```\n\n### Animation System\n\nThree animation layers:\n\n1. **Particle Flash** - Moving gradient backgrounds\n2. **Cosmic Pulse** - Border color cycling  \n3. **Hover Effects** - Transform and glow changes\n\n## 🌟 Examples\n\n### Basic Button\n\n```typescript\nconst launchButton = CosmicUI.createButton({\n  text: 'Initialize Launch Sequence',\n  variant: 'primary',\n  onClick: () =\u003e {\n    console.log('Launch sequence initiated');\n    // Your launch logic here\n  }\n});\n\ndocument.body.appendChild(launchButton);\n```\n\n### Interactive Modal\n\n```typescript\nconst confirmModal = CosmicUI.createModal({\n  title: 'Mission Critical Decision',\n  content: `\n    \u003cp\u003eYou are about to commence orbital bombardment.\u003c/p\u003e\n    \u003cul\u003e\n      \u003cli\u003eTarget: Earth Sector 7\u003c/li\u003e\n      \u003cli\u003ePayload: Antimatter Missiles\u003c/li\u003e\n      \u003cli\u003eEstimated Casualties: 2.4 Million\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cp\u003e\u003cstrong\u003eThis action cannot be undone.\u003c/strong\u003e\u003c/p\u003e\n  `,\n  buttons: [\n    {\n      text: 'Abort Mission',\n      variant: 'secondary',\n      onClick: () =\u003e CosmicUI.showNotification('Aborted', 'Mission cancelled by operator')\n    },\n    {\n      text: 'FIRE',\n      variant: 'danger',\n      onClick: () =\u003e {\n        CosmicUI.showNotification('Launched', 'Orbital strike in progress...');\n        // Launch your orbital strike logic\n      }\n    }\n  ]\n});\n\nconfirmModal.show();\n```\n\n### Dynamic Info Cards\n\n```typescript\nconst locations = [\n  { name: 'Tokyo', pop: '13.9M', threat: 'HIGH' },\n  { name: 'London', pop: '9.5M', threat: 'MEDIUM' },\n  { name: 'Sydney', pop: '5.3M', threat: 'LOW' }\n];\n\nlocations.forEach((loc, index) =\u003e {\n  const tag = CosmicUI.createTag({\n    title: 'TARGET ACQUIRED',\n    content: `\n      \u003cdiv style=\"padding: 15px;\"\u003e\n        \u003ch3\u003e${loc.name}\u003c/h3\u003e\n        \u003cp\u003e\u003cstrong\u003ePopulation:\u003c/strong\u003e ${loc.pop}\u003c/p\u003e\n        \u003cp\u003e\u003cstrong\u003eThreat Level:\u003c/strong\u003e ${loc.threat}\u003c/p\u003e\n        \u003cp\u003e\u003cstrong\u003eStatus:\u003c/strong\u003e LOCKED\u003c/p\u003e\n      \u003c/div\u003e\n    `,\n    flipped: index % 2 === 0\n  });\n  \n  // Position randomly on screen\n  tag.style.position = 'fixed';\n  tag.style.top = `${20 + index * 150}px`;\n  tag.style.left = `${100 + index * 200}px`;\n  tag.style.zIndex = '1000';\n  \n  document.body.appendChild(tag);\n});\n```\n\n## 🚀 Getting Started for Development\n\n1. **Clone the repository** or download the source code\n2. **Install dependencies**: `npm install`\n3. **Build the library**: `npm run build`\n4. **Import components**: Use the built files in `dist/`\n5. **Start creating components** using the documented interfaces\n\n### Development Commands\n\n- `npm run build` - Build all output formats\n- `npm run build:watch` - Watch mode for development\n- `npm run dev` - Alias for build:watch\n- `npm run demo` - Build and run demo system\n- `npm run clean` - Clean dist directory\n\n## 📝 TypeScript Support\n\nFull TypeScript support with exported interfaces:\n\n```typescript\nimport { \n  CosmicUI,\n  CosmicButtonOptions,\n  CosmicModalOptions,\n  CosmicCardOptions,\n  CosmicInfoOptions,\n  CosmicTagOptions\n} from './dist/index.esm.js';\n```\n\nTypeScript declarations are automatically generated and included in `dist/index.d.ts`.\n\n## 🔄 Version History\n\n- **v1.0.0** - Initial release with core components\n  - Button, Modal, Card, Info, Tag components\n  - SVG-based rendering system\n  - Responsive design support\n  - Demo system included\n\n## 📄 License\n\nMIT License - Feel free to use in your projects!\n\n## 🤝 Contributing\n\nContributions welcome! Please maintain the cosmic theme and follow the established patterns for new components.\n\n---\n\n*Built for the future. Designed for space. 🚀*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraw-fun-gaming%2Fcosmic-ui-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraw-fun-gaming%2Fcosmic-ui-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraw-fun-gaming%2Fcosmic-ui-lite/lists"}