Creating a private portfolio is all the time probably the most enjoyable however can be probably the most daunting. When the course and creativity are in the end your name, it could possibly typically make it even more durable to determine which method to go. When designing my web site, I wished to start crafting it with a comparatively clear feel and appear in thoughts and likewise institute a self-imposed timeline in order that it will truly get completed and never relegated to the bin or backlog.
The late 90’s/Early 2000’s period of video gaming has all the time been one in every of my favorites. I vividly keep in mind the startup and boot screens for PlayStation and Dreamcast and I wished to hold that ahead to convey my visible aesthetic. Name it nostalgia, name it being outdated or simply pondering again to less complicated occasions. Finally, I actually wished to create a sense of powering on a console and revealing the expertise.
It begins with a sketch
One of many fundamentals I went in with creating my web site was to increase out of my consolation zone. With a background in HTML/CSS/JS, there’s a lot exterior of my customary ability set and that’s when integrating Claude Code into my workflow actually helped me output what I had in my thoughts.
The thought was to create a seamless scroll loop that sat on prime of a globe that may comprise initiatives the person might both swipe or scroll by. Along with that, I wished the globe to additionally work together and reply to scrolling. The ultimate piece to the equation was including a disc mannequin that might rotate round within the center, once more, conveying the sensation of the startup screens of the previous.
Tech stack
- Three.js: Used for the principle 3D parts of the positioning
- GSAP – Dealt with nearly the entire animation
- Lenis – Easy scroll: enabled
- Vite – For all the construct
- Net Audio API – Guaranteeing the sound rang true
- No framework – vanilla JS & ES modules
- Cinema4D – CD and Floppy Disk property modeled then transformed to GLB for WebGL
Boot it up
Having a web site that felt cohesive from preload to disclose to undertaking transitions was one other elementary that I trued again to. Beginning with the “Insert Disc” display screen, this served to make sure audio was pushed on the forefront and never simply an afterthought. The rotating disc was dealt with by way of easy rotateY inside CSS in order that I didn’t accrue any pointless code and to maintain it so simple as attainable. Upon getting into, the preloader begins, I wished to maintain the load numbers tied to the emblem as a lot as attainable so I swapped O’s for 0’s.
The half I spent probably the most time on was the thumbnails that fan out after which spiral again in earlier than the reveal. I saved making an attempt to creator that as a spiral path and it all the time regarded mechanical. What lastly labored was realizing a spiral isn’t a path in any respect — it’s simply angle rising whereas radius decreases. Every thumbnail shops its angle and radius individually, a ticker converts them to x/y each body, and the “spiral” is what falls out while you speed up the shared angle and collapse the radii on the similar time.
// angle and radius are tweened independently — no path concerned
const placePreviews = () => {
for (let i = 0; i < prevEls.size; i++) {
const a = ((PREV_ANGLES[i] + orbit.t) * Math.PI) / 180;
gsap.set(prevEls[i], {
x: Math.cos(a) * prevState[i].r,
y: Math.sin(a) * prevState[i].r,
});
}
};
// the collect: angle SPEEDS UP whereas each radius collapses to zero
out.to(orbit, { t: '+=140', length: 1.3, ease: 'power1.in' }, 0);
prevEls.forEach((el, i) => {
out.to(prevState[i], { r: 0, length: 0.55, ease: 'power2.in' }, 0.09 * i);
});The 0.09 stagger is what provides it a tail — the trailing thumbnails are nonetheless orbiting whereas the leaders have already vanished into the centre.
Staying international
A problem I saved working into when creating the globe was that the angle was not feeling proper. In sure states, you’d see the poles of the globe and it made for a non-ideal visible. Deciding on an orthographic view grew to become a structural resolution for the look, the reference I used to be working from was a flat drawing of nested ellipses and perspective bulges the close to half of each meridian so the curves cross and kink close to the poles. Ortho retains them actual.
The following problem was the undertaking strip that hugs the carousel. I didn’t need it to simply be a straight-horizontal strip and as an alternative wished it coming in from the top-left to bottom-right. This took fairly a couple of iterations and in the end settled on the undertaking band as a single texture atlas, with the curve utilized as a latitude shift quite than a rotation so the band stays precisely on the sphere.
One of many coolest particulars is invisible. The magnetic detent settles the ring on tile multiples however the meridians rotate at their very own ratio so each relaxation pose was touchdown on a barely totally different meridian part, the globe by no means regarded the identical twice. Snapping the counter-rotation ratio so one tile step advances the meridians by precisely one meridian step fastened that. The fixed went from 0.6 to 0.571 which is tough to see when in movement, however now each relaxation pose reproduces the reference format.
const TILE_STEP = (Math.PI * 2) / initiatives.size;
const MERIDIAN_STEP = Math.PI / MERIDIAN_COUNT;
// snapped so one detent = precisely one meridian step
const GLOBE_SPIN =
(Math.max(1, Math.spherical(0.6 * TILE_STEP / MERIDIAN_STEP)) * MERIDIAN_STEP) / TILE_STEP;For cellular, an earlier construct was taking too lengthy to swipe from undertaking to undertaking, the bug turned out to be that two issues had been combating: the reside drag was rotating the globe as your finger moved after which the discharge logic tried to snap to the closest undertaking from wherever it had ended up. Rounding a half-rotated worth would typically land again the place you began so a light-weight swipe did nothing in any respect. The repair was to disregard the drag utterly on launch and commit precisely one step from the place the gesture started.
const dir = netDX > 0 ? -1 : 1;
// snap from the place the gesture STARTED, not from the half-rotated present worth
targetRot = (Math.spherical(touchStartRot / step) + dir) * step;Feeling alive
To include some parts of interactivity, I set my focus to mouse interactions. Just like the globe spinning on scroll, the middle CD component additionally rotates based mostly on scroll whereas additionally sustaining its personal rotation when there’s no interplay taking place.
For the undertaking pages, while you hover over the undertaking icon picture, you’re met with some distortion which was a mix of ping-pong stream map and velocity discipline to create the chromatic aberration smear which provides the texture of liquid. The rationale it trails and settles insetad of monitoring your cursor precisely is that the sphere decays quite than resets, every body reads the previoius one, multiplies it down and provides a splat weighted by pointer velocity.
vec3 prev = texture2D(uPrev, vUv).rgb * 0.94; // the decay IS the path
prev += vec3(uVel * s, s * size(uVel)); // velocity, not place
// purple and blue pattern at reverse offsets — that is the chromatic break up
float cr = texture2D(uMap, uv + stream * 0.05).r;
float cb = texture2D(uMap, uv - stream * 0.05).b;Dither, Dither, Dither
The lo-fi polygonal aesthetic of the Y2K gaming period is so iconic and to riff off of that, I went with a heavy dithered method to my shaders all through the positioning. From the globe to the cloud background, integrating the Bayer dither helped me show this and maintain true to the unique imaginative and prescient. It’s a two-line perform reused in every single place and it really works in display screen area quite than UV area so the sample stays locked to the show like a print artifact as an alternative of swimming round with the geometry.
For the CD that spins within the heart, I used a mix of MeshPhysicalMaterial, iridescence and PMREM setting. This took a couple of iterations, particularly to get the bow-tie sample gradient right on the CD and never only a radial reflection. That was the factor I saved getting incorrect, I began with concentric rings, then a pinwheel and neither actually learn as a CD. Viewing a CD in actual life, you see the bow-tie sample extra clearly and that the reflection pivots together with your viewing angle quite than spinning with the geometry.
float sweep = dot(normalize(vDiscNormalV), normalize(-vViewPosition));
// the sweep time period is what makes the cross PIVOT quite than rotate with the disc
float axis = ang - sweep * 1.6;
float bowtie = pow(abs(cos(axis)), 6.0); // two-lobe cross by the centre
// spectral fringe splits inexperienced↔magenta alongside the band's darkish edges
float edge = sin(axis * 2.0);
vec3 fringe = hsv2rgb(vec3(fract(0.30 + edge * 0.22), 0.85, 1.0));One other feather within the cap for Three.js is the power to use textures to the GLB’s cleanly which meant I didn’t should depend on any texturing inside Cinema4D. Since each mesh will get its personal materials assigned on load, all of the PBR maps the exporter wrote had been lifeless weight. Stripping them plus weld+quantize took the principle CD GLB from 9.7MB right down to 182KB with no visible distinction in any respect.
From one to a different
Harkening again to an earlier sentiment round making a seamless expertise, I wished the transitions to really feel easy and maintain you engaged to discover the positioning additional. There have been a couple of totally different transitions on the positioning. The primary one is from the touchdown web page to a undertaking which included a five-bar wipe that reveals the title of the undertaking about to be considered after which wiping out to disclose the undertaking itself. This was one other iterative portion of the positioning and what helped probably the most was creating storyboard parts to indicate what I wished the supposed end result to be.
The reveal isn’t a fade. Every of the 5 bands is break up into two overflow-hidden halves pinned to the the left and proper edges and each half comprises a full-viewport copy of the settled title, offset up by its personal band’s place so all ten lne up as one steady piece of sort. Collapsin their width opens a window within the center, the bars themselves are the monitor matte.
// every half clips a special horizontal slice, however the -top offset means
// each title reproduction sits on the similar absolute display screen place
interior.model.prime = `${-top}dvh`;
// collapsing the halves to zero width IS the reveal — centre bands lead
pwHalves.forEach((pair, i) => {
tl.to(pair, { width: 0, length: 0.6, ease: 'power3.inOut' },
1.8 + Math.abs(i - (pwHalves.size - 1) / 2) * 0.07);
});The page-to-page transitions are most likely one in every of my favourite elements of this web site and as talked about, wanted to really feel easy. The thought was to have a progress fill seem on the undertaking icons as you scroll with a share so you may simply know while you had been going to see the payoff. One of many trickier parts was guaranteeing the undertaking icon easily shifted and settled on the right spot on the prime of the positioning, permitting the opposite parts to construct in round it.
This was a bit tougher than initially anticipated and likewise launched some points round scroll conduct and if the person scrolled an excessive amount of instantly after the fill, it will ship them midway down the web page. The answer was to lock the icon to the highest and never enable any interplay till the construct completed.
const IDLE_MS = 220; // wheel thought-about "stopped" after this quiet hole
const MAX_WAIT = 4000; // security cap so it could possibly by no means cling
const settle = () => {
const now = efficiency.now();
if (now - _swallowLastInput < IDLE_MS && now - t0 < MAX_WAIT) {
requestAnimationFrame(settle); // nonetheless coasting — maintain ready
return;
}
stopInputSwallow();
_pinTop = false;
el.element.scrollTop = 0;
transitionLock = false;
};Sounds fantastic
Past simply the visible, one of the vital memorable elements of a startup display screen was all the time the audio. Instantly, you knew which system you had been on and that the joy was constructing. This was a extremely vital facet that I wished to get proper so I contacted my good friend Lane Fujita to craft this as he and I each share a love of gaming and have spent numerous hours throwing down on the controllers. Not solely was I utterly blown away with what he despatched, Lane despatched over an in depth spec doc that spelled out timing for the audio in addition to when and when not issues ought to be heard.
When together with the audio, I bumped into an enormous efficiency subject that took a little bit of time to determine. The preliminary findings had been that when the sound was checked off, all of it ran easy however when it was on, it was making a ton of stuttering and slowdown on the load display screen particularly. The difficulty was that HTMLAudioElement.play() was firing about 100 calls from the animation body throughout the rely. Headless chromium wasn’t capable of reproduce it so I ended up utilizing the Safari Net Inspector on-device to see what was occurring.
The repair was to cease calling play() per tick completely and hand the entire sequence to the Net Audio clock in a single go earlier than the rely begins. Net Audio runs off the principle thread so as soon as it’s scheduled the rely prices nothing.
export perform scheduleLoaderTicks(durationSec, rely = 100) {
const t0 = audioCtx.currentTime + 0.02;
const MIN_GAP = 1 / 18; // fee ceiling, per the sound spec
const maxTicks = Math.min(rely, Math.flooring(durationSec / MIN_GAP));
let prev = -Infinity;
for (let i = 0; i < maxTicks; i++) {
// ease the spacing to match the counter's personal power1.inOut really feel
const f = i / maxTicks;
const eased = f < 0.5 ? 2 * f * f : 1 - Math.pow(-2 * f + 2, 2) / 2;
const when = t0 + eased * durationSec;
if (when - prev < MIN_GAP) proceed;
prev = when;
const s = audioCtx.createBufferSource();
s.buffer = buffers.loaderClick;
s.join(achieve).join(audioCtx.vacation spot);
s.begin(when); // scheduled, not performed
}
}As well as, iOS had a couple of issues pop in that
Toggle on/off
For iterating, one of many strategies that was probably the most useful was instituting a number of toggle states on the web page in order that I might A/B check a number of variations and see what felt proper in actual time. I used this method for the dithering impact, textual content animation reveals, colours and a number of other different elements on the positioning. As an alternative of getting to individually code every iteration, this method saved a ton of again and again, the power to see it in actual time was essential.
This particularly rang true when creating the three×3 belt matrix and while you went to the “Cognichip” undertaking, the thumbnail was nearly not seen when considered as Duotone. For colours particularly, a theme toggle was carried out by way of a token set and applyTheme() mutates the shared THREE.coloration objects in place so the WebGL uniforms replace with out rebuilding supplies.
Cellphone dwelling
Creating an expertise on desktop all the time provides quite a lot of freedom by way of what you may pull off because of the horsepower obtainable. Coping with cellular, I wished to be as true to the desktop model as attainable in order that got here with its personal set of concessions. Deferring PMREM env era and the info-page GLB off the preload path and utilizing smaller preview thumbnails for the globe playing cards helped so much with efficiency. For the shaders, discovering that Webkit defers compilation to first draw led to shader warm-up to really render a body.
Classes discovered
Going into one thing that felt extra bold got here with its share of frustration every now and then. With the audio particularly, I spent a very long time satisfied the stutter was shader compilation. It wasn’t and the factor that really cracked it was noticing that with the pontificate, the preloader ran cleanly and stuttered when it was on. The lesson wasn’t about audio particularly, it was that I used to be optimizing for one thing I understood as an alternative of what I might measure. This was a time-consuming issue that I didn’t foresee but additionally discovered so much from by way of order of operations. Along with that, the shaders themselves got here with some optimization issues that had been ultimately fastened by way of the “warm-up” method I mentioned earlier.
On a constructive notice, top-of-the-line ideas I can provide is to storyboard animations in the event that they aren’t feeling proper to you. This can assist get extra of a granular method and actually see what is definitely taking place from occasion to occasion. With a background in movement design, pondering by this by way of what After Results might do and even utilizing these phrases, akin to monitor mattes, venetian blind transitions, and many others. had been useful.
Signing off
I wish to give an enormous because of Manoela and the Codrops workforce for the chance to dive deeper into the making of this web site. I hope this may be useful and likewise empower you to not draw back from an thought that will appear too troublesome. Be happy to succeed in out if you wish to chat additional! You could find me by way of goodgrowth.com or on LinkedIn. Great thanks once more to Lane Fujita for the sound design on this!
