Tegaki 效果与插件系统霓虹光晕、笔刷纹理、抖动签名风8种玩法完整清单【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki 是一款开源的 Web 手写动画库能把任意字体变成逐笔书写的手写动画效果。它的灵魂在于一套强大的插件系统从霓虹光晕、毛笔飞白到手抖签名风、CRT 复古滤镜30 余种效果插件像乐高一样自由组合。本文带你完整清单式地逛一遍这些玩法并看懂它们是如何运作的。插件系统如何运作一套钩子改得动的每一处Tegaki 的渲染流程被拆成一个个钩子hooks每个效果插件只需在自己的钩子里动手脚就能改变最终的动画钩子作用geometry重绘笔画的几何形状歪斜、抖动、变粗细timing改写书写节奏按位置、按顺序、随机paint换一种方式上色湿墨、圆珠笔断墨、霓虹管ink在墨水周围叠加光效光晕、颗粒、阴影、CRT 荧光underlay/overlay在文字底下垫一层 / 上面盖一层纸格、光点、小笔steps让画面多帧循环重画手绘抖动、霓虹闪烁写插件时用 createPlugin 定义名称、参数数字、开关、颜色、预设presets再实现对应的钩子即可——参数定义还能自动生成 UI 控制面板这也是官方 Studio 里那些滑块的存在意义。8 种玩法完整清单以下 8 种是风格差异最大、上手收益最高的玩法全部可以在 Tegaki Studio 中实时调试。1️⃣ 霓虹光晕玻璃灯管招牌风neon.ts 把每一笔画变成一根通电的玻璃灯管白色热芯 彩色光晕点亮时还会嘶嘶闪烁个别字母像坏掉的灯一样断断续续。可调灯管粗细、光晕扩散距离、闪烁强度。⚡深色背景效果最佳。2️⃣ 抖动签名风一抖就是真人手shaky.ts 让每根笔画沿自己的路径轻微颤动粗细也随按压力一起抖——笔画起收笔处最稳中段最抖还原真实的抖动签名。内置三档预设Elderly老年手写、Cold hands手冷发抖、Moving边走边签。3️⃣ 线条沸腾手账本式手绘抖动boil.ts 是内置在核心包中的插件把整段文字以每秒 12 帧手绘动画on twos节奏重画几次线条微微游走产生定格动画般的闪烁质感。预设Cartoon、Nervous、Sketchy分别对应卡通、神经质、速涂风格idle: true可在写完后持续沸腾。4️⃣ 毛笔笔刷纹理飞白与墨滴brush.ts 把每根笔画拆成数十根独立的笔毛笔毛各自走位、各自在行末干涸快笔收尾自然裂出飞白起笔重按处还会甩出墨滴。专为汉字/日文书法调校是中文手写体场景的招牌效果。5️⃣ 湿墨 纸张写字像在纸上三个小插件叠出一个完整的书写场景Wet inkwet.ts新墨浓黑发亮离笔后逐渐变浅干透Practice paperpaper.ts在文字底下垫横线纸、田字格/米字格或方格纸Paper grain Ink bleedgrain.ts、bleed.ts纸纹透过墨迹显现墨沿纤维晕开。6️⃣ CRT 显像管复古电视荧光crt.ts 一键回到 90 年代荧光绿文字、扫描线、RGB 色边、画面滚动条和信号撕裂同样建议深色背景。与霓虹灯管、laser.ts激光束书写、灼热冷却是同一路赛博美学。7️⃣ 声音与触感能听能摸的手写sound.ts 让铅笔沙沙声跟着笔尖走每笔起笔还有嗒的一声haptics.ts 则在支持震动的设备上让手机随笔画节奏微微震动。手写动画从此有了手感。8️⃣ 打字机咔哒一下一个字母typewriter.ts 不走逐笔路径而是像打字员一样整字击打每个字母带着轻微的落位偏移依次砸出来配闪烁光标和机械键盘声适合做复古片头。完整插件清单30 个效果一览全部插件按执行顺序注册在 index.ts顺序本身就是一种语法几何变形先跑让后续上色拿到新形状垫底层在下、覆盖层在上管颜色的先于读颜色的。类别插件一句话说明 几何slant.ts Slant整字斜体/左手书写倾斜shaky.ts Shaky hand手抖颤笔nib.ts Broad nib书法宽笔尖顺锋粗细变化⏱ 节奏rhythm.ts Hand rhythm笔速稳、笔间游走、偶尔停顿思考sweep.ts Sweep按位置擦过/升起/中间向两侧展开typewriter.ts Typewriter打字机整字击打erase.ts Eraser橡皮逐笔擦除留残影碎屑 上色colors.ts Colors逐字换色ballpoint.ts Ballpoint圆珠笔断线 偶发墨疙瘩graphite.ts Graphite铅笔颗粒线 石墨碎屑wet.ts Wet ink湿墨渐干neon.ts Neon霓虹灯管laser.ts Laser激光灼写brush.ts Brush毛笔飞白 墨滴✨ 光效echo.ts Echo前后错拍的重影轨迹sparkle.ts Sparkles笔尖甩出星光shadow.ts Shadow偏移模糊阴影 / 浮雕斜切crt.ts Cathode tube荧光管 扫描线 纸感paper.ts Practice paper田字格 / 米字格 / 方格底纸grain.ts Paper grain纸纹透墨bleed.ts Ink bleed墨水晕染 动态shake.ts Screen shake落笔震屏 / 书写轰鸣boil.ts Boil手绘帧率线条沸腾核心内置variation.ts Variation每帧微变体核心内置 教学stroke-order.ts Stroke order笔画编号 箭头教学笔顺 交互karaoke.ts Karaoke歌词球逐字弹跳 进度条pen.ts Pen跟着书写的小钢笔/铅笔/羽毛笔sound.ts Sound铅笔沙沙声haptics.ts Haptics设备震动反馈小提示Boil与Variation随核心包tegaki/core发布其余为 website 演示插件目录中的示例实现——照着 neon.ts 抄一份就是一个新效果。组合技巧顺序与 URL 状态叠纸感paper底→colors上色→wet湿墨→grain纸纹→shadow阴影自下而上垫出整张正在写字的桌子赛博招牌slant斜体打底 neon灯管 crt扫描线深色背景直接出街招教学动画rhythm慢节奏 stroke-order笔顺标注 pen小笔跟随一套字写教学视频所有开关和参数都会写进 URL如?pgneon,shaky调好的效果链接发出去就能复现天然可分享。去哪里试试实时调试台Studio源码packages/website/src/components/studio/Studio.tsx插件面板在 PluginsPanel.tsx官方文档渲染指南、渲染器 API 参考各框架接入示例React / Svelte / Vue / Solid / Astroexamples/ 与 packages/renderer/src/react/TegakiRenderer.tsx。下一步先开 Studio 调一个你喜欢的组合再回头对照 SHOWCASE_PLUGINS 列表 理解执行顺序——这就是 Tegaki 插件系统的全部门道。 ✍️【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Tegaki 效果与插件系统：霓虹光晕、笔刷纹理、抖动签名风，8种玩法完整清单
Tegaki 效果与插件系统霓虹光晕、笔刷纹理、抖动签名风8种玩法完整清单【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki 是一款开源的 Web 手写动画库能把任意字体变成逐笔书写的手写动画效果。它的灵魂在于一套强大的插件系统从霓虹光晕、毛笔飞白到手抖签名风、CRT 复古滤镜30 余种效果插件像乐高一样自由组合。本文带你完整清单式地逛一遍这些玩法并看懂它们是如何运作的。插件系统如何运作一套钩子改得动的每一处Tegaki 的渲染流程被拆成一个个钩子hooks每个效果插件只需在自己的钩子里动手脚就能改变最终的动画钩子作用geometry重绘笔画的几何形状歪斜、抖动、变粗细timing改写书写节奏按位置、按顺序、随机paint换一种方式上色湿墨、圆珠笔断墨、霓虹管ink在墨水周围叠加光效光晕、颗粒、阴影、CRT 荧光underlay/overlay在文字底下垫一层 / 上面盖一层纸格、光点、小笔steps让画面多帧循环重画手绘抖动、霓虹闪烁写插件时用 createPlugin 定义名称、参数数字、开关、颜色、预设presets再实现对应的钩子即可——参数定义还能自动生成 UI 控制面板这也是官方 Studio 里那些滑块的存在意义。8 种玩法完整清单以下 8 种是风格差异最大、上手收益最高的玩法全部可以在 Tegaki Studio 中实时调试。1️⃣ 霓虹光晕玻璃灯管招牌风neon.ts 把每一笔画变成一根通电的玻璃灯管白色热芯 彩色光晕点亮时还会嘶嘶闪烁个别字母像坏掉的灯一样断断续续。可调灯管粗细、光晕扩散距离、闪烁强度。⚡深色背景效果最佳。2️⃣ 抖动签名风一抖就是真人手shaky.ts 让每根笔画沿自己的路径轻微颤动粗细也随按压力一起抖——笔画起收笔处最稳中段最抖还原真实的抖动签名。内置三档预设Elderly老年手写、Cold hands手冷发抖、Moving边走边签。3️⃣ 线条沸腾手账本式手绘抖动boil.ts 是内置在核心包中的插件把整段文字以每秒 12 帧手绘动画on twos节奏重画几次线条微微游走产生定格动画般的闪烁质感。预设Cartoon、Nervous、Sketchy分别对应卡通、神经质、速涂风格idle: true可在写完后持续沸腾。4️⃣ 毛笔笔刷纹理飞白与墨滴brush.ts 把每根笔画拆成数十根独立的笔毛笔毛各自走位、各自在行末干涸快笔收尾自然裂出飞白起笔重按处还会甩出墨滴。专为汉字/日文书法调校是中文手写体场景的招牌效果。5️⃣ 湿墨 纸张写字像在纸上三个小插件叠出一个完整的书写场景Wet inkwet.ts新墨浓黑发亮离笔后逐渐变浅干透Practice paperpaper.ts在文字底下垫横线纸、田字格/米字格或方格纸Paper grain Ink bleedgrain.ts、bleed.ts纸纹透过墨迹显现墨沿纤维晕开。6️⃣ CRT 显像管复古电视荧光crt.ts 一键回到 90 年代荧光绿文字、扫描线、RGB 色边、画面滚动条和信号撕裂同样建议深色背景。与霓虹灯管、laser.ts激光束书写、灼热冷却是同一路赛博美学。7️⃣ 声音与触感能听能摸的手写sound.ts 让铅笔沙沙声跟着笔尖走每笔起笔还有嗒的一声haptics.ts 则在支持震动的设备上让手机随笔画节奏微微震动。手写动画从此有了手感。8️⃣ 打字机咔哒一下一个字母typewriter.ts 不走逐笔路径而是像打字员一样整字击打每个字母带着轻微的落位偏移依次砸出来配闪烁光标和机械键盘声适合做复古片头。完整插件清单30 个效果一览全部插件按执行顺序注册在 index.ts顺序本身就是一种语法几何变形先跑让后续上色拿到新形状垫底层在下、覆盖层在上管颜色的先于读颜色的。类别插件一句话说明 几何slant.ts Slant整字斜体/左手书写倾斜shaky.ts Shaky hand手抖颤笔nib.ts Broad nib书法宽笔尖顺锋粗细变化⏱ 节奏rhythm.ts Hand rhythm笔速稳、笔间游走、偶尔停顿思考sweep.ts Sweep按位置擦过/升起/中间向两侧展开typewriter.ts Typewriter打字机整字击打erase.ts Eraser橡皮逐笔擦除留残影碎屑 上色colors.ts Colors逐字换色ballpoint.ts Ballpoint圆珠笔断线 偶发墨疙瘩graphite.ts Graphite铅笔颗粒线 石墨碎屑wet.ts Wet ink湿墨渐干neon.ts Neon霓虹灯管laser.ts Laser激光灼写brush.ts Brush毛笔飞白 墨滴✨ 光效echo.ts Echo前后错拍的重影轨迹sparkle.ts Sparkles笔尖甩出星光shadow.ts Shadow偏移模糊阴影 / 浮雕斜切crt.ts Cathode tube荧光管 扫描线 纸感paper.ts Practice paper田字格 / 米字格 / 方格底纸grain.ts Paper grain纸纹透墨bleed.ts Ink bleed墨水晕染 动态shake.ts Screen shake落笔震屏 / 书写轰鸣boil.ts Boil手绘帧率线条沸腾核心内置variation.ts Variation每帧微变体核心内置 教学stroke-order.ts Stroke order笔画编号 箭头教学笔顺 交互karaoke.ts Karaoke歌词球逐字弹跳 进度条pen.ts Pen跟着书写的小钢笔/铅笔/羽毛笔sound.ts Sound铅笔沙沙声haptics.ts Haptics设备震动反馈小提示Boil与Variation随核心包tegaki/core发布其余为 website 演示插件目录中的示例实现——照着 neon.ts 抄一份就是一个新效果。组合技巧顺序与 URL 状态叠纸感paper底→colors上色→wet湿墨→grain纸纹→shadow阴影自下而上垫出整张正在写字的桌子赛博招牌slant斜体打底 neon灯管 crt扫描线深色背景直接出街招教学动画rhythm慢节奏 stroke-order笔顺标注 pen小笔跟随一套字写教学视频所有开关和参数都会写进 URL如?pgneon,shaky调好的效果链接发出去就能复现天然可分享。去哪里试试实时调试台Studio源码packages/website/src/components/studio/Studio.tsx插件面板在 PluginsPanel.tsx官方文档渲染指南、渲染器 API 参考各框架接入示例React / Svelte / Vue / Solid / Astroexamples/ 与 packages/renderer/src/react/TegakiRenderer.tsx。下一步先开 Studio 调一个你喜欢的组合再回头对照 SHOWCASE_PLUGINS 列表 理解执行顺序——这就是 Tegaki 插件系统的全部门道。 ✍️【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考