←Back to the experience
Case study · 04

Vinolok

Premium packaging catalog · 2021

A premium interactive catalog whose precisely choreographed scrolling turns supplied static assets into a continuous product experience.

The system-customization chapter: the Vinolok bottle finder shown across a MacBook, an iPad and a phone, listing the bottles the glass closure fits.
Open project →
Project overview

Implement an exacting supplied motion direction within one month: the entire catalog had to scroll as one seamless composition, run smoothly across devices and remain deployable as pure HTML on the client CDN.

Year
2021
Duration
1 month
Team size
2 core
Delivery model
partner led
Outputs
04
Solution

A custom jQuery scroll engine coordinates overlapping panels, parallax layers, closure states and route transitions. The implementation translates the supplied design and motion specification into a lightweight static frontend for CDN delivery.

My role

Complete frontend and motion engineering from the supplied design and assets: scroll architecture, animation mathematics, responsive behavior, asset loading and final CDN-ready delivery.

Team & collaboration

Václav Štrobl handled the complete frontend and motion implementation; the partner-agency director managed the client relationship, while visual design and assets were supplied.

Constraints
  • One-month delivery window with a precisely prescribed scroll and motion concept.
  • Pure HTML delivery for CDN hosting, implemented on top of the supplied design and assets.
The collections carousel on its second position: the Black closure in glossy black glass, engraved “Splash! Vodka” around the rim.
Deliverables
  1. 01Interactive compatibility catalog
  2. 02Custom scroll-driven product interface
  3. 03Animated closure / bottle states
  4. 04Responsive static frontend build
Evidence & results
  • Live website
  • Project screenshots
Stack
  • jQuery
  • JavaScript
  • HTML
  • CSS
  • Custom scroll engine
  • Parallax
  • CDN delivery
  • Responsive UI
Selected screens
The collections carousel on its third position: a Black closure whose top carries a fine relief engraving.
The collections carousel on its first position: the plain Black closure, unengraved, lit to read the glass itself.