MythMaker wordmark — hand-drawn runic lettering in gold
Fire arts · Norse performance

Case Study · Design & Development

MythMaker

A live marketing site for a fire-arts and Norse performance company. It carries the feeling of the show, an ember hero, mythic type, interactive pillar cards, while staying fast, statically served, and easy on motion.

Site
mythmaker.quest ↗
Status
Live in production
Disciplines
Site design · Front-end development · Motion & interaction · Performance & accessibility
Stack
Next.js 15 · React 19 · TypeScript · next/image · next/font · Vercel

The problem

A fire-arts and Norse performance company needs a site that feels like the show: dark, mythic, alive with fire. Atmosphere and speed usually pull against each other, though. A generic template kills the feeling. A heavy animated site is slow and shuts out anyone sensitive to motion. And the page has to do real marketing work at the same time: book performances, promote a transmedia game, and fill workshops, all in one place.

What was built

mythmaker.quest, a single richly animated home page built in Next.js 15 and deployed on Vercel. An ember-fire hero canvas, custom hand-drawn display type, interactive pillar cards for the show, the game, and the workshops, a photo gallery, and stats that count up as they scroll into view. It puts the atmosphere of a fire show in the browser. Underneath, every photo is optimized and lazy-loaded, the fonts are self-hosted, the page is statically prerendered, and the motion backs off for anyone who asks it to.

How it's built

Atmosphere on top, engineering underneath.

A hand-built fire-show aesthetic that is also fast, statically served, and considerate of the person reading.

01

The atmosphere is the point

The site opens on an ember-fire hero, hand-drawn mythic display type, and a dark, warm, near-black palette lit by gold and amber. It reads like the poster for a fire show, not a web template. Every bit of that look was built for this company, never pulled off a shelf.

02

Built to be handled

Interaction carries the feeling: pillar cards that tilt in 3D, stats that count up as they scroll into view, sections that reveal on scroll, a gallery lightbox, a mobile nav, and a hidden wolf for anyone who pokes around. All of it hand-built, on one page.

03

Rich without being slow

All of that, and it still loads fast. Every photo goes through next/image (AVIF/WebP, responsive sizes, lazy). The fonts are self-hosted, so there is no external request and no layout shift. The page is statically prerendered. Atmosphere and performance usually fight for the same budget. Here they share it.

04

Motion that knows when to stop

The fire, the reveals, and the count-ups all honour prefers-reduced-motion. For anyone who finds heavy animation disorienting, the site quiets down without losing its shape. The accessibility is part of the craft, worked in from the start rather than bolted on.

05

Three pillars, one page

The company does three different things: performances to book, a transmedia mythic game to play, and workshops to join. The home page carries all three as distinct, interactive sections, without splitting into three sites or burying any of them.

06

From a design to a codebase you keep

It started in Claude Design and became a real Next.js app that is now the source of truth. No export-and-re-optimize loop, and no design tool sitting in the deploy path. The client gets an atmospheric site and a clean, editable codebase behind it.

Ember hero canvas · next/image (AVIF/WebP) · self-hosted next/font display type · statically prerendered · 3D pillar cards, count-up stats, gallery lightbox · prefers-reduced-motion throughout.

What this shows

Feels like the show, loads like a static page.

Atmosphere and performance are usually a trade. A site that feels like a fire show wants to be heavy, and a fast, accessible site wants to be plain. mythmaker.quest is both at once: hand-built atmosphere on top of optimized images, self-hosted fonts, static rendering, and motion that respects the person reading.

This is the design-and-engineering-together work Novadiem does, a site that carries a brand's feeling without giving up speed or the people who need it calm.

hand-built atmosphere next/image + self-hosted fonts statically prerendered reduced-motion safe
Ω

Want a site that feels like your thing, and still flies?

Design-forward marketing sites with real interaction, built to stay fast, accessible, and yours in code.