When Hot Type commissioned us to build the promotional site for Exat — their most ambitious typeface release to date — it was clear from the outset that a static specimen page wouldn't cut it.

Exat is a 21-style, 1,715-glyph typographic system rooted in Croatian modernism and the legacy of the EXAT 51 art collective. The site had to match that ambition: historically grounded, structurally rigorous, and alive with energy.

What emerged is a scroll-driven experience in which typography reacts, shifts, and transforms through direct interaction. This case study breaks down the design thinking behind those decisions — and how motion and interactivity were used to communicate the type system itself.

Design Task

The central challenge was presenting Exat as a coherent system — not merely a collection of individual styles. The typeface carries deep historical and cultural associations, but it is also a thoroughly contemporary variable font built for flexible, real-world use.

The microsite needed to:

• Convey the full breadth of the typeface without overwhelming the viewer
• Make variation legible through interaction, not lengthy explanation
• Balance expressive moments with clarity and restraint
• Function equally as a promotional site and a practical type specimen

Rather than treating "content" and "interaction" as separate concerns, we made typography itself the primary interface element.

Structure and Flow

The site unfolds as a single continuous vertical journey. Each section introduces one facet of the type system before moving on — paced deliberately to avoid repetition.

Quieter sections focused on reading and direct comparison alternate with denser, more expressive ones. This rhythm was essential for preventing visual fatigue while still demonstrating the font's full range.

Scroll functions as a structural tool rather than a simple event trigger. Progress through the site maps directly to physical movement, keeping the experience predictable and controlled even as the visuals grow more complex.

The Glyph Grid

The opening glyph grid introduces Exat through proximity-based interaction. A field of lowercase characters responds to cursor position, shifting weight and color based on distance from the pointer.

This single interaction is designed to communicate several things simultaneously:

• The continuity of the variable weight axis
• The precision of interpolation between extremes
• The character of the typeface under stress

There are no instructions. The behavior is immediate and self-evident. On touch devices — where this kind of cursor-driven interaction loses its clarity — the grid is replaced with a static fallback, avoiding forced or ambiguous behavior.

How It Works

We calculate the Euclidean distance from the cursor to each letter's center, then apply styles based on distance thresholds:

const frames = el.querySelectorAll(".frame");
const radius = remToPx(6); // Base influence radius
const distances = new Array(frames.length).fill(0);

// Define concentric "rings" of influence
const rules = {
    ring1: { distance: radius * 1.00, weight: 200, color: "#0000cb" },
    ring2: { distance: radius * 0.75, weight: 300, color: "#2546FF" },
    ring3: { distance: radius * 0.55, weight: 400, color: "#5C92FF" },
    ring4: { distance: radius * 0.45, weight: 500, color: "#FFCE2E" },
    ring5: { distance: radius * 0.35, weight: 700, color: "#FFAE00" },
    ring6: { distance: radius * 0.25, weight: 800, color: "#FF6200" },
    ring7: { distance: radius * 0.125, weight: 900, color: "#FF0B00" },
};

On every mouse movement, distances are recalculated:

function processMouseMove(e) {
    for (let i = 0; i < frames.length; i++) {
        const rect = frames[i].getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        
        distances[i] = Math.sqrt(
            (e.clientX - centerX) ** 2 + 
            (e.clientY - centerY) ** 2
        );
    }
}

The animation loop then applies styles via CSS custom properties:

function animate() {
    for (let i = 0; i < frames.length; i++) {
        const dist = distances[i] / modifier.val;
        const fr = frames[i];
        
        // Find which ring this letter falls into
        if (dist > rules.ring1.distance) {
            fr.style.setProperty("--fw", 200);
            fr.style.setProperty("--color", "#0000cb");
            // Fade out letters far from cursor
            const opacity = normalize(dist, rules.ring1.distance * 2.5, rules.ring1.distance);
            fr.style.setProperty("--opacity", isHovering ? opacity : 1);
        } 
        else if (dist < rules.ring7.distance) {
            fr.style.setProperty("--fw", 900);
            fr.style.setProperty("--color", "#FF0B00");
        }
        // ... check other rings
    }
    
    if (isReady) requestAnimationFrame(animate);
}

Subtle Motion as Context

Not all motion is meant to be consciously noticed. In several sections, large numerals drift in slow sine-wave patterns that respond to scroll velocity.

These movements carry no informational content on their own. Their purpose is to add temporal depth and prevent the page from feeling inert during pauses. When scrolling stops, the motion settles. When scrolling accelerates, the oscillation follows. The page stays alive without competing with the type itself.

Variable Font Exploration

The Design Space section is built around controlled comparison. Hovering over style names morphs the specimen text between weights and widths in real time.

Transitions are smooth and continuous — there are no hard jumps between presets. This allows users to perceive the relationships between extremes rather than treating each style as an isolated option.

The interaction is intentionally narrow in scope: one text block, one axis at a time. Clarity was the goal, not abundance.

Scroll-Driven Panels

To present font weights and key typographic characteristics, we used a series of stacked panels within a pinned scroll section. As the user scrolls, panels replace one another vertically, creating a clear and linear sense of progression.

Each panel triggers its own internal text animations only when it enters view, keeping attention focused and preventing multiple elements from competing simultaneously.

Scroll direction is fully reversible. Moving backward restores previous states, reinforcing a simple principle: scroll position equals state, not sequence.

Expressive Typography Moments

Certain statements receive distinct treatment. Large typographic lines rotate through three-dimensional space as they enter the viewport — executing a full X-axis rotation before settling into place.

These moments are deployed sparingly. They punctuate the experience and nod to the experimental spirit of the source material, without turning the entire site into an effects showcase.

Collaboration and Constraints

The project was developed in close partnership with RISE2 Studio, with design and development advancing in parallel. Performance considerations shaped design decisions from early on — particularly in sections involving many simultaneous animations.

The Tech Stack:

• WordPress with a custom theme and ACF for content management
• GSAP + ScrollTrigger + SplitText for all animations
• Lenis for smooth scrolling
• Splide.js for infinite marquees
• Variable fonts for real-time weight and width morphing

Motion loops and interactions pause when off-screen. Smooth scrolling is applied selectively. On mobile, interactions are simplified rather than directly replicated. Performance was treated as a first-class design constraint, not a technical afterthought.

Outcome

The Exat microsite presents typography as an active, living system rather than a static artifact. Interaction is used to reveal structure, range, and behavior — not to ornament the page.

The result is a specimen that communicates how the typeface works by letting users experience it directly.