# celestial-3d
> Creating 3D celestial sphere simulations using p5.js WEBGL mode with N-body gravitational physics, realistic orbital mechanics, interactive camera controls, and parametric exploration. Use this when users request creating 3D space scenes, planetary systems, orbital simulations, cosmic visualizations, or any 3D astronomical art. Create original 3D celestial compositions rather than copying existing space visualizations to avoid copyright violations.
- Author: hhhh124hhhh
- Repository: hhhh124hhhh/celestial-3d
- Version: 20260115215825
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/hhhh124hhhh/celestial-3d
- Web: https://mule.run/skillshub/@@hhhh124hhhh/celestial-3d~celestial-3d:20260115215825
---
---
name: celestial-3d
description: Creating 3D celestial sphere simulations using p5.js WEBGL mode with N-body gravitational physics, realistic orbital mechanics, interactive camera controls, and parametric exploration. Use this when users request creating 3D space scenes, planetary systems, orbital simulations, cosmic visualizations, or any 3D astronomical art. Create original 3D celestial compositions rather than copying existing space visualizations to avoid copyright violations.
license: Complete terms in LICENSE.txt
---
Celestial philosophies are computational cosmological movements that are then expressed through 3D code. Output .md files (philosophy), .html files (interactive 3D viewer), and .js files (N-body physics algorithms).
This happens in two steps:
1. Celestial Philosophy Creation (.md file)
2. Express by creating p5.js WEBGL 3D simulations (.html + .js files)
First, undertake this task:
## CELESTIAL PHILOSOPHY CREATION
To begin, create a CELESTIAL PHILOSOPHY (not static 3D models or templates) that will be interpreted through:
- N-body gravitational dynamics and orbital mechanics
- 3D spatial relationships and mathematical beauty
- Seeded randomness, emergent behavior, physical laws
- Spheres, orbits, forces, lighting in three-dimensional space
- Parametric variation and controlled chaos
### THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
- What is created: A celestial philosophy/generative cosmological aesthetic movement.
- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js WEBGL sketches that are 90% algorithmic generation, 10% essential parameters.
Consider this approach:
- Write a manifesto for a 3D generative cosmology movement
- The next phase involves writing the physics engine that brings it to life
The philosophy must emphasize: 3D algorithmic expression. Emergent behavior in physical space. Computational beauty of gravitational systems. Seeded variation.
### HOW TO GENERATE A CELESTIAL PHILOSOPHY
**Name the movement** (1-2 words in Chinese): "轨道和谐" (Orbital Harmony) / "引力之舞" (Gravitational Dance) / "宇宙韵律" (Cosmic Rhythm) / "星际共鸣" (Interstellar Resonance)
**Articulate the philosophy** (4-6 paragraphs - concise but complete):
To capture the 3D CELESTIAL essence, express how this philosophy manifests through:
- N-body gravitational dynamics and mathematical relationships in 3D space?
- Orbital mechanics and emergent chaotic behavior?
- Celestial body behaviors and field dynamics?
- Temporal evolution and system states?
- Parametric variation and emergent complexity?
**CRITICAL GUIDELINES:**
- **Avoid redundancy**: Each 3D algorithmic aspect should be mentioned once. Avoid repeating concepts about gravitational theory, orbital dynamics, or mathematical principles unless adding new depth.
- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final physics engine should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field in computational astrophysics. This framing is essential - repeat phrases like "meticulously crafted physics engine," "the product of deep computational expertise," "painstaking optimization," "master-level implementation by experts in N-body simulations."
- **Leave creative space**: Be specific about the 3D algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.
The philosophy must guide the next version to express ideas ALGORITHMICALLY in 3D, not through static 3D models. Beauty lives in the gravitational dance, not the final frame.
### CELESTIAL PHILOSOPHY EXAMPLES
**"轨道和谐" (Orbital Harmony)**
Philosophy: Gravitational forces creating cosmic equilibrium through mathematical precision.
Algorithmic expression: N-body physics engine where stars, planets, and moons interact through Newton's law of universal gravitation. Initial orbital velocities calculated using vis-viva equation to ensure stable orbits. Each celestial body rendered as 3D sphere with emissive materials for stars and specular materials for planets. Real-time lighting system with point lights emanating from stars, creating dynamic shadows and illuminating planet surfaces based on their positions. Camera can orbit through the scene using mouse controls. The gravitational physics engine is meticulously crafted with Velocity Verlet integration for energy conservation, the product of countless hours of numerical method tuning by master computational astrophysicists.
**"引力之舞" (Gravitational Dance)**
Philosophy: Invisible gravitational forces sculpting celestial trajectories in three-dimensional space.
Algorithmic expression: Multiple gravitational centers with randomized masses influencing particles and planets through inverse-square law forces. Orbital initialization algorithms ensuring eccentric yet stable trajectories. 3D starfield background with thousands of randomly positioned stars at varying depths. Volumetric nebula effects using layered semi-transparent spheres with Perlin noise perturbations. Each planet accumulates orbital trail history, visualized as 3D line strips showing their gravitational dance. The lighting system uses multiple light sources to create complex illumination patterns. Every gravitational constant and time step was carefully calibrated through extensive simulation testing, representing master-level expertise in computational physics.
**"宇宙韵律" (Cosmic Rhythm)**
Philosophy: Periodic orbital motions creating emergent harmonies through gravitational resonance.
Algorithmic expression: Celestial bodies initialized with orbital periods following simple integer ratios, creating gravitational resonance patterns. Moons orbit planets, planets orbit stars, stars may orbit each other in hierarchical systems. Each level of the hierarchy exhibits different time scales, from fast moon orbits to slow stellar revolutions. Color palette shifts based on orbital energy - fast-moving bodies burn bright with warm colors, slow bodies fade to cool tones. 3D camera automatically rotates to showcase the system from different angles. The resonance ratios and orbital parameters were painstakingly chosen to produce harmonious visual patterns - the mark of a true master of computational cosmology.
**"星际共鸣" (Interstellar Resonance)**
Philosophy: Gravitational waves and tidal forces creating emergent complexity across cosmic scales.
Algorithmic expression: N-body simulation with perturbation forces modeling tidal interactions. Planets not only orbit stars but also slightly perturb each other's orbits, creating long-term precession and orbital evolution. Collision detection system merging bodies when they intersect, conserving momentum and mass. Starfield twinkles with varying brightness based on seeded noise patterns. Procedural texture generation on planet surfaces using noise functions to simulate atmospheric bands or crater patterns. The physics engine implements symplectic integrators for long-term stability, the result of deep numerical analysis and optimization by experts at the forefront of computational astrophysics.
*These are condensed examples. The actual celestial philosophy should be 4-6 substantial paragraphs.*
### ESSENTIAL PRINCIPLES
- **CELESTIAL PHILOSOPHY**: Creating a 3D computational cosmology to be expressed through physics-based code
- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the gravitational simulation's execution - each run is unique
- **PARAMETRIC EXPRESSION**: Ideas communicate through 3D mathematical relationships, forces, orbital behaviors - not static composition
- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically in 3D - provide creative implementation room
- **PURE GENERATIVE ART**: This is about making LIVING 3D PHYSICS SYSTEMS, not static 3D models with randomness
- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final physics engine must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational astrophysics
**The celestial philosophy should be 4-6 paragraphs long.** Fill it with poetic computational cosmology that brings together the intended 3D vision. Avoid repeating the same points. Output this celestial philosophy as a .md file.
---
## DEDUCING THE CONCEPTUAL SEED
**CRITICAL STEP**: Before implementing the 3D algorithm, identify the subtle conceptual thread from the original request.
**THE ESSENTIAL PRINCIPLE**:
The concept is a **subtle, niche reference embedded within the 3D physics algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative 3D composition. The celestial philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, orbital behaviors, and gravitational emergence patterns.
This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative 3D beauty.
---
## P5.JS WEBGL IMPLEMENTATION
With the philosophy AND conceptual framework established, express it through 3D code. Pause to gather thoughts before proceeding. Use only the celestial philosophy created and the instructions below.
### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️
**CRITICAL: BEFORE writing any HTML:**
1. **Read** `templates/viewer_3d.html` using the Read tool
2. **Study** the exact structure, styling, and Anthropic branding
3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
5. **Replace only the VARIABLE sections** marked in the file's comments (3D physics algorithm, parameters, UI controls for celestial parameters)
**Avoid:**
- ❌ Creating HTML from scratch
- ❌ Inventing custom styling or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure
**Follow these practices:**
- ✅ Copy the template's exact HTML structure
- ✅ Keep Anthropic branding (Poppins/Lora/Noto Sans SC fonts, light colors, gradient backdrop)
- ✅ Maintain the sidebar layout (Seed → 天体系统 → 物理引擎 → 视觉效果 → 相机控制 → Actions)
- ✅ Replace only the p5.js WEBGL algorithm and 3D parameter controls
The template is the foundation. Build on it, don't rebuild it.
---
To create gallery-quality 3D computational cosmology that lives and breathes, use the celestial philosophy as the foundation.
### TECHNICAL REQUIREMENTS
**WEBGL Mode (Essential for 3D)**:
```javascript
// ALWAYS use WEBGL mode for 3D rendering
function setup() {
let canvas = createCanvas(1200, 1200, WEBGL);
canvas.parent('canvas-container');
// WEBGL-specific optimizations
setAttributes('antialias', true);
pixelDensity(1);
initializeSystem();
}
```
**Seeded Randomness (Art Blocks Pattern)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```
**Parameter Structure - FOLLOW THE CELESTIAL PHILOSOPHY**:
To establish parameters that emerge naturally from the 3D celestial philosophy, consider: "What qualities of this gravitational system can be adjusted?"
```javascript
let params = {
seed: 12345, // Always include seed for reproducibility
// Celestial system parameters
starCount: 1, // Number of stars [1-3]
planetCount: 5, // Number of planets [1-10]
moonCountRange: [0, 3], // Moons per planet [0-5]
// Physics engine parameters
G: 1.0, // Gravitational constant [0.1-10]
dt: 0.016, // Time step [0.01-0.1]
velocityMultiplier: 1.0, // Initial velocity multiplier [0.5-2.0]
orbitEccentricity: 0.2, // Orbit eccentricity [0.0-0.7]
// Visual parameters
starCount: 2000, // Background stars [500-5000]
nebulaCount: 3, // Nebula clouds [0-10]
lightIntensity: 255, // Point light intensity [0-255]
ambientLight: 50, // Ambient light intensity [0-100]
// Camera parameters
cameraDistance: 600, // Initial camera distance [200-2000]
autoRotate: true, // Auto-rotate scene
autoRotateSpeed: 0.002 // Rotation speed
};
```
**To design effective parameters, focus on the properties the 3D gravitational system needs to be tunable rather than thinking in terms of "celestial pattern types".**
**Core Algorithm - EXPRESS THE CELESTIAL PHILOSOPHY**:
**CRITICAL**: The celestial philosophy should dictate what to build.
To express the philosophy through 3D code, avoid thinking "which 3D pattern should I use?" and instead think "how to express this celestial philosophy through WEBGL physics simulation?"
If the philosophy is about **gravitational harmony**, consider using:
- N-body physics with stable orbital initialization
- Vis-viva equation for circular/elliptical orbits
- Multiple gravitational centers (binary stars, etc.)
- Moons orbiting planets in hierarchical systems
If the philosophy is about **emergent complexity**, consider using:
- Perturbation forces and tidal interactions
- Orbital resonance ratios
- Collision and merger systems
- Long-term orbital evolution
If the philosophy is about **cosmic beauty**, consider using:
- Emissive materials for stars (glowing effect)
- Specular materials for planets (realistic lighting)
- Volumetric nebula effects
- 3D orbital trails showing gravitational paths
**The algorithm flows from the philosophy, not from a menu of options.**
To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular 3D celestial request.
### N-BODY PHYSICS ENGINE REQUIREMENTS
**Celestial Body Class**:
```javascript
class CelestialBody {
constructor(mass, position, velocity, radius, color, isStar) {
this.mass = mass;
this.pos = position; // p5.Vector (3D)
this.vel = velocity; // p5.Vector (3D)
this.acc = p5.Vector(0, 0, 0);
this.radius = radius;
this.color = color;
this.isStar = isStar;
this.trail = []; // Orbital trail history
}
// Calculate gravitational force from all other bodies
applyGravity(otherBodies, G) {
for (let other of otherBodies) {
if (other === this) continue;
// Newton's law of universal gravitation: F = G * m1 * m2 / r²
let force = p5.Vector.sub(other.pos, this.pos);
let distance = force.mag();
distance = constrain(distance, this.radius + other.radius, Infinity);
let strength = (G * this.mass * other.mass) / (distance * distance);
force.normalize();
force.mult(strength);
this.acc.add(force);
}
}
// Update position using numerical integration
update(dt) {
this.vel.add(this.acc.copy().mult(dt));
this.pos.add(this.vel.copy().mult(dt));
this.acc.mult(0); // Reset acceleration
// Record trail
if (frameCount % 3 === 0) {
this.trail.push(this.pos.copy());
if (this.trail.length > 100) this.trail.shift();
}
}
// Render in 3D
display() {
push();
translate(this.pos.x, this.pos.y, this.pos.z);
// Draw orbital trail
this.drawTrail();
// Draw sphere with appropriate material
noStroke();
if (this.isStar) {
emissiveMaterial(this.color); // Glowing effect
} else {
ambientMaterial(this.color);
specularMaterial(200);
shininess(20);
}
sphere(this.radius, 24, 24);
// Star glow effect
if (this.isStar) {
fill(red(this.color), green(this.color), blue(this.color), 30);
sphere(this.radius * 1.3, 16, 16);
}
pop();
}
}
```
**Stable Orbit Initialization**:
```javascript
function createPlanetInOrbit(parentStar) {
let distance = random(parentStar.radius * 3, parentStar.radius * 15);
let angle = random(TWO_PI);
// Calculate circular orbit velocity: v = sqrt(G * M / r)
let orbitalSpeed = sqrt(params.G * parentStar.mass / distance);
// Position and velocity vectors are perpendicular
let pos = p5.Vector.fromAngle(angle).mult(distance);
let vel = p5.Vector.fromAngle(angle + HALF_PI).mult(orbitalSpeed);
return new CelestialBody(
random(5, 30), // mass
pos, // position
vel, // velocity
random(10, 40), // radius
random(planetPalette), // color
false // isStar = false (it's a planet)
);
}
```
### CRAFTSMANSHIP REQUIREMENTS
**CRITICAL**: To achieve mastery, create physics engines that feel like they emerged through countless iterations by a master computational astrophysicist. Tune every gravitational constant carefully. Ensure every orbit emerges with purpose. This is NOT random noise - this is CONTROLLED GRAVITATIONAL DYNAMICS refined through deep expertise.
- **Balance**: Complexity without physical instability, order without rigidity
- **Lighting Harmony**: Thoughtful illumination, not random light placement
- **3D Composition**: Even in randomness, maintain visual hierarchy and spatial flow
- **Performance**: Smooth execution, optimized for real-time 3D rendering
- **Reproducibility**: Same seed ALWAYS produces identical 3D system
### OUTPUT FORMAT
Output:
1. **Celestial Philosophy** - As markdown or text explaining the 3D generative cosmology
2. **Single HTML Artifact** - Self-contained interactive 3D celestial simulation built from `templates/viewer_3d.html` (see STEP 0 and next section)
The HTML artifact contains everything: p5.js (from CDN), the N-body physics engine, 3D rendering, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.
---
## INTERACTIVE ARTIFACT CREATION
**REMINDER: `templates/viewer_3d.html` should have already been read (see STEP 0). Use that file as the starting point.**
To allow exploration of the 3D celestial simulation, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.
### CRITICAL: WHAT'S FIXED VS VARIABLE
The `templates/viewer_3d.html` file is the foundation. It contains the exact structure and styling needed.
**FIXED (always include exactly as shown):**
- Layout structure (header, sidebar, main canvas area)
- Anthropic branding (UI colors, fonts, gradients)
- Seed section in sidebar (in Chinese)
- Actions section in sidebar (in Chinese)
**VARIABLE (customize for each 3D artwork):**
- The entire p5.js WEBGL algorithm (setup/draw/classes)
- The physics engine (CelestialBody class, gravity calculations)
- The parameters object (define what the 3D simulation needs)
- The Parameters sections in sidebar:
- 天体系统参数 (Celestial system parameters)
- 物理引擎参数 (Physics engine parameters)
- 视觉效果参数 (Visual effect parameters)
- 相机控制参数 (Camera control parameters)
**Every 3D artwork should have unique physics parameters and algorithms!** The fixed parts provide consistent UX - everything else expresses the unique 3D vision.
### REQUIRED FEATURES
**1. Parameter Controls (All in Chinese)**
- Sliders for celestial parameters (star count, planet count, moon count)
- Sliders for physics parameters (gravitational constant G, time step dt)
- Sliders for visual parameters (starfield density, nebula count, lighting)
- Sliders for camera parameters (distance, FOV, auto-rotate speed)
- Real-time updates when parameters change
- Reset button to restore defaults
**2. Seed Navigation (In Chinese)**
- Display current seed number
- "上一个" (Previous) and "下一个" (Next) buttons
- "随机生成" (Random) button
- Input field to jump to specific seed
**3. 3D Camera Controls**
- Mouse orbit control (drag to rotate, scroll to zoom)
- Auto-rotate toggle with speed slider
- Reset camera button
**4. Single Artifact Structure**
```html
```
**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN and fonts). Everything inline.
**5. Implementation Details - BUILD THE SIDEBAR**
The sidebar structure (all in Chinese):
**1. 随机种子 (FIXED)** - Always include:
- 种子输入框 (Seed input)
- 上一个/下一个按钮 (Prev/Next)
- 随机生成按钮 (Random)
**2. 天体系统参数 (VARIABLE)**:
- 恒星数量 (Star count)
- 行星数量 (Planet count)
- 卫星数量范围 (Moon count range)
- 恒星大小 (Sun size)
**3. 物理引擎参数 (VARIABLE)**:
- 引力常数 G (Gravitational constant)
- 时间步长 dt (Time step)
- 初始速度倍率 (Velocity multiplier)
- 轨道偏心率 (Orbit eccentricity)
**4. 视觉效果参数 (VARIABLE)**:
- 星星数量 (Starfield density)
- 星云数量 (Nebula count)
- 光照强度 (Light intensity)
- 环境光强度 (Ambient light)
**5. 相机控制 (VARIABLE)**:
- 相机距离 (Camera distance)
- 视野角度 (Field of view)
- 自动旋转 (Auto-rotate toggle)
- 重置相机 (Reset camera button)
**6. 操作 (FIXED)**:
- 重置参数 (Reset parameters)
- 下载截图 (Download screenshot)
### USING THE ARTIFACT
The HTML artifact works immediately:
1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
2. **As a file**: Save and open in any browser - no server needed
3. **Sharing**: Send the HTML file - it's completely self-contained
---
## CELESTIAL 3D ARTIFACT EXAMPLES
### Example: Binary Star System
**Philosophy**: "引力之舞" - Two stars locked in eternal gravitational embrace
**Parameters**:
```javascript
{
seed: 42,
starCount: 2,
planetCount: 3,
G: 1.5,
dt: 0.016,
starfieldDensity: 2000,
autoRotate: true
}
```
**Physics Implementation**:
- Two stars with equal mass orbiting common center of mass
- Three planets orbiting the binary system at various distances
- Complex rosette orbital patterns due to gravitational perturbations
- Dynamic lighting from two moving light sources
### Example: Solar System Style
**Philosophy**: "轨道和谐" - Ordered planetary system following celestial mechanics
**Parameters**:
```javascript
{
seed: 12345,
starCount: 1,
planetCount: 8,
moonCountRange: [0, 4],
G: 1.0,
orbitEccentricity: 0.1
}
```
**Physics Implementation**:
- Single central star (yellow)
- 8 planets with progressively larger orbital radii
- Moons orbiting parent planets
- Nearly circular orbits (low eccentricity)
- Realistic lighting from central star
---
## KEY TECHNICAL CONSIDERATIONS
### WEBGL Performance
- Use `sphere(radius, 24, 24)` instead of higher subdivisions
- Limit starfield count to reasonable values (< 5000)
- Use `pixelDensity(1)` for performance optimization
- Consider using object pooling for particles
### 3D Lighting
- Always set up lights before drawing 3D objects
- Use `ambientLight()` for base illumination
- Use `pointLight()` at star positions for realistic shadows
- `emissiveMaterial()` makes stars glow
- `specularMaterial()` with `shininess()` makes planets reflective
### Camera Control
- `orbitControl()` enables mouse interaction
- Auto-rotate uses `rotateY()` and `rotateX()`
- Can manually set camera position with `camera()`
### Chinese Font Support
- Include Noto Sans SC font from Google Fonts
- Ensure UTF-8 encoding
- Test all Chinese UI text for proper rendering
### Physics Stability
- Use small time steps (dt < 0.02)
- Constrain minimum distances in gravity calculations
- Consider using Velocity Verlet integration for better energy conservation
- Initialize orbits with proper velocities for stability
---
## THE CREATIVE PROCESS
**User request** → **Celestial philosophy** → **3D Physics implementation**
Each request is unique. The process involves:
1. **Interpret the user's intent** - What 3D celestial aesthetic is being sought?
2. **Create a celestial philosophy** (4-6 paragraphs) describing the 3D computational cosmology approach
3. **Implement it in code** - Build the N-body physics engine that expresses this philosophy
4. **Design appropriate physics parameters** - What gravitational properties should be tunable?
5. **Build matching UI controls** - Sliders/inputs for those physics parameters (in Chinese)
**The constants**:
- Anthropic branding (colors, fonts, layout)
- Seed navigation (always present, in Chinese)
- Self-contained HTML artifact
- WEBGL 3D rendering
**Everything else is variable**:
- The N-body physics algorithm
- The gravitational parameters
- The 3D UI controls
- The visual outcome
To achieve the best results, trust creativity and let the celestial philosophy guide the implementation.
---
## RESOURCES
This skill includes helpful templates and documentation:
- **templates/viewer_3d.html**: REQUIRED STARTING POINT for all HTML artifacts.
- This is the foundation - contains the exact structure and Anthropic branding
- **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
- **Replace**: The p5.js WEBGL algorithm, N-body physics, 3D parameter definitions, and UI controls
- **templates/physics_engine_template.js**: Reference for N-body physics best practices and code structure principles.
- Shows how to organize celestial bodies, implement gravity, structure 3D classes
- NOT a pattern menu - use these principles to build unique 3D simulations
- Embed physics engines inline in the HTML artifact (don't create separate .js files)
**Critical reminder**:
- The **template is the STARTING POINT**, not inspiration
- The **3D physics algorithm is where to create** something unique
- Don't copy the example celestial systems - build what the philosophy demands
- But DO keep the exact UI structure and Anthropic branding from the template
- Always ensure Chinese language support in all UI elements