[{"data":1,"prerenderedAt":174},["ShallowReactive",2],{"sidebar-music":3,"home-ui-zh":82,"home-animation-zh":129},[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},"ui_zh\u002Fui\u002Fpolaroid.yml","Polaroid UI类似于拍立得的小组件",null,"2026-07-21","改组件来源于https:\u002F\u002Fgithub.com\u002Fnuxt-ui-templates\u002Fportfolio项目, 是一个类似于拍立得的邮票组件, 感觉可以等我找到女友后做那种邮票情头的双人站就保留下来了.还可以使用到照片墙项目的部分, 总之感觉很好就想要, 就夺舍了...",{},true,"\u002Fui\u002Fpolaroid",{"title":85,"description":88},"\u002Fpolaroid.png","ui\u002Fpolaroid","o1MeQULzNrvx4T1YkAoVLerfGwcWfXk2iwhzk6bcDrA",{"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},"ui_zh\u002Fui\u002Fcolor-mode-button.yml","ColorModeButton 带有动画的切换主题的按钮","2026-07-23","该组件来源于https:\u002F\u002Fgithub.com\u002Fnuxt-ui-templates\u002Fportfolio项目, 常用的页面切换主题的按钮, 比Ai写的好看一百倍, 动画丝滑, 而且理解之后很适合改造, 所以直接扣下来了... 左侧按钮是原项目的按钮的, 只有扩散效果; 使用JS控制ClipPath, 导致难以实现右侧按钮的收缩效果. 右侧按钮是改造的按钮, 有扩散和收缩的效果, 使用css控制clip-path, 效果更好",{},"\u002Fui\u002Fcolor-mode-button",{"title":98,"description":100},"\u002FColorModeButton.png","ui\u002Fcolor-mode-button","2rcLuJYlWI1Qn8GLUwUkZv5v3o8fx9YgGd5acVxZxdM",{"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},"ui_zh\u002Fui\u002Fnihilistic-hero.yml","Nihilistic Hero 虚无实用主义左右布局 Hero","2026-07-31","从网图中收到启发，GPT-Image2抠像人物成png图片，经过实验室测试后收录的 16:9 Hero 海报布局, 使用左右分栏构图、衬线标题、装饰分割线、人物透明 PNG 和紫橙裂纹 SVG, 并按明暗主题切换虚无实用主义\u002F理想完美主义。",{},"\u002Fui\u002Fnihilistic-hero",{"title":109,"description":111},"\u002FHero.png","ui\u002Fnihilistic-hero","zxxYe_ffBIpjBIflHaYyz2Em12aUybegD1q0cBa68BE",{"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},"ui_zh\u002Fui\u002Fmeteor-soundwave.yml","流星音潮-Meteor Soundwave","2026-08-17","组件灵感来源番茄代理人的博客(https:\u002F\u002Ffqzlr.com\u002Fmusic), 很喜欢他里面的3D音频可视化的效果, 于是去学习了Web Audio API, Three.js, 还有很多相关联的技术, 然后使用Ai实现了效果. 因为GLSL里面无法使用JS上的SimplexNoise库, 所以用的是原生数学算法.上传音频后再次点击屏幕即可开始播放, 再次点击暂停",{},"\u002Fui\u002Fmeteor-soundwave",{"title":120,"description":122},"\u002FMentorSoundWave.png","ui\u002Fmeteor-soundwave","BMAXKSS47qAJ12AIHMjK1erXfWCcqn6iv8fNekJRZMU",[130,141,152,163],{"id":131,"title":132,"body":86,"date":133,"description":134,"extension":8,"meta":135,"navigation":90,"path":136,"seo":137,"src":138,"stem":139,"__hash__":140},"animation_zh\u002Fanimation\u002Fshutter-reveal.yml","ShutterReveal 快门切片动画","2026-07-27","来源于 fqzlr.com 首页滚动快门效果的学习复刻, 修改成了无滚动的形式, 驱动 5 个竖向切片按奇偶方向进入, 最后合成完整图片。",{},"\u002Fanimation\u002Fshutter-reveal",{"title":132,"description":134},"\u002FShutterReveal.png","animation\u002Fshutter-reveal","j_6BiGjeO3219Fe4dUZHEO7osVSbAsVStmajSyQLzTk",{"id":142,"title":143,"body":86,"date":144,"description":145,"extension":8,"meta":146,"navigation":90,"path":147,"seo":148,"src":149,"stem":150,"__hash__":151},"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":143,"description":145},"\u002FWaveReveal.png","animation\u002Fwave-reveal","uHvccdQNKd2JzDa1HgJsS5Gd1H2IUDS1jGbAm7h779o",{"id":153,"title":154,"body":86,"date":155,"description":156,"extension":8,"meta":157,"navigation":90,"path":158,"seo":159,"src":160,"stem":161,"__hash__":162},"animation_zh\u002Fanimation\u002Finteractive-icon-morph.yml","InteractiveIconMorph 交互式图标形变动画","2026-07-29","从 BenjaminOddou\u002Fportfolio项目中提取, 实验之后收藏进来的交互式菜单图标动画, 鼠标悬停时用 GSAP 驱动 SVG 路径形变, 使用了GSAP的MorphSVG插件，并配合环形文字旋转。感觉好看的底部社交图标。",{},"\u002Fanimation\u002Finteractive-icon-morph",{"title":154,"description":156},"\u002FInteractiveIconMorph.png","animation\u002Finteractive-icon-morph","vK7tS6b1F1wyUUYHF2F-OSLD7Bd5ApJ4wRZikVKgy5I",{"id":164,"title":165,"body":86,"date":166,"description":167,"extension":8,"meta":168,"navigation":90,"path":169,"seo":170,"src":171,"stem":172,"__hash__":173},"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":165,"description":167},"\u002FPlumBlossom.png","animation\u002Fplum-growth","boa58oIlU28NohjyEQA1G3ksJevew4ejxI-f7Hy9iiQ",1787404664721]