When Scorching Kind approached us to construct the promotional website for Exat, their most bold typeface launch but, we knew a static specimen web page wouldn’t be adequate.
Exat is a 21-style, 1,715-glyph typographic system impressed by Croatian modernism and the EXAT 51 artwork collective. The location wanted to mirror the logic, construction, and power of that context.
The result’s a scroll-driven expertise the place typography reacts, shifts, and transforms via interplay. This case examine focuses on the design intent behind these choices and the way movement and interplay have been used to speak the kind system.
Design Process
The core process was to current Exat as a system moderately than a set of kinds. The typeface carries historic and cultural references, however it’s also a recent variable font constructed for versatile use.
The microsite wanted to:
- Present the total vary of the typeface with out overwhelming the viewer
- Make variation legible via interplay, not clarification
- Stability expressive moments with readability and restraint
- Work as each a promotional website and a useful specimen
Fairly than separating “content material” and “interplay,” we handled typography itself as the first interface factor.
Construction and Movement
The location is structured as a steady vertical expertise. Every part introduces one facet of the kind system, then strikes on earlier than it turns into repetitive.
Calmer sections centered on studying and comparability are adopted by denser, extra expressive ones. This pacing was essential to forestall visible fatigue whereas nonetheless demonstrating the font’s vary.
Scroll is used as a structural instrument moderately than a set off. Progress via the positioning is immediately tied to motion, permitting the expertise to really feel managed and predictable, even when the visuals develop into extra advanced.
The Glyph Grid
The opening glyph grid introduces Exat via proximity-based interplay. A discipline of lowercase characters responds to cursor place, shifting weight and colour primarily based on distance.
This interplay was designed to speak a number of issues directly:
- The continuity of the variable weight axis
- The precision of interpolation between extremes
- The character of the typeface below stress
There aren’t any directions. The conduct is speedy and readable. On contact gadgets, the place this interplay would lose readability, the grid is changed with a static fallback to keep away from compelled or ambiguous conduct.
How It Works
We calculate the Euclidean distance from the cursor to every letter’s middle, then apply kinds primarily based on distance thresholds:
const frames = el.querySelectorAll(".body");
const radius = remToPx(6); // Base affect radius
const distances = new Array(frames.size).fill(0);
// Outline concentric "rings" of affect
const guidelines = {
ring1: { distance: radius * 1.00, weight: 200, colour: "#0000cb" },
ring2: { distance: radius * 0.75, weight: 300, colour: "#2546FF" },
ring3: { distance: radius * 0.55, weight: 400, colour: "#5C92FF" },
ring4: { distance: radius * 0.45, weight: 500, colour: "#FFCE2E" },
ring5: { distance: radius * 0.35, weight: 700, colour: "#FFAE00" },
ring6: { distance: radius * 0.25, weight: 800, colour: "#FF6200" },
ring7: { distance: radius * 0.125, weight: 900, colour: "#FF0B00" },
};On each mouse motion, we recalculate distances:
operate processMouseMove(e) {
for (let i = 0; i < frames.size; i++) {
const rect = frames[i].getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.high + rect.top / 2;
distances[i] = Math.sqrt(
(e.clientX - centerX) ** 2 +
(e.clientY - centerY) ** 2
);
}
}The animation loop applies kinds through CSS customized properties:
operate animate() {
for (let i = 0; i < frames.size; i++) {
const dist = distances[i] / modifier.val;
const fr = frames[i];
// Discover which ring this letter falls into
if (dist > guidelines.ring1.distance) {
fr.type.setProperty("--fw", 200);
fr.type.setProperty("--color", "#0000cb");
// Fade out letters removed from cursor
const opacity = normalize(dist, guidelines.ring1.distance * 2.5, guidelines.ring1.distance);
fr.type.setProperty("--opacity", isHovering ? opacity : 1);
}
else if (dist < guidelines.ring7.distance) {
fr.type.setProperty("--fw", 900);
fr.type.setProperty("--color", "#FF0B00");
}
// ... verify different rings
}
if (isReady) requestAnimationFrame(animate);
}Delicate Movement as Context
Not all movement is supposed to be observed. In a number of sections, giant numerals transfer in sluggish sine-wave patterns that react to scroll pace.
These actions don’t carry info on their very own. Their objective is so as to add temporal depth and forestall the web page from feeling static throughout pauses. When scrolling stops, the movement settles. When scrolling accelerates, so does the oscillation.
This strategy retains the web page lively with out competing with the typography.
Variable Font Exploration
The Design Area part focuses on managed comparability. Hovering over type names morphs the specimen textual content between weights and widths in actual time.
Transitions are {smooth} and steady, avoiding exhausting jumps between kinds. This permits customers to know the connection between extremes moderately than treating kinds as remoted presets.
The interplay is deliberately restricted in scope. One textual content block, one axis at a time. The objective was readability, not abundance.
Scroll-Pushed Panels
To current font weights and key traits, we used stacked panels inside a pinned scroll part. Because the person scrolls, panels substitute one another vertically, creating a transparent sense of development.
Every panel triggers its personal inside textual content animations solely when it turns into seen. This retains consideration centered and prevents a number of components from competing for emphasis.
Scroll route is absolutely reversible. Transferring backward restores earlier states, reinforcing the concept that scroll place equals state, not sequence.
Expressive Typography Moments
Sure statements are handled otherwise. Massive typographic traces rotate in three-dimensional area as they enter the viewport, utilizing a full X-axis rotation earlier than settling into place.
These moments are used sparingly. Their position is to punctuate the expertise and reference the experimental spirit of the supply materials with out turning your complete website right into a show of results.
Collaboration and Constraints
The mission was developed in shut collaboration with RISE2 Studio, with design and growth evolving in parallel. Efficiency concerns knowledgeable design choices early, significantly in sections with many simultaneous animations.
The Tech Stack:
- WordPress with a customized theme and ACF for content material administration
- GSAP + ScrollTrigger + SplitText for all animations
- Lenis for buttery-smooth scrolling
- Splide.js for infinite marquees
- Variable fonts for real-time weight/width morphing
Movement loops and interactions pause when off-screen, and {smooth} scrolling is utilized selectively. On cell gadgets, interactions are simplified moderately than replicated.
Efficiency was handled as a part of the design system, not a technical afterthought.
End result
The Exat microsite presents typography as an lively system moderately than a static artifact. Interplay is used to disclose construction, vary, and conduct, to not enhance the web page.
The result’s a specimen that communicates how the typeface works by letting customers expertise it immediately.
