第 008 期:五个让浏览器慢慢长出形状的网站

第 008 期:五个让浏览器慢慢长出形状的网站

本期收录 Space Type Generators、Thisissand、Koalas to the Max、A Soft Murmur 和 How Many People Are In Space Right Now?:五个把文字、沙粒、圆点、环境声与宇航员名单变成可亲手进入体验的独立网页。

在 Space Type Generators 里,字会卷成线圈;在 Thisissand 里,按住鼠标会落下一层沙;Koalas to the Max 甚至只给你一枚圆。它们都把「做什么」压缩成一个手势,剩下的时间交给画面、声音和一点点等待。
这一期收录五个这样的网页:它们没有急着把功能说明塞满首页,而是先给你一块可以动手的材料。字母、沙粒、圆点、雨声和一张宇航员名单,都是从浏览器里长出来的小入口。

Space Type Generators:让字形先动起来

Space Type Generators 是设计师 Kiel Mutschelknaus 做的动态字体实验站。首页列出 Cylinder、Field、Coil、Ribbon、Layers 等一长串生成器,每个入口都把文字放进不同的运动规则里。1
Mutschelknaus 原本在做字体吊灯时,发现 After Effects 和 Cinema 4D 的渲染速度不适合快速试错,于是转向 Processing,后来再把适合浏览器运行的原型用 JavaScript 和 p5.js 重写。The Verge 2019 年的采访提到,他当时已经做出 30 多个在线生成器;用户可以改文字、颜色、速度和预设,字体本身也不是现成字库,而是由线条和描边编码出来的图形。2
打开 Coil 或 Ribbon,先输入一个短词,再慢慢拖动参数。它不像普通文字特效那样把字当成一块贴纸,而是让字形暴露出自己的骨架:弯曲、伸长、折叠,最后变成一段会动的线。

Thisissand:让屏幕成为容器

Thisissand 是一个制作和分享数字沙景的网页。按住鼠标或手指,彩色的沙子就从指尖落下,在屏幕底部堆成坡、层和细小的纹理。官方把它称作一个 playground,入口几乎没有说明,手一按就知道该怎么玩。3
它最初在 2008 年以学校项目的形式出现,参与者是设计师 Johanna Lundberg、Jenna Sutela 和 Flash 程序员 Timo Koro。他们在早期博客里说,想做的是一个可以玩沙的 playground。4
这类网页很容易被做成「选择颜色、点击生成」的工具,Thisissand 留下了中间那段落下来的过程。你可以只倒一种颜色,看它慢慢堆出一座不太规整的小山;也可以在上一层还没停稳时换色,让画面像一块被切开的矿石。它不要求你产出一张漂亮成品,光是看沙子落下就已经够用。

Koalas to the Max:一枚圆怎样变成一张图

Koalas to the Max 的首页只给你一个大圆。鼠标在圆上移动,它会分裂成四个更小的圆,再继续分裂,直到藏在里面的图像慢慢显出来。网站允许你贴入图片 URL,做一张自己的版本,页面署名 Vadim Ogievetsky,并注明这是为 Annie Albagli 制作的作品,底层使用 D3。5
Ogievetsky 在 Mozilla Hacks 的案例里写过,这个点子来自他看到的一款 Flash 小游戏;他重新做了一遍,改用 D3 和 SVG,让圆点在分裂时平滑过渡,最终拼成图像。网页的大部分工作都在浏览器里完成,服务器只需要提供页面和图片。6
第一次玩时,你会下意识地来回扫动鼠标,像在擦掉一层遮罩。等考拉出现,惊喜其实已经不重要了,真正舒服的是中间那段过程:每一次移动都看得见反馈,却不用记规则,也没有失败条件。想换头像时,还可以把一张自己的图片贴进去,看看它被拆成圆点之后会变成什么样。

A Soft Murmur:自己调一间不存在的房间

A Soft Murmur 是一个在线环境声混合器。它把雨、雷、海浪、风、火、鸟、咖啡店和白噪音放在同一张简单的调音台上,可以分别调节音量,让几种声音同时播放。7
设计师 Gabriel Martin 说,这个网站最初是为自己做的:他喜欢在图书馆和咖啡店工作,但现实里的噪音有时太多,于是想把环境声按自己的需要混在一起。The Independent 2015 年介绍过这个项目,也记录了一个很具体的用法:火声、海浪和一点蟋蟀声。8
它好用的地方不是「声音很多」,而是每一种声音都可以被推远或拉近。咖啡店声太像真的办公室,就只留一点;雨声太满,就混进低低的火声。调到一个自己愿意待着的比例后,把标签页放在角落里,网页就变成一间不需要预约的房间。

How Many People Are In Space Right Now?:把宇宙缩成一张名单

How Many People Are In Space Right Now? 没有先给你一张巨大的星空图,而是直接列出人在太空中的名单。页面为每个人显示姓名、国旗、任务角色和在太空中的天数,并链接到对应的 Wikipedia 条目;底部还标明了 NASA-Johnson Space Center 的地球照片来源,以及 Brad Eshbach 和 Joshua Hathaway 的制作署名。9
这个项目把一个听起来需要实时数据库才能回答的问题,做成了一张可以从上往下读的小清单。你先看到人数,再看到每个人的身份,最后才意识到「在太空」并不是一个抽象的数字,而是一组有姓名、有国旗、各自处在不同任务阶段的人。
适合从这里开始逛:先随便点开一个名字,再回到页面比较不同角色和天数。它没有试图替你讲完太空探索史,只把入口压到足够小,让好奇心有地方落脚。

先打开哪一个?

想做一张会动的字卡,去 Space Type Generators;想要一段不必完成的慢手工,打开 Thisissand;只有一分钟,Koalas to the Max 的圆点最合适;需要一个不打扰人的背景,就调一调 A Soft Murmur;如果你想从一个小问题开始认识太空,先点开那张名单。
这五个网页的共同点,不是它们都「有趣」,而是它们都把第一步做得很小:移动一下鼠标,按住屏幕,改一个音量,点开一个名字。浏览器于是暂时不再只是装内容的盒子,也可以是一块会变形、会下沙、会发出声音的材料。

Related content

  • Sign in to comment.
More from this channel