Protocol Lethe

A Decentralized Emotional Metabolism System

This project demonstrates my ability to combine philosophical frameworks, advanced graphics programming, and interactive system design into a coherent, real-time web experience.

From Transaction to Transcendence.

1. Project Overview

Protocol Lethe is a web-based interactive ritual that visualizes emotions as energy flows.
Inspired by Taoist philosophy, the project treats emotional stagnation as “stagnant Qi” and transforms it into a real-time, shader-driven fluid system.

Users interact with water and fire as symbolic protocols to either release or sever emotional states—turning an internal psychological process into a tangible digital ritual.

2. Rationale

Modern digital interactions are transactional, but human emotions are accumulative.


Unprocessed emotions behave like trapped energy—eventually becoming toxic.

This project asks:

What if emotional release could be treated as a system, not a confession?
What if the browser itself became a ritual space?

By framing emotion as data with flow, resistance, and entropy, Protocol Lethe explores how code can mediate psychological states without language.

3. Concept & Worldbuilding

Emotional Metabolism Model

Emotions are treated as energy units moving through a system:

When flowing → cleansing

  1. When blocked → pressure

  2. When severed → irreversible transformation

🌊 Water — Release

  • Purpose: Let heavy emotions flow out

  • Interaction: Meditative cursor movement

  • Metaphor: “Proof of Breath”

  • Visual Logic: Smooth, continuous fluid dynamics

Two Ritual Protocols

🔥 Fire — Severance

  • Purpose: Cut off toxic attachments

  • Interaction: Sharp, decisive gestures

  • Metaphor: “Digital Cremation”

  • Visual Logic: Volatile distortion, burning displacement

4. Interaction Design

Users interact directly with a reactive liquid surface

  • Cursor movement acts as:

    • Force input

    • Emotional intention

  • The surface responds with:

    • Flow

    • Turbulence

    • Dissolution

There is no textual instruction—the system is learned through bodily interaction.

5. Technical Implementation

Graphics & Simulation

  • Custom GLSL shaders

  • Fluid-like motion via:

    • Noise fields

    • Velocity-based distortion

    • Light refraction effects

Frontend & 3D Stack

  • React Three Fiber (R3F)

  • Three.js

  • Integrated in a Next.js environment

Performance Considerations

  • Optimized GPU draw calls

  • Frame-stable shader loops

  • Real-time interaction at browser scale

6. Skills Leveraged

Graphics Programming

  • Advanced GLSL

  • Procedural noise

  • Shader-based interaction logic

  1. WebGL / 3D Web

    • React Three Fiber

    • Three.js scene orchestration

  2. Creative Systems Thinking

    • Emotion → Data → Visual State mapping

  3. Performance Optimization

    • Real-time rendering constraints in browser

7. Philosophy

Taoist Influence

“The highest good is like water.”
（上善若水）

  • Water adapts to form

  • Emotion adapts to interface

  • Code becomes the vessel

Technological View

  • The browser canvas is not a screen

  • It is a dynamic ritual interface

  • Interaction replaces narration

8. Outcome & Reflection

Successfully translated intangible anxiety into a tangible, interactive system

  1. Demonstrated how shaders can encode psychological metaphors

  2. Positioned creative coding as a form of digital ritual design, not just visualization

Previous

The Eye Clock
Next

Tail Nebula