Turn Scientific Visualizations into Reusable Skills: 10 Open‑Source Interactive Experiments

I built a reusable Skill called z‑sci‑viz‑lab that turns any math or science concept into a single‑page interactive experiment. The Skill encapsulates an eight‑step workflow that guarantees factual accuracy, creates an intuitive visual model, provides formal definitions, designs interactive controls, clarifies the scope, traces sources, bundles everything into a single HTML file with vite-plugin-singlefile, and deploys it to Cloudflare Pages with one command.

Skills Overview

The core idea differs from traditional static science pages: instead of starting with definitions and formulas, readers first manipulate 2D/3D models to build intuition, then see the rigorous definitions and references.

Fact verification : consult official pages, original papers, and reliable reviews; never fabricate theorems or data.

Intuitive model : convert abstract concepts into manipulable 3‑D models or 2‑D canvases.

Formal definition : after intuition, present precise statements and key concept distinctions.

Interactive design : add sliders, drag‑rotate, zoom, reset view, and pause controls.

Boundary statement : explicitly note that the page builds intuition, not a mathematical proof.

Source tracing : link every major conclusion back to authoritative material at the page footer.

Vite single‑file build : use vite-plugin-singlefile to produce a single dist/index.html.

Cloudflare Pages deployment : one‑command publish to a URL accessible from desktop and mobile.

Usage

The Skill supports two workflows:

Mode A – Prompt template : create a brand‑new single‑page experiment by editing templates/prompt-template.txt (replace five placeholders) and feeding it to an LLM.

Mode B – Scene plugin : extend an existing lab by adding a scene module under src/scenes/<scene-id>.js that implements a standard interface, then register it in src/main.js and add a tab in .scene-tabs.

Example scene module (HTML‑escaped angle brackets):

export default {
  id: "my-scene",          // matches data‑scene in index.html
  name: "示例场景",
  getDefaultParams() {
    return { sampleCount: 200, delta: 0.05 };
  },
  init(container) { /* create renderer, bind events */ },
  update(params) { /* called each frame */ },
  dispose() { /* free WebGL resources */ }
};

To add a new scene you:

Copy templates/scene-template.js to src/scenes/<scene-id>.js.

Implement the scene interface.

Register it with registerScene(myScene) in src/main.js.

Add a tab in the HTML .scene-tabs element.

Run npm run dev locally, then build and deploy.

The tech stack is Vite for fast iteration, Three.js for 3‑D rendering, and native HTML Canvas for lightweight 2‑D interactions. Vite’s single‑file plugin keeps the output compact, while Three.js provides sufficient power without excessive weight.

Real‑world demos (9 new scenes)

① Solar eclipse : three‑sphere geometry (Sun, Earth, Moon) lets you drag relative positions to see total, annular, and partial eclipses.

② Lunar eclipse : shows the Moon crossing Earth’s umbra and explains why a blood moon appears red.

③ Solar system : eight planets’ orbits and periods can be sped up, compressing a year into seconds to compare Mercury and Neptune speeds.

④ Seasons : tilt the Earth’s axis and move the solar sub‑point to visualize why day length and seasons change, correcting the “summer is closer to the Sun” myth.

⑤ Moon phases : synchronizes lunar orbit with Sun‑Earth geometry so you can drag through the full cycle from new moon to full moon.

⑥ Tides : combines lunar and solar tidal forces; a toggle isolates the Sun’s contribution, revealing why high and low tides occur twice daily.

⑦ Satellite orbit : a launch‑velocity slider (0‑13 km/s) lets you watch fall‑back, circular, elliptical, and escape trajectories, making the first‑cosmic‑velocity concept tangible.

⑧ Plate tectonics : shows plate boundaries, motion vectors, and three boundary types; dragging the timeline spans millions of years to animate continental drift.

⑨ Light refraction : adjust incident angle and refractive indices; preset media let you observe the exact moment total internal reflection occurs.

All demos share the same eight‑step pipeline: verify facts, build an intuitive model, give formal definitions, design interaction, state boundaries, cite sources, bundle with Vite, and deploy via Cloudflare Pages.

Conclusion

The Skill originated from a workflow that turned the “挂谷猜想” (a complex conjecture) into an interactive page. Whenever a problem involves spatial relationships, temporal change, scale variation, or parameter influence, the same pipeline can be reused. The repository provides the full source for the ten scenes, the prompt template, and the scene scaffold, enabling developers, educators, or students to create new interactive visualizations with minimal effort.