{"_id":"@dct-lulu/motion-canvas-highlighted-text-component","_rev":"1-20eeae77a405f2c9ffe10ab756ee048c","name":"@dct-lulu/motion-canvas-highlighted-text-component","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dct-lulu/motion-canvas-highlighted-text-component","author":{"name":"Dct LuLu"},"version":"0.1.0","description":"A highlighted text component","scripts":{"prepare":"husky install","build:dev":"rollup -c rollup.config.mjs","watch":"rollup -c rollup.config.mjs -w","build":"cross-env MINIFY=1 rollup -c rollup.config.mjs","prebuild":"rimraf ./lib","lint":"npm run eslint && npm run prettier","format":"npm run eslint:fix && npm run prettier:fix","eslint":"eslint \"**/*.ts?(x)\"","eslint:fix":"eslint --fix \"**/*.ts?(x)\"","prettier":"prettier --check .","prettier:fix":"prettier --write .","serve":"vite"},"unpkg":"lib/bundle.js","main":"lib/index.js","types":"lib/index.d.ts","keywords":["motion-canvas","highlighted","animation"],"license":"GPL-3.0","homepage":"","peerDependencies":{"@motion-canvas/2d":"^3.9.0","@motion-canvas/core":"^3.9.0","@motion-canvas/ffmpeg":"1.1.1","code-fns":"^0.11.0"},"devDependencies":{"@motion-canvas/ui":"^3.9.0","@motion-canvas/vite-plugin":"^3.9.0","@rollup/plugin-terser":"^0.4.3","@rollup/plugin-typescript":"^11.1.1","@typescript-eslint/eslint-plugin":"^5.59.11","@typescript-eslint/parser":"^5.59.11","cross-env":"^7.0.3","eslint":"^8.42.0","eslint-plugin-tsdoc":"^0.2.17","husky":"^8.0.3","lint-staged":"^13.2.2","prettier":"^2.8.8","rimraf":"^5.0.1","rollup":"^3.25.1","rollup-plugin-dts":"^5.3.0","rollup-plugin-node-externals":"^6.1.1","typescript":"^5.1.3","vite":"^4.3.9","vite-tsconfig-paths":"^4.2.0"},"lint-staged":{"*.{ts,tsx}":"eslint --fix","*.{js,jsx,ts,tsx,md,scss}":"prettier --write"},"gitHead":"c29a24b64d67b9824518eb2fb1a32fef1dbd4973","_id":"@dct-lulu/motion-canvas-highlighted-text-component@0.1.0","_nodeVersion":"18.12.1","_npmVersion":"9.7.1","dist":{"integrity":"sha512-UIdNdGJNg012e6fdgyLusw9tSLvjhr4gR9JsgcvGq93+/kuDV9fso0HzBIGGFzd77Ioy/0KQm2Yegiv7saaylA==","shasum":"9ec9fe696cd73a9f181688c58149cee4218a7f21","tarball":"https://registry.npmjs.org/@dct-lulu/motion-canvas-highlighted-text-component/-/motion-canvas-highlighted-text-component-0.1.0.tgz","fileCount":26,"unpackedSize":57651,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYfcjVMtPUuvMhuchA6Ci8+lWFFYAUldTdNl1dUJHo8QIgETOYa+nHSh1SLRzk8Mn/X8inij6tSUL5ygYGXtlprqo="}]},"_npmUser":{"name":"dct-lulu","email":"jaurel88ar@gmail.com"},"directories":{},"maintainers":[{"name":"dct-lulu","email":"jaurel88ar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/motion-canvas-highlighted-text-component_0.1.0_1686933124642_0.24311577986650912"},"_hasShrinkwrap":false},"0.1.1":{"name":"@dct-lulu/motion-canvas-highlighted-text-component","author":{"name":"Dct LuLu"},"version":"0.1.1","description":"A highlighted text component","scripts":{"prepare":"husky install","build:dev":"rollup -c rollup.config.mjs","watch":"rollup -c rollup.config.mjs -w","build":"cross-env MINIFY=1 rollup -c rollup.config.mjs","prebuild":"rimraf ./lib","lint":"npm run eslint && npm run prettier","format":"npm run eslint:fix && npm run prettier:fix","eslint":"eslint \"**/*.ts?(x)\"","eslint:fix":"eslint --fix \"**/*.ts?(x)\"","prettier":"prettier --check .","prettier:fix":"prettier --write .","serve":"vite"},"unpkg":"lib/bundle.js","main":"lib/index.js","types":"lib/index.d.ts","keywords":["motion-canvas","highlighted","animation"],"license":"GPL-3.0","homepage":"","peerDependencies":{"@motion-canvas/2d":"^3.9.0","@motion-canvas/core":"^3.9.0","@motion-canvas/ffmpeg":"1.1.1","code-fns":"^0.11.0"},"devDependencies":{"@motion-canvas/ui":"^3.9.0","@motion-canvas/vite-plugin":"^3.9.0","@rollup/plugin-terser":"^0.4.3","@rollup/plugin-typescript":"^11.1.1","@typescript-eslint/eslint-plugin":"^5.59.11","@typescript-eslint/parser":"^5.59.11","cross-env":"^7.0.3","eslint":"^8.42.0","eslint-plugin-tsdoc":"^0.2.17","husky":"^8.0.3","lint-staged":"^13.2.2","prettier":"^2.8.8","rimraf":"^5.0.1","rollup":"^3.25.1","rollup-plugin-dts":"^5.3.0","rollup-plugin-node-externals":"^6.1.1","typescript":"^5.1.3","vite":"^4.3.9","vite-tsconfig-paths":"^4.2.0"},"lint-staged":{"*.{ts,tsx}":"eslint --fix","*.{js,jsx,ts,tsx,md,scss}":"prettier --write"},"gitHead":"5fa0a425abce1c2aad9b47871a3b8a87150d5691","_id":"@dct-lulu/motion-canvas-highlighted-text-component@0.1.1","_nodeVersion":"18.12.1","_npmVersion":"9.7.1","dist":{"integrity":"sha512-akvywWb8NVAPgROO6+kKpBuMK7JD3LuvNkK5tIdB/KWypecWNGfVi49otBbY7ZquxmCQoD8T2D6gX6ODS8JkQw==","shasum":"04645cda4c9073709667abe097f99ac0ce9196be","tarball":"https://registry.npmjs.org/@dct-lulu/motion-canvas-highlighted-text-component/-/motion-canvas-highlighted-text-component-0.1.1.tgz","fileCount":27,"unpackedSize":62660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMr1+CKh23gDPFFqyVeFoS+4zfOv1vFqN4veKRgB89fAiEA5o09YXEVA5GXX9rlDpG6JfM8wJsH9/NeJEDAcBWjYLo="}]},"_npmUser":{"name":"dct-lulu","email":"jaurel88ar@gmail.com"},"directories":{},"maintainers":[{"name":"dct-lulu","email":"jaurel88ar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/motion-canvas-highlighted-text-component_0.1.1_1687006355944_0.5721206138923816"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-16T16:32:04.580Z","0.1.0":"2023-06-16T16:32:04.843Z","modified":"2023-06-17T12:52:36.223Z","0.1.1":"2023-06-17T12:52:36.105Z"},"maintainers":[{"name":"dct-lulu","email":"jaurel88ar@gmail.com"}],"description":"A highlighted text component","keywords":["motion-canvas","highlighted","animation"],"author":{"name":"Dct LuLu"},"license":"GPL-3.0","readme":"# Motion Canvas Highlighted Text Component\r\n\r\n\r\nhttps://github.com/dct-LuLu/motion-canvas-highlighted-text-component/assets/69580109/6ee6955b-7d0f-4700-8fba-8c0c583fa719\r\n\r\n\r\nRun `npm install @dct-lulu/motion-canvas-highlighted-text-component` in your motion canvas project\r\n\r\nThen import the component in your scene like so:\r\n\r\n```tsx\r\nimport { HighlightedTxt } from '@dct-lulu/motion-canvas-highlighted-text-component';\r\n```\r\n\r\n\r\n# Usage examples\r\n\r\nHere are some examples demonstrating the usage of the component:\r\n\r\n### Basic usage\r\nTo create a basic highlighted text component, use the following code:\r\n\r\n```tsx\r\nview.add();\r\n```\r\n\r\n\r\n\r\n### Square Highlight\r\nIf you prefer the highlight to have square corners, you can set the roundedCorners prop to false:\r\n\r\n```tsx\r\nview.add();\r\n```\r\n\r\n\r\n\r\n### Rounded Outline\r\nInstead of a full highlight, you can opt for an outline:\r\n\r\n```tsx\r\nview.add();\r\n```\r\n\r\n\r\n\r\n### Square Outline\r\nFor a combination of square corners and an outline, use the following code:\r\n\r\n```tsx\r\nview.add();\r\n```\r\n\r\n\r\n\r\n### Two colors\r\nBy default, the second fill color has less opacity and is the same as the first fill color\r\nBut you can specify two different fill colors using the fill1 and fill2 props:\r\n```tsx\r\nview.add();\r\n```\r\n\r\n\r\n\r\n### Using Gradient\r\n\r\nYou can employ gradient filling by utilizing the following code snippets:\r\n\r\nTo begin, ensure that you import the following before executing the code:\r\n```tsx\r\nimport { Gradient } from '@motion-canvas/2d/lib/partials';\r\n```\r\n\r\nThis will enable you to utilize gradient filling functionality in your project.\r\n\r\n```tsx\r\nconst gradient = new Gradient({\r\n type: 'radial',\r\n from: -50,\r\n to: -100,\r\n toRadius: 210,\r\n stops: [\r\n {offset: 0, color: '#f3303f'},\r\n {offset: 0.6, color: '#FFC66D'},\r\n {offset: 1, color: '#4aaaf1'},\r\n ],\r\n});\r\n\r\nview.add();\r\n```\r\n\r\n","readmeFilename":"README.md"}