[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11131":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":15,"starSnapshotCount":15,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},11131,"react-video-ascii","LucasHJin\u002Freact-video-ascii","LucasHJin","Video to ASCII React component.","",null,"TypeScript",124,7,47,0,5,40.21,false,"main",true,[22,23,24,25,26],"ascii","ascii-art","npm-package","react-component","webgl2","2026-06-12 04:00:53","# react-video-ascii\n\nReact component optimized for rendering videos as ASCII using WebGL2. \n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"1512\" height=\"949\" alt=\"demo\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F2b41b0af-e864-430d-ade5-0249335d1aac\" \u002F>\n\u003C\u002Fp> \n\n[Try it out!](https:\u002F\u002Fvideo-ascii-demo.vercel.app\u002F)\n\n## Installation\n\n```bash\nnpm install react-video-ascii\n```\n\n## Usage\n\n```tsx\nimport { VideoAscii } from 'react-video-ascii';\n\n\u002F\u002F Basic usage\n\u003CVideoAscii src=\"\u002Fvideo.mp4\" \u002F>\n\n\u002F\u002F Multiple videos (loop sequentially)\nconst sources = ['\u002Fvideo1.mp4', '\u002Fvideo2.mp4'];\n\u003CVideoAscii src={sources} \u002F>\n\n\u002F\u002F With options\n\u003CVideoAscii\n  src=\"\u002Fvideo.mp4\"\n  videoMode={false}\n  numColsRaw={150}\n  brightnessRaw={1.2}\n  saturationRaw={1.0}\n  bgOpacityRaw={0.3}\n  chars=\" `.',-_:!abcdef\"\n  charMode=\"shape\"\n  mouseEffect={{\n    style: 'brighten',\n    radius: 0.08,\n    duration: 1.0,\n    trailLen: 15,\n    trailDecay: 10,\n    brightness: 2.0,\n  }}\n  clickEffect={{\n    style: 'ripple',\n    brightness: 1.1,\n    speed: 2,\n  }}\n  revealEffect={{\n    type: 'random',\n    duration: 0.4,\n  }}\n  className=\"my-ascii\"\n\u002F>\n```\n\n> **Note 1:** When passing an array to `src`, define it outside the component or in a `useMemo`\u002F`useRef` (an inline array literal creates a new reference on every render and will cause the video to reload).\n\n> **Note 2:** The component fills its parent container. Control size via the parent element or the `className` prop.\n\n## Props\n\n| Prop | Type | Default | Range | Description |\n|------|------|---------|-------|-------------|\n| `src` | `string \\| string[]` | — | — | Video source URL(s). Multiple URLs play sequentially. |\n| `videoMode` | `boolean` | `false` | — | Show original video colors instead of ASCII. |\n| `numColsRaw` | `number` | `250` | `20–350` | Number of character columns. |\n| `brightnessRaw` | `number` | `1.0` | `0.0–2.0` | Brightness multiplier. |\n| `saturationRaw` | `number` | `1.0` | `0.0–2.0` | Saturation multiplier. |\n| `bgOpacityRaw` | `number` | `0.3` | `0.0–1.0` | Background opacity. |\n| `chars` | `string` | *(standard)* | — | Character set, ordered dark to bright. |\n| `charMode` | `'shape' \\| 'luminance'` | `'shape'` | — | `shape` matches glyph silhouettes; `luminance` uses brightness. |\n| `mouseEffect` | `boolean \\| MouseEffectOptions` | `true` | — | Mouse hover effects. `true` uses defaults. |\n| `clickEffect` | `boolean \\| ClickEffectOptions` | `true` | — | Click effects. `true` uses defaults. |\n| `revealEffect` | `boolean \\| RevealEffectOptions` | `false` | — | Reveal animation on load. `true` uses defaults. |\n| `cropFocus` | `'left' \\| 'center' \\| 'right'` | `'center'` | — | Determines where to anchor the cropping around. |\n| `className` | `string` | — | — | CSS class on the outer container. |\n\n---\n\n### `MouseEffectOptions`\n\nPassed to `mouseEffect`. All fields optional.\n\n| Field | Type | Default | Range | Description |\n|-------|------|---------|-------|-------------|\n| `style` | `'brighten' \\| 'scatter'` | `'brighten'` | — | `brighten` highlights chars; `scatter` replaces them. |\n| `radius` | `number` | `0.08` \u002F `0.05` | `0.03–0.2` | Effect radius as a fraction of the smaller canvas dimension. |\n| `duration` | `number` | `1.0` | `0.1–4` | Seconds the effect lingers after the cursor leaves. |\n| `trailLen` | `number` | `15` | `0–30` | *(brighten)* Trail positions tracked. |\n| `trailDecay` | `number` | `10` | `1–15` | *(brighten)* How fast older trail positions fade. |\n| `brightness` | `number` | `2.0` | `0.2–5.0` | *(brighten)* Brightness boost at the cursor. |\n| `scatterChars` | `string` | `'->o'` | — | *(scatter)* Chars substituted near the cursor. |\n\n---\n\n### `ClickEffectOptions`\n\nPassed to `clickEffect`. All fields optional.\n\n| Field | Type | Default | Range | Description |\n|-------|------|---------|-------|-------------|\n| `style` | `'ripple' \\| 'spread'` | `'ripple'` | — | `ripple` sends a brightness ring outward; `spread` expands a scatter region. |\n| `brightness` | `number` | `1.1` | `1.05–2.0` | *(ripple)* Brightness of the ripple ring. |\n| `speed` | `number` | `2` | `0.5–4.0` | *(ripple)* Ripple expansion speed. |\n| `spreadExpandDuration` | `number` | `1.5` | `0.5–5.0` | *(spread)* Seconds for the region to fully expand. |\n| `spreadSpeed` | `number` | `7.5` | `0.5–10.0` | *(spread)* Speed of the spread wave front. |\n\n---\n\n### `RevealEffectOptions`\n\nPassed to `revealEffect`. All fields optional.\n\n| Field | Type | Default | Range | Description |\n|-------|------|---------|-------|-------------|\n| `type` | `'diagonal' \\| 'radial' \\| 'random'` | `'random'` | — | Pattern in which characters appear on load. |\n| `duration` | `number` | `0.4` | `0.1–4` | Reveal animation duration in seconds. |\n\n---\n\n### `chars`\n\nThe default `chars` set is: `` `.',-_:!;|\\\"~+^lr[](\\\\\u002FL)>t\u003Cv=Tz?icf1{sIxY*jJno}CZyVwmSXRqM$O%#9&NW0Q@``.\n","react-video-ascii 是一个用于将视频转换为 ASCII 艺术的 React 组件。它利用 WebGL2 技术优化了渲染性能，支持多种自定义选项，如字符集、亮度、饱和度和背景透明度等，以实现高度可配置的视觉效果。此外，该组件还提供了鼠标悬停和点击特效功能，增强了用户体验。适用于需要在网页上展示独特视觉风格视频的场景，比如创意网站、艺术项目或个性化博客等。",2,"2026-06-11 03:31:12","CREATED_QUERY"]