SPILNEWS · Media & Journalism
High-performance Video News for Gen-Z
We built a high-performance, video-native homepage for SPILNEWS, the Dutch news platform reaching Gen Z across TikTok, Instagram, YouTube, Spotify, and the web. Built with Next.js 16, React 19, TypeScript, and Tailwind CSS 4, the platform uses a fully API-driven architecture that gives the editorial team full control over playlists, branding, navigation, and hero content without deploy dependency. The key architectural differentiator is an immersive URL-synced video overlay that preserves browsing context while making every story directly shareable.
The Challenge
SPILNEWS had already proven it could reach young audiences on social platforms, but its owned web experience did not yet match the speed, clarity, and visual energy of that distribution model. The challenge was not simply to publish videos on a website. It was to create a homepage that felt native to Gen Z consumption habits while adding the editorial depth, context, and ownership that social platforms cannot provide.
Key questions:
- How do you present hundreds of videos without creating noise? — SPILNEWS publishes both short-form, swipeable clips and longer explainers, so the homepage needed to guide discovery without overwhelming users.
- How do you make a website feel like a social feed without losing journalistic context? — The experience had to feel immediate and immersive, while still supporting sources, transcripts, and editorial framing.
- How do you give the editorial team full control? — Branding, navigation, playlists, hero content, and supporting copy had to be manageable through the CMS without developer intervention.
- How do you keep performance high with video-heavy content? — The platform needed to stay fast on mobile networks while handling lazy loading, infinite scroll, HLS playback, and analytics events.
Our Approach
We designed and built a fully custom homepage experience in Next.js 16 and React 19, backed by a headless API architecture that separates editorial control from frontend delivery. This gave SPILNEWS the speed of server-rendered content, the flexibility of a modern app, and full ownership over the platform logic that creates value.
API-driven content model: Playlists, video cards, global navigation, hero modules, and brand settings are all fetched from a central API. That means the editorial team can change the experience in real time through the CMS, without code changes or platform lock-in.
Format-aware discovery: We built server-side classification logic to distinguish shorts from longer explainers based on tags, duration, and playlist metadata. Users can switch formats instantly, while SPILNEWS retains control over how each content type is surfaced.
Immersive overlay architecture: Instead of sending users to a separate watch page, each video opens inside a full-screen overlay with URL sync via /video/[slug]. This preserves feed context, improves session continuity, and makes every video directly shareable.
Performance-first delivery: Lazy-loaded thumbnails, route prefetching, batched infinite scroll, and adaptive HLS streaming keep the interface responsive even under heavy media load. The result is a mobile-first experience that feels fast because it is engineered to be fast.
Metrics
< 1.5s
Load Time
First Contentful Paint stays under 1.5 seconds through server-rendered delivery, lean initial payloads, and lazy-loaded media.
2
Video Formats
Users can switch seamlessly between short-form clips and longer explainers within the same discovery flow.
100%
CMS-Driven
Branding, navigation, playlists, hero content, and supporting interface copy can be managed without a deploy.
5+
Platforms
The experience supports a brand operating across TikTok, Instagram, YouTube, Spotify, and its own web platform.
15–25yrs
Audience
The homepage UX, navigation patterns, and content presentation were designed specifically for Dutch Gen Z news consumers.
From Social Reach to Owned Media Value
SPILNEWS exists to help young people understand what is happening through visual journalism. The homepage had to do more than showcase content. It had to convert fast-moving social attention into an owned platform experience where SPILNEWS controls the interface, the logic, and the long-term value of its audience relationship.
A visual system built for recognition
We translated the SPILNEWS brand into a digital system that feels distinct from conventional news sites. The interface uses a deep forest green base, linen-white text, and an electric lime accent to create immediate contrast and recognizability across cards, navigation, overlays, and calls to action.
The asterisk from the SPILNEWS logo became a reusable UI motif, appearing in loading states, labels, and interface accents. This gave the platform a visual signature that reinforces brand memory while keeping the component system consistent and scalable.
A hero designed to set the pace
The homepage opens with a full-screen hero that uses autoplay background video, with separate media assets for desktop and mobile. A controlled gradient overlay protects readability, while headline, CTA, and supporting content remain fully CMS-configurable.
This is important because the hero is not a static marketing block. It is a programmable editorial surface. SPILNEWS can shift the narrative focus in real time, highlight major stories, and align homepage messaging with what is happening across its social channels.
Navigation that respects how Gen Z browses
Discovery is built around a sticky bottom navigation on desktop and floating controls on mobile, giving users fast access to playlists and format toggles without obstructing the content. The bar appears only when useful, between hero and footer, which keeps the interface present but never heavy-handed.
We also implemented a full-screen search overlay with real-time results. Combined with touch-friendly horizontal navigation powered by Embla, this creates a browsing model that feels closer to social product behavior than to traditional publishing templates.
Editorial depth inside the video experience
The full-screen video overlay does more than play media. Each story can surface journalist information, source references, transcripts, and dedicated explanation sections. That transforms the player from a consumption endpoint into a context layer.
This distinction matters commercially as well as editorially. SPILNEWS is not dependent on third-party platform formats to communicate nuance. By embedding context directly into its owned interface, the brand turns editorial process into platform value and strengthens what makes its journalism defensible.
Privacy-aware analytics that support better decisions
We integrated Didomi for consent management and implemented custom analytics with batched event delivery using sendBeacon. Session tracking, search interactions, share events, and video milestones at 25%, 50%, 75%, and 100% were all instrumented with minimal impact on runtime performance.
This gives SPILNEWS actionable data on how audiences actually consume stories, without relying solely on opaque third-party platform dashboards. In practice, that means better editorial decisions, stronger feedback loops, and more value captured inside SPILNEWS's own system.
Architecture
- Next.js 16 App Router powers a dynamic, server-rendered homepage architecture so playlists, hero modules, navigation, and branding always reflect the latest editorial state without requiring frontend redeploys.
- React 19 Server Components reduce unnecessary client-side JavaScript by rendering content-heavy interface layers on the server, improving load efficiency while preserving a fast, app-like experience for users.
- Headless API delivers playlists, video cards, global settings, and navigation data into the frontend, giving the SPILNEWS team full control over publishing logic while owning the system, the data flow, and the long-term platform value.
- URL-synced overlay architecture enables immersive video playback in modal-style overlays that map to real routes, preserving browsing context, improving shareability, and creating a smoother editorial journey without breaking navigation patterns.
- TypeScript enforces strong typing across components, API contracts, and UI state, reducing integration risk and making the platform easier to scale and maintain without introducing delivery dependency.
Frontend
- Tailwind CSS 4 was used to build a flexible design system that translates SPILNEWS brand recognition into a scalable frontend layer, allowing fast iteration across cards, playlists, hero modules, and navigation components.
- Embla Carousel powers swipe-friendly playlist interactions that feel familiar to mobile-first audiences, helping SPILNEWS present more content with less friction and better content discovery.
- Framer Motion adds controlled transitions and interface animation to reinforce the video-native feel of the homepage without compromising usability or performance.
- Radix UI provides accessible primitives for interactive components, helping the platform maintain usability and structural consistency while accelerating delivery of high-quality frontend behavior.
Performance
- Server-first rendering minimizes the client bundle for content-heavy views, improving first-load speed and making the homepage feel faster for users arriving from social platforms.
- Selective client component boundaries keep interactivity only where it creates value, reducing hydration overhead and improving responsiveness across devices commonly used by Gen Z audiences.
- Production revalidation strategy ensures editorial changes can appear quickly without full rebuild cycles, improving publishing efficiency while keeping infrastructure overhead lean.
- Optimized media and asset delivery supports a video-first interface without overloading page weight, helping maintain a smooth browsing experience even in content-dense layouts.
SEO & Structured Data
- Server-rendered metadata ensures key homepage and content signals are available to search engines at request time, improving discoverability for owned content outside closed social platforms.
- Semantic page structure supports clearer indexing of editorial modules, playlists, and navigation content, helping SPILNEWS convert social attention into searchable, long-term media value.
Security
- Didomi manages consent handling for privacy-sensitive integrations, helping the platform meet compliance requirements while preserving trust and operational control.
- API-driven separation of concerns keeps content management logic decoupled from presentation, reducing risk in frontend updates and making the system safer to evolve over time.
Hosting & Infrastructure
- Vercel provides the deployment layer for fast global delivery, preview workflows, and reliable production hosting, supporting rapid iteration without sacrificing performance.
- Decoupled platform setup ensures SPILNEWS is not locked into a monolithic CMS or external publishing platform, giving the team ownership of code, frontend logic, and the business value created by the system.
“SPILNEWS needed more than a website. We wanted an owned platform that felt as fast and visual as our social channels, but with the context and editorial depth that sets us apart. The result gives us exactly that, plus the control to evolve the experience without depending on external platforms.”
SPILNEWS — Editorial Team
More case studies
From Excel to Platform for Academic Research Operations
We designed and built a custom research operations platform for Academion, replacing fragile Excel-based workflows with an owned web application for academic institutions. Built with Laravel, Vue.js, Inertia.js, PostgreSQL, Laravel Nova, and Tailwind CSS, the system centralizes survey management, participant tracking, reporting, and administration in a scalable architecture that captures operational knowledge inside the product itself.
Booking infrastructure for Modern Tattoo Studio's
We built a multi-tenant booking platform for Blink Tattoo Platform that gives studios full control over scheduling, payments, and client communication in one owned system. The product was developed with Laravel 10, React 18, TypeScript, Inertia.js, MySQL, and Stripe Connect, using an event-driven architecture that synchronizes studio operations in real time across calendars, payments, and notifications without relying on fragmented third-party workflows.
