ruucm / shadergradient

Create beautiful moving gradients on Framer, Figma and React

Home Page:https://shadergradient.co

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

pixelDensity does not take effect

FloLech opened this issue · comments

I have embedded shadergradient into a simple CRA. I get the settings via query generated here: https://www.shadergradient.co/customize.

Everything works fine besides the property: pixelDensity.

Here is the code of my component:

` <ShaderGradientCanvas
importedfiber={{ ...fiber, ...drei, ...reactSpring }}
style={{
position: 'absolute',
top: 0,
pointerEvents: "none",
}}

  >
      <ShaderGradient
          control={"query"}
          urlString="https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.2&cAzimuthAngle=180&cDistance=3.6&cPolarAngle=90&cameraZoom=1&color1=%234fc4ff&color2=%23396fdb&color3=%236f46e1&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&gizmoHelper=hide&grain=on&lightType=3d&pixelDensity=0.1&positionX=-1.4&positionY=0&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0.1&rotationX=0&rotationY=10&rotationZ=50&shader=defaults&type=plane&uDensity=1.3&uFrequency=5.5&uSpeed=0.4&uStrength=4&uTime=0&wireframe=false"
      />
  </ShaderGradientCanvas>`

How can I get around this?

you should put pixelDensity prop to the ShaderGradientCanvas component.

<ShaderGradientCanvas style={{ position: 'absolute' }} pixelDensity={0.1}>
    <Gradient />
</ShaderGradientCanvas>