edu-sci-viz

edu-sci-viz: single-file interactive science outreach page

Positioning

Turn any mathematical/scientific concept into a "single-page interactive experiment that opens on both computers and phones", producing a self-contained single .html。

Do not start with a string of definitions and formulas; instead let readers build intuition first by dragging sliders, rotating, and zooming, then move on to formal definitions, boundary notes, and authoritative sources. As long as the question involvesspatial relations, temporal change, scale change, or parameter influence, an interactive experiment has room to work. Reference blueprint: sci-viz-lab (10 scenarios including the Kakeya conjecture / solar eclipse / tides / refraction of light). For chemistry-themed experience see references/chemistry.md. For geography and climate themes, a dual-scenario approach of "dark hero cross-section + light-colored time series in the intuition section" can be used (blueprint enso.html: El Niño Pacific cross-section + Niño 3.4 series).

Boundaries with existing skills

Completely independent; not merged into any existing edu-* skill. When domains overlap, optional linkage is possible:

Theme	Output of this skill	Cross-linked skill
Solar and lunar eclipses / four seasons / moon phases / tides	Interactive science outreach page	edu-geo (geography course)
Refraction of light / total internal reflection / satellite orbits	Interactive science outreach page	edu-physics (physics course)
Plate motion	Interactive science outreach page	edu-geo

This skill does "narrative science outreach", while existing skills do courseware of "problem statement + step-by-step analysis + drawing board"; the two are not interchangeable.

Dependencies

No build tools, no Python dependencies. Template templates/board-sci.html is a self-contained single page: design system + page skeleton + general runtime (reading progress / pause / render loop) + importmap. Three.js goes through CDN importmap (only needed for 3D); 2D Canvas scenarios have zero network dependency.

Core workflow (8 steps)

Fact verification: check authoritative sources first (official pages, original papers, reliable reviews) before starting; fabricating theorems, numbers, citations, and conclusions is prohibited
Intuition model: turn abstract concepts into operable visuals, first building the intuition of "what exactly is this problem asking"
Formal definition: after intuition, give accurate definitions and distinctions of key concepts
Interactive experiment design: parameter sliders + real-time feedback; drag to rotate, scroll to zoom, reset view, pause; after parameters change, immediately update the model and readout
Boundary notes: make clear that the demonstration is only for building intuition; list separately "what this model simplifies"
Source tracing: all important conclusions go back to official/original papers/reliable reviews, with source links listed at the end of the page
Single-file assembly: copy templates/board-sci.html, replace the narrative HTML, experiment bench and control area, and scenario modules
Self-check delivery: browser testing + console + responsive; deliver a single .html to the current working directory

For the detailed methodology, see references/workflow.md。

Generation method

From templates/board-sci.html(the built-in "Refraction of Light" runnable example) make a copy, replacing four places:

<title> and hero copy
sectioned narrative HTML (intuitive model → formal definition → boundary notes → sources)
hero experiment bench lab-shell(canvas + sliders + presets + readout)
bottom "scene module"<script>

Keep：<head> design system <style>, generic runtime <script>, importmap. The visual style must always inherit from the template; do not create your own.

2D/3D choice: use Three.js + OrbitControls when 3D is required (e.g., Sun-Earth-Moon geometry, orbits); use Canvas 2D when 2D suffices.

Scene module interface

The scene module is one at the bottom <script>(2D) or <script type="module">（3D）：

initialize at the top level: find the canvas, bind sliders, build the Three.js scene, compute the initial state
expose window.SciScene = { update(dt) }, called every frame by the template runtime
check window.__sciPaused to decide whether to advance automatic motion; when a 3D scene is paused, render is still required to keep dragging responsive
dt(seconds) is capped by the runtime at ≤0.05s; geometries are created at initialization and only transforms change each frame

Visual specification (inherit from the template; do not create your own)

main background warm off-white #f3efe5; experiment area deep navy #07182d; accent red #b41f24 + amber #e5a526
Chinese large headings with a Song-style feel; parameters/numbers/captions in monospace font
plenty of thin lines, numbering, coordinate grids, and whitespace; scientific, restrained, modern
no large-area gradients, glass cards, fluorescent tech style, or excessive rounded corners

Fact-checking rules

trust only official pages, original papers, and reliable reviews; distinguish adjacent easily confused concepts; clearly state "confirmed / still open"
do not invent numbers, formulas, citations, or conclusions; when values are approximate, specify in source-policy the basis of measurement

Completion criteria

the page has no horizontal scrolling at 390×844, 1440×900, and 1920×1080; controls are keyboard accessible; respects prefers-reduced-motion
all sliders, buttons, dragging, zooming, resetting, and pausing are verified usable, with no errors in the browser console
the hero title does not overflow the text column into the right-side experiment area: by default each title line is ≤6 Chinese characters (the template h1 is capped at 68px); when lines are longer, override in the scene styles white-space: normal to make it wrap (see workflow "Typography Pitfalls" for details)
boundary notes and source links are complete, with no fabricated content
deliver a single .html in the current working directory; leave no other files in cwd