Dkton

Dominik Kostolnik 是上奥地利的电影录音师和声音设计师，他在片场收同期声，回来做音效设计，再把声音混成片。站上的三项业务就是这三步，Originalton、Sounddesign、Mischung。客户是奥地利国家旅游局、TGW、Bernegger、上奥地利州政府、Innotech、KUKA 这些本地企业和机构，片子多半由 Forafilm、Lux & Zebra、Prime Concept 几家制作公司出品，他是其中负责声音的那个人。

作品集通常靠画面说话。这个站的问题是主角不可见，声音在网页上没有形状。设计师 Barry Baris Dogan 的答案是把声音在录音棚里的样子搬上来，那些做声音的人每天盯着看的东西，电平表、推子、dB 读数、波形。所以站点先立一道门，一块黑幕上只有名字和一个 Enter the experience 的按钮，因为浏览器不允许网页自己出声，必须由访客先点一下。点了之后声音默认开着，一段上升音效带出首屏，导航栏里的六格小电平表跟着跳，一条随机挑选的环境音循环在背景里走，七种之一，名字叫 Liftoff、Weather、Train、Birds 这样。

首屏之下是自我介绍，八行 64 像素的白色大写斜体，句子里嵌着四段 153 乘 64 像素的小视频当标点，都是他做过的片子。接着是三条业务，每个词一条颜色带，紫色、红色、琥珀色，带子只盖住词的一部分，右缘标着 +1.9、+0.3、+1.3 这样的 dB 读数，三条推子就这么立在页面上。再往下是 Showreel，一个 3.4 屏长的固定舞台，七个胶囊随着滚动拉成从上到下的窄缝，影片从缝里透出来，带着声音播。项目分两层，三个大案例各配一张 1,363 像素宽的视频卡和一列制作、导演、摄影、客户的署名，后面十个项目排成清单，悬停时整行变成琥珀色，一段预览视频跟着光标走。最后是四条 FAQ、一片 Instagram 的现场照片，和页脚那行 182 像素的名字，名字下面写着 Klicken & spielen，点哪里都会发出一个音。

站是德语的，没有第二种语言。

最见功夫的是把录音棚的仪表当成了版式元素，而不是装饰。首屏那七个胶囊是真正的电平表，声音开着时高低随音乐变，最矮 100 像素上下，最高能拉到 400 多，关掉声音它们就落成一样高的扁圆。业务区的三条带子照着调音台的推子做，带子的长度像推子的行程，右缘那个 +0.3 的读数用 12 像素的等宽体写着，是声音行业才认的单位。导航栏左边的声音开关本身就是一个 6 格的小电平表。

字体只有两款，分工清楚。GT Walsheim Condensed 负责所有的大字，黑体斜体 900 字重用在 182 到 230 像素的标题上，大写，字距收到 -3.84 像素，首屏两行 AUS GESCHICHTEN 和 WERDEN KLANGWELTEN 是 230 像素，门上的名字、SHOWREEL 和 PROJEKTE 是 192 像素，项目清单和自我介绍是 64 像素。700 字重管 32 像素的署名和 14 像素的导航。Geist Mono 的 300 字重管其余一切，20 像素的段落、14 像素的说明、方括号里的小标题 [ über mich ] 和 [ leistungen ]、FAQ 的答案、页脚的联系方式。大字负责喊，等宽体负责记录，像一张片场的场记单。

颜色是黑底白字加一个琥珀色，rgb(255, 184, 0)。琥珀用在小标题、门上的名字、导航的当前项、KONTAKT 按钮、三个大案例的标题和悬停时的清单行上。紫色 rgb(166, 126, 255) 和红色 rgb(255, 67, 55) 各只出现在一个地方，业务区的第一条和第二条带子，第三条用琥珀。

版式是单栏居中，每段用方括号里的等宽小标题开头。导航是屏幕正中一枚黑色药丸，左端方块里是 K 字标，右边四个链接，当前所在的章节整块变成琥珀底黑字，悬停到某个链接时药丸边缘亮起一圈光，下面弹出 ZU DEN LEISTUNGEN 这样的提示。按钮的四角各有一小段折线，像取景框。三个大案例的视频卡宽 1,363 像素，左边一列 32 像素的署名，Produktion、Regie、Dop、Ton、Kunde 各带一个琥珀色小标签，每个案例都把整个剧组列出来，然后在 Ton 那一行写上自己的位置。

图像语汇只有一种，他参与过的片子的截帧，全彩，不做去色和叠色。Instagram 那一段例外，八张现场照片散落着叠在一起，扛着话筒杆的他、剪辑台、片场的合影，整站只有这里出现他本人。

把电平表和推子拿掉，剩下的是一个黑底大字加视频卡的作品集，排得整齐。所以这个站的厚度就在那一层仪表上，它借的是调音台的语汇，用在网页上还很少见。

滚动由 Lenis 接管，推一次滚轮，位置逐帧递减地走到位。

进门这一步分几拍。点下按钮的 400 毫秒内上升音效开始播，630 毫秒时门失去点击响应、页面高度从一屏展开到 14,476 像素，1.5 秒时门开始淡出，1.8 秒解锁滚动，2.2 秒门被移除，随后一条环境音循环起来。键盘用户按 Tab 第一下就落在 Enter the experience 上，回车同样走这一遍。

电平表是这样做的。所有声音走 Howler，主输出上挂一个 AnalyserNode，fftSize 2,048，平滑系数 0.8，每帧读一次频谱，把读数按频段分给各处的表。读数高过阈值时会从表顶冒出一个音符字符往上飘，每秒最多七个。关掉声音后表进入静止态，胶囊落成同一高度。

Showreel 那 3,213 像素是一个 sticky 舞台。影片铺满舞台，用一个 SVG 的 clipPath 裁成七个胶囊的形状，滚动进度经过 smoothstep 平滑后驱动胶囊的高度，从首屏那样的扁圆一路拉成通天的窄缝，影片就从缝里显出来，全程有声。光标进入舞台时一个 SHOWREEL ANSEHEN 的琥珀色标签跟着光标走，点一下打开 Vimeo 灯箱，灯箱是自己做的壳，一条可拖的进度条和一个关闭按钮，按 Escape 也能关。

项目清单的悬停是三件事同时发生。整行底色变成琥珀，标题从灰变黑，一段 360 像素宽的预览视频出现在光标旁边并跟着光标平移，标签 PROJEKT ANSEHEN 贴在视频角上。

页脚的乐器是一个 Web Audio 合成器。舞台是整个页脚区域，横向位置对应音高，基频 110 Hz，音阶是 A 小调五声，从左到右点八下得到 220、262、330、392、440、523、659、784 Hz，正好是 A 到 G 的两个八度。每个音是一个三角波振荡器，起音时频率从略高处滑到目标值，音量走一条先升后指数衰减的包络，另外叠一小段经过带通滤波的白噪声当敲击声。按住拖动是一段滑音，光标的轨迹被画在一块 1,905 乘 851 的 2D 画布上，一圈光环跟着光标，轨迹留在画布上慢慢变淡。

其余的小声音也是设计的一部分。悬停和点击各配一个短音，音量 0.42 到 0.5，一共 14 个文件。关掉声音那一下会先放一段名叫 TON-AUS 的音效，然后才安静。

这是一个 Webflow 站，上面挂着 GSAP 3.15 加 ScrollTrigger、SplitText 和 CustomEase，Lenis 1.3.26 管滚动，Howler 2.2.3 管声音，Vimeo 的播放器 SDK 管灯箱，自定义代码通过 Slater 注入，三十多个小文件合计 200 KB 左右。

门开之前只下载 699 KB，其中字体 277 KB，六个 woff2，脚本 213 KB，上升音效 28 KB。点了 Enter 之后一口气拉 5.5 MB 的七条环境音和第一个案例 1.3 MB 的视频，整页滚完是 23 到 30 MB，视频 18 MB，十四段 3 Mbit 的预览片每段 1.2 到 2.4 MB，声音 7.9 MB，Instagram 的照片 3 到 4 MB。声音文件一共 21 个，七条环境音每条 0.6 到 0.8 MB，三条业务区的循环 2.4 MB，十四个界面短音各 20 到 30 KB。

首字节 227 到 303 毫秒，首次内容绘制 1.1 到 1.4 秒，最大内容绘制 2.4 秒，落在门上那个 192 像素的名字上。布局位移 0.047 到 0.060，来自首屏那两行大字在 1.07 秒时因为字体到达而移动了一次。连续滚动平均 57 到 58 帧，最慢的两段各在 50 帧，一段是首屏的电平表，一段是项目清单，那里预览视频在跟着光标换。

可访问性做到了细处。页面声明了德语，有 nav、main、footer 三个地标和一个跳到内容的链接，74 个控件全部有名字，图片全部有 alt。门上的按钮可以用键盘进。清单每一行给键盘用户留了一个 Video ansehen 的按钮，声音开关带 aria-pressed，标签在 Sound einschalten 和 Sound ausschalten 之间切换，关闭状态记在 localStorage 里。焦点环是 2 像素的白色实线。减弱动画的设置管到电平表、光标环、按钮的扫光和导航的滚动文字，开着它时电平表被钉在最低高度。进门之后三个大案例的视频带声音自动播放，声音开关能一次全关。

FWA 只给一个分数，82 分落在获奖站常见的 81 到 84 这一档里。团队在奖项页上的自述只有一句，Dominik Kostolnik 是奥地利录音师，他在片场收音、做声音设计、自己混音，从第一个镜头到交付，一部片子的声音只经一个人的手。这句话和站点的结构是对上的，三条业务带、每个案例署名里的 Ton 一栏，讲的都是这件事。这个站同一天也进了 Awwwards 的提名，评委投票还在进行。

Barry Baris Dogan 一个人做完了这个站，品牌、界面、动效和代码都是他。FWA 档案里他说自己在品牌、界面和代码之间的缝隙里工作，那一段通常被人交出去，他自己留着。建筑学校教了他结构，网页教了他结构立起来之后能做什么。这是他的第一个 FWA。Awwwards 那边他有一个当日站 Scarletred 和两次荣誉提名，档案上写着正在找一份代理公司的自由或全职工作。