[{"data":1,"prerenderedAt":129},["ShallowReactive",2],{"sidebar-music":3,"animation-index-zh":82},[4,16,27,38,49,60,71],{"id":5,"title":6,"avatar":7,"extension":8,"lrc":9,"meta":10,"name":11,"order":12,"src":13,"stem":14,"__hash__":15},"music\u002Fmusic\u002Fangel.yml","Angel","\u002Fmusic\u002Fcovers\u002Fangel.jpg","yml","\u002Fmusic\u002FLRC\u002F尹美莱 Tiger JK 비지 (Bizzy) - Angel.lrc",{},"尹美莱、Tiger JK、비지 (Bizzy)",1,"\u002Fmusic\u002FMP3\u002F尹美莱 Tiger JK 비지 (Bizzy) - Angel.mp3","music\u002Fangel","Pk4ShAHXO_jBb1rUrRjbCQoMPW6SuQ3kopfm6fy8dbc",{"id":17,"title":18,"avatar":19,"extension":8,"lrc":20,"meta":21,"name":22,"order":23,"src":24,"stem":25,"__hash__":26},"music\u002Fmusic\u002Fbu-jiang-jiu.yml","不将就","\u002Fmusic\u002Fcovers\u002Fbu-jiang-jiu.jpg","\u002Fmusic\u002FLRC\u002F李荣浩 - 不将就.lrc",{},"李荣浩",3,"\u002Fmusic\u002FMP3\u002F李荣浩 - 不将就.mp3","music\u002Fbu-jiang-jiu","RPJlahPmun1UVuK2EDWrwoYwqaWYtR1lbQ_UuQpN6l8",{"id":28,"title":29,"avatar":30,"extension":8,"lrc":31,"meta":32,"name":33,"order":34,"src":35,"stem":36,"__hash__":37},"music\u002Fmusic\u002Fgu-du-huan-zhe.yml","孤独患者","\u002Fmusic\u002Fcovers\u002Fgu-du-huan-zhe.jpg","\u002Fmusic\u002FLRC\u002F陈奕迅 - 孤独患者.lrc",{},"陈奕迅",7,"\u002Fmusic\u002FMP3\u002F陈奕迅 - 孤独患者.mp3","music\u002Fgu-du-huan-zhe","u-CvEszVR9ONtc9v7D9OCWt0uUMnSzeizIvCQAxv0hE",{"id":39,"title":40,"avatar":41,"extension":8,"lrc":42,"meta":43,"name":44,"order":45,"src":46,"stem":47,"__hash__":48},"music\u002Fmusic\u002Fhuan-ting.yml","幻听","\u002Fmusic\u002Fcovers\u002Fhuan-ting.jpg","\u002Fmusic\u002FLRC\u002F许嵩 - 幻听.lrc",{},"许嵩",6,"\u002Fmusic\u002FMP3\u002F许嵩 - 幻听.mp3","music\u002Fhuan-ting","H7dj8deqi6_PmCzXPEjzvxT1QpqGapTDaBb-7oaz17E",{"id":50,"title":51,"avatar":52,"extension":8,"lrc":53,"meta":54,"name":55,"order":56,"src":57,"stem":58,"__hash__":59},"music\u002Fmusic\u002Fhui-hu-xi-de-tong.yml","会呼吸的痛","\u002Fmusic\u002Fcovers\u002Fhui-hu-xi-de-tong.jpg","\u002Fmusic\u002FLRC\u002F梁静茹 - 会呼吸的痛.lrc",{},"梁静茹",5,"\u002Fmusic\u002FMP3\u002F梁静茹 - 会呼吸的痛.mp3","music\u002Fhui-hu-xi-de-tong","SpMiJzp6F2APEhFkHYw1cQ3Bx7rMX7fL6uuuYW3AONc",{"id":61,"title":62,"avatar":63,"extension":8,"lrc":64,"meta":65,"name":66,"order":67,"src":68,"stem":69,"__hash__":70},"music\u002Fmusic\u002Fyi-yang-de-yue-guang.yml","一样的月光","\u002Fmusic\u002Fcovers\u002Fyi-yang-de-yue-guang.jpg","\u002Fmusic\u002FLRC\u002F徐佳莹 - 一样的月光.lrc",{},"徐佳莹",2,"\u002Fmusic\u002FMP3\u002F徐佳莹 - 一样的月光.mp3","music\u002Fyi-yang-de-yue-guang","d1YzviVB5duA9AmhvSPdDvJskV7HAqM3hxRQCbiY0NY",{"id":72,"title":73,"avatar":74,"extension":8,"lrc":75,"meta":76,"name":77,"order":78,"src":79,"stem":80,"__hash__":81},"music\u002Fmusic\u002Fzhi-shao-hai-you-ni.yml","至少还有你","\u002Fmusic\u002Fcovers\u002Fzhi-shao-hai-you-ni.jpg","\u002Fmusic\u002FLRC\u002F林忆莲 - 至少还有你.lrc",{},"林忆莲",4,"\u002Fmusic\u002FMP3\u002F林忆莲 - 至少还有你.mp3","music\u002Fzhi-shao-hai-you-ni","jsFmLqChdKc87mQLvTLu5CVtrGArmBemXWgp0sGTMKQ",[83,96,107,118],{"id":84,"title":85,"body":86,"date":87,"description":88,"extension":8,"meta":89,"navigation":90,"path":91,"seo":92,"src":93,"stem":94,"__hash__":95},"animation_zh\u002Fanimation\u002Fshutter-reveal.yml","ShutterReveal 快门切片动画",null,"2026-07-27","来源于 fqzlr.com 首页滚动快门效果的学习复刻, 修改成了无滚动的形式, 驱动 5 个竖向切片按奇偶方向进入, 最后合成完整图片。",{},true,"\u002Fanimation\u002Fshutter-reveal",{"title":85,"description":88},"\u002FShutterReveal.png","animation\u002Fshutter-reveal","j_6BiGjeO3219Fe4dUZHEO7osVSbAsVStmajSyQLzTk",{"id":97,"title":98,"body":86,"date":99,"description":100,"extension":8,"meta":101,"navigation":90,"path":102,"seo":103,"src":104,"stem":105,"__hash__":106},"animation_zh\u002Fanimation\u002Fwave-reveal.yml","WaveReveal + Logo Stroke 波浪揭示动画","2026-07-28","从 BenjaminOddou\u002Fportfolio项目中提取, 进行实验收进来的预加载动画展示版, 用stroke-dasharray + stroke-dashoffset 做Logo 先做描边和填充, 再由GSAP控制波浪形 SVG 推进完成转场。适合网站一开始进入加载资源的时候的预加载动画。",{},"\u002Fanimation\u002Fwave-reveal",{"title":98,"description":100},"\u002FWaveReveal.png","animation\u002Fwave-reveal","uHvccdQNKd2JzDa1HgJsS5Gd1H2IUDS1jGbAm7h779o",{"id":108,"title":109,"body":86,"date":110,"description":111,"extension":8,"meta":112,"navigation":90,"path":113,"seo":114,"src":115,"stem":116,"__hash__":117},"animation_zh\u002Fanimation\u002Finteractive-icon-morph.yml","InteractiveIconMorph 交互式图标形变动画","2026-07-29","从 BenjaminOddou\u002Fportfolio项目中提取, 实验之后收藏进来的交互式菜单图标动画, 鼠标悬停时用 GSAP 驱动 SVG 路径形变, 使用了GSAP的MorphSVG插件，并配合环形文字旋转。感觉好看的底部社交图标。",{},"\u002Fanimation\u002Finteractive-icon-morph",{"title":109,"description":111},"\u002FInteractiveIconMorph.png","animation\u002Finteractive-icon-morph","vK7tS6b1F1wyUUYHF2F-OSLD7Bd5ApJ4wRZikVKgy5I",{"id":119,"title":120,"body":86,"date":121,"description":122,"extension":8,"meta":123,"navigation":90,"path":124,"seo":125,"src":126,"stem":127,"__hash__":128},"animation_zh\u002Fanimation\u002Fplum-growth.yml","Plum Growth 梅花生长动画","2026-08-12","动画来自 Anthony Fu 老师 2022 年的直播回放教学，他在博客中也使用了此动画，地址：https:\u002F\u002Fantfu.me\u002F。动画单纯使用 Canvas 画图，构造一棵二叉树，每次通过广度优先的方式生长枝条，左右枝条的生长概率均为 50%。",{},"\u002Fanimation\u002Fplum-growth",{"title":120,"description":122},"\u002FPlumBlossom.png","animation\u002Fplum-growth","boa58oIlU28NohjyEQA1G3ksJevew4ejxI-f7Hy9iiQ",1787404666131]