import React, { useState } from "react"; const WAVE_STROKE = "#79beda"; const WAVE_FILL = "#2b7c9e"; const Wave: React.FC<{ stroke: string; fill: string; }> = ({ stroke, fill }) => ( <> {/* Generator: Moho 13.0.3 build 635 */} ); const NUM_WAVES = 8; const WAVE_DURATION = 1; const WAVE_PARALLAX_SCALE_START = 1.2; const WAVE_PARALLAX_TRANSLATE_START = 10; const WAVE_PARALLAX_SCALE_VELOCITY = 1.25; const WAVE_PARALLAX_TRANSLATE_VELOCITY = 30; const WAVE_PARALLAX_TRANSLATE_ACCEL = 10; const NumericSlider: React.FC<{ id: string; label: string; onChange: (value: number) => void; value: number; min: number; max: number; step: number; valueSuffix?: string; }> = (props) => { return (

props.onChange(parseFloat(e.target.value))} /> {" "} {props.value} {props.valueSuffix}

); }; const Waves: React.FC<{}> = () => { const [stroke, setStroke] = useState(WAVE_STROKE); const [fill, setFill] = useState(WAVE_FILL); const [numWaves, setNumWaves] = useState(NUM_WAVES); const [duration, setDuration] = useState(WAVE_DURATION); const [initialYVel, setInitialYVel] = useState( WAVE_PARALLAX_TRANSLATE_VELOCITY ); const [yAccel, setYAccel] = useState(WAVE_PARALLAX_TRANSLATE_ACCEL); const [scaleVel, setScaleVel] = useState(WAVE_PARALLAX_SCALE_VELOCITY); let scale = WAVE_PARALLAX_SCALE_START; let y = WAVE_PARALLAX_TRANSLATE_START; let yVel = initialYVel; let waves: JSX.Element[] = []; for (let i = 0; i < numWaves; i++) { waves.push( ); y += yVel; scale *= scaleVel; yVel += yAccel; } return ( <> {waves}

setStroke(e.target.value)} id="stroke" />{" "} setFill(e.target.value)} id="fill" />

); }; export const WavesPage: React.FC<{}> = () => ( <>

Waves!

);