{
  "schemaVersion": 1,
  "id": "differential-gear",
  "version": "1.0.0",
  "status": "published",
  "kind": "object",
  "title": "Differential Gear",
  "summary": "A car differential at work: ring gear, carrier, spider and side gears with the two shafts speeding apart and back. Loops perfectly.",
  "description": "The mechanism that lets the two wheels of a car turn at different speeds in a corner: a ring gear driven by a pinion, a carrier drum turning with it, a cross-pin with two spider gears and two bevel side gears on the axle shafts. The carrier turns a whole number of times per loop while the two shafts speed up and slow down against each other and the spider gears spin on their pin by exactly the difference. Choose the metal, the turns per loop, how far the shafts slip apart, the backdrop colour and whether the camera sways.",
  "role": "Object (3D, three.js): a mechanical showpiece for engineering, automotive and how-it-works content.",
  "collections": [
    "satisfying",
    "chrome-glass",
    "hypnotic-loops"
  ],
  "tags": [
    "differential",
    "gears",
    "bevel gear",
    "car",
    "axle",
    "mechanism",
    "engineering",
    "metal",
    "studio",
    "loop",
    "3d"
  ],
  "synonyms": [
    "differential gear",
    "car differential",
    "gearbox",
    "bevel gears",
    "axle differential",
    "drivetrain"
  ],
  "useCases": [
    "An engineering or how-it-works explainer",
    "An automotive or mechanical brand scene",
    "A satisfying gear loop"
  ],
  "featured": null,
  "publishedAt": "2026-10-06",
  "implementation": {
    "target": "three",
    "runtime": "browser",
    "language": "javascript",
    "module": "esm",
    "entry": "src/differential-gear.js",
    "exports": [
      {
        "name": "createDifferential",
        "signature": "createDifferential({ metal?, turns?, slip? }) => { group, setProgress(progress), dispose() }",
        "description": "The differential (ring gear, pinion, carrier, spider and side gears, shafts) as a group with the axle along x; needs an environment map."
      },
      {
        "name": "METALS",
        "signature": "METALS: { steel, brass, copper, blackened }",
        "description": "Metal finishes with colour and roughness."
      }
    ],
    "reusable": [
      "src/differential-gear.js"
    ],
    "demo": "demo.js",
    "harness": "index.html"
  },
  "dependencies": [
    {
      "id": "three",
      "version": "0.185.1",
      "reason": "Renderer, geometry and shader materials."
    },
    {
      "id": "chrome-material",
      "version": "1.1.0",
      "scope": "demo",
      "reason": "Studio environment light, backdrop and contact shadow."
    },
    {
      "id": "apw-runtime",
      "version": "1.0.0",
      "scope": "demo",
      "reason": "Demo harness."
    }
  ],
  "params": [
    {
      "key": "metal",
      "label": "Metal",
      "type": "select",
      "default": "steel",
      "options": [
        {
          "value": "steel",
          "label": "Steel"
        },
        {
          "value": "brass",
          "label": "Brass"
        },
        {
          "value": "copper",
          "label": "Copper"
        },
        {
          "value": "blackened",
          "label": "Blackened steel"
        }
      ]
    },
    {
      "key": "turns",
      "label": "Turns per loop",
      "type": "integer",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 1
    },
    {
      "key": "slip",
      "label": "Shaft slip",
      "type": "number",
      "min": 0,
      "max": 1.5,
      "step": 0.1,
      "default": 1
    },
    {
      "key": "background",
      "label": "Backdrop",
      "type": "color",
      "default": "#1a2330"
    },
    {
      "key": "orbit",
      "label": "Camera sway",
      "type": "boolean",
      "default": true
    }
  ],
  "presets": [
    {
      "id": "default",
      "label": "Steel, one turn",
      "params": {}
    },
    {
      "id": "brass",
      "label": "Brass, warm",
      "params": {
        "metal": "brass",
        "background": "#241a12"
      }
    },
    {
      "id": "fast",
      "label": "Fast, copper",
      "params": {
        "metal": "copper",
        "turns": 3,
        "background": "#10202a"
      }
    },
    {
      "id": "dark",
      "label": "Blackened, high slip",
      "params": {
        "metal": "blackened",
        "slip": 1.5,
        "background": "#1a1a24"
      }
    }
  ],
  "output": {
    "width": 1080,
    "height": 1080,
    "fps": 30,
    "durationSeconds": 16,
    "posterSeconds": 4,
    "alpha": false,
    "motion": "procedural",
    "loop": {
      "seamless": true,
      "cycleSeconds": 16,
      "method": "The carrier turns a whole number of times per loop, the shaft slip and the spider spin are sines of the loop and the camera sway is a sine of the loop, so the last frame meets the first."
    },
    "seed": null
  },
  "composition": {
    "inputs": "Time within the loop; the metal, turns, slip, backdrop and camera sway.",
    "outputs": "A full frame rendered in 3D with a studio environment.",
    "coordinates": "The axle runs along x through the origin; the ring gear (radius 2.8) and carrier are centred on it; the pinion sits below at y ≈ −3.3.",
    "lighting": "A warm key light with a shadow map and the studio environment.",
    "timing": "setProgress(progress) sets every angle in closed form; frames render in any order.",
    "compatibleWith": [
      "chrome-material",
      "orbit-camera",
      "kinetic-title",
      "number-reveal"
    ],
    "notes": [
      "Bevel gears are 45° cones with instanced teeth along the slant; spiders spin by the shafts' slip."
    ]
  },
  "reuse": [
    "Explainer: Steel, one turn.",
    "Vintage workshop: Brass, warm.",
    "Energetic loop: Fast, copper."
  ],
  "integration": {
    "newProject": "Create a WebGLRenderer with a studio environment, add createDifferential().group and call diff.setProgress(progress) each frame.",
    "existingProject": "Copy src/differential-gear.js; add the group to your scene with an environment map and a shadow-casting light."
  },
  "performance": {
    "notes": "A few thousand triangles and four instanced tooth sets plus a shadow map: about a millisecond a frame on an integrated Intel GPU.",
    "limits": "Software WebGL renders in about a second a frame."
  },
  "limitations": [
    "Gear teeth are visual, not meshed exactly; the teeth of different gears may pass through each other.",
    "The pinion drives the ring gear as a spur gear for clarity."
  ],
  "license": {
    "spdx": "MIT",
    "notice": "Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.",
    "thirdParty": []
  },
  "provenance": "Adapted from the owner's threejs-sketches/objects-scenes/differential-gear (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: bevel gears from cones with instanced teeth, a toothed ring gear and pinion, and carrier and shaft angles in closed form on an exact loop.",
  "changelog": [
    {
      "version": "1.0.0",
      "date": "2026-10-05",
      "notes": "Initial release."
    }
  ]
}