Filter Coffee

Tamil filter-coffee stall board for the DEV Frontend Challenge: Comfort Food Edition — Perfect Landing.

Run

pnpm install
pnpm dev

Design

• Structure: shop menu board shown on initial landing
• Type: Shrikhand + Catamaran + Noto Sans Tamil (bilingual painted board)
• Art: weighted brass/steel illustration on the counter
• Flow: pick a line on the board → begin ritual (pour auto-plays on step 4)
• Sound: optional “Hear music”

CSS

• Custom properties for board paint, brass, focus, and type stacks
• Two-column shop layout (grid) from ~900px; stacks on smaller screens
• Menu rows as a dotted-line grid (number · name · meta)
• SVG counter art; pour / froth / steam keyed with CSS animations
• prefers-reduced-motion cuts the loops down to static poses
• Focus rings use --focus (brass), not the browser default

Audio credits - veena.mp3

• Title: Veena_Recording.wav
• Author: iskweldog
• Source: https://freesound.org/people/iskweldog/sounds/216060/
• License: Creative Commons 0 (public domain dedication)
• Notes: HQ preview from Freesound CDN used in-app.