{"_id":"@aoles-gl/effects","name":"@aoles-gl/effects","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aoles-gl/effects","version":"0.1.0","description":"GLSL effect library for Aoles GL video editor","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./glsl/*":"./glsl/*"},"publishConfig":{"access":"public"},"keywords":["glsl","effects","transitions","video-editor","shaders"],"author":{"name":"laoleshisui"},"homepage":"https://www.pixoclip.com","bugs":{"url":"https://github.com/laoleshisui/aoles-gl-vue-demo/issues"},"license":"SEE LICENSE IN LICENSE","devDependencies":{"typescript":"~5.3.0","vite":"^5.0.0","vite-plugin-dts":"^3.7.0"},"scripts":{"dev":"vite build --watch","build":"vite build","type-check":"tsc --noEmit"},"_id":"@aoles-gl/effects@0.1.0","_integrity":"sha512-zCbFgxj7s6f67oN1kO1gOWu/ZYis/GDXUZnbRSYcwqQF1LXLl429e+jdPzVBY2NIug5UUj1g5/GYNSa0uO0e2w==","_resolved":"/Users/yangxian/dev/aoles-gl-web-package/artifacts/release/aoles-gl-effects-0.1.0.tgz","_from":"file:artifacts/release/aoles-gl-effects-0.1.0.tgz","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-zCbFgxj7s6f67oN1kO1gOWu/ZYis/GDXUZnbRSYcwqQF1LXLl429e+jdPzVBY2NIug5UUj1g5/GYNSa0uO0e2w==","shasum":"279f7b6cc9ef52d7f238951b4e161ca0e78b36d6","tarball":"https://registry.npmjs.org/@aoles-gl/effects/-/effects-0.1.0.tgz","fileCount":51,"unpackedSize":304422,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCH3MpeUWclAsbe1A11HV1Xz1X08Odf66c5qcrfOXHb7kCIQCba3LorO4k3qX/gamwiOkg58i8wTdZJtYVMVVbObIKHQ=="}]},"_npmUser":{"name":"laoleshisui","email":"1539807453@qq.com"},"directories":{},"maintainers":[{"name":"laoleshisui","email":"1539807453@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/effects_0.1.0_1786277431521_0.9981961241470572"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T12:10:31.324Z","0.1.0":"2026-08-09T12:10:31.662Z","modified":"2026-08-09T12:10:31.924Z"},"maintainers":[{"name":"laoleshisui","email":"1539807453@qq.com"}],"description":"GLSL effect library for Aoles GL video editor","homepage":"https://www.pixoclip.com","keywords":["glsl","effects","transitions","video-editor","shaders"],"author":{"name":"laoleshisui"},"bugs":{"url":"https://github.com/laoleshisui/aoles-gl-vue-demo/issues"},"license":"SEE LICENSE IN LICENSE","readme":"# @aoles-gl/effects\n\nGLSL effect library for Aoles GL video editor.\n\n## Installation\n\n```bash\nnpm install @aoles-gl/effects\n```\n\n## Usage\n\n### Method 1: Configure the bundled URL resolver (Recommended)\n\nKeep the engine's WASM paths unchanged while loading the shader files bundled\nwith this package:\n\n```typescript\nimport { Engine } from '@aoles-gl/core';\nimport { resolveGlslUrl } from '@aoles-gl/effects';\n\nconst engine = new Engine();\nengine.configAssetPath({ glslUrlResolver: resolveGlslUrl });\n```\n\nThe resolver supports both package paths such as\n`/glsl/transitions/book_flip.glsl` and the engine's existing WASM paths such as\n`/glsl/video/transition/book_flip.glsl`.\n\n### Method 2: Import a single file via ?url\n\nVite/Webpack will handle the file path automatically:\n\n```typescript\nimport bookFlipUrl from '@aoles-gl/effects/glsl/transitions/book_flip.glsl?url';\n\ntransition.glsl_path = bookFlipUrl;\n```\n\n### Method 3: Use constants with path helpers\n\n```typescript\nimport { TRANSITIONS, getTransitionPath } from '@aoles-gl/effects';\n\nconst path = getTransitionPath(TRANSITIONS.BOOK_FLIP);\ntransition.glsl_path = path; // '/glsl/transitions/book_flip.glsl'\n```\n\n### Method 4: Search and browse effects\n\n```typescript\nimport { searchEffects, getAllEffects } from '@aoles-gl/effects';\n\n// Get all effects\nconst allEffects = getAllEffects();\n\n// Search by category\nconst transitions = searchEffects({ category: 'transition' });\n\n// Search by tags\nconst effects3D = searchEffects({ tags: ['3d'] });\n\n// Get effect info\ntransitions.forEach(effect => {\n  console.log(effect.metadata.name, effect.path);\n});\n```\n\n## Available Effects\n\n### Transitions (28)\n\n- `BOOK_FLIP` - 翻书效果\n- `CUBE` - 立方体旋转\n- `CROSSWARP` - 交叉扭曲\n- `DOORWAY` - 开门效果\n- `FILM_BURN` - 胶片燃烧\n- `INVERTED_PAGE_CURL` - 翻页卷曲\n- `KALEIDOSCOPE` - 万花筒\n- `MORPH` - 变形\n- `LUMINANCE_MELT` - 亮度融化\n- `RADIAL` - 径向扫描\n- And 18 more...\n\n### Text Effects (7)\n\n- `BARRAGE` - 弹幕效果\n- `POSITION_TEXT` - 位置文本\n- `SLIDE_LONG_LINE` - 长文本滑动\n- `TEXT_ALPHA` - 文本透明度\n- And 3 more...\n\n### Video Effects (9)\n\n- `POSITION` - 位置调整\n- `PROPORTIONAL_SCALE` - 等比缩放\n- `BLUR_GLASS` - 毛玻璃模糊\n- `SNOW` - 下雪效果\n- `MOUNTAIN` - 山峦效果\n- And 4 more...\n\n## Example: Using in Vue\n\n```vue\n<script setup lang=\"ts\">\nimport { TRANSITIONS } from '@aoles-gl/effects';\nimport bookFlipUrl from '@aoles-gl/effects/glsl/transitions/book_flip.glsl?url';\n\n// Method 1: Direct import\nconst transition1 = {\n  glsl_path: bookFlipUrl,\n};\n\n// Method 2: Use constant\nconst transition2 = {\n  glsl_path: `/glsl/transitions/${TRANSITIONS.CUBE}.glsl`,\n};\n</script>\n```\n\n## Example: Using in React\n\n```tsx\nimport { TRANSITIONS, getTransitionPath } from '@aoles-gl/effects';\nimport bookFlipUrl from '@aoles-gl/effects/glsl/transitions/book_flip.glsl?url';\n\nfunction MyComponent() {\n  const transition = {\n    glsl_path: bookFlipUrl,\n  };\n  \n  return <div>Transition: {TRANSITIONS.BOOK_FLIP}</div>;\n}\n```\n\n## TypeScript Support\n\nFull TypeScript support with autocomplete:\n\n```typescript\nimport { \n  TRANSITIONS, \n  TEXT_EFFECTS, \n  VIDEO_EFFECTS,\n  type TransitionId,\n  type TextEffectId,\n  type VideoEffectId,\n  type EffectMetadata,\n} from '@aoles-gl/effects';\n\n// Type-safe effect IDs\nconst effectId: TransitionId = TRANSITIONS.BOOK_FLIP;\n\n// Search with typed results\nconst effects = searchEffects({ category: 'transition' });\neffects.forEach((effect) => {\n  console.log(effect.metadata.name); // Fully typed\n});\n```\n\n## API Reference\n\n### Constants\n\n- `TRANSITIONS` - All transition effect IDs\n- `TEXT_EFFECTS` - All text effect IDs\n- `VIDEO_EFFECTS` - All video effect IDs\n\n### Functions\n\n- `getTransitionPath(id)` - Get transition GLSL path\n- `getTextEffectPath(id)` - Get text effect GLSL path\n- `getVideoEffectPath(id)` - Get video effect GLSL path\n- `getAllEffects()` - Get all effects with metadata\n- `getEffectById(id)` - Find effect by ID\n- `searchEffects(options)` - Search effects by category/tags/tier\n\n### Types\n\n- `EffectCategory` - 'transition' | 'text' | 'video' | 'effect'\n- `EffectTier` - 'free' | 'premium'\n- `EffectMetadata` - Effect metadata interface\n- `EffectEntry` - Effect registry entry\n\n## Product and Examples\n\n- Product website: [PixoClip](https://www.pixoclip.com)\n- Vue example and issues: [aoles-gl-vue-demo](https://github.com/laoleshisui/aoles-gl-vue-demo)\n- React example and issues: [aoles-gl-react-demo](https://github.com/laoleshisui/aoles-gl-react-demo)\n\n## License\n\nAoles GL is proprietary software, not open-source software. Evaluation and\nnon-production development are permitted under the\n[Aoles GL SDK License Agreement](./LICENSE). Production use, public deployment,\nand commercial use require a valid commercial license from Aoles GL.\n","readmeFilename":"README.md","_rev":"1-cc7ac15b63e7891215854a8a30989786"}