Inferorum Gemmae – A WebGL Brand World for an Italian Romantasy Saga

An immersive author website for F. Vanessa Arcadipane's romantasy saga „Inferorum Gemmae“: a scroll-driven Three.js shader slideshow blends the worlds of the saga into one another, paired with a custom Supabase CMS for the blog.

„Inferorum Gemmae“ is a five-book Italian romantasy saga — Diamante Nero, Rubino Rosso and the volumes that follow — with its own characters, worlds and a dense, dark visual language. A classic book landing page would never have held up to that world: it had to feel, on scroll, like moving between the saga's settings, not like a sequence of static sections. At the same time the author wanted to keep the blog, events and content up to date herself, without developers — and without a heavyweight WordPress to set up.

We built inferorum-gemmae.com from the ground up: Vite + React 18 with TypeScript and Tailwind CSS v3, implemented straight from the Figma design — section by section (Hero, Libri della Saga, Personaggi, Mondi e Luoghi, Autrice, Fan Art, Eventi, Blog, Newsletter, Contatti). The core is a WebGL slideshow built on Three.js: a single fullscreen plane with a custom GLSL shader that blends two textures (current + next section) via a `progress` uniform. GSAP ScrollTrigger drives that value from 0 to 1 as the user scrolls from section to section — a subtle UV-displacement crossfade that lets the saga's settings flow into one another instead of hard-cutting between them. On top of that sits a custom, multi-tenant headless CMS on Supabase: blog posts and images with row-level security, a dedicated admin area and a separate API subdomain (api.inferorum-gemmae.com). The author maintains posts, events and galleries herself — the code stays untouched. Everything ships as a static SPA bundle on Vercel with aggressive asset caching (immutable, 1 year) and a 301 redirect from www to the bare 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 doesn't have a book website — it has a portal into its own world: as you scroll, the saga's settings glide into one another via a WebGL shader, and every section — books, characters, worlds, author, fan art, events — has its own moment. Through the Supabase CMS the author updates the blog and content entirely on her own. Thanks to the static Vite bundle with immutable asset caching, the site loads fast despite the 3D rendering — on a stack that can grow volume by volume.