Active Theory Crafts a Comic Book-Inspired WebGL Experience for Santioni Spirits

Active Theory Brings Santioni Spirits into a Comic Book-Inspired WebGL Universe The “Notturno Experience” project by Active Theory officially launched the luxury brand Santioni Spirits with a stunning, comic book-inspired WebGL journey.

Comic-Book Visuals Meet WebGL This experience follows a cloaked saint wandering through a barren landscape and stepping through a circular monolithic archway—designed after the exact shape of a Santioni bottle stopper. From there, the brand story unfolds visually: white church corridors set against a blazing red night sky, a floating saint wrapped in a swirl of black ink after the first sip, and a deep red portal that opens at the user’s touch.

The color palette sets the mood: blood red contrasts sharply with deep ink black, while a cool blue is reserved specifically for the saint’s cloak and cocktail glass to keep every frame locked into that late-night atmosphere.

Art Deco Type, Ink Strokes, and Comic Panels The site’s typography blends classic Art Deco posters with comic book lettering. Header cards like “THE NOTTURNO EXPERIENCE” stand out with bold Art Deco caps over a brushed ink background. Meanwhile, story captions sit neatly inside comic-style text boxes: phrases like “HESITANTLY, HIS HAND DRAWS FORWARD” rest right beneath the portal scene, while the brand message “CHILL YOUR SPIRIT / SHAKE YOUR SPIRIT / POUR YOUR SPIRIT” stacks neatly under the SANTIONI name.

The comic layout doubles as the grid for the entire website. Scroll-based panels, full-bleed frames, and “HOLD & MOVE” interactions transform every scene into a dynamic stage.

Textures and Digital Production Tactile surface textures are on full display throughout this project. Ink-brush strokes and bleeding black edges give these WebGL scenes a hand-drawn feel, powered by a custom shader that preserves background texture behind every panel.

Behind the scenes, Active Theory whipped up quick storyboards in Midjourney, tweaked color tones live on Hydra, and paired the visual journey with a custom score from long-time partner Plan8. The voiceover was first tested with ElevenLabs before being re-recorded by a comedian for a natural feel.

A Grand Launch for Santioni Spirits This marks the debut of Santioni Spirits in the luxury liquor market, kicking off with its Notturno line featuring three distinct drinks. The site acts as an interactive origin story, with each chapter tied to its own distinct color scheme. The project earned an Awwwards Site of the Day award on October 5th with an 8.09 score, taking top honors in creativity, along with an FWA of the Month back in August.

What keeps this project from feeling like a mere tech demo is its thoughtful design restraint. The color palette remains focused, caption fonts don’t steal the spotlight, and interactive elements trigger only when the story needs user participation. It is a brand launch website that moves as smoothly as a graphic novel in motion.

Check out more work from activetheory.net/ or visit the official launch site at santionispirits.com.

Active Theory Đưa Santioni Spirits Vào Thế Giới WebGL Mang Phong Cách Truyện Tranh

Dự án “Notturno Experience” từ Active Theory vừa chính thức ra mắt thương hiệu rượu cao cấp Santioni Spirits thông qua một hành trình WebGL đầy ấn tượng, lấy cảm hứng từ thế giới truyện tranh.

Thế giới hình ảnh đậm chất comic và WebGL

Trải nghiệm đưa người xem bước theo chân một vị thánh khoác áo choàng đi qua vùng đất cằn cỗi, bước qua cánh cổng tròn của khối đá monolith — vốn được mô phỏng theo đúng hình dáng nút chai Santioni. Ngay sau đó là câu chuyện thương hiệu được kể lại bằng hình ảnh: dãy hành lang nhà thờ trắng dưới bầu trời đêm đỏ rực, hình ảnh vị thánh lơ lửng trong vòng xoáy mực đen sau ngụm rượu đầu tiên, và một cổng không gian đỏ sánh mở ra dưới thao tác của người dùng.

Bảng màu của trang web đóng vai trò chủ đạo trong việc định hình cảm xúc: màu đỏ máu tương phản mạnh mẽ với màu đen mực, trong khi sắc xanh lạnh được dành riêng cho áo choàng của vị thánh và ly cocktail, giúp mỗi khung hình đều hiện lên đúng không khí ban đêm.

Sự kết hợp giữa chữ Art Deco, nét vẽ mực và lưới khung comic

Phần typography trên trang web kết hợp hài hòa giữa phong cách poster Art Deco và phông chữ truyện tranh. Thẻ tiêu đề “THE NOTTURNO EXPERIENCE” xuất hiện nổi bật với các chữ in hoa Art Deco trên nền kết cấu mực cọ. Trong khi đó, các đoạn dẫn chuyện lại nằm gọn trong những ô chú thích kiểu comic: câu “HESITANTLY, HIS HAND DRAWS FORWARD” nằm dưới cảnh cổng không gian, còn thông điệp thương hiệu “CHILL YOUR SPIRIT / SHAKE YOUR SPIRIT / POUR YOUR SPIRIT” được xếp thành ba dòng chữ cô đọng ngay dưới tên thương hiệu SANTIONI.

Hệ thống khung comic đóng vai trò làm khung lưới (grid) cho toàn bộ trang web: các ô tương tác cuộn (scroll), khung hình tràn viền (full-bleed) và thao tác “HOLD & MOVE” biến mỗi khung hình thành một sân khấu trình diễn.

Chất liệu bề mặt và quy trình sản xuất kỹ thuật số

Yếu tố chất liệu bề mặt (texture) được khai thác triệt để trong dự án này. Vệt cọ mực và những viền đen loang tạo cho các phân cảnh WebGL một diện mạo như được vẽ tay, nhờ vào một custom shader giữ nguyên phần texture phía sau mỗi khung hình.

Về quy trình thực hiện, Active Theory đã phác thảo storyboard nhanh bằng Midjourney, tinh chỉnh sắc độ trực tiếp trên Hydra, và kết hợp phần hình ảnh với âm nhạc sáng tác riêng từ đối tác lâu năm Plan8. Phần giọng đọc lồng tiếng (voiceover) ban đầu được thử nghiệm qua ElevenLabs, sau đó được thu âm lại bởi một diễn viên hài để mang lại cảm xúc tự nhiên và chân thực hơn.

Màn ra mắt ấn tượng của Santioni Spirits

Đây là bước khởi đầu của Santioni Spirits trên thị trường rượu cao cấp, mở màn với dòng sản phẩm Notturno gồm ba loại rượu. Trang web hoạt động như một câu chuyện về nguồn gốc thương hiệu, nơi mỗi chương được gắn liền với một bảng màu riêng biệt. Dự án đã xuất sắc giành giải Awwwards Site of the Day vào ngày 5 tháng 10 với điểm số 8.09 từ hội đồng giám khảo, đạt điểm cao nhất ở hạng mục sáng tạo, đồng thời nhận giải FWA của tháng 8.

Điểm giúp trang web không bị biến thành một bản demo công nghệ thuần túy chính là sự tiết chế trong thiết kế. Bảng màu được giữ nhất quán, phông chữ chú thích không làm xao nhãng người đọc, và các tương tác chỉ xuất hiện đúng lúc câu chuyện cần sự tham gia của người dùng. Đây là một website ra mắt thương hiệu vận hành mượt mà như một cuốn tiểu thuyết đồ họa biết chuyển động.

Bạn có thể xem thêm các dự án từ activetheory.net/ và truy cập trang web ra mắt tại santionispirits.com.

Active Theory Crafts a Comic Book-Inspired WebGL Experience for Santioni Spirits

Img01 - Active Theory Crafts a Comic Book-Inspired WebGL Experience for Santioni Spirits

Posted

in

by

Tags: