Virgiawan Listanto
WhatsApp me

VALE

A golf clubhouse site where every golfer becomes a knight: a map of the realm, six chapters and tee-time booking.

Client
VALE Golf Clubhouse
Field
Golf clubhouse
My role
Site design, interaction and front-end, with Invisual Studio
Year
2026
Lines
Get found, Serve
VALE homepage: a printed-style map of the realm with six landmarks, a compass and the Legend of the Realm list

The situation

VALE is a modern golf destination inspired by the spirit of medieval knights: every golfer becomes a knight, every fairway a realm and every round a quest. The site had to carry that story until you could feel it, without losing visitors who just want to book a tee time.

The project was made at Invisual Studio. The result is a single preview file holding the realm map and six chapters, complete on desktop and phone, that runs without a server. The site isn't live yet, and its forms send nothing.

A realm you can explore

The map of the realm

The homepage is a map of the course you can drag and zoom. Six landmarks, from the Training Ground to the King's Reach, each open a story card that leads into its chapter. Every landmark you open stamps a seal in the Quest Log.

The map with The Great Hall landmark card open on the right
The Great Hall landmark card on phone

Six chapters, one book

The Legend, The Course, The Great Hall, The Knights Cup, The Order and Begin the Quest read like a book: moving between chapters feels like turning a page, and The Chronicle is the table of contents. In The Legend, the Green Knight changes pose as you scroll and six companions turn over like medallions.

Six companions in oval frames, two of them turned over to show their story

The course in detail

The Course chapter introduces the contours, five flags each with a numeral and a word, and hole VII, The Dragon's Bunker, with its par and the distance from every tee. The knight's code closes it with three simple rules on the green.

Hole VII, The Dragon's Bunker: par 4, three tee distances and photos of the marker stone

The Great Hall and the Armoury

The clubhouse comes through its room photographs, a notice board whose posters you can drag about, and an Armoury rack of eight goods you pull to browse.

New Goods from the Armoury: a polo, cap, socks and sweater on a rack you can drag

The Order's member card

Visitors write their name and see it on the member card straight away, with a member number. The card tilts with the cursor and turns over. Below are the four privileges of the Order and a form to request an invitation.

A VALE member card reading Sir Galahad, beside the line A true member of the Vale

Booking a tee time

Begin the Quest walks through the booking in six steps, from the date to the player's details. The ticket beside it fills in as the visitor chooses, and dawn slots are marked Early Knight. On phones the summary sits in a bar at the bottom of the screen.

The tee-time form: a date, the 7:00 slot marked Early Knight, and the filled VALE ticket
A wax seal and the message Your quest begins after booking on phone

Booking a tee time

  1. Pick a date from the next fourteen days
  2. Choose a time; dawn slots are marked Early Knight
  3. Set the party, one to four knights
  4. Choose nine or eighteen holes
  5. Add a caddie or a cart if needed
  6. Enter a name and email, then seal the booking

Design decisions

  • Printed, not flat

    Headings and illustrations carry an ink texture like an old printed book. The texture comes from a light SVG filter rather than large images, so it stays sharp on any screen.

  • A map you can play

    The Quest Log collects a seal for every landmark opened. Progress is kept on the visitor's device, and the site keeps working normally when the browser blocks that storage.

  • The story never blocks the booking

    The Begin the Quest button is always in the header and on the map, and the booking summary stays in view. Visitors who only want to book can book straight away.

  • Calm when asked

    When visitors ask for reduced motion, the animation stops. Dialogs, cards and forms use real buttons and labels, so they work with a keyboard and a screen reader.

By the numbers

7
pages: the map and six chapters
6
landmarks and six companions
50
vector drawings in one file
20
tee times to choose from each day

Built with HTML, CSS and JavaScript, GSAP (ScrollTrigger, Draggable, SplitText), Lenis and SVG illustration. One file that runs without a server.

Next roomRUA
Chat on WhatsApp