Technical implementation of the 90s TV timeline without developers | Analysis

Interactive 90s TV Timeline: Technical Implementation Without Budget or Developers

A team of designers and editors, without a single in-house developer, created a large-scale web project about the evolution of Russian television. An interactive house with 108 windows, inverted scrolling, and a custom CMS were built in just six months using vanilla JavaScript on a zero budget. We break down the technical solutions that delivered stable performance even in Safari.

Framework-Free Architecture: Why They Ditched React

The project kicked off with a deliberate rejection of modern frontend frameworks. The main reason? No professional developers on the team. The design lead, who handled the technical implementation, relied on neural networks as the primary tool for code generation. Vanilla JS was the only way to ensure control over the quality of AI-generated code.

Key architectural decisions:

• Inverted scrolling via flex-direction: column-reverse
• Dynamic timeline with fish-eye effect
• ES6 modules instead of bundles
• Custom video player without third-party dependencies

This approach provided a critical advantage: direct browser loading of modules without hydration or runtime overhead. On initial render, the packages weigh just 47 KB, compared to the typical 200+ KB for React apps. For a project with heavy graphical demands, this was essential for performance.

Optimizing Media Content: From 35 Seconds to 2.5

Initial site load times clocked in at 35 seconds due to 108 high-quality interior images. The solution involved multi-level processing:

• Automatic conversion of PNG to WebP/AVIF on upload via the admin panel
• Generation of blur-up previews (50px width) for instant visual feedback
• Streaming image processing instead of in-memory buffering
• Limiting parallel conversions to two processes

// Fish-eye effect for timeline
const distanceFromCenter = Math.abs(timelineCenterY - elementCenterY);
if (distanceFromCenter < fishEyeRadius) {
    const ratio = 1 - (distanceFromCenter / fishEyeRadius);
    const scale = 1.0 + (maxScale - 1.0) * ratio;
    element.style.transform = `scale(${scale})`;
}

The breaking point was the OOM Killer in Kubernetes: Sharp exhausted memory limits during parallel AVIF processing. The fix involved dropping the effort parameter to 2 and switching to streaming processing. Result: compressing a 4.7 MB PNG down to 152 KB WebP (31x) without visible quality loss.

Preloader as Part of the Concept

The thematic preloader with TV static was implemented using Canvas instead of video files. This delivered three key benefits:

• No visible looping (noise generated via Math.random())
• Smaller size (310 lines of JS vs 5+ MB for WebM)
• Reusable logic

// Generating static for the headline
function generateHeadlineNoise() {
    const frames = [];
    for (let i = 0; i < 4; i++) {
        frames.push(generateNoiseFrame());
    }
    document.documentElement.style.setProperty('--noise-frames', frames.join(','));
}

The preloader solves a technical challenge by gathering all heavy assets before showing the interface. The house appears instantly, without texture blurring. The same noise generation algorithm powers an Easter egg on header hover.

Backend: From JSON File to Kubernetes

The initial setup stored data in data.json on a $5 VPS. Scaling to enterprise infrastructure required:

• Replacing JSON with MariaDB
• Integrating with MinIO instead of local storage
• Setting up Nginx as a reverse proxy
• Adapting to a GitLab CI/CD pipeline

The visual editor in the admin panel lets designers edit content right in the grid—click a window, tweak parameters. This is crucial for non-technical team members. All media files are processed automatically: Sharp generates WebP, AVIF, and blur-up previews without human intervention.

Key Takeaways

• Inverted scrolling via column-reverse is cheaper to implement than JS animations and works across all browsers
• Streaming image processing prevents OOM crashes even on weak servers
• Canvas over video for dynamic effects saves bandwidth and improves perceived quality
• Custom video player without libraries shrinks bundle size by 120 KB
• Blur-up previews create the illusion of instant loading while saving real bandwidth

Technical debt is minimal: 92% of the code was generated correctly on the first try by neural networks, with the remaining 8% being manual Safari fixes. Adoption of modern tools (Kubernetes, AVIF) happened without budget increases, thanks to corporate infrastructure. The big lesson: even a non-technical team can build a complex web project with the right stack and a focus on resource optimization.

— Editorial Team