Tragoidia Thumbnail

Tragoidia

Scroll To Explore

Brief

A digital museum experience that retells the tragic story of Orpheus through scroll-based storytelling and art.

What I Used

Figma GSAP Next.js

Museums are designed to make artwork feel special and keep the viewer’s gaze on. The experience is shaped by carefully lit rooms, subtle warm lighting and regal framing that gives every piece a sense of importance. To recreate that feeling digitally, I paired a dark background with warm cream tones, creating a refined, gallery-like environment where each painting naturally becomes the focal point.

Tragoidia website landing page with chapter list and red logo panel
Tragoidia page telling the story of Orpheus and Eurydice over a classical landscape painting
Tragoidia branding mockup on an illuminated outdoor sign at dusk
Tragoidia gallery cards featuring classical paintings of Orpheus

Typography played a big role in shaping the experience. EB Garamond evokes the nostalgia of reading storybooks when our parents would lock us in a room with just books as the viewer would read Orpheus' story, Inter creates a timeless and elegant museum feel and IBM Plex Mono subtly adds a modern touch.

Tragoidia typography system using Inter, IBM Plex Mono and EB Garamond
Tragoidia layout explaining the Greek origin of the word tragedy
Tragoidia logo mark, a serif letter O
Tragoidia colour palette of onyx, white, cream and red

The biggest challenge was reimagining the museum experience for a digital space without losing the qualities that make visiting one feel so distinct. I wanted to elevate it into something more immersive, modern and interactive, while still preserving the familiar feeling of moving from room to room, pausing to study each painting and slowly learning the history behind the work. Here are some of my early ideas before I toned it down.

Tragoidia scrolling gallery of paintings around the Retell the Story heading
Tragoidia Chapter 1: Origins horizontal painting gallery
Tragoidia story section about Orpheus with painting navigation

To preserve the familiar museum experience, a combination of horizontal and vertical scrolling helped transform navigation into part of the story, making the experience much more like exploring a narrative than just browsing a website.

Next Project

The Schema

The Schema Thumbnail