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 outdated and began with a easy but uncompromising perception: design should convert, and conversion requires excellent design. Dream purchasers? Not at first. What got here as an alternative 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 tasks had been operating 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 staff that might replicate 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 completely 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 staff that actually understands us.
In brief, the objectives of our FUTURE THREE® rebrand had been:
- Appropriate exterior notion
- Clarification of our course of
- Constructing a robust staff
- 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 tasks which can be distinctive and award-worthy. And that’s precisely what we did, from moodboards and wireframes to design path and ultimate visuals. Weeks of planning, iterating, and refining.
Bringing the design to life
As soon as the design was in place, the true problem started: bringing it to life. For that, we collaborated with Eduard Bodak, the most effective 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 keep in mind.
Whereas our staff centered on the event and total integration, Eduard devoted himself to crafting the movement language of the location, the type of animations that flip static layouts into residing 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.
The complete undertaking 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
Numerous web sites use comparable staggered textual content animations on hover however we re-engineered it for precision and uniqueness. Through the use of 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 ingredient has a mode like:
F
U
T
...This allowed us to create a clean stagger animation straight in CSS:
.hyperlink span {
transition: rework 0.5s calc((var(--char) - 1) * 0.024s) var(--basic-ease);
}
.hyperlink:hover span {
rework: 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 , parts with data-mask-animation-in begin their reveal animation utilizing CSS clip-path transitions:
[data-mask-animation-in] {
rework: translate3d(0, 100%, 0);
clip-path: inset(-100% -10% 102% -10%);
transition: clip-path 0.5s var(--natural-ease), rework 0.5s var(--natural-ease);
}
html.is-ready [data-mask-animation-in] {
rework: translate3d(0, 0, 0);
clip-path: inset(0% -10% -10% -10%);
}By delaying some parts barely, a refined stagger impact emerges, producing a cinematic entry sequence with out heavy scripting.
3. Challenge Hover Interplay
Hovering over a undertaking preview reveals a secondary picture with a brief transition delay.
The thought: keep away from abrupt picture adjustments, but additionally forestall sluggish fade-ins.
.undertaking:hover .preview-secondary {
opacity: 1;
rework: translateY(0);
transition: rework 0.5s 0.1s var(--basic-ease), opacity 0.2s ease-out;
}
.undertaking .preview-secondary {
opacity: 0;
rework: translateY(10px);
}The exit animation is barely quicker (0.4s), so the hover feels responsive and light-weight.
4. Parallax Scroll Impact
As a substitute of utilizing heavy scroll libraries, we constructed the parallax impact purely with GSAP ScrollTrigger:
let tl = gsap.timeline({
scrollTrigger: {
set off: '.project-image',
begin: 'prime backside',
finish: 'backside prime',
scrub: 0
}
});
tl.fromTo('.project-image', { yPercent: 0 }, { yPercent: -10, ease: 'none' });To stop gaps whereas scrolling, the photographs are wrapped in overflow-hidden containers and scaled barely:
.project-image img {
rework: 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® web site was designed to really feel invisible but intentional — the type of refinement customers may not consciously discover, however will at all times really feel.
