When Sizzling Sort approached us to construct the promotional web site for Exat, their most formidable typeface launch but, we knew a static specimen web page wouldnβt be ample.
Exat is a 21-style, 1,715-glyph typographic system impressed by Croatian modernism and the EXAT 51 artwork collective. The positioning wanted to mirror the logic, construction, and vitality of that context.
The result’s a scroll-driven expertise the place typography reacts, shifts, and transforms by means of interplay. This case research focuses on the design intent behind these choices and the way movement and interplay had been used to speak the kind system.
Design Job
The core job was to current Exat as a system fairly than a group of kinds. The typeface carries historic and cultural references, however it is usually 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 by means of interplay, not clarification
- Steadiness expressive moments with readability and restraint
- Work as each a promotional web site and a useful specimen
Fairly than separating βcontent materialβ and βinterplay,β we handled typography itself as the first interface component.
Construction and Circulation
The positioning 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 targeted on studying and comparability are adopted by denser, extra expressive ones. This pacing was vital to stop visible fatigue whereas nonetheless demonstrating the fontβs vary.
Scroll is used as a structural device fairly than a set off. Progress by means of the positioning is instantly tied to motion, permitting the expertise to really feel managed and predictable, even when the visuals change into extra complicated.
The Glyph Grid
The opening glyph grid introduces Exat by means of proximity-based interplay. A subject of lowercase characters responds to cursor place, shifting weight and coloration based mostly on distance.
This interplay was designed to speak a number of issues without delay:
- 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 quick and readable. On contact units, 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 heart, then apply kinds based mostly 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, coloration: "#0000cb" },
ring2: { distance: radius * 0.75, weight: 300, coloration: "#2546FF" },
ring3: { distance: radius * 0.55, weight: 400, coloration: "#5C92FF" },
ring4: { distance: radius * 0.45, weight: 500, coloration: "#FFCE2E" },
ring5: { distance: radius * 0.35, weight: 700, coloration: "#FFAE00" },
ring6: { distance: radius * 0.25, weight: 800, coloration: "#FF6200" },
ring7: { distance: radius * 0.125, weight: 900, coloration: "#FF0B00" },
};On each mouse motion, we recalculate distances:
perform 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:
perform 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 seen. In a number of sections, massive numerals transfer in gradual sine-wave patterns that react to scroll pace.
These actions don’t carry info on their very own. Their function 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 method retains the web page energetic 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 arduous jumps between kinds. This permits customers to know the connection between extremes fairly than treating kinds as remoted presets.
The interplay is deliberately restricted in scope. One textual content block, one axis at a time. The purpose 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 change 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 targeted and prevents a number of components from competing for emphasis.
Scroll path is totally reversible. Shifting backward restores earlier states, reinforcing the concept scroll place equals state, not sequence.
Expressive Typography Moments
Sure statements are handled otherwise. Massive typographic strains rotate in three-dimensional house 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 entire web site right into a show of results.
Collaboration and Constraints
The challenge was developed in shut collaboration with RISE2 Studio, with design and growth evolving in parallel. Efficiency concerns knowledgeable design choices early, notably 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 units, interactions are simplified fairly than replicated.
Efficiency was handled as a part of the design system, not a technical afterthought.
Consequence
The Exat microsite presents typography as an energetic system fairly than a static artifact. Interplay is used to disclose construction, vary, and conduct, to not beautify the web page.
The result’s a specimen that communicates how the typeface works by letting customers expertise it instantly.
