Inferorum Gemmae – WebGL-Markenwelt für eine italienische Romantasy-Saga

Immersive Autoren-Website für die Romantasy-Saga „Inferorum Gemmae“ von F. Vanessa Arcadipane: eine scroll-getriebene Three.js-Shader-Slideshow blendet die Welten der Saga ineinander, ergänzt um ein eigenes Supabase-CMS für Blog und Inhalte.

„Inferorum Gemmae“ ist eine fünfbändige italienische Romantasy-Saga — Diamante Nero, Rubino Rosso und die folgenden Bände — mit eigenen Figuren, Welten und einer dichten, dunklen Bildsprache. Eine klassische Buch-Landingpage hätte dieser Welt nicht standgehalten: Sie sollte sich beim Scrollen anfühlen wie ein Übergang zwischen den Schauplätzen der Saga, nicht wie eine Abfolge statischer Sektionen. Gleichzeitig wollte die Autorin Blog, Events und Inhalte ohne Entwickler selbst aktuell halten — ohne dafür ein schwergewichtiges WordPress aufzusetzen.

Wir haben inferorum-gemmae.com von Grund auf gebaut: Vite + React 18 mit TypeScript und Tailwind CSS v3, direkt aus dem Figma-Design umgesetzt — Sektion für Sektion (Hero, Libri della Saga, Personaggi, Mondi e Luoghi, Autrice, Fan Art, Eventi, Blog, Newsletter, Contatti). Herzstück ist eine WebGL-Slideshow auf Basis von Three.js: eine einzige Fullscreen-Plane mit einem eigenen GLSL-Shader, der zwei Texturen (aktuelle + nächste Sektion) über einen `progress`-Uniform ineinander blendet. GSAP ScrollTrigger treibt diesen Wert von 0 nach 1, während der Nutzer von Sektion zu Sektion scrollt — ein dezenter UV-Displacement-Crossfade, der die Schauplätze der Saga nahtlos ineinander übergehen lässt, statt sie hart zu schneiden. Dazu kommt ein eigenes, mandantenfähiges Headless-CMS auf Supabase: Blog-Posts und Bilder mit Row-Level-Security, ein eigener Admin-Bereich und eine separate API-Subdomain (api.inferorum-gemmae.com). So pflegt die Autorin Beiträge, Events und Galerien selbst — der Code bleibt unangetastet. Ausgeliefert wird alles als statisches SPA-Bundle über Vercel mit aggressivem Asset-Caching (immutable, 1 Jahr) und einem 301-Redirect von www auf die nackte Domain.

• Vite 5

  Blitzschnelles SPA-Bundling, statischer Deploy
• React 18 · TypeScript

  Komponenten-Architektur, typsicher
• Three.js

  WebGL-Slideshow mit eigenem GLSL-Shader
• react-three-fiber + drei

  React-Renderer für Three.js-Szenen
• GSAP ScrollTrigger

  Scroll-getriebene Shader-Übergänge
• Tailwind CSS v3

  Design-Tokens direkt aus Figma
• Supabase

  Headless-CMS: Blog & Bilder mit Row-Level-Security
• Vercel

  Statischer Deploy, immutable Asset-Caching

Inferorum Gemmae hat keine Buch-Website, sondern ein Portal in die eigene Welt: Beim Scrollen gleiten die Schauplätze der Saga per WebGL-Shader ineinander, jede Sektion — Bücher, Figuren, Welten, Autorin, Fan Art, Events — hat ihren eigenen Auftritt. Über das Supabase-CMS aktualisiert die Autorin Blog und Inhalte komplett selbstständig. Durch das statische Vite-Bundle mit immutable Asset-Caching lädt die Seite trotz 3D-Rendering schnell — und steht auf einem Stack, der sich Band für Band weiter ausbauen lässt.