Creative Tech

beguiling allure of the sirens

Interaction Design | Front End Programming | typography | UI/UX Design

Interaction Design | Front End Programming | typography | UI/UX Design

Overview
The beguiling Allure of the Siren is an interactive web experience where the myth of the siren is brought to life. The exploration focuses on how immersive effects through computer vision can be used to recreate the sensation of being lured by these mythical creatures through monochrome creative typography alone without using imagery as a challenge for my interaction design class.

Its primary inspiration comes from two excerpts in 'Music of the Sirens', edited by Linda Phyllis Austern and Inna Naroditskaya. Through fluid, water-like interactions, users will feel themselves sinking deeper, ensnared by the siren’s call.

Duration:

3 weeks, February 2025

Type:

Solo Project

Tools:

HTML | CSS | javascript | Figma | MediaPipe

Role:

Interaction Design | Front End Programming | typography | UI/UX Design

Live Project:

hhttttppss::////ssiirreenn..ttaanniisshhaasshhaaww..ccoomm//
Context

assignment: visualise a piece of text using nothing but black & white typography.

So I thought - how might I use constraints as a source for design creativity and innovation?

So I thought - how might I use constraints as a source for design creativity and innovation?

excerpt one
The first excerpt serves as a cautionary tale about the siren’s ever-growing hold over the senses, ultimately leading to a man's downfall. Despite the clear warning signs, he is unable to escape his fate.
excerpt two
This website seeks to interpret the poem’s themes and bring them to life visually. The second excerpt focuses on recognizing warning signs and understanding how to identify sirens more effectively which shows up in the end.
reference → design
Distortions, ripples, and waves led me to explore concrete poetry in a digital format, emphasizing fluid forms and overlapping layers of curved elements. Spiral text, undulating ripples, and wave-like patterns shape the visual language of this project.
reference → type
I was moved by flux— dynamic, flowing graphics, primarily in black and white typographic explorations. These references served as a foundation for representing water, movement, and fluidity through typography.
Approach

goal: the visual effects of water must enhance the reading rather than overshadow the text.

I focused on exploring diverse interaction experiences and immersive states by examining how context is transferred and transformed across them.

I focused on exploring diverse interaction experiences and immersive states by examining how context is transferred and transformed across them.

the initial three approaches
the spiral wave exploration
design system + readability considerations
chosen direction
To capture the essence of water and lure without sacrificing legibility, I realised that the visual effect must enhance rather than overshadow the text.
Thus, gentle horizontal waves flowing across the screen striked as the perfect balance—simple, fluid, and engaging. This experience was also easily translatable into a mobile version which made it a win-win situation.
Solution

narrative: reaching out your hand to progress further in the poem mirrors life itself, much like sailors who, in their final moments, stretched their hands toward the sea, entranced by the sirens’ beguiling allure.

For taking the project from a design file to a fully developed web interaction, I incorporated MediaPipe Hands to sense the presence of the hand which is interpreted as intention.

For taking the project from a design file to a fully developed web interaction, I incorporated MediaPipe Hands to sense the presence of the hand which is interpreted as intention.

Final responsive designs
ASCII generated background
Website walkthrough
reflection

I wanted to emulate the way sailors often reach out their hand towards the siren and finally, jump into the water with their hands extended and meet their deaths.

When you reach out your hand, the poem page auto scrolls and thus, the waves flow in by themselves, metaphorically signifying you losing your control and sinking deeper within the water.

Although I am content with my first attempt at creating a poetic website and also integrating computer vision, the accessibility and intuitiveness of the experience can be improved.

The School for Poetic Computation, The HTML Review and Codrops were an extensive source of inspiration and the driving force behind making this project exist.

The School for Poetic Computation, The HTML Review and Codrops were an extensive source of inspiration and the driving force behind making this project exist.