Comments (14)
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
from portfolio.
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?
from portfolio.
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.
from portfolio.
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 :)
from portfolio.
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;
}
from portfolio.
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));
from portfolio.
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
from portfolio.
Why the animations not working?
from portfolio.
how to change the theme? its not changing from code.module.css
from portfolio.
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.
from portfolio.
i want only displacement sphere animation code. Can you provide to me
from portfolio.
Pretty much everything about the displacement sphere is at src > layouts > Home > DisplacementSphere.js
Good luck
from portfolio.
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.
from portfolio.
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 1from portfolio.
Related Issues (20)
- webpack building error HOT 16
- npm install error HOT 1
- Using the code HOT 1
- Contact Page 404 NOT FOUND HOT 1
- Contact page 404 NOT FOUND HOT 2
- How do you create navbar logo?
- How can I deploy this on Netlify/Vercel? HOT 15
- how do i connect contact page HOT 9
- [SYNTAX ERROR]: Selector ":root" is not pure (pure selectors must contain at least one local class or id) HOT 2
- Icon HOT 1
- Stupid question, how I eliminate the projects from the homepage?
- An error occurs when viewing your site from the Brave browser. HOT 14
- How am i Suppossed to changed the logo on the meta and the logo on the navabar? Someone worked on this pls help HOT 1
- Inquiry HOT 1
- Error: Zero-length key is not supported - when ever I run 'npm run dev' to start the app
- ReferenceError: crypto is not defined HOT 3
- need help to setup the contact page
- Storybook error HOT 1
- Need Help to Start this app getting so many error
- Vercel Deployment Help HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from portfolio.