Gil Huybrecht

Gil Huybrecht 是比利时 Bornem 的自由设计师和艺术指导，做编辑式排版的网站，也就是像杂志那样讲究版面的网站，Huybrecht 也在 Awwwards 2026 年的评委名单里。Huybrecht 在 Awwwards 上给这个站写的介绍只有一句，说这是自己的新作品集，里面有最新的作品、接活的档期，以及关于自己和所提供服务的介绍。这一版个人站放了 19 个项目，从 2018 年到 2026 年，客户里有拍卖行 Sotheby's、耳塞品牌 Loop Earplugs、纽约的两栋住宅楼 53 West 53 和 111 West 57th Street，以及品牌公司 Motto。Huybrecht 在这些项目里只负责设计和艺术指导，需要开发的项目都交给别的开发者来做。Huybrecht 有两个项目的说明写得很坦白，Fantasy 写着大部分设计最后没有用上，Loop Earplugs 写着这套设计只是交给对方内部团队参考的样稿。

这个站的首页没有开场介绍，页眉直接把访客最想知道的几件事摆在第一屏。页眉从左到右是名字、档期（Available September 2026）、三项服务、七行获奖记录、Profile 和 Email me，下面空出一大段黑底，才开始放作品。这个顺序是给潜在客户读的，访客还没看作品，就已经知道这位设计师什么时候有空、做什么、拿过多少奖。

访客可以用三种方式看这些作品。第一种是首页的网格，每个项目有几张截图就占几格。访客点任何一格，这个项目就在屏幕右侧展开，左边是一句简介、一个去看线上网站的链接和三四行项目信息，右边是这个项目的全部图片和视频，每个项目 7 到 25 张。第二种是左下角切换出来的 Gallery，19 个项目每个只留一张图，大小不一，错落着往下排。第三种是 Profile 页，五个编号的段落依次讲个人介绍、做事的方法、服务和客户、每月一期的设计通讯，以及 Huybrecht 开的编辑式网页排版课 TIWD，全名是 Typography in Web Design。

Huybrecht 把联系的入口放在访客随手就能点到的地方。页眉的 Email me 一点就把邮箱地址复制下来，Profile 页的通讯段落有订阅表单，课程段落直接链到课程网站。

右下角的开关打开的 Star Wars 版没有新增任何作品，只是给同一批作品换了一套气氛。这一版有自己的配色、光标、音乐、音效和几个藏起来的操作，和正常版做得一样完整。选择只在当前这个浏览器标签页里有效，访客新开一个标签页，看到的又是正常版。

除了 Profile 页的段落和隐私条款页的大标题，Huybrecht 在这个站上只用一种字体、一个字号，层级全靠位置和留白。字体是 Lay Grotesk，只用中等粗细这一档，页眉、项目名、序号、页脚、项目简介和开关都是同一个字号。整站的字号跟着窗口宽度等比缩放，在 1920 像素宽的屏幕上约 20 像素，在 1366 像素宽的笔记本上约 15.5 像素，行距只比字号多一成，所以几行字叠在一起时很紧凑。Profile 页的段落把字号放大到首页的四倍多，行距比字号还小一成，字距收紧百分之二。同一款字体在首页是小小的标注，在这里成了铺满整屏的宣言，两档之间没有中间的字号。

网格把屏幕分成 14 栏，栏宽在 1920 像素宽的屏幕上约 118 像素，栏距约 17 像素，页面左右也各留一个栏距。访客按住 Shift 再按 G，屏幕上会叠出这 14 条浅灰的竖栏，这是留给设计师自己对齐用的辅助线。每一格作品占两栏，一行排七格，高度跟着截图本身的比例走，所以每一行的下缘都参差不齐，像一排钉在墙上的打样。项目名只出现在这个项目的第一格，后面的格子只有右上角的序号，访客靠序号知道自己还在同一个项目里。19 个项目的 84 格排成 12 行，首页不到六屏就到底了。

正常版的配色几乎只有黑底（#000000）和白字（#FFFFFF）。次要的开关文字是四成不透明度的白，看起来是灰色。屏幕底部的两个开关做成小胶囊，底色是带六成透明度的深灰（#2C2C2F），并且把后面的画面模糊掉，所以截图从下面滚过时，开关仍然读得清楚。页眉的文字用反色混合，压在白色截图上时会自动变成黑色。到了 Star Wars 版，所有文字换成同一种明黄（#FFE81F），这个色值正是星战片头字幕常被引用的那种黄，光剑的剑身是电光蓝（#3A8CFF）。

站上的界面部件都很小，每个部件的状态都只靠颜色、底色、细边框或文字的变化来表达。两个胶囊开关里，当前选中的一项是白色，另一项是四成白，光标停上去时变成七成白。页眉里当前所在的页面（比如 Profile）会多一块灰色的圆角底。Email me 在光标停上去时改写成 Copy email，点下去后改写成 Email copied，几秒后再变回原样。

光标和 Profile 页的列表也只用这样克制的变化。光标本身仍是浏览器自带的光标，旁边跟着一个小标签。标签上的字随所在的位置改变，在项目里是 Back 或 Focus，在放大的图上是 Close，进星战版之前是 Click to enter。Profile 页的列表在光标停上去时，那一行背后会出现一条半透明的磨砂横条，右端带一个加号或箭头。

站上的图片只有一种，全部是 Huybrecht 设计过的网站的截图，有首屏、内页，也有长截图。这些截图原样放上来，不加边框，不加阴影，也不调色，整张网格读起来像一排排浏览器窗口平铺在一面黑墙上。首页的 84 格里有 8 格是视频，内容同样是屏幕录像，静音循环播放。

这个站在手机上换了一种更简单的排法。手机上的网格只有两栏，每个项目只放项目名和前两张截图，页眉固定在屏幕顶端，缩成名字和 Profile、Email me 两个链接，Star Wars 开关和 Gallery 视图都不出现。访客点任何一张图，会打开这个项目的独立页面，页面从上到下是简介、项目信息和全部截图，底部浮着一个 Close 按钮。平板上保留了桌面的七格网格，但字号跟着宽度缩到 9 像素左右，比手机上的 17 像素还小，读起来很吃力。

Gil Huybrecht 首页的开场是一面墙从屏幕底部浮上来。访客打开网站时，屏幕中央先是一个从 0% 走到 100% 的百分比，它等的是全部 19 个项目的每一张截图和每一段视频都下载完成。百分比走完，黑色的遮罩用 0.6 秒淡出，网格里的每一格从屏幕下缘升到自己的位置，项目名和序号跟着一起升上来。每一格用 1.3 秒，起步很快，落位时慢慢停稳，后一格比前一格晚 0.075 秒出发，所以截图墙是一格接一格、一排接一排浮上来的。

访客滚动首页时，页面不会一下跳到位，而是一帧一帧地追上滚轮。页面每一帧只追上和目标位置之间差距的一成半，所以滚轮停下以后，页面还会顺着惯性滑一小段，滚轮每滚一格，页面走的距离也比平常多四分之一。首页从头滚动到底部，画面一直稳定在每秒 60 帧。

光标停在网格上时，网格压暗的是其他项目，不是光标下的这一个。光标落在哪个项目上，其余 18 个项目的格子连同项目名和序号，都会在 0.25 秒内降到两成的亮度，只有当前项目保持全白。访客因此不用读项目名，也能一眼看出哪几格属于同一个项目。

这个站最主要的动效，是一个项目的截图从网格里飞进右边的大框。访客点一格之后，其他项目先暗到一成多的亮度，大约四分之一秒后，这个项目的所有格子同时起飞，各自飞向右边那一列里属于自己的位置。每张图朝着目的地那一侧的边角先动，其余部分依次跟上。图的中间同时向访客这边拱起，就像一张被人掀起来的纸，拱起的部分还会稍微变亮。这段飞行在半秒之内就走完了将近九成的路程，剩下的一小段再用将近一秒慢慢落定，所以起飞很干脆，落位很轻。图片飞行的同时，左栏的简介和项目信息一行一行从下方推上来，每一行都像从一条看不见的缝里升出来。

访客关掉项目时，动画不是开场的倒放。访客点击左栏回到网格，大约四分之一秒后，右边那一列里还在屏幕上的大图开始缩回它在网格里的那一格，全程 0.75 秒，起步和收尾都慢。这一次先动的是靠近屏幕右侧中间的那一部分，这部分同时向访客这边翘起，整张图像是被人从右边卷了回去，网格里的其他项目在同一段时间里恢复全亮。

项目打开以后，滚轮推动的只有右边那一列图，走出画面上缘的图会被接到队尾，所以访客往下滚动永远到不了头。访客点其中一张图，这张图会再飞一次，放大到屏幕中央，左栏同时淡出。访客再点一下，这张图又飞回那一列。打开、滚动和关闭项目的整个过程，画面保持在每秒 60 帧左右。

在网格和 Gallery 之间切换时，没有任何遮罩挡住画面。访客点左下角的 Gallery，每个项目的第一张截图直接从网格里的位置飞到 Gallery 里的那张卡片上，其余截图在 0.2 秒内淡掉，Gallery 的文字用 0.3 秒淡入。飞行同样是起步快、落位慢，整组大约一秒半落定。切回网格时，这些截图又飞回原来的格子，页面还会自动滚到访客刚才在 Gallery 里看到的那个项目，访客不会因为换了视图而迷路。

Gallery 里的悬停效果把两种视图连了起来。光标停在一张卡片上，页眉在四分之一秒内淡出，其他卡片在 0.3 秒内暗到两成，这个项目的全部截图按网格里的大小排成一行，出现在页面顶端页眉原来的位置。卡片自己的图也飞了上去，原来的位置只剩一个细细的白框，框里写着项目名。光标移开，截图飞回卡片，页眉重新出现。

访客从首页去 Profile 页时，这个站换了另一种过渡。一块黑幕先用 0.35 秒盖住整个屏幕，页面在黑幕后面换好，黑幕再用 0.35 秒退去。Profile 页上的编号小标签依次淡入，每个用 0.6 秒，彼此错开 0.15 秒。

Profile 页的大字和项目里的左栏一样，是一行一行升起来的。每一行都从自己那一行的下方升到原位，超出这一行的部分被裁掉，所以字像是从一条条看不见的缝里冒出来。每一行用 1.5 秒，起步快、收尾慢，下一行晚 0.1 秒出发。第一段在页面打开后马上开始，后面的段落要等访客滚到它进入屏幕下方两成的位置才开始，一段接着另一段时，下一段会从上一段最后一行的节奏接着往下走。

Profile 页上还有一张卡片，会沿着整页在三个位置之间来回飞。这张卡片开始时立在个人介绍旁边的左栏，访客往下滚动，它就飞到通讯段落旁边的中间位置，再飞回课程段落旁边的左栏，飞到每一个位置都正好翻过半圈。卡片在两个位置之间时会向前倾斜二十多度。访客滚得越快，卡片中间就鼓得越高，像一张被风吹弯的纸，滚轮停下半秒多后，卡片重新变平。卡片跟着滚动位置走，但慢半拍，滚轮停下后它还会继续追一小段。

一路上这张卡片会换上 34 张不同的项目截图，每换一张都有一声很轻的音效。访客打开通讯或服务的弹出窗口时，这张卡片会从页面上飞进窗口左侧的图片位置，换成窗口专用的那张图。访客滚动 Profile 页时，画面一直保持每秒 60 帧。

这个站在手机上去掉了这些飞行，换成了更直接的跳转。访客在手机上用手指上下滑动网格，点一张截图就跳到这个项目的独立页面，点底部的 Close 回到首页，但会回到首页最顶端，而不是刚才看到的位置。Profile 页在手机上改成普通的文字，原来那张会飞的卡片，变成了一张贴在屏幕下方的图片，访客往下滑动时，这张图片会一张接一张地换。

Huybrecht 给 Star Wars 版换上了另一套动效，从加载画面到光标都和正常版不一样。访客点开关以后，整个页面会重新加载，加载用的百分比变成黄色，背景变成星空。加载完成后，光标变成一把光剑，旁边一行黄字 Click to enter。访客点下去，会同时响起光剑点燃的声音和星战主题曲，页眉和网格随后用半秒淡入。进门之后，光剑一直发出低沉的嗡嗡声，访客挥得越快，声音越响，音调也越高。光剑靠近截图时，截图上会泛起一圈蓝光，离得越近越亮。

这把光剑真正的看点，是访客能用它烧穿截图。访客快速挥动光剑划过一张截图，剑刃经过的地方会留下一道发光的裂口。裂口中间是一条白热的亮线，往外是橙色的熔边，最热的地方烧成一条黑缝，裂口两侧的画面还会往外让开一点，像纸被撕裂。几分之一秒后，裂口开始冷却合拢，留下一片焦褐色的痕迹和零星的橙色余烬，大约一秒后余烬熄灭，截图恢复原样。光剑只有挥得够快才会烧，慢慢移动只会发出蓝光，划过截图之间的星空也什么都不会留下。访客来回挥动光剑时，画面保持在每秒 59 到 60 帧。

Star Wars 版的另外几个操作都没有任何提示。访客按住鼠标不放超过 0.35 秒，背景的星点会拉长成一条条从屏幕中心向外放射的光线，就像飞船跳进超空间，松开鼠标，星空又慢慢恢复。在这一版里换页时，不再用黑幕，旧页面会被一道擦除线抹掉，新页面从后面露出来。擦除用 1 秒匀速走完，形状从左往右、从右往左、圆形扩散和时针扫过四种里随机挑一种，而且不会连着两次一样。

访客在 Profile 页按住键盘上的 F，0.35 秒后页面上的其他内容在半秒内淡出，光剑也收了起来。五段自我介绍随即变成两端对齐的黄色倾斜字幕，在半秒内浮现。这些字从下往上滚动，并向远处收窄，就像星战电影的开场字幕。光标旁边有一行小字写着 Release to go back（松开就回去），访客松开 F 键，字幕在半秒内淡出，光剑重新点燃，页面回来。字幕滚动时，画面同样稳定在每秒 60 帧。

Gil Huybrecht 这个站在桌面上把截图、视频和 Profile 页的大字全部画在一块铺满屏幕的 WebGL 画布上，由 three.js 驱动。网页本身只放了 84 个空白的占位格子，每个格子带着一个编号、项目名、序号和宽高比，画布按这些格子的位置和大小去贴图。每一张图都是一块 32 乘 16 格的平面网格，共用同一套自己写的着色器，悬停压暗、飞行和光剑的蓝光都只是在改这套着色器的参数。

所有飞行之所以能在不同页面之间连起来，关键在于平面是按编号登记的。站点为每一个编号都保留着一块专属的平面。换页、换视图或打开项目时，旧的占位格子从网页里消失，新页面里出现一个同样编号的格子，这块平面就会在下一帧找到新格子，从当前位置飞过去。网格到项目、网格到 Gallery、项目到放大层，用的都是这同一个机制，所以 Gallery 里的卡片和项目里的大图，都只是同一张贴图换了一个落脚点。贴图放在一个按引用计数的缓存里，最多留 64 张，没人引用的老贴图才会被释放。

飞行的变形整个写在顶点着色器里。着色器拿到起点和终点两个矩形，按进度在两者之间插值。每个顶点的进度是错开的，离目的地方向最近的顶点先走，最远的顶点最多晚 22.5%，每个顶点再各自套一条先快后慢的曲线。顶点同时沿 z 轴抬起，高度是一条随进度先升后降的抛物线，图的中间和领先的一侧抬得最高，片元着色器再按抬起的高度把颜色最多提亮 22%。整段进度由一条自定义的三段贝塞尔曲线驱动，总长 1.5 秒，前 0.52 秒就走完 88%。

关闭项目时，着色器换成另一种模式，以屏幕右侧中点为基准，离这一点近的顶点先走，路径也朝这一点偏过去，整张图再扭出一个弓形。关闭动画全程 0.75 秒，用的是 GSAP 的 power3.inOut 曲线。

站点把 Profile 页的大字也画在画布上，这样这些字才能和截图一起参与换页擦除、让光剑照亮，星战版也能拿它们做开场字幕。站点先在网页里排好段落，逐个字符量出每一行的位置，再用 fillText 把每一行画进一张 2D 画布贴图，网页里的原文设成透明。画布上每一行是一块单独的四边形，顶点着色器让每一行按自己的进度从下方升起一个行高，片元着色器把超出本行范围的部分裁掉，进度曲线是指数型的先快后慢。每一行 1.5 秒，行与行错开 0.1 秒，由 ScrollTrigger 在段落进入屏幕下方两成时启动。项目左栏的文字则用 GSAP 的 SplitText 按行切开，每行套一个遮罩，用同样的升起方式进场。

Profile 页那张会飞的卡片是一个单独的三维平面。站点在页面上放了三个看不见的锚点，卡片的位置和大小用 Catmull-Rom 曲线在锚点之间插值，进度由 ScrollTrigger 按滚动位置驱动，scrub 设成 0.75 秒，所以卡片会慢半拍地追上滚动。卡片绕竖轴的角度等于进度乘以半圈，在两个锚点中间还会绕横轴前倾一点。站点把进度的变化速度平滑后换算成弯曲量，顶点着色器沿卡片宽度方向用正弦曲线把中间推高，同时重新算出法线，再用一盏固定方向的灯打光，所以卡片弯起来时有真实的明暗。卡片背面的图会左右翻转，亮度也压暗一些。

站点按目的地挑选换页的过渡，不同的设备和页面各用一种。手机和平板上是一块黑幕淡入淡出，桌面上在网格和 Gallery 之间互换时用飞行，其他页面之间用黑幕加截图重新升起，星战版里则用着色器擦除。擦除写在每一块平面的片元着色器里，进场和离场的两组平面拿到相反方向的遮罩，四种形状的遮罩边缘都留着一段柔和的过渡。

站点给星战版换了一条完整的渲染流程。站点先把截图和文字画进一张开了四倍多重采样的渲染目标，再在屏幕上画星空，然后用一个铺满屏幕的合成着色器把那张渲染目标贴回来，最后才画光剑。光剑本身是用 three.js 几何体直接搭出来的三维模型，剑柄由几段圆柱拼成，表面用 matcap 材质模拟光照。剑身是一根接近白色的细芯，外面套着四层越来越粗、越来越淡的蓝色胶囊体，用叠加混合画出一圈光晕，挥动时剑身后面还拖着一条逐渐淡出的光带。截图上的蓝光在片元着色器里计算，亮度按像素到光剑的距离指数衰减。光剑的嗡嗡声是一段循环播放的音频，用 Web Audio 播放，音量和播放速度都跟着光剑移动的速度上升，声音开关的选择会存在浏览器里。

烧穿截图的效果靠一张 1024 乘 1024 的浮点贴图来记录，站点每一帧在两张贴图之间来回读写。贴图的四个通道分别记录热度、焦痕和划过的方向。剑刃上一个固定的点从上一帧走到这一帧，划出一条线段，站点按距离把一条高斯形状的热度印进贴图，只有剑刃在一帧里移动超过屏幕的约 0.4% 才开始留痕，到 1.6% 时达到最强。每一帧热度按指数衰减，约 0.35 秒降到很低，焦痕由热度累积出来，再按自己的速度衰减。访客滚动页面时，这张贴图会跟着页面一起移动，所以裂口始终留在被划过的那张截图上。

合成着色器读这张贴图，把热度换成画面。它只在有内容的地方烧，判断依据是渲染目标的透明度，所以剑刃划过星空不会留下痕迹。热度最高的地方变成近乎黑色的空洞，外圈按一条从白到橙再到暗红的火焰色阶加亮，空洞两侧的画面按热度的梯度向外偏移，制造撕开的效果，冷却后再合拢。

裂口冷却以后，截图上会留下一片焦痕。焦痕高的地方，画面被混向一种煤灰般的褐色，再撒上用噪声挑出的橙色亮点当余烬。着色器同时用高频噪声把附近的画面轻轻扭曲，看起来像纸张卷曲。开发者在着色器源码里留下的注释解释了这个选择，纸烧起来会卷曲，不会像液体那样流动，所以扭曲的噪声没有固定的方向，而且只在剑刃还在切的那零点几秒里出现。站点在剑刃停止移动两秒后会停掉这张贴图的计算。

星空和开场字幕也都画在同一块画布上。星空是 2600 个点精灵，排在一条长隧道里朝镜头飞来。访客按住鼠标 0.35 秒后，点的速度从每秒 16 个单位平滑地加到 2800 多个单位，每个点后面同时长出一条线段，构成超空间的光线。开场字幕复用了 Profile 页已经画好的文字贴图，站点把它放进一个向后倾斜 62 度的组里，每秒向上推 4.2 个单位，透视让字往远处收窄，上下两条渐隐带让字在两端淡出。

截图存成 KTX2 压缩纹理，每张 1500 乘 1000 像素，自带 mipmap。一份清单文件把每张图片的地址对应到它的压缩版本，浏览器再用一个 226 KB 的 WebAssembly 转码器，把它们转成访客显卡能直接用的格式。首页的加载百分比等的就是这些贴图和全部视频，站点在显示网格之前，就把 19 个项目的每一张图和每一段视频都取回来，所以访客之后打开任何项目都不会看到空白的格子。整站用基于 Vue 的框架 Nuxt 搭建，样式用 Tailwind 写，内容存在内容管理系统 DatoCMS 里，视频托管在视频平台 Mux 上，动画交给 GSAP 3.15。

这套预先全部下载的做法，让桌面访客在开头要等一等，也下载得很多。服务器 0.06 到 0.29 秒返回第一个字节，屏幕在 0.1 到 0.34 秒画出第一块内容，加载中页面几乎没有跳动。可是访客真正能滚动和点击，要等百分比走到 100%，页面在 2.6 到 4.5 秒之间才解锁，解锁前后共下载了约 46 MB。网格出现以后，站点还会在浏览器空闲时继续预载 Profile 页的图片和视频，十几秒内累计达到约 69 MB，其中视频约 44 MB，KTX2 贴图约 22 MB。首页上至少有六段视频在开头被完整下载了两次，白白多出约 11 MB。访客切到 Star Wars 版，还要再下载约 4 MB 的音频。

手机和平板上，这个站完全不创建 WebGL 画布，截图和视频都换回普通的图片和视频元素，项目也不再弹出窗口，而是一个独立的页面。站点在页面加载时用一条媒体查询判断设备，只有能悬停的精确指针、并且窗口宽度至少 650 像素时才启用画布，所以带触屏的平板即使屏幕很宽，也拿不到画布。访客在桌面上把窗口拖窄到 650 像素以下，页面会在半秒后自动重新加载成另一种版本。手机首页只下载约 4.8 MB，平板约 9.4 MB。站点还藏了一段隐形的自动播放测试视频，如果它播不起来（比如 iPhone 的低电量模式），网页里的视频就换成静态图片。

Gil Huybrecht 这个站给读屏软件做好了基础，却把只用键盘的访客挡在了作品外面。页面声明了语言，标出了各个区域，每个控件都有名字，项目窗口也标成了对话框，按 Esc 就能关掉。可是 84 个格子都只是占位，没有一个是链接，键盘按 Tab 只会在页眉的三个控件和页脚的链接之间来回，走不到视图开关，也走不到任何一个项目。站点读取了系统的减少动态效果设置，却没有在任何地方用它，访客打开这个设置后，截图仍然从屏幕底部升起，星空和光剑照样在动。

Gil Huybrecht 这个站先在 2026 年 8 月 1 日拿到 FWA 的当日最佳，83 分，七周后又拿到 Awwwards 的当日最佳。Awwwards 的四项分数是 Design 7.93、Usability 7.33、Creativity 7.46、Content 7.92，Design 和 Content 最高，Usability（易用性）最低。Usability 落后于其他三项，和用键盘打不开作品、开头要等几秒才能操作这两点对得上。

这个站在 Awwwards 的开发奖里得了 7.4 分，这个奖单独评前端开发的质量。开发评委给 Animations（动画）这一项打了 8.4 分，是六项里最高的。Semantics 看的是页面结构有没有用对标签，这一项只有 6.6 分，和那 84 个不是链接的空白格子对得上。

Gil Huybrecht 和 Jesper Landberg 两个人在这个站上的分工很清楚。Huybrecht 负责设计，这个站的网格、单一字号和 Profile 页上铺满整屏的大字，都是 Huybrecht 一贯的编辑式做法，Profile 页里写到，Huybrecht 的课程已经收了 400 多个学生。Landberg 负责开发，在 Awwwards 上有 32 个当日最佳，在 FWA 上获奖 41 次，档案里自述是专注动效和精致数字体验的创意开发者。两人合作得很频繁，站上 19 个项目里有 11 个的开发都署了 Landberg 的名字，包括 The Lookback、DoThings 和 53 West 53，另有三个由 Jesper Westlund 开发，其余几个各由不同的开发者完成。