I built an MIT-licensed collection of 13 Next.js templates for exploring interactive product pages and WebGL experiments. The examples include GPU fluid simulation, particle morphing, a raymarched black hole, and scroll-driven product scenes.

The live gallery lets you try the interactions before opening the code. The source repository contains the gallery and all the examples in one application.

Here is how the project is organized, and how to start with one example instead of adopting the whole gallery.

Choose the interaction you need

For a product configurator, start with Aura Studio, the headphone example. For a scroll-driven particle experiment, look at Nova. Flux is the fluid simulation you can paint with the cursor. FORME is an architectural page built around a slower motion and image sequence.

These are different starting points. A shader experiment and a product landing page have different jobs. Try the demo first and pick the example whose interaction serves the page you are building.

Run the gallery locally

The repository documents Node 22+ as its requirement:

git clone https://github.com/somnathraz/nextjs-webgl-templates.git cd nextjs-webgl-templates npm ci npm run dev

Open http://localhost:3001, then visit the route you want to explore. The repository also provides npm run typecheck, npm run lint, and npm run build for checking your changes.

Follow the three folders for a template

Each example is organized around three locations:

src/features/<slug>/ components, hooks, shaders, and theme CSS src/app/<slug>/ the App Router route and layout public/<slug>/ static assets

The route layout imports its theme and applies a wrapper such as .theme-<slug>. This is useful when several visually different examples share an application: the example's styles have an explicit boundary.

When adapting an example, bring the feature code, route, and assets together. Copying only the page component can leave behind an asset or stylesheet it depends on. Review its imports and package dependencies as you move it into your own app.

Treat the example as a starting point

Replace the concept copy and product assets with your own. Keep important product information and calls to action usable while the 3D scene loads, and check what happens on a touch screen, a narrow viewport, and a slower device.

For a visual effect, decide what it helps the visitor understand. A product rotation may explain a physical detail; a particle animation may establish a mood. Give the interaction a purpose before building the rest of the page around it.

If you are extracting a single example, read its feature folder before removing shared gallery code. Then run the project's checks in your destination application. The examples are reusable source, not a promise that every combination of dependencies and devices will work without adjustment.

Explore the examples

The template guides describe individual examples and link to the live demos and source. You can browse there, choose one interaction, and work through the associated feature folder.

I am the author of the collection. It is MIT licensed; retain the license notice when reusing the code, and review any asset-specific terms for your use. If you adapt an example, I would be interested in which parts were straightforward to extract and which parts needed clearer documentation.