FUTURE THREE® is a design studio specializing in model creation and net design.
In 2023, we based FUTURE THREE®, Hassam Khan and I, Samet Cubuk. Again then, we had been 23 years previous and began with a easy but uncompromising perception: design should convert, and conversion requires excellent design. Dream shoppers? Not at first. What got here as a substitute had been numerous classes, iterations, and brutally trustworthy retrospectives.
By the top of 2024, we had moved into our dream workplace and had been working full-time on our imaginative and prescient. Shopper initiatives had been working with perfectionist precision, however our personal firm didn’t really feel like us. By early 2025, it turned clear: we wanted a relaunch. And we wanted a group that would mirror us, problem us, and speed up us.
What the relaunch needed to obtain
This was by no means about “simply one other web site.” We constructed a wholly new model, formally registered throughout Europe. We aimed for a recent notion, a brand new market, a sharper advertising and marketing idea, a clearly outlined viewers, new inside processes, and most significantly: a group that actually understands us.
Briefly, the targets of our FUTURE THREE® rebrand had been:
- Right exterior notion
- Clarification of our course of
- Constructing a powerful group
- Strengthening the model
- Evolving our design course of
In April 2025, we partnered with Jason Harvey from Somefolk®. Collectively, we set out not solely to revamp FUTURE THREE® however to create initiatives which can be distinctive and award-worthy. And that’s precisely what we did, from moodboards and wireframes to design course and last visuals. Weeks of planning, iterating, and refining.
Bringing the design to life
As soon as the design was in place, the actual problem started: bringing it to life. For that, we collaborated with Eduard Bodak, top-of-the-line net builders on the market. Our ambition was clear: extremely environment friendly code, seamless movement, and a digital expertise that lingers. Not a generic portfolio, however a studio you bear in mind.
Whereas our group centered on the event and general integration, Eduard devoted himself to crafting the movement language of the location, the sort of animations that flip static layouts into dwelling experiences. From web page transitions and button or hyperlink hovers to scroll-based parallax results, his work was all about injecting motion, rhythm, and emotion into each interplay.
Your complete mission was developed in Webflow, the place we pushed the platform to its limits, combining customized code and GSAP to realize a clean and constant efficiency throughout the location.
1. Button & Hyperlink Interactions
A whole lot of web sites use related staggered textual content animations on hover however we re-engineered it for precision and uniqueness. By utilizing SplitText from GSAP with the choice propIndex: true, every cut up character receives its personal CSS variable:
new SplitText('.hyperlink', { sort: 'chars', propIndex: true });Meaning each character within the component has a method like:
<span type="--char: 1;">F</span>
<span type="--char: 2;">U</span>
<span type="--char: 3;">T</span>
...This allowed us to create a clean stagger animation straight in CSS:
.hyperlink span {
transition: remodel 0.5s calc((var(--char) - 1) * 0.024s) var(--basic-ease);
}
.hyperlink:hover span {
remodel: translateY(-2px);
text-shadow: 0 1px 4px rgba(255, 50, 50, 0.8);
}When hovering out, the delay is skipped to make the interplay snappier, giving the movement a pure, reactive really feel.
2. Intro Animation & Web page Transition
The intro sequence combines GSAP and Lottie.
Whereas the Lottie loader performs, scroll is disabled. As soon as completed, it triggers the web page transition, begins Lenis (clean scrolling), and prompts textual content animations.
lottieAnimation.addEventListener('full', () => {
gsap.to('.loader', { autoAlpha: 0 });
doc.documentElement.classList.add('is-ready');
lenis.begin();
});When the category is-ready is added to <html>, components with data-mask-animation-in begin their reveal animation utilizing CSS clip-path transitions:
[data-mask-animation-in] {
remodel: translate3d(0, 100%, 0);
clip-path: inset(-100% -10% 102% -10%);
transition: clip-path 0.5s var(--natural-ease), remodel 0.5s var(--natural-ease);
}
html.is-ready [data-mask-animation-in] {
remodel: translate3d(0, 0, 0);
clip-path: inset(0% -10% -10% -10%);
}By delaying some components barely, a delicate stagger impact emerges, producing a cinematic entry sequence with out heavy scripting.
3. Mission Hover Interplay
Hovering over a mission preview reveals a secondary picture with a brief transition delay.
The thought: keep away from abrupt picture modifications, but additionally stop sluggish fade-ins.
.mission:hover .preview-secondary {
opacity: 1;
remodel: translateY(0);
transition: remodel 0.5s 0.1s var(--basic-ease), opacity 0.2s ease-out;
}
.mission .preview-secondary {
opacity: 0;
remodel: translateY(10px);
}The exit animation is barely quicker (0.4s), so the hover feels responsive and light-weight.
4. Parallax Scroll Impact
As an alternative of utilizing heavy scroll libraries, we constructed the parallax impact purely with GSAP ScrollTrigger:
let tl = gsap.timeline({
scrollTrigger: {
set off: '.project-image',
begin: 'high backside',
finish: 'backside high',
scrub: 0
}
});
tl.fromTo('.project-image', { yPercent: 0 }, { yPercent: -10, ease: 'none' });To stop gaps whereas scrolling, the pictures are wrapped in overflow-hidden containers and scaled barely:
.project-image img {
remodel: scale(1.1);
transform-origin: backside;
}This small contact provides depth and movement, a minimal however memorable layer of interactivity.
Each movement, transition, and interplay on the FUTURE THREE® website was designed to really feel invisible but intentional — the sort of refinement customers may not consciously discover, however will at all times really feel.
