import React, { useState } from "react";
import { ColorWidget } from "../color-widget";
import { NumericSlider } from "../numeric-slider";
import { Page } from "../page";
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 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 (
<>
);
};
export const WavesPage: React.FC<{}> = () => (
);