three-js-interactive-builder

Scaffold and build interactive 3D visualizations using Three.js with emphasis on algorithmic art, sacred geometry, temporal animations, and modular architecture. Use when creating WebGL visualizations, generative art pieces, interactive 3D experiences, particle systems, flow fields, or projects like gravitational spirals, temporal perspective pieces, or illuminated visual narratives. Triggers on requests for Three.js projects, 3D web graphics, algorithmic visualizations, or sacred geometry renders.

5 stars

byorganvm-iv-taxis

View on GitHub Installation ↓

Best use case

three-js-interactive-builder is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using three-js-interactive-builder should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/three-js-interactive-builder/SKILL.md --create-dirs "https://raw.githubusercontent.com/organvm-iv-taxis/a-i--skills/main/distributions/claude/skills/three-js-interactive-builder/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/three-js-interactive-builder/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How three-js-interactive-builder Compares

Feature / Agent	three-js-interactive-builder	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Three.js Interactive Builder

Build production-ready Three.js visualizations with algorithmic art principles.

## Core Architecture

Every project follows modular synthesis philosophy: components as oscillators, connections as patches.

```
project/
├── index.html          # Entry point with canvas
├── src/
│   ├── main.js         # Scene orchestrator
│   ├── geometry/       # Shape generators
│   ├── animation/      # Temporal controllers
│   ├── shaders/        # GLSL programs
│   └── utils/          # Math helpers
└── assets/             # Textures, fonts
```

## Quick Start

1. Copy boilerplate from `assets/threejs-boilerplate/`
2. Initialize scene with preferred renderer settings
3. Add geometry generators from `scripts/`
4. Wire animation loops

## Geometry Patterns

### Sacred Geometry Primitives

Use `scripts/sacred_geometry.py` to generate vertex data for:
- **Flower of Life**: Overlapping circles, customizable depth
- **Metatron's Cube**: 13-circle formation with connecting lines
- **Sri Yantra**: 9 interlocking triangles
- **Seed of Life**: 7-circle genesis pattern
- **Vesica Piscis**: Intersection geometry

### Spiral Systems

For gravitational/golden spirals:

```javascript
function goldenSpiral(loops, pointsPerLoop, scale) {
  const phi = (1 + Math.sqrt(5)) / 2;
  const points = [];
  for (let i = 0; i < loops * pointsPerLoop; i++) {
    const theta = i * 0.1;
    const r = scale * Math.pow(phi, theta / (2 * Math.PI));
    points.push(new THREE.Vector3(r * Math.cos(theta), r * Math.sin(theta), 0));
  }
  return points;
}
```

### Lane Systems

For multi-lane visualizations (soul lanes, data streams):

```javascript
function createLaneSystem(laneCount, radius, spacing) {
  const lanes = [];
  for (let i = 0; i < laneCount; i++) {
    lanes.push({ radius: radius + (i * spacing), objects: [], speed: 1 / (i + 1) });
  }
  return lanes;
}
```

## Animation Patterns

### Temporal Perspective

For simultaneous time visualization (all moments visible at once):

```javascript
class TemporalController {
  constructor(timeline) {
    this.moments = timeline;
    this.currentView = 'linear';
  }
  setSimultaneous() {
    this.moments.forEach((m, i) => {
      m.mesh.visible = true;
      m.mesh.material.opacity = 0.3 + (0.7 * (i / this.moments.length));
    });
  }
}
```

### Breath-Based Animation

Organic pulsing using sine waves:

```javascript
function breathe(object, speed = 1, amplitude = 0.1) {
  const scale = 1 + Math.sin(Date.now() * 0.001 * speed) * amplitude;
  object.scale.setScalar(scale);
}
```

## Shader Patterns

See `references/glsl-patterns.md` for glow effects, noise functions, color gradients, and symbol rendering.

## Project Types

**Algorithmic Art**: Define rules → Generate geometry → Add temporal dimension → Apply aesthetic layer

**Interactive Visualization**: OrbitControls → Raycasting → UI overlay → State management

**Narrative Experience**: Story beats as states → Transitions → Audio cues → Navigation

## Performance

- BufferGeometry for >1000 vertices
- InstancedMesh for repeated objects
- LOD for complex scenes
- Merge geometries to reduce draw calls

## References

- `references/glsl-patterns.md` - Shader code library
- `references/sacred-geometry-math.md` - Mathematical foundations

Related Skills

web-artifacts-builder

from organvm-iv-taxis/a-i--skills

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

react-three-fiber-patterns

from organvm-iv-taxis/a-i--skills

Build interactive 3D experiences in React using react-three-fiber (R3F), drei helpers, and shader integration. Covers scene composition, performance optimization, and animation patterns. Triggers on R3F development, React + Three.js, or declarative 3D scene requests.

mcp-builder

from organvm-iv-taxis/a-i--skills

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

knowledge-graph-builder

from organvm-iv-taxis/a-i--skills

Designs and builds knowledge graphs to represent entities, relationships, and semantic connections, with query patterns for Neo4j, RDF, and property graphs.

interactive-theatre-designer

from organvm-iv-taxis/a-i--skills

Designs interactive theatrical experiences with branching narratives, audience participation systems, and immersive environmental storytelling.

cv-resume-builder

from organvm-iv-taxis/a-i--skills

Optimize resumes and CVs for impact, ATS compatibility, and audience targeting. Supports multiple formats (chronological, functional, hybrid), accomplishment framing (STAR/XYZ), and tailoring for specific roles. Triggers on resume review, CV update, job application prep, or career document requests.

blockchain-integration-builder

from organvm-iv-taxis/a-i--skills

Design and implement blockchain integrations across chains and frameworks with emphasis on patterns over specific technologies. Use when building Web3 applications, smart contract systems, token mechanics, decentralized identity, or blockchain-verified data. Triggers on blockchain architecture, smart contract design, Web3 integration, token systems, or decentralized application development. Framework-agnostic—applies to Ethereum, Solana, or emerging chains.

artifacts-builder

from organvm-iv-taxis/a-i--skills

taxonomy-modeling-design

from organvm-iv-taxis/a-i--skills

Phase 2 of the pentaphase structural-overhaul protocol. Classifies entities, standardizes attributes, establishes relationships, and designs the access framework. Use when the user invokes phase 2 of an overhaul, asks to "design the taxonomy" or "model the structure", or has completed a landscape audit and is ready to redesign. Consumes phase-1-landscape-report.md; produces phase-2-taxonomy-model.md.

systemic-ingestion-normalization

from organvm-iv-taxis/a-i--skills

Phase 4 of the pentaphase structural-overhaul protocol. Purges redundancies, enriches and aligns legacy entities to the new schema, executes phased ingestion into the new environment, and audits integrity. Use when the user invokes phase 4 of an overhaul, asks to "migrate the data" or "ingest into the new system", or has a configured environment ready to accept legacy entities. Consumes phase-3-environment-spec.md; produces phase-4-ingestion-report.md.

system-environment-configuration

from organvm-iv-taxis/a-i--skills

Phase 3 of the pentaphase structural-overhaul protocol. Translates the taxonomy model into objective technical criteria, evaluates candidate mechanisms or frameworks, instantiates the chosen architecture, and programs validation rules. Use when the user invokes phase 3 of an overhaul, asks to "select a system" or "configure the environment", or has a taxonomy model and is ready to choose technology. Consumes phase-2-taxonomy-model.md; produces phase-3-environment-spec.md.

pentaphase-orchestrator

from organvm-iv-taxis/a-i--skills

Threads the full five-phase structural-overhaul protocol — landscape discovery, taxonomy design, environment configuration, systemic ingestion, governance evolution — for any substrate the user names. Use when the user requests a structural overhaul, system redesign, or end-to-end restructuring of a documentation system, asset registry, code monorepo, knowledge base, or operational workflow; or when they explicitly invoke the pentaphase methodology. Coordinates handoffs between phase-skills and seats validation gates between phases.