PORTFOLIO

HIS HOLINESS WILL SEE YOU NOW

In need of forgiveness? Has the crushing weight of original sin gotcha feeling down? Well, cross yourself and step into the confession booth, HIS HOLINESS WILL SEE YOU NOW.

OpenAI GPT-4.1_nano Convex Vite React TypeScript Tailwind Three.js React Three Fiber Workers


  • Intro
  • Confession
  • Venial Sins
  • Mortal Sins
  • Absolution
1/5
1/5
Slide 1 of 5
Visit Site

OVERVIEW

Enter a cathedral‑dark interface where a floating, slightly bewildered Pope hears your confession. Type your own or pick from curated venial / mortal sins. He replies with pastoral warmth and implores penitent users to see beauty in all things.

EXPERIENCE

  • PRIVATE CONFESSIONAL: Each visitor gets a personal, anonymous confessional with the Pope.
  • TWO WAYS TO CONFESS: Free‑type or choose from themed lists of confessions to set tone. The Pope is open-minded.
  • TELLING FEEDBACK: The Pope will never judge you but he will tell you when you're doing something wrong.
  • RITUAL ABSOLUTION: Click “ABSOLVE” to cleanse yourself of sin and achieve penance. This clears the chat / history.
  • EMBODIED PRESENCE: Spin the 3D Pope too hard and he gets dizzy — he’ll mention it.

HOW IT WORKS

  • FRONTEND: React 19 + TypeScript + Vite, styled with Tailwind.
  • 3D: The 3D Pope was built using Blender and is rendered with Three.js via React Three Fiber and Drei.
  • BACKEND: Convex keeps a per‑user message store for the real-time conversation. Each message triggers a serverless action that calls the OpenAI Responses API, then streams the reply back into your session.
  • Persona Constraints: Server‑enforced prompts keep a pastoral voice, a pre‑approved Latin phrase list, and occasional peculiarities that surface sparingly.
  • Embodied Interaction: Camera rotation events from the 3D scene can post system messages (e.g. dizziness) so the character feels physically present.

WHAT MAKES IT DIFFERENT

  • Coherent Character, Not a Generic Chatbot: Server‑side guardrails enforce tone, ritual UX design, and persona constraints.
  • Ritual UX Design: Welcome → Confession → Absolution creates an intentional rhythm true to the actual Rite of Confession.
  • Multi‑Modal Feedback Loop: 3D motion affects the narrative and the narrative affects user interaction.
  • Surreal Sincerity: Reverence and absurdity coexist without breaking character.

MY ROLE

  • Concept, interaction design, and narrative constraints
  • Frontend engineering (React, R3F), 3D integration, and ritual UX design
  • Backend functions, real‑time data model, prompt engineering & sanitization
  • Performance tuning and type‑safe refactors across the codebase

OUTCOME

An intuitive, ritualized, shareable performance on the web. Sincere, odd, and carefully engineered for guardrails, speed, and polish.

TECH STACK

  • React 19, TypeScript, Vite, Tailwind CSS
  • Three.js + React Three Fiber + Drei
  • Convex (Real-Time DB / Serverless Functions / Anonymous Auth)
  • OpenAI Responses API
  • Cloudflare Workers