Not a website. A mental space. The user doesn't browse — they inhabit. Every interaction should feel like standing in a field after the mela has packed up.
One Design Rule: Life and death are not opposites — they're opening acts. The site should never resolve the question. No hero section, no CTA, no completion state. The user is always in the middle.
maut ka mela
band hoke,
ikhtala hogaya hai.
Maidaan pe ab,
mrityu ko sankoch
aur zindagi ko santushti
puraskaar mei mili hai.
ikaagrit, mai apna dhyaan karta hu.
sochta, mai aaj ka schedule hu.
maut ke mele se
zindagi ka rangmanch
chheen liya gaya hai.
aakarshit, naya event karta hai.
aaj maidan mein
sammelan hai.
aaj mela apna kaaryakram
sampradaanit karta hai.
aajao aajao
zindagi ki jeet hui hai.
maut ki chunauti,
ab baandhti nahi hai insaniyat ko.
achanak arthi ka
bhayanak bhaav
chhuppi chetavni nahi,
dhaaredaar dhokha nahi,
ess elaaj ka faaidemand
ghaav hai.
Ik ijaazat,
Jabardast jokhim,
Kalpanaik kathputliya,
Laashein Maine Nahi
Option Qyu Reh Sakti.
Tab Ulti,
Vyakti-vyaktiya War,
Xahir Yun Zehar
talaashti hai.
Agar zindagi aur maut,
dono,
ek doosre ke opening acts hai,
toh uske aage kya hai?
uske aage kaha jaaenge?
kya uske aage soch daiyra bhi chun paaegi?
na prashna
na uttar
na jeevan
na naash
na andhkaar
aur na hi ugta savera,
ye sab hai hi kal ka jhamela.
mai baitha hu aaj,
aur pichli baar,
dono mei stag.
ek roshni ki kiran ka intezaar kar,
jeeti hui zindagi ke cfl ko
sooraj maanlena,
kab jaanleva ban lega.
Tab na hi samay
ki zaroorat,
aur na hi gaermojoodgi.
Par kamal ka rangmanch hai,
zindagi aur maut ki jugalbandi
jeevan aur vinaash ka judna,
vikaas aur maut ka shaamil hona
aaj ke kaaryakram mei likha hai,
kya aaj zindagi ki hi jeet hui hai?
| Poem Element | UI Implementation |
|---|---|
| The fair that has ended (mela band hoke) | Entry state: near-silence. A field. Distant sounds fading. Sparse text appearing slowly. |
| The arena (maidan) — today's schedule | Main space: field-like canvas where cognitive events appear. Not a calendar — a mela programme board. |
| The acrostic corridor (A–Z) | Navigable section built on the alphabetical poem-within-the-poem. Each letter is a door. |
| Stag (between states) | Liminal zone — a held breath between two moments. Pause state: screen dims, single line visible, time slows. |
| Kiran (the thread) | "ek roshni ki kiran" — a daily reflection prompt. One question. One answer. Stored. |
State: Empty ground, programme board, slow text reveal
Interactions:
- Repel Physics: Text physically moves away from cursor (spring-based, not linear)
- Magnetic Titles: Event names pull toward cursor when within 100px
- 3D Programme Board: Tilts based on mouse position (perspective transform)
- Particle Field: 60 ambient dust particles, glow when cursor approaches, thin amber threads reach toward cursor
- Custom Cursor: Amber dot with lagging ghost ring (300ms delay)
- Text Arrival: Lines appear one-by-one with 800ms stagger, opacity + slight Y shift
Visual: #0d0d0b background, amber #d4a574 for life-lines, cool blue-grey #6b7b8d for maut-lines
State: 26 letters as doors, each opens a reflective space
Interactions:
- Letter Grid: Each letter is a "door" that opens on click
- Hover Effect: Letter glows, shows preview of the poem line
- Door Animation: Click triggers a "door opening" animation (scale + opacity + slide)
- AI Conversation: Each letter seeds an Anthropic conversation with that line
- Write-in Space: User can write their response, AI responds
- Progress Tracking: Letters visited get a subtle amber mark
Letter-to-line mapping:
| Letter | Poem Line | Reflective Question |
|---|---|---|
| I | "Ik ijaazat" | What permission are you waiting for? |
| J | "Jabardast jokhim" | What risk feels necessary today? |
| K | "Kalpanaik kathputliya" | What puppet are you still holding? |
| L | "Laashein Maine Nahi" | What are you refusing to bury? |
| O | "Option Qyu Reh Sakti" | What choice are you avoiding? |
| T | "Tab Ulti" | When did you last reverse course? |
| V | "Vyakti-vyaktiya War" | Who are you fighting that is you? |
| X | "Xahir Yun Zehar" | What poison have you named medicine? |
Other letters: generate reflective questions in the same tone.
State: Non-navigable, arrives via inactivity or deliberate gesture
Interactions:
- Inactivity Trigger: 25 seconds of no mouse movement → fade to Stag
- Deliberate Entry: Long-press (2s) or held spacebar
- Text Arrival: Words appear one at a time, breathlessly slow (1.2s per word)
- No Next Button: User must move mouse or press key to leave
- Visual: Screen dims 40%, single line visible, time feels suspended
- Exit: Gentle fade back to previous state, no jarring transition
Lines for Stag:
- "mai baitha hu aaj, aur pichli baar, dono mei stag."
- "ek roshni ki kiran ka intezaar kar"
- "jeeti hui zindagi ke cfl ko sooraj maanlena"
State: Single beam, one question, one answer
Interactions:
- Rotating Questions: Cycles through 4 questions from the poem
- Answer Preservation: User types, answer saves to localStorage/Supabase
- Visual: Single amber line on dark field, text area appears on focus
- Transition: After answering, fades to new question
- Archive: Past answers accessible via subtle timeline
Questions:
- "agar zindagi aur maut dono opening acts hai, toh uske aage kya hai?"
- "kya uske aage soch daiyra bhi chun paaegi?"
- "kab jaanleva ban lega?"
- "kya aaj zindagi ki hi jeet hui hai?"
State: Spatial archive, scattered stalls, explorable
Interactions:
- Spatial Layout: Journal entries as "stalls" scattered across a canvas
- Drag to Explore: User drags the canvas to find stalls
- Stall Hover: Radial glow follows cursor position
- Entry Animation: Stalls appear with slow fade + scale
- Click to Enter: Opens full journal entry with poem context
- Time-based: Older stalls are dimmer, newer ones brighter
- Repel Physics: Text moves away from cursor (spring-based)
- Magnetic Pull: Elements attract toward cursor within range
- 3D Tilt: Programme board tilts based on mouse position
- Radial Glow: Follows cursor on journal stalls
- Particle Threads: Amber threads reach toward cursor
- Custom Cursor: Amber dot + lagging ghost ring
- Slow Arrival: Lines appear one-by-one with stagger
- Breath Animation: Opacity + Y shift, not instant
- Variable Weight: Typography "breathes" with weight changes
- Hinglish Base: Roman script for Hindi, monospace for introspective, serif for declarative
- No Instant Changes: Everything lingers
- Scroll = Breath: Hold, then move
- No Carousels: No snappy animations
- Inactivity = Stag: Stillness triggers liminal state
| Token | Value | Usage |
|---|---|---|
--bg-primary |
#0d0d0b |
Main background |
--bg-secondary |
#1a1a17 |
Cards, panels |
--amber |
#d4a574 |
Life-lines, interactive elements |
--amber-dim |
#a07850 |
Hover states, secondary accents |
--blue-grey |
#6b7b8d |
Death-lines, maut elements |
--blue-grey-dim |
#4a5a6a |
Subtle maut accents |
--text-primary |
#e8e0d4 |
Main text |
--text-secondary |
#9a9088 |
Secondary text |
--text-dim |
#5a5550 |
Tertiary, disabled |
| Style | Font | Usage |
|---|---|---|
| Introspective | JetBrains Mono (monospace) | Poem lines, reflective text |
| Declarative | Playfair Display (serif) | Titles, programme board |
| UI | Inter (sans-serif) | Navigation, labels |
- Text arrives slowly — never instant
- Scroll is replaced by breath: hold, then move
- No carousels, no snappy animations
- Everything lingers
| Layer | Tool | Purpose |
|---|---|---|
| Framework | Next.js 14+ (App Router) | Routing, SSR |
| Language | TypeScript | Type safety |
| Styling | Tailwind CSS | Custom dark-first palette |
| Animation | Framer Motion | Breath transitions, spring physics |
| Audio | Tone.js | Ambient soundscape |
| AI | Anthropic SDK | Journal prompts, Akshar conversations |
| Storage | localStorage → Supabase | Journal persistence |
| Deployment | Vercel | Hosting |
src/
app/
layout.tsx
page.tsx
globals.css
components/
cursor/
CustomCursor.tsx
particles/
ParticleField.tsx
maidan/
ProgrammeBoard.tsx
RepelText.tsx
MagneticTitle.tsx
akshar/
LetterGrid.tsx
LetterDoor.tsx
stag/
StagScreen.tsx
InactivityMonitor.tsx
kiran/
KiranReflection.tsx
mela/
JournalStalls.tsx
StallCard.tsx
audio/
AmbientSoundscape.tsx
navigation/
BreathNav.tsx
lib/
poem-data.ts
physics.ts
storage.ts
audio.ts
hooks/
useMousePosition.ts
useInactivity.ts
useRepelPhysics.ts
- Tracks cursor position globally
- Returns
{ x, y }updated on mousemove - Throttle to 60fps
- Tracks time since last mouse/keyboard event
- Returns
{ isActive, inactiveTime } - Triggers callback after threshold (25s for Stag)
- Takes element ref and mouse position
- Returns transform style based on spring physics
- Repel radius: 200px, strength: 50px max displacement
export const poemLines = [
"maut ka mela band hoke, ikhtala hogaya hai.",
"Maidaan pe ab, mrityu ko sankoch aur zindagi ko santushti puraskaar mei mili hai.",
"ikaagrit, mai apna dhyaan karta hu.",
"sochta, mai aaj ka schedule hu.",
"maut ke mele se zindagi ka rangmanch chheen liya gaya hai.",
"aakarshit, naya event karta hai.",
"aaj maidan mein sammelan hai.",
"aaj mela apna kaaryakram sampradaanit karta hai.",
"aajao aajao zindagi ki jeet hui hai.",
"maut ki chunauti, ab baandhti nahi hai insaniyat ko.",
"achanak arthi ka bhayanak bhaav chhuppi chetavni nahi, dhaaredaar dhokha nahi, ess elaaj ka faaidamand ghaav hai.",
"Ik ijaazat,",
"Jabardast jokhim,",
"Kalpanaik kathputliya,",
"Laashein Maine Nahi",
"Option Qyu Reh Sakti.",
"Tab Ulti,",
"Vyakti-vyaktiya War,",
"Xahir Yun Zehar talaashti hai.",
"Agar zindagi aur maut, dono, ek doosre ke opening acts hai, toh uske aage kya hai?",
"uske aage kaha jaaenge?",
"kya uske aage soch daiyra bhi chun paaegi?",
"na prashna, na uttar, na jeevan, na naash, na andhkaar, aur na hi ugta savera, ye sab hai hi kal ka jhamela.",
"mai baitha hu aaj, aur pichli baar, dono mei stag.",
"ek roshni ki kiran ka intezaar kar, jeeti hui zindagi ke cfl ko sooraj maanlena, kab jaanleva ban lega.",
"Tab na hi samay ki zaroorat, aur na hi gaermojoodgi.",
"Par kamal ka rangmanch hai, zindagi aur maut ki jugalbandi jeevan aur vinaash ka judna, vikaas aur maut ka shaamil hona aaj ke kaaryakram mei likha hai, kya aaj zindagi ki hi jeet hui hai?",
];- Ambient field sounds: wind, distant voices, mela winding down
- User-toggled (default: off)
- Silence is a valid state — design for it
- Low drone that shifts between amber/blue-grey tones based on section
- No music — only atmosphere
- No traditional nav bar
- Section transitions via breath: hold, then move
- Scroll replaced by deliberate movement
- Inactivity triggers Stag from any section
- Navigation feels like walking through a field, not clicking links
- Project setup + global styles + custom cursor
- Particle field + mouse tracking hooks
- Maidan (home) with repel physics + programme board
- Akshar corridor with letter doors
- Stag liminal state + inactivity monitor
- Kiran reflection component
- Mela journal with spatial stalls
- Audio layer + navigation transitions
Paste this into OpenCode to build the full experience:
Build a Next.js (App Router) + TypeScript + Tailwind + Framer Motion + Tone.js application called "maut ka mela". This is NOT a poetry display site — it's a cognitive environment. The user inhabits mental states, not pages.
Design Rules:
- Background: #0d0d0b (near-black)
- Life-lines: amber #d4a574
- Death-lines: cool blue-grey #6b7b8d
- No white backgrounds, no hero sections, no CTAs, no completion states
- Text arrives slowly — never instant. Everything lingers.
- Custom cursor: amber dot with lagging ghost ring (300ms delay)
- Hinglish base language, Roman script for Hindi
- Monospace for introspective lines, serif for declarative ones
Tech Stack:
- Next.js 14+ (App Router, src directory)
- TypeScript
- Tailwind CSS (custom dark-first palette)
- Framer Motion (breath-like transitions, spring physics)
- Tone.js (ambient audio layer)
- localStorage for journal persistence
Build Priority:
1. Project setup + global styles + custom cursor
2. Particle field + mouse tracking hooks
3. Maidan (home) with repel physics + programme board
4. Akshar corridor with letter doors
5. Stag liminal state + inactivity monitor
6. Kiran reflection component
7. Mela journal with spatial stalls
8. Audio layer + navigation transitions
One Design Rule: Life and death are not opposites — they're opening acts. The site should never resolve the question. No hero section, no CTA, no completion state. The user is always in the middle.
- The Stag screen is the hardest to build right — it shouldn't be a "page" at all. Consider triggering it via inactivity timeout or a deliberate gesture (long press, held spacebar). The challenge is making stillness feel intentional, not broken.
- The Akshar corridor (A–Z section) is the most unique feature. Each letter could open an AI conversation seeded with that line from the poem.
- For the visual palette — the poem lives in near-dark. Start with
#0d0d0bbackground and build amber/warm-grey upward from there. Nothing should feel like a webpage. It should feel like standing in a field after everyone has left.