This project began with a brief from the Arts Desk to the Digital Graphics team: a story featuring 60 Singapore Objects – one to represent each year since Singapore’s independence. The Arts journalists went on to work with the National Heritage Board to source for appropriate objects from the National Collection, and gather supporting information and assets.

They eventually uncovered fascinating backstories for each item and secured rich visual assets, including audio, video and 3D scans. However, completing the line-up of 60 objects proved challenging, requiring them to reach out to a variety of other institutions and individuals, from the Mount Faber Leisure Group to film-maker Anthony Chen, to finalise the roster.

Retro-viewer UI:
A structure for a really long article

Given the sheer scope, the volume of content was expected to be very large. The interactive team’s main challenge was to devise an idea and a structure that could accommodate the significant content load while the reporting process was under way.

We had weeks of ideation and prototyping until we settled on our current ‘retro-viewer’ theme. A retro-viewer is an old-school stereoscopic device, which viewers can insert discs into. When they peek into it, they see 3D images with captions, and pressing a lever scrolls to the next image.

This theme was perfect because the act of peeking inspired us to separate the content into two distinct layers:

Wheel Page / Front layer Inspired by the rotating disc, this layer provides a bird’s-eye view of all 60 objects with short captions, allowing for quick scanning.

Object Page / Back layer By peeking (or clicking!) in for a closer look, readers can dive into this layer which contains detailed text, photos and interactive elements.

White background with black stroked buttons.
Front layer
Beige background with neumorphic buttons.
Back layer

Making these two layers visually distinct – through background colour and buttons – helps the user know where they are on the page. By compartmentalising the content this way, users can rapidly scroll through all 60 objects and click into any single one they decide to dive deeper into.

A treasure trove of interactive Easter eggs

There is also a sense of wonder and excitement when one looks into a retro-viewer and that is the parallel we aimed to achieve: delighting the reader with unexpected elements in each object’s story. To achieve this, we hid 24 custom-coded components throughout the article. Despite burying some of these components deep in the page, we spent considerable effort on them, hoping to surprise the more dedicated readers.

This triggers the well-loved flipping motion of flight information boards. But instead of flight information, it displays ASCII art that signifies countries with notable direct flights from Changi Airport, a beautiful way to show how the airport brought countries closer together.

This is a simple slider component, but it follows the overall art direction with a neumorphic look hinted at by physical paper folders with tabs.

This component shows animated sped-up recaps of sports events. The AfterEffects file uses scripting to link an excel file containing the athletes’ lap timings, names and lanes to the animation layer properties. This helps in generating the animation with ease.

This is a simple component that plays music, made more immersive by resembling a neumorphic vinyl record player that spins the album art on play.

This is a digital Tikam lottery game where readers can click on any number they choose for a random prize. There are a couple of interesting prizes, one of which is a big Easter egg — try it yourself on the page to find out!

This component plays an audio file with a timed transcript that shows the respective lines when the audio plays. It is designed to resemble an old neumorphic radio.

Like & print:
Personalised collage and data collection

A key feature we integrated is a like function. Readers can ‘like’ any object at the end of its respective object pages. The likes are added to a likes counter and when users reach the end of the article, a personalised collage of all their ‘liked’ objects is printed out. This final image can then be downloaded and shared on social media, encouraging readers to explore the entire list for items they connect with.

Besides the personalised surprise for readers, this function serves an important secondary purpose: data collection. While all users remain anonymous and their data is safe, each button has trackers to monitor usage. By analysing this data, we can see the most-liked objects below. We then used this information to inform a second round of promotions, highlighting some of these high-engagement items.


Top 15 Objects with the most likes

  • Old National Registration Identity Card
  • Zubir Said’s piano
  • Dragon playground
  • Balmain kebaya
  • Squirrel Saver coin bank
  • Big Mac styrofoam box
  • Changi Airport T2 flight information board
  • First generation of the Singapore Cable Car
  • The Merlion
  • Singapore Concept Plan
  • Singapore Passport
  • National Library building
  • Vial of Singapore River water
  • Commemorative MRT tickets
  • Postcard of Ah Meng

A transition between every state

switch modes
Light Dark

To enhance navigation, we added a ‘list view’ to the Wheel page and a dark mode button for better legibility in low-light environments. There is a transition for all of these functions – whether you go from the wheel page to the object page, or from the list page to the object page.

The list view for even faster scrolling of the entire list.

These transitions consider the user’s scroll position and the exact point where the button was clicked. This complex movement is managed using the JavaScript library GSAP, which has a plugin released in late 2021 called FLIP. This plugin automatically calculates the difference in position, size and rotation between an element’s ‘before’ and ‘after’ states (its FLIP coordinates), then animates the element between those two states seamlessly — making complex, state-based transitions feel fluid and responsive.

Transition from the wheel to the object page is designed to be seamless.
1 
const runFlip = () => {
2 
  const imageState = Flip.getState(clickedImage)
3 
  const titleState = clickedTitle && modalTitle
4 
    ? Flip.getState(clickedTitle) : null
5
6 
  // Helper function to reveal an element
7 
  const revealElement = (el) => {
8 
    if (!el) return;
9 
    el.style.visibility = 'visible'
10 
    el.style.opacity = '1'
11 
  }
12
13 
  // Reveal modal elements
14 
  revealElement(modalImage)
15 
  revealElement(modalTitle)
16
17 
  // Animate image
18 
  Flip.from(imageState, {
19 
    duration: 0.45,
20 
    ease: 'expo.inOut',
21 
    targets: modalImage,
22 
    clearProps: 'all',
23 
  })
24
25 
  // Animate title if exists
26 
  if (titleState && modalTitle) {
27 
    Flip.from(titleState, {
28 
      duration: 0.45,
29 
      ease: 'expo.inOut',
30 
      targets: modalTitle,
31 
      clearProps: 'all',
32 
    })
33 
  }
34
35 
  // Fade in text content
36 
  fadeInText()
37 
}
A snippet of the code where GSAP FLIP is used.

Tactile motion inspired by everyday objects

In an article centred all on ‘objects’, the transitions themselves need to feel physical and deliberate. Throughout the experience, transitions are inspired by familiar, physical mechanisms. The disc at the end, for example, ejects with a movement much like a piece of toast emerging from a hot toaster. And rather than appearing suddenly, the personalised collage at the end prints out vertically, echoing a long receipt rolling off a printer.

This use of tactile, real-world physics is what gives this interactive article its distinct texture—making the digital experience feel satisfyingly tangible.