[{"data":1,"prerenderedAt":215},["ShallowReactive",2],{"home-ui-zh":3,"sidebar-music":72,"home-animation-zh":150},[4,20,33,46,59],{"id":5,"title":6,"body":7,"date":8,"description":9,"extension":10,"meta":11,"navIcon":12,"navTitle":13,"navigation":14,"path":15,"seo":16,"src":17,"stem":18,"__hash__":19},"ui_zh\u002Fui\u002Fpolaroid.yml","Polaroid UI类似于拍立得的小组件",null,"2026-07-21","改组件来源于https:\u002F\u002Fgithub.com\u002Fnuxt-ui-templates\u002Fportfolio项目, 是一个类似于拍立得的邮票组件, 感觉可以等我找到女友后做那种邮票情头的双人站就保留下来了.还可以使用到照片墙项目的部分, 总之感觉很好就想要, 就夺舍了...","yml",{},"ri:image-line","拍立得 UI",true,"\u002Fui\u002Fpolaroid",{"title":6,"description":9},"\u002Fpolaroid.png","ui\u002Fpolaroid","TEDYe1kjHw35n7JuFTSIvZ9adePnC6zVpIlOOxuk0Tg",{"id":21,"title":22,"body":7,"date":23,"description":24,"extension":10,"meta":25,"navIcon":26,"navTitle":27,"navigation":14,"path":28,"seo":29,"src":30,"stem":31,"__hash__":32},"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, 效果更好",{},"ri:contrast-2-line","主题切换","\u002Fui\u002Fcolor-mode-button",{"title":22,"description":24},"\u002FColorModeButton.png","ui\u002Fcolor-mode-button","IiIA55AULlGzwTzTixT4Oue7BHog8BHwDDsfPUjoPZ0",{"id":34,"title":35,"body":7,"date":36,"description":37,"extension":10,"meta":38,"navIcon":39,"navTitle":40,"navigation":14,"path":41,"seo":42,"src":43,"stem":44,"__hash__":45},"ui_zh\u002Fui\u002Fnihilistic-hero.yml","Nihilistic Hero 虚无实用主义左右布局 Hero","2026-07-31","从网图中收到启发，GPT-Image2抠像人物成png图片，经过实验室测试后收录的 16:9 Hero 海报布局, 使用左右分栏构图、衬线标题、装饰分割线、人物透明 PNG 和紫橙裂纹 SVG, 并按明暗主题切换虚无实用主义\u002F理想完美主义。",{},"ri:layout-column-line","虚无 Hero","\u002Fui\u002Fnihilistic-hero",{"title":35,"description":37},"\u002FHero.png","ui\u002Fnihilistic-hero","pvyBZMFz28RpgbhpOBu1D4gli8dM-iKYxNQ8toMPVJw",{"id":47,"title":48,"body":7,"date":49,"description":50,"extension":10,"meta":51,"navIcon":52,"navTitle":53,"navigation":14,"path":54,"seo":55,"src":56,"stem":57,"__hash__":58},"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库, 所以用的是原生数学算法.上传音频后再次点击屏幕即可开始播放, 再次点击暂停",{},"ri:music-2-line","流星音潮","\u002Fui\u002Fmeteor-soundwave",{"title":48,"description":50},"\u002FMentorSoundWave.png","ui\u002Fmeteor-soundwave","Eq2IyNAObhT-NjpbfnQaNM5Zn5EQjCiBwfTbTq4WMOw",{"id":60,"title":61,"body":7,"date":62,"description":63,"extension":10,"meta":64,"navIcon":65,"navTitle":66,"navigation":14,"path":67,"seo":68,"src":69,"stem":70,"__hash__":71},"ui_zh\u002Fui\u002Fshiro-nav.yml","Shiro的导航栏","2026-09-03","组件来源于Innei在24年写的Shiro主题的博客, 博客开源, 读了下源码使用的是Motion库, 用到了layout和layoutId两个关键属性完成这个效果, 当然还有Innei大佬那神级UI的审美, 我很喜欢, 收录了进来, 想要进一步复刻可以使用DropdownMenu",{},"ri:navigation-line","Shiro 导航","\u002Fui\u002Fshiro-nav",{"title":61,"description":63},"\u002FShiroNav.png","ui\u002Fshiro-nav","ARvrV5QCAdka7XFuf5e39iim__bDAF9aSOiFPdJT2OQ",[73,84,95,106,117,128,139],{"id":74,"title":75,"avatar":76,"extension":10,"lrc":77,"meta":78,"name":79,"order":80,"src":81,"stem":82,"__hash__":83},"music\u002Fmusic\u002Fangel.yml","Angel","\u002Fmusic\u002Fcovers\u002Fangel.jpg","\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":85,"title":86,"avatar":87,"extension":10,"lrc":88,"meta":89,"name":90,"order":91,"src":92,"stem":93,"__hash__":94},"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":96,"title":97,"avatar":98,"extension":10,"lrc":99,"meta":100,"name":101,"order":102,"src":103,"stem":104,"__hash__":105},"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":107,"title":108,"avatar":109,"extension":10,"lrc":110,"meta":111,"name":112,"order":113,"src":114,"stem":115,"__hash__":116},"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":118,"title":119,"avatar":120,"extension":10,"lrc":121,"meta":122,"name":123,"order":124,"src":125,"stem":126,"__hash__":127},"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":129,"title":130,"avatar":131,"extension":10,"lrc":132,"meta":133,"name":134,"order":135,"src":136,"stem":137,"__hash__":138},"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":140,"title":141,"avatar":142,"extension":10,"lrc":143,"meta":144,"name":145,"order":146,"src":147,"stem":148,"__hash__":149},"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",[151,164,177,190,203],{"id":152,"title":153,"body":7,"date":154,"description":155,"extension":10,"meta":156,"navIcon":157,"navTitle":158,"navigation":14,"path":159,"seo":160,"src":161,"stem":162,"__hash__":163},"animation_zh\u002Fanimation\u002Fshutter-reveal.yml","ShutterReveal 快门切片动画","2026-07-27","来源于 fqzlr.com 首页滚动快门效果的学习复刻, 修改成了无滚动的形式, 驱动 5 个竖向切片按奇偶方向进入, 最后合成完整图片。",{},"ri:camera-lens-line","快门切片","\u002Fanimation\u002Fshutter-reveal",{"title":153,"description":155},"\u002FShutterReveal.png","animation\u002Fshutter-reveal","s47XsFBm9U0K6wabCO7RTa4Ybk7oGG8dgf4NE89byFk",{"id":165,"title":166,"body":7,"date":167,"description":168,"extension":10,"meta":169,"navIcon":170,"navTitle":171,"navigation":14,"path":172,"seo":173,"src":174,"stem":175,"__hash__":176},"animation_zh\u002Fanimation\u002Fwave-reveal.yml","WaveReveal + Logo Stroke 波浪揭示动画","2026-07-28","从 BenjaminOddou\u002Fportfolio项目中提取, 进行实验收进来的预加载动画展示版, 用stroke-dasharray + stroke-dashoffset 做Logo 先做描边和填充, 再由GSAP控制波浪形 SVG 推进完成转场。适合网站一开始进入加载资源的时候的预加载动画。",{},"ri:water-flash-line","波浪揭示","\u002Fanimation\u002Fwave-reveal",{"title":166,"description":168},"\u002FWaveReveal.png","animation\u002Fwave-reveal","dl9LXRqFgdoerouo2vMkLleMIa-4_dAxzrcCfYLKR7k",{"id":178,"title":179,"body":7,"date":180,"description":181,"extension":10,"meta":182,"navIcon":183,"navTitle":184,"navigation":14,"path":185,"seo":186,"src":187,"stem":188,"__hash__":189},"animation_zh\u002Fanimation\u002Finteractive-icon-morph.yml","InteractiveIconMorph 交互式图标形变动画","2026-07-29","从 BenjaminOddou\u002Fportfolio项目中提取, 实验之后收藏进来的交互式菜单图标动画, 鼠标悬停时用 GSAP 驱动 SVG 路径形变, 使用了GSAP的MorphSVG插件，并配合环形文字旋转。感觉好看的底部社交图标。",{},"ri:shape-line","图标形变","\u002Fanimation\u002Finteractive-icon-morph",{"title":179,"description":181},"\u002FInteractiveIconMorph.png","animation\u002Finteractive-icon-morph","t2nEzCtst7fBZ8nJodqaSL7vyPv2SCkjMDRTaJ0JBZI",{"id":191,"title":192,"body":7,"date":193,"description":194,"extension":10,"meta":195,"navIcon":196,"navTitle":197,"navigation":14,"path":198,"seo":199,"src":200,"stem":201,"__hash__":202},"animation_zh\u002Fanimation\u002Fplum-growth.yml","Plum Growth 梅花生长动画","2026-08-12","动画来自 Anthony Fu 老师 2022 年的直播回放教学，他在博客中也使用了此动画，地址：https:\u002F\u002Fantfu.me\u002F。动画单纯使用 Canvas 画图，构造一棵二叉树，每次通过广度优先的方式生长枝条，左右枝条的生长概率均为 50%。",{},"ri:plant-line","梅花生长","\u002Fanimation\u002Fplum-growth",{"title":192,"description":194},"\u002FPlumBlossom.png","animation\u002Fplum-growth","k2FCLzQPs8rOxx3sUM9bMpwBmMSnDI1jjLW7ggqKFCg",{"id":204,"title":205,"body":7,"date":206,"description":207,"extension":10,"meta":208,"navIcon":209,"navTitle":205,"navigation":14,"path":210,"seo":211,"src":212,"stem":213,"__hash__":214},"animation_zh\u002Fanimation\u002Fgold-loop.yml","黄金回旋","2026-09-28","为了庆祝飙马野郎的播出而随性6 sol coding的，实现超出了我的预料。实现方式是，按斐波那契数列计算方块的边长与位置，在每个方块中用 SVG 绘制一段四分之一圆弧；将 stroke-dasharray 设为路径长度，用 stroke-dashoffset 把描边移出可见范围，再将偏移量动画过渡到 0，让方块和圆弧逐段显现；同时用 requestAnimationFrame 平滑调整 viewBox，让镜头跟随螺旋向外扩展。",{},"lucide:orbit","\u002Fanimation\u002Fgold-loop",{"title":205,"description":207},"\u002FGoldLoop.png","animation\u002Fgold-loop","jGhwh0kJ2IjMqlOfNockC-qKdiQQDzmMQXrrzXFPwow",1791468877675]