Progressive disclosure design that makes you learn science naturally
Information is classified into 3 levels and presented progressively, allowing users to naturally deepen their scientific knowledge.
No technical terms, explained with metaphors and everyday expressions. Basic information everyone can enjoy.
Basic scientific terms and concepts. Chemical formulas, reactions, crystal structures, etc.
Academic paper-level detailed information. Quantum interpretations, latest research, etc.
Layer state managed by Zustand layer-store
// src/stores/layer-store.ts
import { create } from 'zustand';
type Layer = 'L1' | 'L2' | 'L3';
interface LayerStore {
currentLayer: Layer;
setLayer: (layer: Layer) => void;
}
export const useLayerStore = create<LayerStore>((set) => ({
currentLayer: 'L1',
setLayer: (layer) => set({ currentLayer: layer }),
}));LayerToggle component switches between L1/L2/L3
// LayerToggle component usage
<LayerToggle />
// Conditional rendering
const { currentLayer } = useLayerStore();
{currentLayer === 'L1' && <L1Content />}
{currentLayer === 'L2' && <L2Content />}
{currentLayer === 'L3' && <L3Content />}Content conditionally rendered based on currentLayer
詳細な実装状況は docs/35_technical_guide/02_LAYER_SYSTEM.md をご参照ください。