Meer Mohsin

Meer Mohsin 在作品集的首屏放了自己的脸，再用一枚符号把眼睛遮住。这枚符号是近几年流行的赛博纹身风格（cybersigilism），线条像荆棘和翅膀长在一起，他的站标也是同一种图形。首屏上它就是一张面具，压在一张写实的人像上，写实的脸和锋利的图形放在一起反差很大，访客第一眼就会记住这个人。

这张面具不会一直待在脸上，它其实是一个三维模型，访客一开始滚动，它就离开人像，陪着访客走完整页。后面每一个章节，它都停在画面正中，或远或近地转着。到了页尾，它不停地自转，页面同时响起一段短音效，像一出戏的收场。

页面本身的结构是一份常规的个人作品集，只是每一段都换了一种讲法。介绍他本人的那一段标题写的是 This Will Feel Different（这会不一样）。讲服务的一段把 LEGACY、UI/UX 和 3D WEB 三个词写成占满一屏的红色手写体，单词旁边再叠上一个小窗口播放图片。

作品这一段放了五个项目，CODENARTS、AZ-DIGITAL-VENTURES、AMRON、CHATONE 和 FINANCE，每个项目都用一台显示器或平板的样机图来展示。访客点任意一个项目，左边会滑出一栏，写着日期、项目说明、用到的技术和一组图。

作品之后是分四步讲工作方法的一段、一段博客和一段奖项，最后一句 Every Great Story Needs A Powerful Ending（好故事都需要一个有力的结尾）把页面收住。奖项这一段摆着这个站在 Awwwards 拿到的两张证书，上面写的都是 MEER MOHSIN 这个站。一张是 8 月 19 日的 Honors，也就是荣誉提名，另一张是 9 月 26 日的 Site of the Day。9 月 26 日正是这个站获奖的日子，Meer Mohsin 在获奖当天就把新证书放进了自己的站。

红和黑几乎是这个站仅有的两种颜色。深红 #990000 是页面上用得最多的文字颜色，也是铺得最大的一块背景色，其次才是黑色、#222 深灰和白色。首屏和几段过渡用了从纯黑到亮红的渐变，其余章节大多是黑底红字，或者整屏铺满深红再放黑字。

字体只有两款，一款无衬线体和一款手写体，分工很明确。无衬线体是 Stack Sans Headline，用了常规和特细两种字重，全站绝大部分文字都是它，导航、正文和首屏滚动的大字都用它排。手写体叫 Ruthie，用到的地方很少，却是全站最大的字，最大到 320 像素，LEGACY、3D WEB 和 AWARDS 这些占满一屏的大字都用它。规整的无衬线体和一款花哨的手写体放在一起，一冷一热，页面就在两种语气之间来回切换。

首屏的构图叠了三层，从后往前依次是字、人和符号。人像放在正中，一行白色的大字从右往左滚过，字在人头后面经过，脸像是从字里面长出来的。那枚红色符号又压在这张脸上，挡住了双眼。页面最下方一直固定着一条窄带，写着 TENSION、IMMERSION 和 IMPACT 三个词，中间用加号隔开，访客滚到哪里它都在。右下角还有一个写着 ONLINE 和 Let's Connect 的小卡片，配着他的头像和一个红点，像聊天软件里的在线状态。

页面上的图片也都来自同一种暗黑审美。除了那枚符号，页面边缘反复出现火焰、血迹和撕纸的边，几张肖像是去色的黑白照，上面打着红色的小十字。作品章节是例外，五个项目都用高光的设备样机展示，屏幕里是客户的网站，色调偏紫偏金，和前后的红黑明显断开。

奖项这一段又回到了红黑为主的配色，而且做成了一个三维场景。两张做成 Awwwards 证书样式的卡片立在一片碎裂的红色地面上，地面由许多块棱角分明的多边形拼成，缝隙里透着红光。那枚符号也飘在两张证书之间，从首屏一直陪访客走到了这里。

那枚符号在页面上走的路线，全部由访客的滚动来推动。访客开始滚动时，它先从脸上滑到下巴，再离开人像，停在后面各个章节的正中。整页滚到底，它一共要转五整圈，中途还会根据章节往远处退、往上飘，到了讲工作方法的那一段会升起并淡出。访客移动光标时，它也会在 0.8 秒内缓缓转向光标的方向，只偏几度。访客滚到页尾后，符号开始不停地自转，每 8 秒一圈，同时播放那段收场的音效。

符号的旋转和位置之所以能跟着滚动走，是因为动画库 GSAP 的滚动插件 ScrollTrigger 把它们绑在了滚动进度上。五整圈摊在很长一段页面上，所以访客滚得快它就转得快，停下来它也停下来。页面的滚动本身由平滑滚动库 Lenis 接管，滚轮停下后页面还会顺着惯性再滑一小段，符号也跟着多转一点。光标带来的偏转是另一条独立的动画，和滚动互不干扰。

开场的加载动画铺满一整屏深红色，中间一个手写体数字从 000 数到 100，下面一行小字写着 CLICK ANYWHERE TO ACTIVATE THE EXPERIENCE（点击任意位置开启体验）。数到 100 之后，一道像在燃烧的边缘从下往上把红色吞掉，露出黑底和首屏。访客点一下页面，背景音乐就以一半的音量开始循环播放。

页面上其余的动效大多是滚动时被钉住的段落。服务、作品和奖项三个章节都被钉在屏幕上，分别要滚大约八屏、六屏和五屏半的距离才放开，访客在这几段里看到的是画面在原地变化，而不是页面往上走。首屏那一行大字一直在自己横着滚动，页尾那一行手写体也一样。整页滚下来画面始终保持每秒 60 帧，也就是每帧约 16.7 毫秒，最慢的一帧是 27 毫秒。

Meer Mohsin 没有用前端框架，这个站是用原生 JavaScript 加上打包工具 Vite 搭起来的，动画用 GSAP 和 ScrollTrigger，平滑滚动用 Lenis，三维用 three.js。那枚符号和奖项段的证书、地面各画在一块 WebGL 画布上。

首次打开这个作品集要下载约 3.1 MB，滚完整页累计 3.9 MB。下载量里最大的一个文件是加载动画和页面边缘用到的火焰动图，这是一张 949 KB 的 GIF。GIF 是一种很老的动图格式，同样的画面存成视频通常只要它的零头。两个三维模型也不小，符号的模型有 846 KB，奖项段的地面模型有 526 KB。

这个站的服务器响应很不稳定，返回第一个字节的时间快的时候是 0.19 秒，慢的时候到了 3.4 秒，远超 Google 建议的 0.8 秒。第一块内容（FCP）和最大那块内容（LCP）都是首屏那张人像，它出现的时间也跟着服务器一起摆动，快的时候 0.62 秒，慢的时候接近 4 秒，Google 对这两项的建议分别是 1.8 秒和 2.5 秒以内。加载中几乎没有东西跳位置，布局位移（CLS）只有 0.002。加载时有 4 到 7 个长任务，也就是浏览器被一段脚本连续占住、顾不上响应输入的时候，最长的一个是 327 毫秒。

页面跑起来以后，显卡的负担主要来自模型的面数。三维场景每一帧只向显卡发出 7 到 9 次绘制指令（draw call），但场景里的三角形最多时有 27 万个左右，主要来自那枚符号和奖项段的地面，所以显卡要画的面并不少。两块画布的像素密度都限制在屏幕的 1.6 倍以内，这样可以少画一些像素。

在这个站上，只用键盘的访客和怕晃动画面的访客都会碰到麻烦。键盘用户从页面顶部开始按 Tab 键时，前四次焦点落在一个看不见的联系表单上，这个表单平时的高度是零，访客看不见它，但键盘仍然能选中它的姓名、电话、邮箱和留言框。第五次焦点落在表单的提交按钮上，而这个按钮在屏幕以外。焦点在这之后才回到导航，可导航链接的焦点框是 1 像素的近黑色，落在黑红背景上几乎看不出。操作系统里有一个减少动态效果的设置，是给容易被屏幕上的运动弄得不舒服的人用的，这个站的样式表没有为它写任何规则，那枚符号和各段动画在任何设置下都照常播放。

Meer Mohsin 的这个站在 Awwwards 拿到 7.26 分，四个分项里 Creativity（创意）7.75 最高，Design（设计）7.28 和 Content（内容）7.19 居中，Usability（易用性）6.94 最低。十九位评委给出的总分从 6.0 到 9.0，分得比较散，给到 8 分以上的有三票。

Awwwards 的开发评委给 Meer Mohsin 的站打了 7.20 分，这组评委专门看技术实现。开发分项里 Animations（动画）8.00 最高，Accessibility（无障碍）6.60 最低，这和键盘用户会迷路、动画关不掉的问题对得上。Semantics（语义）是 7.20，WPO（网页性能优化）是 7.40，Markup（网页代码的写法）是 6.80。

这个站从设计到开发都署名 Meer Mohsin 一个人。他在 Awwwards 上的档案写着来自巴基斯坦，只提交过这一件作品，档案上记着的 1 次荣誉提名，就是站上那张 8 月 19 日的 Honors 证书。首屏上他称自己是视觉叙事者、界面设计师和三维网页开发者，作品章节里 CODENARTS 的说明也写着这个项目由他设计和开发。