{"_id":"@alikyusupov/flip-board","_rev":"4-7a4541c2f0b57d240645addd3f0eae83","name":"@alikyusupov/flip-board","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@alikyusupov/flip-board","version":"0.0.1","author":{"name":"Alik Yusupov","email":"iamalisher87@gmail.com"},"_id":"@alikyusupov/flip-board@0.0.1","maintainers":[{"name":"alikyusupov","email":"kleot@mail.ru"}],"homepage":"https://github.com/alikyusupov/flip-board#readme","bugs":{"url":"https://github.com/alikyusupov/flip-board/issues"},"dist":{"shasum":"4b9acd2ab05519ffd9c628cf7870e98a33df47eb","tarball":"https://registry.npmjs.org/@alikyusupov/flip-board/-/flip-board-0.0.1.tgz","fileCount":12,"integrity":"sha512-fhpfegavK3EgCQ48lN1PQe6n2+aNOlAxbQUk7T4HIRG6VnOakI9uo95DZeW6eDbEhWEM8h7L5s3SsZg0noNrIQ==","signatures":[{"sig":"MEUCIBhlZQx42c7+UVnAEREEOgvsHS4m1NYBt3PbYpk34RarAiEAxcC1RMqJBUrafp1h4eixxtrvrb9dhztwa5TyP+qL7Fw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23133},"gitHead":"f0f261f96eb2916626676e995c2962707053a954","_npmUser":{"name":"alikyusupov","email":"kleot@mail.ru"},"deprecated":"Broken bundle","repository":{"url":"git+https://github.com/alikyusupov/flip-board.git","type":"git"},"_npmVersion":"11.13.0","description":"A high-quality, canvas-based flip-board component for Angular. Create stunning animated word displays with smooth flip transitions and customizable themes.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^21.2.0"},"_npmOperationalInternal":{"tmp":"tmp/flip-board_0.0.1_1783265540213_0.30945559399238265","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@alikyusupov/flip-board","version":"0.0.2","author":{"name":"Alik Yusupov","email":"iamalisher87@gmail.com"},"_id":"@alikyusupov/flip-board@0.0.2","maintainers":[{"name":"alikyusupov","email":"kleot@mail.ru"}],"homepage":"https://github.com/alikyusupov/flip-board#readme","bugs":{"url":"https://github.com/alikyusupov/flip-board/issues"},"dist":{"shasum":"3f043d9e3ae19ae4c4e48bc4cbec5cfc0157d284","tarball":"https://registry.npmjs.org/@alikyusupov/flip-board/-/flip-board-0.0.2.tgz","fileCount":5,"integrity":"sha512-7Iitssm97pa9BGQ0BKMzBW9/+yC8CyhqnstgwPs9AxtLtLE/AZhZn1CFp0ABmHXvLs6k+oqYHumahkX0zB6Jwg==","signatures":[{"sig":"MEQCIDeVatMpF2ZdxEnCvEUZ3oUkaAGJdiIsk3FcwEa51264AiAJoQG85a89Jr4LXoQifcaCnJ1pQveULChQiBflVRef2A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56039},"type":"module","module":"fesm2022/alikyusupov-flip-board.mjs","exports":{".":{"types":"./types/alikyusupov-flip-board.d.ts","default":"./fesm2022/alikyusupov-flip-board.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f0f261f96eb2916626676e995c2962707053a954","typings":"types/alikyusupov-flip-board.d.ts","_npmUser":{"name":"alikyusupov","email":"kleot@mail.ru"},"repository":{"url":"git+https://github.com/alikyusupov/flip-board.git","type":"git"},"_npmVersion":"11.13.0","description":"A high-quality, canvas-based flip-board component for Angular. Create stunning animated word displays with smooth flip transitions and customizable themes.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^21.2.0"},"_npmOperationalInternal":{"tmp":"tmp/flip-board_0.0.2_1783270567522_0.5490062443623842","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@alikyusupov/flip-board","description":"A high-quality, canvas-based flip-board component for Angular. Create stunning animated word displays with smooth flip transitions and customizable themes.","version":"0.0.3","author":{"name":"Alik Yusupov","email":"iamalisher87@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/alikyusupov/flip-board.git"},"peerDependencies":{"@angular/core":"^21.2.0"},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"module":"fesm2022/alikyusupov-flip-board.mjs","typings":"types/alikyusupov-flip-board.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/alikyusupov-flip-board.d.ts","default":"./fesm2022/alikyusupov-flip-board.mjs"}},"type":"module","gitHead":"f0f261f96eb2916626676e995c2962707053a954","_id":"@alikyusupov/flip-board@0.0.3","bugs":{"url":"https://github.com/alikyusupov/flip-board/issues"},"homepage":"https://github.com/alikyusupov/flip-board#readme","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-aIbA98eUeZUgZXudRWta2ddwjRu9s6CiQcdCUfuDx2hVkwPfT0L32HCgqRsKsxd4CcG1P9LzRGKL5/izULoruw==","shasum":"12f01127e0ea27aade6ac3f3ff188aa6ea7b7481","tarball":"https://registry.npmjs.org/@alikyusupov/flip-board/-/flip-board-0.0.3.tgz","fileCount":5,"unpackedSize":56279,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDj0WJHN27QDAp+CjRkxH85MUftZXyYR2wDypl13h2MVwIgVO15qjwyYGdIPBerRksv7aQx+gsjqe8+Nga4UcRRlOM="}]},"_npmUser":{"name":"alikyusupov","email":"kleot@mail.ru"},"directories":{},"maintainers":[{"name":"alikyusupov","email":"kleot@mail.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/flip-board_0.0.3_1783272551780_0.4762372101635499"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-05T15:32:20.109Z","modified":"2026-07-05T17:29:12.014Z","0.0.1":"2026-07-05T15:32:20.355Z","0.0.2":"2026-07-05T16:56:07.663Z","0.0.3":"2026-07-05T17:29:11.905Z"},"bugs":{"url":"https://github.com/alikyusupov/flip-board/issues"},"author":{"name":"Alik Yusupov","email":"iamalisher87@gmail.com"},"homepage":"https://github.com/alikyusupov/flip-board#readme","repository":{"type":"git","url":"git+https://github.com/alikyusupov/flip-board.git"},"description":"A high-quality, canvas-based flip-board component for Angular. Create stunning animated word displays with smooth flip transitions and customizable themes.","maintainers":[{"name":"alikyusupov","email":"kleot@mail.ru"}],"readme":"# flip-board\n\nmarkdown\n# flip-board\n\nA high-quality, canvas-based flip-board component for Angular. Create stunning animated word displays with smooth flip transitions and customizable themes.\n\n[![npm version](https://img.shields.io/npm/v/@angular-monorepo/flip-board.svg)](https://www.npmjs.com/package/@angular-monorepo/flip-board)\n\n## 🎬 Preview\n\n![FlipBoard Animation](./flip-board.gif)\n\n## ✨ Features\n\n[![npm version](https://img.shields.io/npm/v/@angular-monorepo/flip-board.svg)](https://www.npmjs.com/package/@angular-monorepo/flip-board)\n\n## ✨ Features\n\n- **Smooth Flip Animation**: Professional-grade flip animation with physics-based easing\n- **Canvas-Based Rendering**: High-performance rendering with smooth 60fps animations\n- **Customizable Themes**: Light and dark themes built-in\n- **Resizable**: Fully responsive and adapts to container size\n- **Configurable Words**: Display custom words or use default airport-style rotating words\n- **Loop Mode**: Optional automatic cycling through word list\n- **Click Interaction**: Click to manually change words in loop mode\n- **Angular Standalone**: Modern standalone component with no external dependencies\n\n## 📦 Installation\n\nInstall the package via npm:\n\n```bash\nnpm install flip-board\n```\n\nOr using yarn:\n\n```bash\nyarn add flip-board\n```\n\nOr using pnpm:\n\n```bash\npnpm add flip-board\n```\n\n## 🚀 Usage\n\n### Basic Usage\n\nImport the component and add it to your component's imports:\n\n```typescript\nimport { FlapBoardComponent } from 'flip-board';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [FlapBoardComponent],\n  template: `\n    <flip-board></flip-board>\n  `\n})\nexport class AppComponent {}\n```\n\n### With Custom Words\n\nDisplay your custom words:\n\n```typescript\n<flip-board [words]=\"['HELLO', 'WORLD', 'FLIP-BOARD']\"></flip-board>\n```\n\n### With Themed Display\n\nUse the built-in light or dark theme:\n\n```html\n<!-- Dark theme (default) -->\n<flip-board theme=\"dark\" [words]=\"['DARK', 'MODE']\"></flip-board>\n\n<!-- Light theme -->\n<flip-board theme=\"light\" [words]=\"['LIGHT', 'MODE']\"></flip-board>\n```\n\n### With Automatic Looping\n\nEnable auto-cycling through words:\n\n```html\n<flip-board theme=\"dark\" [words]=\"words\" [loop]=\"true\"></flip-board>\n```\n\n### With Click Interaction\n\nWhen loop mode is enabled, you can click to change the word:\n\n```html\n<flip-board [loop]=\"true\" (click)=\"onClick()\"></flip-board>\n```\n\n### With Custom Sizing\n\nControl the maximum width of the flip board:\n\n```html\n<!-- Small (max 480px) -->\n<flip-board size=\"sm\" [words]=\"['SMALL', 'SIZE']\"></flip-board>\n\n<!-- Medium (max 720px) -->\n<flip-board size=\"md\" [words]=\"['MEDIUM', 'SIZE']\"></flip-board>\n\n<!-- Large (max 960px) -->\n<flip-board size=\"lg\" [words]=\"['LARGE', 'SIZE']\"></flip-board>\n```\n\n## 🎨 Configuration\n\n### Inputs\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `theme` | `FlapBoardTheme` | `'dark'` | Theme variant - `'dark'` or `'light'` |\n| `size` | `FlapBoardSize` | `'sm'` | Size variant - `'sm'`, `'md'`, or `'lg'` |\n| `words` | `string[]` | `DEFAULT_WORDS` | Array of words to cycle through |\n| `loop` | `boolean` | `false` | Enable automatic cycling through words |\n\n### Input Types\n\n```typescript\nexport type FlapBoardTheme = 'dark' | 'light';\nexport type FlapBoardSize = 'sm' | 'md' | 'lg';\n```\n\n## 📝 Available Words\n\nBy default, the component displays a rotating list of popular travel destinations:\n- TOKYO, LONDON, NEW YORK, PARIS, BERLIN, AMSTERDAM, DUBAI, SINGAPORE, SYDNEY, ROME, HONG KONG, ISTANBUL\n\nYou can customize this by providing your own `words` array.\n\n## 🎯 Animation Details\n\n- **Flip Duration**: 400-800ms (randomized for natural feel)\n- **Word Change Interval**: 2200ms when looping\n- **Blank Hold Duration**: 400ms between word changes\n- **Stagger Delay**: Random 0-150ms between letter flips\n\n## 🎨 Theme Colors\n\n### Dark Theme Palette\n- Flap Background: `#161616`\n- Text: `#e9e6dc`\n- Divider: `#050505`\n- Hinge: `#3a3a3a`\n- Shadow: `rgba(0,0,0,0.6)`\n\n### Light Theme Palette\n- Flap Background: `#e4e4e1`\n- Text: `#161616`\n- Divider: `#b8b8b3`\n- Hinge: `#a5a5a0`\n- Shadow: `rgba(0,0,0,0.2)`\n\n## 📱 Responsive Behavior\n\nThe component automatically:\n- Detects container size changes\n- Adjusts cell dimensions to fit available space\n- Maintains aspect ratio across all sizes\n- Adapts to high-DPI displays for crisp rendering\n\n## 🔧 Size Configuration\n\n| Size | Max Width |\n|------|-----------|\n| `sm` | 480px |\n| `md` | 720px |\n| `lg` | 960px |\n\n\n## 📦 Package Information\n\n- **Name**: `@angular-monorepo/flip-board`\n- **Version**: `0.0.1`\n- **Peer Dependencies**:\n  - `@angular/core` ^21.2.0\n- **Side Effects**: `false` (tree-shakeable)\n\n## 🆚 Browser Support\n\nSince this component uses:\n- Canvas API (widely supported)\n- `requestAnimationFrame` (all modern browsers)\n- ES6+ JavaScript\n- CSS transforms and box-shadow (all modern browsers)\n\nIt supports all modern browsers that support Angular 21 and above.\n\n## 📄 License\n\n[MIT License](LICENSE)\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📞 Support\n\nFor issues and feature requests, please create an issue in the repository.\n\n","readmeFilename":"README.md"}