Vada pav，马哈拉施特拉邦人的comfort food，被很多当地人视为值得捍卫的信仰。这封写给这道街头小吃的“情书”，不是餐厅官网，也不是食谱博客，而是一个用于 Frontend Challenge - Comfort Food Edition 的 Perfect Landing 交互式落地页。 页面从马哈拉施特拉人真实的饮食争论中长出来：青酸辣酱和蒜蓉酸辣酱该按什么比例配？洋葱到底算不算正统配料？街角哪家摊子最够味？每个人都有答案，且谁都不服谁。因此这个落地页不想做得干净、体面、不痛不痒，而是想呈现这道食物本身的气质：温热、有点混乱、具体到让人想争两句。 页面结构包括：一个带动画插图的英雄区——蒸汽不停升腾、串灯闪烁，像黄昏时分的路边摊，背景里还有一层缓慢的季风雨；一段个人故事区；一条“Day With It”时间线，记录同一种vada pav在一天四个不同时刻的样子；以及整个页面的互动核心：“Vada Pav Builder”配料搭建器。 这个搭建器让用户切换五种真实配料——青酸辣酱、干蒜酸辣酱、炸辣椒、生洋葱和sev。不管你按什么顺序点击，配料都会被按正统的堆叠顺序装进SVG三明治里。一边搭，页面一边用英文实时生成一句话，描述你此刻的组合；旁边的热力表则在动画中显示你选出的辣度。 设计上，作者刻意避开了落地页常见的套路——奶油色背景加一个暖色点缀，或一张万能渐变大图。vada pav本身就有强烈的视觉身份，于是配色直接从锅里来：炸锅里的油棕黑色、姜黄的金、辣椒的红、咖喱叶的绿，阅读区则用暖奶油色来留出安静的空间。 作者写道：“我想避开那种我自己都会反复落入的落地页默认模板。”从最终成品看，这份执拗做到了。 Live site：https://mumbaivadapav.netlify.app/ CodePen：https://codepen.io/editor/lvjstkex-the-vuer/pen/019ff081-af80-78e8-8213-5a8a3f37f6cb
热门跟贴