{
  "schemaVersion": 1,
  "id": "fibonacci-spiral-data",
  "version": "1.0.0",
  "status": "published",
  "kind": "object",
  "title": "Fibonacci Spiral Data",
  "summary": "A sunflower of glossy columns on the golden spiral that rise from the centre in a wave of data and sink back again. Loops perfectly.",
  "description": "Hundreds of round columns placed on the golden-angle spiral, each one 137.5° round from the last at a radius growing with the square root of its number, the way seeds pack in a flower head. Growth runs out from the middle: the columns rise one after another, ride a wave of data heights that travels out across the field and then sink back in the same order, so the loop begins and ends on an empty plate. Choose the number of columns, the colours (spectrum, ember, glacier or mono), how tall the data grows, how many waves cross the field per loop, the backdrop colour and whether the camera sways.",
  "role": "Object (3D, three.js): a data-visual centrepiece with natural, mathematical structure.",
  "collections": [
    "satisfying",
    "hypnotic-loops",
    "product-reveals"
  ],
  "tags": [
    "fibonacci",
    "golden angle",
    "phyllotaxis",
    "sunflower",
    "spiral",
    "data visualisation",
    "columns",
    "mathematics",
    "studio",
    "loop",
    "3d"
  ],
  "synonyms": [
    "golden spiral",
    "sunflower pattern",
    "vogel spiral",
    "spiral chart",
    "radial data",
    "seed head"
  ],
  "useCases": [
    "A data or analytics title scene",
    "A nature-and-maths explainer",
    "A hypnotic spiral backdrop"
  ],
  "featured": null,
  "publishedAt": "2026-10-06",
  "implementation": {
    "target": "three",
    "runtime": "browser",
    "language": "javascript",
    "module": "esm",
    "entry": "src/fibonacci-spiral-data.js",
    "exports": [
      {
        "name": "createFibonacciField",
        "signature": "createFibonacciField({ count?, palette?, height?, waves? }) => { group, setProgress(progress), dispose() }",
        "description": "The sunflower of instanced columns on a dark plate, about 12 across, resting on y = 0; needs an environment map."
      },
      {
        "name": "PALETTES",
        "signature": "PALETTES: { spectrum, ember, glacier, mono }",
        "description": "Colour ramps from the centre outward."
      }
    ],
    "reusable": [
      "src/fibonacci-spiral-data.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": "count",
      "label": "Columns",
      "type": "integer",
      "min": 150,
      "max": 1000,
      "step": 10,
      "default": 600
    },
    {
      "key": "palette",
      "label": "Colours",
      "type": "select",
      "default": "spectrum",
      "options": [
        {
          "value": "spectrum",
          "label": "Spectrum"
        },
        {
          "value": "ember",
          "label": "Ember"
        },
        {
          "value": "glacier",
          "label": "Glacier"
        },
        {
          "value": "mono",
          "label": "Mono"
        }
      ]
    },
    {
      "key": "height",
      "label": "Data height",
      "type": "number",
      "min": 0.4,
      "max": 2,
      "step": 0.1,
      "default": 1
    },
    {
      "key": "waves",
      "label": "Waves per loop",
      "type": "integer",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2
    },
    {
      "key": "background",
      "label": "Backdrop",
      "type": "color",
      "default": "#14161f"
    },
    {
      "key": "orbit",
      "label": "Camera sway",
      "type": "boolean",
      "default": true
    }
  ],
  "presets": [
    {
      "id": "default",
      "label": "Spectrum, 600",
      "params": {}
    },
    {
      "id": "ember",
      "label": "Ember, tall",
      "params": {
        "palette": "ember",
        "height": 1.6,
        "background": "#1c1210"
      }
    },
    {
      "id": "glacier",
      "label": "Glacier, dense",
      "params": {
        "palette": "glacier",
        "count": 900,
        "waves": 3,
        "background": "#0e1822"
      }
    },
    {
      "id": "mono",
      "label": "Mono, sparse",
      "params": {
        "palette": "mono",
        "count": 300,
        "waves": 1
      }
    }
  ],
  "output": {
    "width": 1080,
    "height": 1080,
    "fps": 30,
    "durationSeconds": 16,
    "posterSeconds": 6,
    "alpha": false,
    "motion": "procedural",
    "loop": {
      "seamless": true,
      "cycleSeconds": 16,
      "method": "Each column rises and sinks in a window set by its number, so every column is at zero height at the first and last frames; the data wave has a whole number of cycles per 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 columns, colours, height, waves, backdrop and camera sway.",
    "outputs": "A full frame rendered in 3D with a studio environment.",
    "coordinates": "The field is centred on the origin on y = 0, about 12 across (radius 6 scaled with the square root of the count); the camera looks down at about 49°.",
    "lighting": "A warm key light with a shadow map, a shadow-catching floor and the studio environment.",
    "timing": "setProgress(progress) sets every column's height; frames render in any order.",
    "compatibleWith": [
      "chrome-material",
      "orbit-camera",
      "kinetic-title",
      "number-reveal"
    ],
    "notes": [
      "Columns are one instanced mesh with instance colours by position along the spiral."
    ]
  },
  "reuse": [
    "Data title: Spectrum, 600.",
    "Warm dashboard: Ember, tall.",
    "Cool ambient: Glacier, dense."
  ],
  "integration": {
    "newProject": "Create a WebGLRenderer with a studio environment and a shadow-casting light, add createFibonacciField().group and call field.setProgress(progress) each frame.",
    "existingProject": "Copy src/fibonacci-spiral-data.js; add the group to your scene with an environment map."
  },
  "performance": {
    "notes": "One instanced draw call of up to 1 000 cylinders with a shadow map; under a millisecond a frame on an integrated Intel GPU.",
    "limits": "Software WebGL renders in about a second a frame."
  },
  "limitations": [
    "The data values are generated by a formula, not supplied; to chart real data replace the height function.",
    "Columns of neighbouring spiral arms may touch at the largest counts."
  ],
  "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/geometry-math/fibonacci-spiral-data (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: golden-angle columns with an outward rise-and-sink window and a travelling data wave on an exact loop.",
  "changelog": [
    {
      "version": "1.0.0",
      "date": "2026-10-05",
      "notes": "Initial release."
    }
  ]
}