A no-code studio for 3D websites: drag a world together, export real React code.

role
3D engine: rendering, scene data, code export
status
Live
when
2026
ownership
Team project
Repository
pinion.studioWeb platforms · Intelligent systems
Pinion landing page: 'Build living worlds. Skip the code.'

Who did what. A four-person team project. My part was the 3D engine: the viewport and preview, the world renderer, the scene graph and its runtime, templates and demos, and the code exporter. Teammates built the landing site and auth (Krishna Sharma), the admin panel, subscriptions and projects (Govind Jindal), and the editor screens and state (Gautam).

Overview

Pinion works like a game level editor that outputs websites. You place shapes, lights, environments and effects on a live React Three Fiber stage, animate them on a timeline and wire interactions such as 'when this is clicked, fly the camera here'. Every world is stored as a JSON Experience Graph, and the exporter compiles it into a standalone React project you can download and host anywhere.

Why it exists

3D on the web is locked behind engine knowledge and hand-written shaders. Pinion is for designers and storytellers who think a page could be a world, without giving up ownership of the code.

My part

  • Built the rendering layer: Viewport, PreviewMode and the world components (WorldCanvas, WorldRenderer, WorldNode, CanvasGuard).
  • Built the Experience Graph engine: node types, runtime, camera framing, the object library, templates, demos and the showcase worlds.
  • Built the code generator that turns a world into a plain React + React Three Fiber + drei Vite project, zipped for download, with no dependency on Pinion.

How it works

  1. a

    Build

    Place and light objects on a live 3D stage.

  2. b

    Animate

    Timeline keyframes and interaction rules.

  3. c

    Graph

    The world is stored as a JSON Experience Graph.

  4. d

    Export

    The exporter compiles the graph into a standalone Vite project.

The product

Landing
Pinion landing page: 'Build living worlds. Skip the code.'
The editor: scene tree, viewport and interaction rules
Pinion editor with a scene tree, a 3D viewport and an interaction rule panel
Live worlds, rendered by the engine
A gallery of live 3D worlds running in the browser, showing a fantasy island
The engine: a compiler, not a screenshot generator
Section describing the Pinion engine as a compiler
Exported code
The React code Pinion generates from a world
Templates
Pinion templates page with ready-to-remix worlds

Built with

  • React 19
  • React Three Fiber
  • Three.js
  • drei
  • Zustand
  • Vite
  • Tailwind CSS
  • JSZip
  • Monaco
Team
4
Templates
7 ready-to-remix worlds
Export
Plain React + R3F

Status & next

The live demo is offline; the code is in the repository.

Source: Pinion README (team table) and repository screenshots