人人都是艺术大师

我的个人主页 goutoujunshi.cn 升级了。

说实话，之前那一版做得挺一般。米白底色，黑字标题，几个数字，一列产品。干净是干净，但打开就是一个普通网站。

现在这一版，我是真的非常喜欢，每次打开都忍不住多滚几下。

最上面那段，就是打开主页的第一眼：一个数字从 000 跳到 100，幕布升起，标题一个字一个字从下面升上来，满屏散落的光点慢慢聚拢成一颗球。

页面上所有会动的东西，都是代码实时画出来的。没有一张图片素材，也没有一段视频。

一个主角，贯穿整页

整个主页只有一个主角：一团两万多颗粒子。

它从开场一直陪你滚到页面最底下。每到一章，它就变成那一章的样子。

球、拆开的球、「龙虾」两个字、产品图标、稿纸、印章，最后是一张公众号二维码。

每次变形都不是一下子切过去的。粒子从上往下，一排一排出发，像有一道光扫过去。扫到哪里，哪里先亮一下，再落到新的位置上。

开场：拆开，再重建

往下滚，那颗球被切成一层一层，左右错开，中间那一层变成朱红色。字幕跟着浮出来："把问题拆到不能再拆的事实。"

再往下滚，这些碎片重新聚拢，拼成两个字：龙虾。

把鼠标放上去，粒子会被推开，推开的地方染成朱红。鼠标一走，它们又慢慢流回原来的位置。

产品：每张卡片背后都有它

产品区是横着滑的。每张卡片都是半透明的磨砂玻璃，隔着玻璃，能看到背后的粒子正在变成这个产品的图标：一段声波变成几行文字，左右两栏的排版，一个 M 加一个向下的箭头……

卡片滑到哪一张，背后就变成哪一张。

文章：粒子在稿纸上写字

滚到文章区，粒子从上一个图标里飞出来，铺成两行方格稿纸，然后从上往下，一笔一笔落进格子里，写出一句话：

不追热点，只记录亲手做出来、亲自想清楚

第二行是朱红色的。往上翻，开场之后那段介绍里，"亲手做出来""亲自想清楚"这两个词也是朱红色。同一句话，在页面里出现了两次：一次是文字，一次是粒子。

鼠标划过这两行字，笔画会被推开一个口子，然后自己慢慢写回去。

关于我：一枚朱红印章

关于我的这一栏，没有放照片。

粒子落下来，盖成一枚朱文印章：格里灰丝。右起竖排，微微歪一点，像是真的用手按上去的。

最后一屏：一张能扫的二维码

滚到页面最底下，粒子最后一次变形，拼成我公众号的二维码。

它不是贴上去的一张图片，而是一颗颗粒子排成的小方块。拼好之后，拿手机真的能扫出来。

感兴趣的话，可以在电脑上打开主页，一路滚到底，拿手机扫一下试试。

两种心情：夜与纸

右上角有一个"夜 / 纸"的开关。点一下，新的配色从你点击的那个位置开始，画一个圆，慢慢扩散，铺满整个屏幕。

"夜"是深色的，像电影开场。"纸"是宣纸的颜色，粒子变成一颗颗墨点，开场的右下角还会多出一枚小印章。

藏在角落里的细节

还有很多小地方，不仔细看可能注意不到。

开场之后的那段介绍，像一扇窗，随着滚动慢慢打开，文字一个字一个字被点亮。

鼠标移到产品卡片上，光标会变成一个小圆，上面写着"打开"；移到文章上，写着"阅读"。点进去，一道朱红的幕布从下往上盖住屏幕，再揭开，就到了文章页。文章页顶部还有一条细细的阅读进度条，跟着你往下读。

手机上也一样好看。粒子会自动减到电脑上的三分之一左右，保证滑起来不卡。

人人都是艺术大师

以前要做出这样一个网站，得有设计师出稿，前端工程师写页面，动效师一帧一帧调动画，几个人磨上好一阵子。

现在，我只需要知道自己喜欢什么。剩下的，Opus 5.5 都能做出来，而且做得比我想的更细、更好看。

"人人都是产品经理"说的是，每个人都可以有自己的想法，做自己的产品。现在也许可以再往前走一步：人人都是艺术大师。

好看的东西，不再只属于会画画、会写代码的人。Opus 5.5 让艺术这件事变得很简单了。接下来还会出现什么，我很期待，这里面有无限的可能。

主页地址：goutoujunshi.cn