gradient

make a webgl based gradient tool that has a refresh button that randomizes the generation and always does something different, and has some minimal settings to edit the generation The gradient should be full page, take the whole page, and the controls should be pinned to the bottom center. Make it dope as fuuuck

Gradual Blur

Make a GradualBlur overlay that creates a progressive gradient blur, not just a solid blurred box. The effect should be built by stacking multiple layers, each with its own linear gradient mask and increasing blur, so the blur strength gradually ramps from strong at the edge to none further inside the page

Direction logic:

• If on the top, blur is strongest at the very top and fades downward.
• If on the bottom, blur is strongest at the very bottom and fades upward.
• If on the left, blur is strongest at the left edge and fades to the right.
• If on the right, blur is strongest at the right edge and fades to the left.

Preview page:

• Long scrolling landing page about a beach chill vacation.
• Use the attached images in the content
• The content is just there so I can see the blur effect as I scroll — the main goal is the gradual blur component.

Controls:

• Add a floating panel pinned in the top-right corner with sliders to adjust position, size (thickness of blurred band), number of layers, strength, curve, opacity, and animation.
• Panel should be minimal, non-obtrusive, and collapsible into a small icon button that expands back on click.