Farbe.film is a free, open-source 3D eCommerce website template that pairs the Nuxt framework with the Prismic headless CMS to build product stores with Three.js-powered 3D visuals and Stripe checkout.
What is Farbe.film?
Farbe.film is a starter template for building eCommerce websites with immersive 3D product presentations. It runs on Nuxt (Vue 3) and uses Prismic as its content management system, so product data, text, and media are editable through Prismic's dashboard rather than hard-coded. The template is published by Prismic (Copyright 2013-2025 Prismic) under the Apache License 2.0, and it includes a live demo, a StackBlitz playground, and a YouTube course that walks through building the site from scratch. Output is a full Nuxt front-end ready to deploy to Vercel with a one-click button.
Key Features
- 3D product visuals — Built on TresJS, a Vue renderer for Three.js, enabling WebGL 3D scenes inside the Nuxt app.
- GSAP animations — Uses GreenSock Animation Platform for scroll-triggered and interactive motion across the page.
- Tailwind CSS styling — Utility-first CSS for rapid layout and theming without leaving the markup.
- Prismic headless CMS — Content is stored in Prismic, with a dedicated command to initialize your own repository: npx @slicemachine/init@latest.
- Stripe integration — References Stripe's API docs for handling payments in the checkout flow.
- TypeScript support — The template is written in TypeScript, giving type safety across Vue components and Nuxt modules.
- One-click Vercel deployment — A Deploy to Vercel button clones the repo and sets up hosting directly.
- Quick-start scaffolding — Spin up the project with npx nuxi@latest init -t github:prismicio-community/nuxt-starter-prismic-farbe#HEAD farbe.
Who is Farbe.film for?
- Nuxt developers looking for a production-shaped starter that shows how to combine Vue 3, Three.js, and a CMS in one project.
- eCommerce teams wanting a product page that goes beyond static images by presenting items in an interactive 3D scene.
- Agencies and freelancers who need a branded storefront they can restyle with Tailwind and fill with client products through Prismic.
- Developers learning TresJS or GSAP — the template acts as a working reference implementation with a companion YouTube course.
What can you do with Farbe.film?
- Showcase a product line in 3D: Load 3D models and present each item with orbit controls, lighting, and GSAP-timed transitions.
- Manage store content without code: Edit product names, descriptions, prices, and media in the Prismic CMS and see changes reflected on the Nuxt site.
- Prototype a checkout experience: Use the Stripe integration as a starting point for real payment flows, adapting the API calls to your Stripe account.
- Learn by remixing on StackBlitz: Open the template in the browser via the StackBlitz link and run the full Nuxt dev server without a local setup.
How does Farbe.film work?
The template is installed by running the nuxi init command, which clones the GitHub repository into a folder named farbe. After installing dependencies with npm, pnpm, yarn, or bun, you start the dev server on localhost:3000. To make content editable, run the SliceMachine init command to connect the project to a new Prismic repository, then build and preview with standard Nuxt commands.
Pros and cons
- Free and open source — licensed under Apache License 2.0, so it can be used and modified freely.
- Strong educational value — includes a YouTube build-along course and official docs for Nuxt, Prismic, TresJS, GSAP, and Stripe.
- Requires Prismic for full content management — the quick start includes a separate init step to create a Prismic repo, so teams not using Prismic would need to swap the CMS.
- No built-in backend — payment and product data live in Prismic and Stripe, so it's not a full eCommerce platform out of the box.
FAQ
Is Farbe.film free?
Yes. The template is open source under the Apache License 2.0, as stated in the repo's license file. You also get a free live demo and a StackBlitz playground, and hosting options like Vercel have their own free tiers.
What is the tech stack of Farbe.film?
It uses Nuxt as the framework, Vue 3 under the hood, Tailwind CSS for styling, TresJS for Three.js 3D rendering, GSAP for animations, Prismic as the headless CMS, and Stripe for payments. The code is written in TypeScript.
How do I deploy Farbe.film?
The README includes a one-click Deploy to Vercel button and a link to Nuxt's deployment documentation. You can also run the production build locally with npm run build and preview it with npm run preview.
Can I use Farbe.film without Prismic?
The template is designed around Prismic: the quick start includes a command to initialize your own Prismic repository. Without Prismic, content would not be editable in a CMS, so you'd need to replace that integration.
Does Farbe.film include a Stripe integration?
The README links to Stripe's API Node documentation in the reference list, indicating the template incorporates Stripe for handling payments, but the specific checkout implementation is part of the codebase and course materials.
