Skip to main content
A shader-based background inspired by intricate fractal patterns and organic textures, created using raymarching and GLSL. This effect is designed to simulate complex, evolving visual textures with mouse interaction.

Props

Prop NameTypeDefaultDescription
huenumber0Base hue for the fractal texture (0–360 degrees).
saturationnumber1Saturation of the color (0–1).
brightnessnumber1Brightness multiplier for the output color (0–2 recommended).
speednumber1Speed multiplier for texture animation.
mouseSensitivitynumber0.5Controls the responsiveness of the texture to mouse movement. (0–1)
dampingnumber1Damping factor to control the smoothness of texture distortions. (0–1)
classstringOptional additional CSS classes for the container div (e.g., z-index, etc).
This component is designed to be used in full-screen or large section backgrounds. It is optimized for modern GPUs but may be demanding on lower-end devices.

Credits

  • Based on a ShaderToy fragment shader by the original creator of the fractal patterns (MIT License)
  • Embedded in a Vue component and adapted for dynamic input via props
  • Inspired by fractal patterns, natural textures, and advanced raymarching techniques

Build docs developers (and LLMs) love