Case visuals
Image gallery
01 / 07
An interactive website for Tullaland, with animated scenes, music and ways for children to contribute their own ideas.
Overview
What this piece shows
Tullaland is a colourful children’s music and story world built around characters, songs, audio plays and fantasy participation. I designed and developed the website as an interactive home for that world: a playful, video-led landing page that introduces the characters, points visitors to music and downloads, and invites children and families to take part.
The project: turning fantasy into participation
The important part of the project was not just making a colourful kids’ page. Tullaland needed a structure that could carry entertainment, parent-facing information and community participation at the same time. The site brings together responsive hero video, character introductions, songs and music videos, the “Bibliothek der Fantasie”, downloadable activity material, newsletter and contact flows, and a clear path for children to submit ideas that can become part of the Tullaland universe.
Interactive build
The site runs on a bespoke Roots Sage / Acorn WordPress theme with Blade templates, ACF-powered blocks and a Tailwind CSS v4 + Vite build. Motion-heavy frontend features are initialized only when needed, including responsive WebM hero handling, GSAP/ScrollTrigger parallax scenes, Lenis smooth scrolling, custom cursor behaviour, lazy video sections and canvas-based pixel effects.
Pixelwand and 3D world
The technical centerpiece is the Pixelwand system. In 2D it renders a chunked, horizontally scrollable pixel grid with popup content, tags, lightbox media and canvas bubble particles. In 3D it expands into a Three.js/WebGL corridor with streamed chunks, biome data, modal interactions, mobile controls, gyro and swipe options, settings toggles, plus submission and admin flows for user-generated pixels.
- Custom Sage/Acorn WordPress theme with Tailwind CSS v4 and Vite
- Responsive WebM hero with landscape/portrait source switching and autoplay watchdog logic
- GSAP ScrollTrigger parallax scenes, loop animations and reveal effects
- Pixelwand grid with chunk loading, popups, tags, lightbox media and canvas bubble particles
- Three.js/WebGL Pixelwand 3D corridor with streamed chunks, mobile controls and submission/admin flows
- Forminator participation flow, Yoast SEO, Complianz consent and Brevo/Mailin newsletter integration
The result is a children’s brand website that behaves more like a small interactive world than a static brochure: playful on the surface, but structured for ongoing publishing, participation and campaign work.
An interactive website for Tullaland, with animated scenes, music and ways for children to contribute their own ideas.
Tullaland is a colourful children’s music and story world with songs, audio plays, characters, downloads and participation. The website needed to feel like an...
Tools used
Roots Sage, Acorn, WordPress, Blade templates, ACF blocks, Tailwind CSS v4, Vite, vanilla JavaScript, GSAP/ScrollTrigger, Lenis, Three.js/WebGL, HTML5 Canvas, Forminator, Yoast SEO, Complianz, Brevo/Mailin



