We partnered with Meet Your Legend to convey their groundbreaking imaginative and prescient to life — a mentorship platform that seamlessly blends branding, UI/UX, full-stack improvement, and immersive digital animation.
Meet Your Legend isn’t simply one other on-line studying platform. It’s a bridge between generations of creatives. Centered on VFX, animation, and online game manufacturing, it connects aspiring expertise — whether or not college students, freelancers, or in-house studio professionals — with the {industry}’s most achieved mentors. These are the legends behind the scenes: lead animators, FX supervisors, inventive administrators, and technical wizards who’ve formed a number of the greatest productions in fashionable leisure.
Our purpose? To create a vivid digital id and interactive platform that captures three core qualities:
- The vitality of creativity
- The precision of industry-level experience
- The dynamism of movement graphics and storytelling
On the coronary heart of every thing was a single driving thought: motion. Not simply visible motion — however profession momentum, the switch of data, and the emotional propulsion behind creativity itself.
We constructed the model id across the letter “M” — stylized with an elongated tail that represents momentum, legacy, and ahead movement. This tail types a graphic throughline throughout the platform. Mentor names, modules, and animations plug into it, making a modular and adaptable system that evolves with the content material and contributors.
From the visible system to the narrative construction, we wished each interplay to really feel alive — dynamic, immersive, and unapologetically aspirational.
The Idea
The positioning’s structure is constructed round a narrative arc, not only a navigation system.
Customers aren’t dropped right into a menu or a generic homepage. As a substitute, they’re invited right into a story. From the second the location masses, there’s a way of environment and anticipation — an introduction to the platform’s mission, temper, and voice earlier than unveiling the core providing: the mentors themselves, or because the platform calls them, “The Legends.”
Every ingredient of the expertise is structured with intention. We fastidiously designed the content material movement to evoke a way of reverence, curiosity, and inspiration. Consider it as a cinematic trailer for a mentorship journey.
We weren’t simply explaining the model — we had been immersing guests in it.
Typography & Shade System
The typography system performs an important position in reinforcing the platform’s twin persona: technical sophistication meets expressive creativity.
We paired two distinct sans-serif fonts:
– A lightweight, technical font to convey construction, readability, and approachability — ultimate for physique textual content and interface parts
– A daring, expressive typeface that instructions consideration — excellent for mentor names, quotes, calls to motion, and narrative highlights
The distinction between these two fonts helps create rhythm, pacing, and emotional depth throughout the expertise.
The colour palette is intentionally cinematic and memorable:
- Flash orange indicators vitality, inventive fireplace, and boldness. It’s the spark — the invitation to interact.
- A variety of neutrals — beige, brown, and heat grays — provide a way of steadiness, maturity, and professionalism. These tones floor the expertise and create distinction for vibrant parts.
Collectively, the system is each fashionable and timeless — a tribute to craft, not pattern.
Know-how Stack
We introduced the platform to life with a fashionable and modular tech stack designed for each efficiency and storytelling:
- WordPress (headless CMS) for scalable, easy-to-manage content material that helps a dynamic editorial workflow
- GSAP (GreenSock Animation Platform) for fluid, timeline-based animations throughout scroll and interactions
- Three.js / WebGL for high-performance visible results, shaders, and real-time graphical experiences
- Customized reserving system powered by Make, Google Calendar, Whereby, and Stripe — enabling seamless scheduling, video periods, and funds
This stack allowed us to ship a responsive, cinematic expertise with out compromising pace or maintainability.
Loader Expertise
Even the loading display screen is a part of the story.
We designed a cinematic prelude utilizing the “M” tail as a story ingredient. This loader animation doesn’t simply fill time — it units the stage. In the meantime, key phrases from the inventive world — phrases like movement 2D & 3D, vfx, cgi, and movement seize — animate out and in of view, constructing pleasure and immersing customers within the language of the craft.
It’s a sensory preview of what’s to come back, priming the customer for an expertise rooted in {industry} and artistry.
Title Reveal Results
Typography turns into movement.
To convey the model’s kinetic DNA to life, we carried out a customized mask-reveal impact for main headlines. Every title glides into view with trailing movement, echoing the flowing “M” mark. This creates a sense of magnificence, management, and continuity — like a shot dissolving in a movie edit.
These transitions do greater than delight — they reinforce the platform’s id, delivering model by means of motion.
Menu Interplay
We didn’t need the menu to really feel like a utility. We wished it to really feel like a scene transition.
The menu unfolds throughout the iconic M-shape — its construction serving as each interface and metaphor. As customers open it, they reveal layers: content material classes, mentor profiles, and tales. Each movement is deliberate, paying homage to opening a timeline in an modifying suite or peeling again layers in a 3D mannequin.
It’s tactile, immersive, and true to the world the platform celebrates.
Gradient & WebGL Shader
A significant visible motif was the thought of “burning movie” — impressed by analog processes however expressed by means of fashionable code.
To convey this to life, we created a customized WebGL shader, incorporating a reactive orange gradient from the model palette. As customers transfer their mouse or scroll, the shader responds in real-time, including a delicate however highly effective VFX-style distortion to the display screen.
This isn’t simply ornament. It’s a dwelling texture — a logo of the warmth, friction, and keenness that gasoline inventive careers.
Scroll-Based mostly Storytelling
The homepage isn’t static. It’s a stage for narrative development.
We designed the movement as a scroll-driven expertise the place content material and story unfold in sync. From a gap slider that introduces the model, to immersive sections that spotlight particular person mentors and their work, every second is fastidiously choreographed.
Customers aren’t simply studying — they’re experiencing a sequence, like scenes in a film or ranges in a sport. It’s structured, emotional, and deeply human.
Who We Are
We’re a digital studio on the intersection of design, storytelling, and interplay. Our strategy is rooted in idea and craft. We construct digital experiences that aren’t solely visually compelling however emotionally resonant.
From daring manufacturers to immersive web sites, we design with motion in thoughts — motion of pixels, of emotion, and of goal.
As a result of we consider nice design doesn’t simply look good — it strikes you.
