How do you change the background color for the displacementSphere and the color of the sphere itself from blue to something else?

[Harris-Usmani]

Hey!

I cannot seem to figure out how you would change the color of the background applied to the sphere itself.

I want to put something right before the the sphere, but after applying my z-index, I found out that the sphere has a background of its own which i cannot seem to figure out how to get rid of.

Any help would be appreciated.

Thank you!

[HamishMW]

Hey, you can change the background to transparent in DisplacementSphere.js by adding alpha: true to the renderer

    renderer.current = new WebGLRenderer({
      canvas: canvasRef.current,
      antialias: false,
      powerPreference: 'high-performance',
      alpha: true, // <- add this
    });

and then you just need to remove the scene background on line 102

scene.current.background = new Color(...rgbToThreeColor(rgbBackground)); // Remove this line

[Harris-Usmani]

Thank you so much, that worked perfectly.

Anyway to change the color of the sphere itself?

Also, upon the reloading of the website, the sphere has a 3 second ease in animation, where would I edit that?

[Harris-Usmani]

The ease-in animation that I'm talking about also effects any text that I place over the projects sections/right after the hero section, so I would like to know how to remove/modify the effect itself so that it dosent effect any text that I place after it.

[Harris-Usmani]

Lastly, I'm trying to add in text which is outlined aka hollowed out on the homepage through this CSS code:

.taglineMain { font-family: Metropolis; display: flex; justify-content: center; align-content: center; font-weight: bold; font-size: 7em; color: transparent; -webkit-text-stroke: 1px white; text-transform: uppercase; }
however, upon turning on white mode, the text stays white. Any way to combat this?

Apologies for sending all of these questions your way haha, just trying to figure it out :)

[HamishMW]

To change the sphere color you need to edit the shader in sphereFragShader.js. E.g. for more of a green

vec3 finalColors = vec3(color.b * 1.5, color.r * 2.0, color.b * 1.8);

If you want to change the fade in animation you can edit the timeout of the Transition in DisplacementSphere.js as well as the css transition duration in DisplacementSphere.css.

E.g. to make its fade 200ms instead of 3s

  return (
    <Transition appear in onEnter={reflow} timeout={200}>
      {status => (
        <canvas
          aria-hidden
          className={classNames('displacement-sphere', `displacement-sphere--${status}`)}
          ref={canvasRef}
          {...props}
        />
      )}
    </Transition>
  );

and

.displacement-sphere {
  transition-duration: 200ms;
}

[HamishMW]

As for the outlined text, you're on the right track, just need to add -webkit-text-fill-color

  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(var(--rgbText));

[arpitguptagithub]

i wanted to add a glb file but i am unable to do that i have added the same in model and home page but cant find it after compiling

[shuvocd]

Why the animations not working?

[Cap043]

how to change the theme? its not changing from code.module.css

[manitofigh]

how to change the theme? its not changing from code.module.css

You have to change the values inside Navbar > ThemeProvider > theme.js
const dark is responsible for dark mode and const light for light mode.

[sujalk2211]

i want only displacement sphere animation code. Can you provide to me

[manitofigh]

Pretty much everything about the displacement sphere is at src > layouts > Home > DisplacementSphere.js
Good luck

[manitofigh]

Also take a look at displacementSphereFragment.glsl and displacementSphereVertex.glsl under the same parent folder at src > layouts > Home.
Based on what you want to tweak around, you might have to make some adjustments to the vectors and their calculations. I happened to make some minor changes to some of them.

[uxipandey]

I'm getting below Errors when deploying on vercel. How To fix this?

at #assembleAndUpdateConfig (/vercel/path0/node_modules/miniflare/dist/src/index.js:8916:13) -- 16:42:22.056 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 16:42:22.056 | at async Mutex.runWith (/vercel/path0/node_modules/miniflare/dist/src/index.js:3864:16) 16:42:22.056 | at async #waitForReady (/vercel/path0/node_modules/miniflare/dist/src/index.js:8966:5) 16:42:22.056 | at async Miniflare._getProxyClient (/vercel/path0/node_modules/miniflare/dist/src/index.js:9071:5) 16:42:22.056 | at async Miniflare.getBindings (/vercel/path0/node_modules/miniflare/dist/src/index.js:9090:25) 16:42:22.056 | at async getBindingsProxy (/vercel/path0/node_modules/wrangler/wrangler-dist/cli.js:168478:20) 16:42:22.056 | at async Object.remixConfig (/vercel/path0/node_modules/@remix-run/dev/dist/vite/presets/cloudflare.js:36:9) 16:42:22.056 | at async /vercel/path0/node_modules/@remix-run/dev/dist/vite/plugin.js:280:56 16:42:22.056 | at async Promise.all (index 0) { 16:42:22.056 | code: 'ERR_RUNTIME_FAILURE', 16:42:22.056 | cause: undefined 16:42:22.056 | } 16:42:22.106 | Error: Command "npm run build" exited with 1