Léo Parpeix - Portfolio 2026

Léo Parpeix 目前在数字设计公司 Locomotive 做艺术总监兼交互设计师，作品集首页顶部的小字写着，Parpeix 也接自由职业的项目。About 页是作品集里介绍 Parpeix 本人的页面，上面的工作经历还列着 Immersive Garden 和 14islands 两家公司。About 页的获奖清单列着 10 个 Awwwards 当日最佳和 1 个月度最佳，这些奖都是 Parpeix 在这几家公司参与的项目拿到的。

Parpeix 在页脚 Credits 点开后的那段说明里讲了这个作品集的构想，同一段话也登在 FWA 的奖项页上。Parpeix 想在沉浸式的三维画面和干净的二维版面之间找到平衡，让访客滚动一遍就能看完项目，在 10 秒内看懂自己会什么。整个构想围绕那朵留着小胡子的雏菊展开，Parpeix 说这朵花代表了自己的性格和做事的方式。这朵雏菊在开场的工作室里是一件刚雕好的作品，在 About 页上回到了大自然，在别处又成了一件古怪好玩的魔法物件。

作品集通常一打开就是项目，Léo Parpeix 的作品集一打开却是一间三维渲染的雕塑工作室。房间里有三扇拱形窗、人字拼的木地板和一架靠墙的木梯，几个台子上摆着几何小样。正中的台子上就是那朵长着脸的石膏雏菊，它的设计图挂在右边墙上。画面左下角只配了一句标语，Driven by detail. Obsessed with seamless motion.（被细节驱动，执着于流畅的动效。）雕好的雏菊和它的图纸并排摆着，访客一进门就能看到标语里说的那份对细节的执着。

工作室之后，首页的第一段内容是三行巨大的字 FRENCH INTERACTIVE DESIGNER（法国交互设计师），旁边飞着一只黄色的三维蜜蜂，底下一行小字写着 Click to feed the bee（点一下喂蜜蜂）。访客点一下，点的地方就会冒出一颗橙子或一串葡萄，蜜蜂会飞过去把它吃掉。蜜蜂吃完以后，三行大字一行接一行换成 CREATIVE PASSIONNATE ART DIRECTOR（有创意、充满热情的艺术总监）。换上来的这三行里藏着一个拼写错误，Passionate 多写了一个 n，访客喂过蜜蜂才看得到。About 页和页脚也各有一块同样的蜜蜂区，换上来的词分别是 Colorblind But Sees Vibes（色盲，但看得见氛围）和 your gateway to excitement starts here!（通往精彩的大门从这里开始）。

蜜蜂那一段之后，首页先列出了 Parpeix 的 6 个精选项目。每个项目的截图和视频横着排成一条截图带，访客可以用鼠标拖着这条带看。精选项目中间还夹着第二个三维房间，那是一间木书架上摆满粉彩色书脊的图书室，Focus on innovation and user-centered design（专注创新和以用户为中心的设计）这句话就压在书架上。

每个精选项目的截图下面都跟着一行，列出这个项目拿过几个奖、年份、团队有几个人、在哪家公司做的，以及 Parpeix 本人具体负责什么。比如 Dioriviera 那一行写的是五人团队，在 Immersive Garden 做的，Parpeix 的角色是艺术总监，兼做界面、三维和交互设计。一份个人作品集主动写明作者只是五个人里的一个，看的人反而更容易判断这位设计师到底能做什么。精选项目下面是一张叫 Archives 的简表，一行一个项目，列着另外 23 个项目的名字、类型、Parpeix 的角色、年份和所在公司。

除了首页，这个站还有 About 和 Playground 两个页面。About 页从湖边的户外场景开始，往下换成一整页墨绿色的版面。版面上先是 WHO IS THIS CURIOUS FELLOW（这个好奇的家伙是谁）的蜜蜂区和一张 Parpeix 在巴拿马山顶看日出的照片，再是一间图书室里浮着的工作经历卡片，最后是获奖清单和客户名单。Playground 页整页是明黄色的，标题写着 WELCOME ON MY DESIGN PLAYGROUND（欢迎来到我的设计游乐场）。Parpeix 平时做的小实验像一面拼贴墙一样散落在页面上，有海报、转场、加载动画和三维练习，每件都标着名字和年份。这一页上还飞着好几只蜜蜂，它们会冒出 Wrong turn（走错路了）和 Pollen later（花粉晚点再说）这样的对话气泡。

这个站的画面主要由几个三维场景撑起来。首页的工作室和图书室都是暖色的室内，有奶油色的灰泥墙、没上漆的素木头、粉彩色的书脊和几幅剪纸风格的画。About 页上的户外场景则做得像一套玩具。圆滚滚的松树排成一片小树林，倒映在湖面上，远处是蒙着白雪的山和一团团棉花一样的云。所有场景都用同一套画风，柔和的光、哑光的材质和浅景深，画面上还罩着一层细细的胶片颗粒。这套画风在近几年的三维渲染作品里并不少见，站上真正属于 Parpeix 自己的形象，则是那朵长着小脸的雏菊。

版面上的文字只用了两款字体，视觉上的分量几乎全压在少数几个巨大的词上。正文和导航用 Monument Grotesk 的常规体，字号跟着窗口宽度缩放，在 1920 像素宽的屏幕上约 19 像素，另有 24、32 和 45 像素三档用在引言和小标题上。大标题用的是 Avantt 的可变字体（粗细可以连续调节的字体），粗细调在常规和粗体之间、偏向粗体的位置。大标题的字号最大约 216 像素，是正文的十倍多，三个词就能占满一屏。Avantt 按字数只占全站文字的 2% 左右，按在屏幕上占的面积算，却占了将近六成。Parpeix 在 About 页的自述里，把几个词之间的空隙换成了一朵小雏菊，访客读大字读到一半，雏菊就又出现一次。

版面上的颜色也用得极少，每一页基本只用一个底色和一个字色。首页是浅灰底（#F7F7F7）配墨绿色的字（#022016），这种墨绿深到几乎看不出绿，大字看上去像黑色。About 页反过来用深底浅字，墨绿底（#083D2A）配米色字（#EED6C8）。三个页面共用的鲜艳颜色基本只有一种明黄（#F6E016），它出现在蜜蜂身上、跟着鼠标走的小胶囊上和截图带上写着 DRAG（拖动）的标签上，Playground 页干脆整页用它做底色。除了 Playground 页的底色，这种明黄只用在访客可以动手的地方，它和旁边的说明文字一起标出了哪里能点。

这个站在手机上保留了全部内容，只是把版面改成了一栏。首页开场的镜头离雏菊更近，花几乎占满竖着的屏幕。导航收成了右上角的两个按钮，一个开关声音，另一个打开从屏幕顶端落下的白色菜单面板，面板上用大字列出 WORK、ABOUT、PLAYGROUND 和 LAB，下面是 Parpeix 的邮箱地址。精选项目仍然是一条可以横着滑动的截图带，项目信息排在截图下面。首页中段的图书室缩成了一张卡片，上面多了一个黄色的 WATCH REEL（观看作品集锦）按钮。手机横过来时，页面会提示访客把手机竖回去。

访客打开网站时，先看到的是一张几乎空白的浅灰页面，页面中间横着一行小字，写着 Parpeix 的名字、身份和 World building（正在搭建世界）。加载完成后，屏幕中央出现一个装着那间工作室的圆角小窗，它一开始歪着、往后倒，像一张斜放在桌上的卡片。小窗随后转正、升到位，先长成一个方块，再一口气撑满整个屏幕，访客就站进了工作室里。小窗撑满屏幕以后，镜头还会从房间右侧往左滑回原位，用大约 2 秒，起步和收尾都慢，中间快。

在三维场景那几段，访客往下滚动时推动的是镜头。首页开场时，镜头随着滚动往下沉，同时往工作室里推进。到了图书室那一段，镜头沿着书架竖直移动，书架和网页上的文字一起往上走。这个站给页面的滚动做了平滑处理，所以镜头也不会跟着滚轮一格一格地跳。

访客动一下鼠标，三维画面会像被手指划过的水面一样，沿着光标走过的路线短暂地晃开、变糊，然后慢慢恢复清晰。整个镜头也会跟着光标微微转向，幅度很小，访客多半只觉得画面是活的，说不出它动了。光标旁边同时跟着一个黄色的小胶囊，上面写着 CLICK TO ENABLE SOUND（点击打开声音）。胶囊会顺着鼠标移动的方向倾斜，鼠标一停下，它就缩到看不见。网站的声音要等访客照胶囊上写的点击一下才会打开，打开后响起的是一段 45 秒的环境音，循环播放。

蜜蜂是页面上最活泼的角色，它的飞法像一只真的虫子。蜜蜂不会走直线，总是绕着弧线追一个看不见的目标，快到目标时减速，翅膀一直在快速扇动。访客把光标移到蜜蜂身上，蜜蜂就会冒出一句不耐烦的话，比如 Not a button（我不是按钮）或 Personal space（注意距离）。Playground 页上的台词更多，有时蜜蜂会自言自语一整段，比如 We are now in philosophy mode（我们现在进入哲学模式了）。

访客点击喂食后，水果落下时会有一声轻响。蜜蜂飞过去把水果吃掉以后，首页的三行大字才开始替换。旧的三行字一行接一行往下沉，每一行沉到自己那一行的下边界以下就看不见了。每行用一秒多，相邻两行错开十分之一秒左右。新的三行在旧字沉到一半时从下方升上来，起步快、落位慢。

访客可以用鼠标拖动项目的截图带。光标移到截图带上时，跟着光标的黄色胶囊会换成 Drag。访客按住鼠标往左一拉，截图带会跟着手走，松手后还带着惯性滑一段，速度慢下来时再轻轻吸到最近的一张截图上停住。截图带滑动时，每张图片也会在自己的框里错开一点，像透过窗户看远处的景物。截图带首尾相接，访客往一个方向一直拉下去，最后会回到第一张截图。在手机上，手指要先横着划出一小段距离，截图带才会开始跟着手指移动，所以竖着滑动页面时不会误拖到它。

访客点击导航前往另一个页面时，屏幕中间会出现一个印着小雏菊的墨绿色大圆。大圆先扩大盖住整个屏幕，再缩回中心，下一个页面的三维场景随之从四周露出来。新页面的镜头同时从侧面滑进来，用不到一秒落定。

作品集里的工作室、图书室和湖边场景，都画在两块叠在一起的全屏 three.js 画布上。下面一块按屏幕的像素密度画房间和户外场景，先画进一张渲染目标，再经过一道 SMAA 或 FXAA 抗锯齿、一道流体扭曲和一道颗粒噪点。上面一块是透明的，固定按两倍的宽和高渲染，开着阴影，只画蜜蜂、水果和它们的影子，所以这几样跟着访客操作移动的小物件边缘格外干净。在手机上，两块画布都按两倍像素密度渲染。

每个房间的光照和材质都预先烘焙进了几张大贴图里。首页的工作室和图书室一共用 8 张，按物件的种类分开装，花、道具、家具、装饰、画、书架、地板和墙各占一张，About 页则用 9 张。

镜头的位置和视角也是在三维软件里预先摆好的，每个场景的模型文件里都带着一台镜头，网页加载场景时直接读取它的位置、角度和视野。程序在这台镜头外面又套了两层，一层按光标位置做缓慢的转向，另一层按滚动位置推着镜头走。

负责滚动的这一层没有用曲线路径，每个三维段落只配一组参数。程序先算出这一段在屏幕上滚过了多少比例，这一段的顶端进入屏幕底部时算 0，底端离开屏幕顶部时算 1。程序再拿这个比例乘以这一段设定的位移和旋转，叠加到镜头上。首页开场那一段设定的是往下 2.4、往前 4 个单位，图书室那一段只有竖直方向的 2.75 个单位。这里用的滚动位置是平滑滚动库 Lenis 处理过的值，所以镜头的手感和网页的滚动完全一致。

开场的小窗和换页的大圆都是着色器画出来的。小窗是一块全屏平面，片元着色器在上面画一个圆角方框，再把方框按一个绕两个轴旋转、带透视的三维位置投影到屏幕上。三个进度值分别控制它转正、长成方块和撑满屏幕。整个站是一个单页应用，换页时浏览器不重新加载页面。换页的过程中，墨绿色的大圆随进度先变大再变小，站点同时往每一种材质里注入一小段着色器代码，丢掉落在大圆范围里的像素。这样蜜蜂和场景都会被大圆干净地挡住，不会穿到大圆前面来。

光标划过时的水面效果是一个真正的流体模拟。程序在一张只有屏幕两成分辨率的贴图上跑稳定流体算法（Stable Fluids）。光标的移动给流体加上推力，流速每一帧衰减 2%。最后一道后期处理按每个像素的流速，把画面往流动的方向错开一点，再用 15 次随机取样做模糊。流速越快，画面就越模糊，前面说的那道沿着光标慢慢消散的水波就来自这里。在桌面上，场景里的部分物体还额外套着同样的随机取样模糊，做出一点景深的感觉。

站点把项目的截图带也画在了画布里。每个项目的截图存成单独的 KTX2 贴图，贴在一排平面上，拖动的手感由一组参数决定。在桌面上，鼠标的位移乘以 3 累加成拖动量，每一帧保留九成作为惯性，截图带按 0.068 的比例追上拖动量。当拖动的速度降到一个门槛以下，截图带改用 0.055 的比例吸附到最近的一张截图上。手机上这组参数整体调快，乘数是 4，追随和吸附都改成 0.14，手指要横向划过 85 像素才开始拖动。

蜜蜂的飞行交给了游戏 AI 库 Yuka 的转向行为。场景里有一个看不见的逃跑者在追随机的目标点，蜜蜂则是一个追踪者，用预测对方去向的追击行为去追这个逃跑者，最高速度限制在每秒 2.5 个单位。翅膀的扇动只是按时间的余弦去转动翅膀模型。访客点击喂食时，程序在点下的位置放一颗橙子或一串葡萄的模型，把它设为蜜蜂的新目标，等蜜蜂到了以后再触发大字的替换。蜜蜂会说的话分成闲聊、被光标碰到时的抱怨和几段完整的对话，程序每次从里面随机挑一句，不和上一句重复。声音由音频库 Howler 播放，一共只有四个文件，其中有那段环境音和喂食时的两种水果音效。

贴图用 KTX2 压缩格式，进了显存也保持压缩，不会像普通图片那样解压后膨胀好几倍。站点按窗口宽度挑贴图的尺寸，窗口至少 1600 像素宽的桌面拿 4096 像素的大图，更窄的屏幕拿 2048 像素的版本，蜜蜂、花和噪点这些小贴图也同样分成两档。三维模型用 Draco 压缩，首页和 About 页各有一个场景模型，蜜蜂、雏菊、橙子和葡萄各是一个小模型。

这套按窗口宽度挑贴图的做法，让桌面访客要下载很多数据。访客在 1920 像素宽的屏幕上打开首页时，十几秒内要下载约 31 MB，大部分是 4096 像素的场景贴图，About 页的场景也在其中。最大的几张贴图是 About 页的前后两层树、首页的地板和 About 页的地面，每张 1.4 到 1.7 MB。单个最大的文件则是一段 2.8 MB 的作品集锦预览视频，其次是 About 页 2.3 MB 的场景模型和 1.1 MB 的葡萄模型。1366 像素宽的笔记本因为拿到的是 2048 像素的贴图，只下载约 20 MB，平板和手机约 17 MB。

即使要下载这么多，页面的版面还是很快就显示出来了，屏幕在 0.23 到 0.59 秒之间就画出了内容。三维资源要等页面加载完成之后才开始下载，所以不会拖慢版面的显示。

只用键盘的访客离不开 Léo Parpeix 作品集的首页，因为键盘焦点到不了页眉的 Work、About 和 Playground 三个导航链接。焦点只能落在一个没有名字的声音按钮和各个项目链接上，页面上也完全没有焦点框，访客看不出焦点停在哪里。读屏软件能按页面声明的语言朗读，能读到写着 Parpeix 名字的主标题，也会跳过装饰图片，但整页只有一个主内容地标，也没有跳到正文的链接。至于对晃动敏感的访客，即使在系统里打开了减少动态效果的设置，开场的小窗照样旋转展开，镜头照样在房间里穿行。

Awwwards 的四项设计评分里创意（Creativity）最高、易用性（Usability）最低，开发奖里动画（Animations）最高，语义（Semantics）和无障碍（Accessibility）并列最低。

FWA 不公布分项分数，它的奖项页上有一段简介，说这是艺术总监兼交互设计师 Léo Parpeix 的作品集，Parpeix 专门做注重创新、以用户为中心的独特网站。FWA 给这个站归的三个类别是动画、好玩可互动（Fun & Playable）和个人作品集。

About 页列出的那 10 个当日最佳都来自公司项目，没有记在 Léo Parpeix 的 Awwwards 个人主页上。

Awwwards 和 FWA 给这个站写的署名并不一样。Awwwards 的当日最佳记在了 Parpeix 名下，FWA 却只署了 Thoma Lecornu 一个人。由于 Léo Parpeix 本人不在署名里，这个奖没有记在 Parpeix 的 FWA 主页上。页脚 Credits 里的说明则写明了 Lecornu 的参与，Parpeix 在那里特别感谢 Lecornu 加入进来、和自己一起做这个项目，还感谢了 Victor、Félix 和 Lucas 在三维上的帮助。