Porthole

A dynamic gradient shader effect featuring diagonal parallel stripes that create a sense of depth and movement. The composition uses a linear gradient transitioning from cyan/turquoise (#68cac5) on the left side to deep purple (#6205aa) on the right side. The gradient flows horizontally across the canvas at a 0-degree angle. Overlaid on this base gradient is a sawtooth wave distortion effect with a frequency of 7.7 and strength of 2, creating sharp, angular ridge-like patterns that run diagonally across the image. The wave distortion is modulated by an invisible circular mask positioned at the top-center of the canvas (coordinates 0.5, 0 with radius 1.8), which controls the angle variation of the waves between 70 and 110 degrees. This creates a subtle directional shift in the wave patterns from left to right. The overall effect produces a three-dimensional appearance with parallel diagonal bands that appear to fold and recede into space, creating a modern, sleek aesthetic with smooth color transitions and crisp geometric distortion patterns. The lighting and shading suggest depth, with the stripes appearing to cast subtle shadows on adjacent surfaces.

Open in Editor
Porthole preview

Usage

The preset as a Vue component. Paste it into a page, or open it in the editor to change it first.

See all