2026brandingУгли и ветки · Moscow5 weeks

"Coals & Branches" — open-fire restaurant

A landing site for an open-fire restaurant in central Moscow — alternative cuts of beef (machete, skirt, denton, flat-iron) cooked on live coals of apple, oak, cherry. The site doesn’t describe the restaurant, it reproduces its atmosphere — heat, smoke, branches, sparks — directly in the browser.

https://coals-and-branches.vercel.app/
restaurant
hover.tracked
Surface

What users see. Identity, motion, UI craft, copy.

Cormorant Garamond for headings with italic accents, IBM Plex Mono for service labels, IBM Plex Sans for prose. A warm coal base (#100a0c) shading to ember (#ff4d1c → #ffe1c2), ash, and a thin violet neon for technological accents. The cinematic hero uses three parallax layers: coals photograph, soft smoke, and a canvas with live sparks computed in real time.

Canvas SparksCursor TrailWebAudio FireParallax HeroLoyalty MockBooking Modal
scripta://case/coals-and-branches/architecture
Substrate

What holds it up. Architecture, contracts, infra, latency.

Two independent canvas layers: a global spark stream and a cursor trail. Both rendered through a sprite-cache pipeline that holds 60fps down to MacBook M1. WebAudio synthesises the fire-crackle without any media file. RAF throttling on mouse events, animation auto-pause on hidden tab, capped DPR, prefers-reduced-motion respected.

Sprite CacheRAF ThrottleHidden-tab PauseCapped DPRReduced-motion
Story

A restaurant on fire, in a browser

The restaurant cooks rare-cut alternative beef on live coals of apple, oak and cherry, with a chef’s philosophy built around three woods, each with its own burn temperature and character of smoke. The brief: make a site that works as a first impression for a premium-segment restaurant — five seconds to read the character (brutal, noble, craft) and then a target action: book a table or join the loyalty programme. Plus an infrastructural ask: a dynamic "offers" block that the restaurant can edit without developers, plus an internal menu page with interactive navigation from the homepage.

Vertical columns that open like a film exposure

Four vertical columns — Open Fire, Raw Steel, Bar & Smoke, Wine Library — that expand on hover in a film-exposure manner. The hovered column reveals a description, the background catches fire from below, the icon lifts. Click — autoscroll into the corresponding section of the menu. Simple as a gesture, theatrical as a UX move.

Gallery

Pieces of the product.

  • gradient
    Cinematic hero · three parallax layers01/06
  • scan
    Canvas sparks · sprite cache02/06
  • mono
    Directions · film-exposure columns03/06
  • noise
    Loyalty 3D-tilt card04/06
  • grid
    Asymmetric photo mosaic05/06
  • rings
    WebAudio fire-crackle toggle06/06
[ Results ]
60fps
down to M1
2 langs
RU / EN
4
menu directions
8
gallery composition
[ Stack ]
Next.js 14TypeScriptTailwind CSSFramer MotionCanvas APIWebAudionext/font
Next case

GAZOV — corporate site for an industrial manufacturer