Skip to content

All case studies

Baar Roaster: commercial, website prototypes and labels

Three results: a 30-second commercial made from a single AI clip, website prototypes with a scroll animation and a demo shop, and a label series for four coffees.

Commercial

  • The finished commercial: a single AI video clip, 30 seconds, with no editing afterwards.

Website prototypes

  • The prototype's scroll animation: as you scroll, the bean breaks open, is ground and ends as a drop in the crema.
  • Opening screen of the website prototype on desktop: a dark brown background with floating 3D coffee beans, the German headline 'Die Bohne. Von Hand geröstet. Für deine Tasse.' (The bean. Roasted by hand. For your cup.), two buttons below it and the navigation with logo and cart at the top.
    Opening screen of the showcase prototype: floating 3D coffee beans around the German headline 'Die Bohne. Von Hand geröstet.' (The bean. Roasted by hand.)
  • Demo shop on desktop and smartphone: on the left, four coffee cards (Honduras, Ethiopia Sidamo, Papua New Guinea, espresso blend) with taste filters and prices per 250 g, each marked as an example; on the right, the product window on a phone labelled 'Demo-Shop · keine echte Bestellung' (demo shop, no real order), with options for grind and pack size and an add-to-cart button.
    Demo shop with example prices: coffee cards on desktop, grind and pack-size options on a smartphone.
  • Three home page designs side by side: A 'Röstprotokoll' (roast log) on cream with roasting data per batch, B 'Dunkelkammer' (darkroom) in dark brown with coloured coffee cards, C 'Marktstand' (market stall) with bold colour blocks and the large headline 'Erst schmecken. Dann reden.' (Taste first. Talk later.)
    Three design directions for a relaunch, not chosen in the end: roast log, darkroom and market stall.

Labels

  • Concept board with ten label designs on coffee bags in green, cream, black and kraft paper, numbered 01 to 10, including a map with a stamp, a coffee branch, a mountain landscape, a bird and a star chart.
    First label round: ten concepts on coffee bags.

Result

Three results. The commercial runs 30 seconds and is a single AI video clip, used as generated, with no editing and no music added afterwards. The website prototypes led to a showcase page for presenting to the client: scroll animation, 3D beans, coffees, taste finder, coffee subscription and a demo shop with example prices, with its own menu on phones. For the labels, ten concepts led via two follow-up rounds to two vector series of four labels each and seven individual labels.

Starting point

Baar Roaster is a specialty coffee roastery in Bad Dürrheim, Germany. Its existing website is built with a site builder. Three pieces of work were created for the roastery. For the commercial, a script in eleven cuts set out the sequence: a barista grinds, brews and mixes an iced coffee and hands it over with ceremony; the customer reacts dryly. It specified 30 seconds, no music, sound effects only and no subtitles. For a new website the owner wanted a bean that is ground as you scroll and lands in the coffee as a drop. The focus was to stay on selling the beans. On top came collectible labels for four coffees, each with a fixed colour.

What was built

Three results were created for Baar Roaster.

How it came about

See all 6 steps

  1. Commercial: script as a master prompt

    Word

    A master prompt defines style, characters, café and products and describes the commercial in eleven cuts with timings. Characters and objects carry fixed handles so they look the same in every cut.

  2. Commercial: reference images for characters, café and products

    Google image AIHiggsfieldgpt-image 2.0

    From 20 August, characters, café interiors, coffee bags, cups and the coffee machine were created as images, alongside the clips. They serve as references for the video model so that brand and props stay consistent across scenes.

  3. Commercial: generating and selecting clips

    Seedance 2.5

    Between 20 and 22 August, 18 different clips were generated in several lengths and formats. Three of them carry the Seedance 2.5 provenance tag. The chosen 30-second clip has no tag but matches the tagged ones in format and naming pattern. It works as a commercial without any post-production.

  4. Website: scroll animation and 3D bean

    TripoglTF-Transformthree.js

    The bean's journey plays as a sequence of 182 still frames on a canvas, driven by the scroll position. Floating 3D beans come on top: the model comes from the AI 3D generator Tripo, was compressed with glTF-Transform and is rendered with three.js.

  5. Website: prototypes, feedback and repair

    agent systemClaude Code

    From 10 to 20 August, several prototypes and interim versions were built in an agent system with tasks, roles and several feedback rounds. On 1 September, Claude Code checked the best version so far in a browser preview and proposed three new directions on a design canvas. Instead, the existing design was repaired: a dead script block removed, a mobile menu added, the scroll distance shortened, a taste finder with four weighted questions, frames loaded in stages and a visible keyboard focus.

  6. Labels: from concept to vector series

    gpt-image 2.0

    Ten concepts, then two follow-up rounds with six and three directions. These led to two vector series of four labels each with fixed colours per coffee, and seven individual labels with bleed. The logo zone and batch field stay the same across the series; motif and colour change. The concept and variant boards were made with gpt-image 2.0.

Planning something similar?

Let me help you.

Request an intro call

Next case studyWorking with AI agents