The Techno Chronicles

This project explores the intersection of historical narrative and interactive web design. Based on interconnected Wikipedia entries, the project involved developing a two-page "scroll-telling" experience documenting the history of Techno music. The objective was to replace the functional, text-heavy layout of Wikipedia with a rhythmic, emotional, and immersive digital experience that captures the raw energy of the genre.

Overview

The primary challenge was to evoke the distinctive "vibe" of techno—rhythmic, raw, and industrial—without overdesigning the interface. Balancing historical storytelling with a high-energy aesthetic required a minimalist approach, utilizing bold hierarchy, rhythm, and custom-coded interactions.

Problem

To achieve a seamless narrative flow, all animations were custom-coded to align with the rhythm of the story.

From p5.js to Webflow

The core interactive logic and timing were first developed in p5.js, focusing on how visual elements respond to user input. Once finalized, the logic was embedded into Webflow using custom HTML/CSS and GSAP. This ensured the animations remained integrated with scroll interactions while staying performant across all devices.

Creative Coding & Animation

The final result is a minimalist, high-contrast environment that uses motion as a primary storytelling tool. By breaking the standard Wikipedia grid, the layout uses negative space and bold typography to create a sense of focus and rhythm. The dark aesthetic, combined with interactive p5.js elements, allows users to "feel" the history of techno as they scroll, turning a standard reading task into an exploratory digital performance.

Final Design

Key Takeaways

Rhythmic Scroll-Telling

Gradually revealing content via scroll-triggers controls the narrative pace and increases engagement.

Design & Code Synergy

Using custom code allows for unique interactions beyond standard no-code components, bridging the gap between design and development.

Minimalist Clarity

A clean, high-contrast design ensures that even with complex motion, the historical content remains readable and accessible.

The Techno Chronicles

More

Projects

© Lior Baum. All rights reserved.