-
-
Notifications
You must be signed in to change notification settings - Fork 954
-
How do I change the backgrond of this because it's #000 and I can't find how to change it, there doesn't seem to be a prop for it and gl.clearColor(...) isn't working.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 2 comments
-
bro, you can't change it, but i used Claude to generate another fragment to run the ogl with, for light mode and dark mode using next-themes, but it is not working properly for light mode tho, the accent color is less saturated
below is my implementation
hero-background.txt
Beta Was this translation helpful? Give feedback.
All reactions
-
👎 1
-
@bardium You can replace your void main() function in the shader with the one below:
void main(){
vec4 col;mainImage(col,gl_FragCoord.xy);
col.rgb=hueShiftRGB(col.rgb,uHueShift);
float scanline_val=sin(gl_FragCoord.y*uScanFreq)*0.5+0.5;
col.rgb*=1.-(scanline_val*scanline_val)*uScan;
col.rgb+=(rand(gl_FragCoord.xy+uTime)-0.5)*uNoise;
col.rgb=clamp(col.rgb,0.0,1.0);
float luma=dot(col.rgb,vec3(0.2126,0.7152,0.0722));
float alpha=smoothstep(0.0,0.08,luma);
vec3 bg=vec3(1.0);
vec3 outCol=mix(bg,col.rgb,alpha);
gl_FragColor=vec4(outCol,1.0);
}
`;
This will give you a white background. Unfortunately, it doesn't look so great, because this component was designed for dark mode designs.
Beta Was this translation helpful? Give feedback.
All reactions
-
😕 1