diff --git a/src/components/HelpPopup.tsx b/src/components/HelpPopup.tsx index 40425aa..368d44c 100644 --- a/src/components/HelpPopup.tsx +++ b/src/components/HelpPopup.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useStore } from '@nanostores/react'; import { uiState, hideHelp } from '../stores/ui'; export function HelpPopup() { const ui = useStore(uiState); + const [valueModeExpanded, setValueModeExpanded] = useState(false); const handleBackdropClick = (e: React.MouseEvent) => { if (e.target === e.currentTarget) { @@ -303,6 +304,104 @@ export function HelpPopup() { +
+

setValueModeExpanded(!valueModeExpanded)} + > + Value Modes + + {valueModeExpanded ? '▼' : '▶'} + +

+ {valueModeExpanded && ( +
+

+ Integer: Traditional 0-255 mode with modulo wrapping +

+

+ Spiral: Logarithmic spirals with value-controlled tightness +

+

+ Float: Bitfield shader mode, clamps to 0-1, inverts, scales to 0-255 +

+

+ Turbulence: Multi-octave turbulence with chaos control +

+

+ Polar: Spiral patterns combining angle and radius rotation +

+

+ Crystal: Crystalline lattice patterns on grid structure +

+

+ Distance: Concentric wave rings with variable frequency +

+

+ Marble: Marble-like veining with turbulent noise +

+

+ Wave: Multi-source interference with amplitude falloff +

+

+ Quantum: Quantum uncertainty probability distributions +

+

+ Fractal: Recursive patterns using multiple octaves of noise +

+

+ Logarithmic: Simple logarithmic scaling transformation +

+

+ Cellular: Cellular automata-inspired neighbor calculations +

+

+ Mirror: Kaleidoscope effects with symmetrical patterns +

+

+ Noise: Perlin-like noise using layered sine waves +

+

+ Rings: Concentric rings with controlled spacing +

+

+ Warp: Space deformation with barrel/lens distortion +

+

+ Mesh: Grid patterns with density and rotation control +

+

+ Flow: Fluid dynamics with flow sources and vortices +

+

+ Glitch: Digital corruption effects with bit manipulation +

+
+ )} +
+