Knokr Experiments

The Approach

These are experiments focusing on emerging web technologies for potential inclusion into the Knokr ecosystem. Each experiment explores a specific API, rendering technique, or interaction pattern to evaluate its viability for production use. Some experiments may require Google Chrome Canary with experimental flags enabled.

Festival Lineup

A responsive artist grid pulling real festival lineup data from PostgreSQL via Redis. Artist images are served from CloudFront and rendered into a canvas using the HTML-in-Canvas API's drawElementImage(). Features keyboard navigation, Ken Burns animation, flip effects, live search filtering, and Web Audio API sound feedback. Each page refresh loads a different random festival with 40+ artists.

Festival Homepage

A single-page festival homepage with a full-viewport video background and layered content sections rendered through the HTML-in-Canvas API. The hero displays the festival name, location, date range, a live countdown timer, and genre tags — all pulled from the database. Content sections are arranged in a two-column grid with the lineup section spanning a full row displaying artist images at the 3456/2000 aspect ratio. A fixed header and footer with backdrop blur hide on scroll down and reappear on scroll up.

Technology Stack

• Next.js
• TypeScript
• Redis
• CSS
• Canvas