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
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.