---
slug: weingut-heck
client: 'Weingut Heck'
category: ['Development']
date: '2026'
website: https://weingut-heck.de
services: ['Development', 'Animation', 'Technical Consulting', 'Hosting']
technologies:
    - Statamic
    - Laravel
    - Vue.js
    - Inertia.js
    - TypeScript
    - Tailwind CSS
title: 'Website Relaunch for a Family Winery in Rheinhessen'
story_preview: 'A new website for Weingut Heck in Alsheim: a design full of watercolour, halftone illustration and stickers, built as a Statamic site with server-side rendering, scroll-driven animation, an age gate and a newsletter with double opt-in.'
fineprint: 'The design came from Marie Grob and Jacky Grob. We built the site, from the CMS and the animation system to the age gate, the cookie consent and the newsletter.'
---

> **Case study source:** https://unlimited.studio/en/case-study/weingut-heck

# A Design That Does Not Sit Still

Weingut Heck is a family winery in Alsheim, Rheinhessen: Dieter and Lotte Heck, the sons already in the cellar. The new site had a design before it had a developer, by [Marie Grob](https://mariegrob.com), photographer and motion designer in Mainz, and [Jacky Grob](https://jackygrob.com), designer in Potsdam: watercolour blobs, halftone illustrations, stickers, marquees, bottles that lie on the page and stand up when you open their row. Our job was to build exactly that, pixel for pixel, and make it fast.

## Statamic Under the Hood

The site runs on Statamic with Laravel, Inertia and Vue. Every page is a stack of modules the winery edits in the CMS: stages, product teasers, card grids, galleries, marquees, and the opening hours with a summer and a winter season. The pages render server-side, so the first paint carries the content and the illustrations come in without a flash. The menu opens into a card with a photo for every section, and its contact panel marks today in the opening hours.

## Animation Without the Weight

The wine accordion is the centrepiece. A bottle lies in its row, and when the row opens, a ghost copy flies rotating into the showcase pose while the panel morphs, both on one clock. The home shape draws itself once and turns 120 degrees per scroll section. Scroll reveals ship their hidden start state in the server HTML, so nothing jumps. The bottle shadows went from six blur passes to four after a profiling pass: twelve long frames became none.

## Illustrations for the Phone

The illustration library is halftone with alpha, over five megabytes at 2x. Every illustration now has a phone copy sized to its widest mobile rendering, and the CMS photos go through Glide below the tablet breakpoint. The home page went from 4.5 to 1.3 megabytes on the phone. One finding along the way: a 12.9-inch iPad in portrait is exactly 1,024 pixels wide and hit the desktop breakpoint, so the breakpoint moved by one pixel.

## Age Gate, Consent, Newsletter

A wine site asks for the age first. The answer lives in a necessary cookie, no banner needed. Cookie consent runs in the house style with two categories, and analytics load only after consent. The newsletter has double opt-in with a signed link, and confirmed addresses reach the winery as a digest with CSV, on a schedule set in the CMS.

## Browser Archaeology

One client comment, "the Merlot bottle covers the first sentence", turned out to be a browser bug. The stage scaling divided a length by a length, which only Chrome 140 and newer parses. Firefox dropped the rule, and the bottle hung 150 pixels into the next module. The factor now comes from a ResizeObserver, and CSS only sets the starting value. Stay wild, drink easy.