Portfolio_SystemV.2026
Hello
000
←~/abhiraman/work/spandana-puppala
Interaktives Erlebnis · Portfolio2026

Offizielles Portfolio von Spandana Puppala

Ein interaktives Portfolio für die Innenarchitektin und Carnatic-Sängerin Spandana Puppala, gebaut wie ein Instrument: Die Seite ist eine schwingende Platte aus Sand, und wer scrollt, spielt die Oktave.

kunde
Spandana Puppala
meine rolle
Konzept, Design & Entwicklung
jahr
2026
status
in arbeit
gebaut mitNextJSTypeScriptWebGL2Web AudioGSAPLenisTailwindCSS

01 die aufgabe

Spandana ist Innenarchitektin und Carnatic-Sängerin. Die Website ihres Studios verkauft das Geschäft; diese sollte die Person zeigen und ihre Musik erlebbar machen, statt nur darüber zu erzählen.

02 was ich gebaut habe

Hinter der Seite liegt eine Chladni-Platte: 65.536 Sandkörner, auf der GPU simuliert, die sich in denselben Mustern ordnen wie echter Sand auf einer schwingenden Platte. Die acht Kapitel sind die acht Töne der Oktave, Sa bis zum oberen Sa: Beim Scrollen stimmt sich die Platte um, und jedes Kapitel erscheint mit seinem eigenen Ton. Besucher wählen, ob sie mit Ton eintreten, sehen zu, wie der Sand ihren Namen schreibt, dann wird die Platte angeschlagen und die Seite beginnt. Die gesamte Musik entsteht im Browser, mit einer eigens für die Website geschriebenen Carnatic-Musik-Engine.

03 funktionen

  • 0165.536 Sandkörner, auf der GPU mit WebGL2 simuliert, die echte Chladni-Muster bilden
  • 02Acht Kapitel, gestimmt auf die Oktave: Scrollen stimmt die Platte um und spielt den Ton jedes Kapitels
  • 03Ein Auftakt, der nach Ton fragt und dann den Sand ihren Namen schreiben lässt, bevor die Platte angeschlagen wird
  • 04Eine eigene Carnatic-Musik-Engine: neun Ragas, acht Talas, Gamakas und reine Shruti-Stimmung über einem Tambura-Bordun
  • 05Sechs Instrumente, synthetisiert mit Web Audio: Veena, Venu, Violine, Mandoline, Nadaswaram und Gitarre
  • 06Mitschwingende Resonanz: Beim Hovern über einen Link sammelt sich der Sand zu einem Ring, und ein leiser Oberton erklingt
  • 07Gedrückt halten, um die Platte zu streichen; der Cursor verstreut den Sand wie eine Fingerspitze
  • 08Eine Saite am Rand, die mit jedem Kapitel gezupft wird, Ton, Frequenz und Plattenmodus zeigt und zwischen den Kapiteln springt
  • 09Eine 404-Seite, die eine verirrte Tonleiter aus falschen Noten über unruhigem Sand spielt
  • 10Passt sich jedem Gerät an: Auf langsameren GPUs sinken Auflösung, Körnerzahl und Bildrate, und ein Lese-Schleier hält den Text lesbar

04 galerie

// bilder_folgen

Bildmaterial zu diesem Projekt folgt in Kürze.