In the present day I need to introduce the 4WIDE web site, which launched on March 31, 2026. I’ll stroll by the background, a number of the technical aspect, and the considering behind the visible design. Hope you stick round to the tip!
Undertaking backstory
Hold the tone however appropriate it, make it circulation higher, don’t add something or take anythign away, don’t use dashes: This undertaking was created because the enterprise web site for my unbiased observe underneath the identify 4WIDE.
From the preliminary idea to the general public launch, the undertaking took about three months, throughout which I explored a variety of concepts for each the content material and the expression. The primary level I targeted on with this web site was balancing expressiveness with readability of message. It isn’t a web site meant to merely showcase my private creative sensibilities. As a enterprise web site, it wanted to obviously talk what I do and what I can provide.
On the identical time, one of many areas I need to pursue in my work is expressive design. I subsequently aimed to discover a stability the place that intention might be conveyed correctly whereas nonetheless permitting the location to perform as a enterprise web site.
Tech stack & instruments
The tech stack is as follows:
- Framework: Astro
- Web page transitions: Swup
- CMS: WordPress (Headless)
- Internet hosting: Vercel
- Animation: GSAP, Three.js
I chosen these frameworks and libraries from instruments I had already used and felt aware of. That stated, there have been additionally applied sciences I used correctly for the primary time on this website: Swup and headless WordPress. They had been each instruments I had been involved in for a while however had not had the chance to make use of earlier than, so I made a decision to take the prospect and take a look at them on this undertaking.
Visible & interplay design
There are three visible and interactive components I wish to introduce.
About web page
This web page is structured so {that a} curved picture emerges from the principle visible and leads into the message part. The thought behind this construction was to go away a powerful impression of my stance towards each my enterprise and my inventive work. The narrative is that behind the surface-level components labeled “Notes,” which describe my scope and strategy, the extra basic concepts start to seem.
As I developed this circulation, I felt that merely revealing the content material from behind wouldn’t create sufficient visible affect, so I added a curved distortion and blur impact, together with an interplay the place the textual content itself strikes in sync with the scroll.
Beneath is a part of the code used to create the curved impact.
float distortion = 1.0 + u_strength * r * r;
vec2 distortedUv = uv / distortion;
distortedUv.x /= u_aspect;
distortedUv = distortedUv * 0.5 + 0.5;
float t = clamp(r / 1.2, 0.0, 1.0);
float t2 = t * t;
vec2 radialDir = r > 0.001 ? normalize(uv) : vec2(0.0);
vec2 radialDirNorm = vec2(radialDir.x / u_aspect, radialDir.y);There was additionally one technical level I notably struggled with, which was cell optimization. This expression was necessary to the narrative of this part, so I by no means thought-about turning it off on cell.
Nonetheless, as growth progressed, I turned more and more involved concerning the efficiency value on cell gadgets. To enhance it as a lot as attainable, I made a number of changes. Listed here are a few of them:
1. Optimizing the pictures
I ready pictures optimized for cell sizes and adjusted the format to WebP.
2. Adjusting geometry dimension and section depend
I lowered each the scale and the variety of segments by half.
3. Adjusting the blur impact
The blur impact is turned off on cell.
4. Adjusting the renderer’s powerPreference
On cell, it’s set to low-power.
The simplest of those was the third adjustment: modifying the blur impact. Blur-based visuals are extraordinarily demanding when it comes to efficiency.
Showcase web page
This web page was created to current a number of chosen works with a powerful emphasis on visible expression. To boost immersion, I reused the curved and blur impact from the About web page, whereas additionally introducing a big transferring parallax impact and RGB shift.
I really feel that blur and RGB results work extraordinarily properly when the aim is to intensify immersion. They’re used not solely in net design but additionally steadily in visible and motion-based media.
As supposed, I really feel the general scrolling expertise turned very easy and created an area with a powerful sense of depth.
Beneath is a part of the code used to create the parallax impact.
vec2 uv = imageAspect(u_planeSize, u_imageSize, vUv);
uv = (uv - vec2(0.5)) / u_imageScale + vec2(0.5);
uv.x -= u_imageOffsetX;
uv.y -= u_imageOffsetY;pictures.forEach((img, index) => {
gsap.to(this.objcts[index].materials.uniforms.u_imageOffsetY, {
worth: -0.3,
scrollTrigger: {
set off: img,
scroller: container,
begin: "prime backside",
finish: "backside prime",
scrub: true,
},
});
});As a result of the web page can be related to the CMS, content material may be freely changed, added, or faraway from the admin panel.
High web page
The primary visible on the highest web page is a reel-style video, but it surely truly has two modes: default and focus.
In focus mode, guests can view details about 4WIDE, what I worth, and the design components that make up the location, akin to Grid and Kind. The shift to focus mode impacts not solely the data being proven, but additionally the background video, which turns into closely distorted and performs extra slowly. By doing this, I adjusted the expertise in order that it feels extra targeted.
Beneath is a part of the code used to create the main focus mode.
setupMvModeChange() {
const modeButton = doc.querySelector(".index-mv__mode-button");
let modeFlag = false;
modeButton.addEventListener("click on", () => {
if (mvModeRunning) return;
modeFlag = !modeFlag;
if (flag) {
gsap.to(this.aircraft.materials.uniforms.u_filter, {
worth: 0.9,
period: 1.4,
ease: "power4.out",
});
if (this.fisheyePass.uniforms.u_strength) {
gsap.to(this.fisheyePass.uniforms.u_strength, {
worth: 0.7,
period: 1.4,
ease: "power4.out",
});
}
if (this.video) {
gsap.to(this.video, {
playbackRate: 0.6,
period: 1.4,
ease: "power4.out",
});
}
} else {
gsap.to(this.aircraft.materials.uniforms.u_filter, {
worth: 0.3,
period: 1.4,
ease: "power4.out",
});
if (this.fisheyePass.uniforms.u_strength) {
gsap.to(this.fisheyePass.uniforms.u_strength, {
worth: 0.0,
period: 1.4,
ease: "power4.out",
});
}
if (this.video) {
gsap.to(this.video, {
playbackRate: 1,
period: 1.4,
ease: "power4.out",
});
}
}
});
}Reflections
This undertaking, created as the web site for my very own enterprise, turned one thing by which I used to be in a position to assume deeply and experiment extensively. Total, I’m very happy with the ultimate consequence, although I’m positive there are nonetheless areas the place it might have been introduced even higher. This web site shouldn’t be one thing I contemplate completed, and I need to proceed enhancing and refining it in order that it may well serve me for a very long time.
Lastly, I wish to thank Codrops for giving me the chance to introduce this undertaking on this means. Thanks very a lot for studying till the tip.
