In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
https://dein-kiez.framer.website/
Dein Kiez
Eine Intervention über Gentrifizierung – am Beispiel Berlin-Neukölln
Gentrifizierung wird meist in Zahlen verhandelt und bleibt dadurch abstrakt – sie scheint immer nur die anderen zu betreffen. „Dein Kiez„ hebt diese Distanz auf. Hauptmedium ist eine Scrollytelling-Website, die gezielt jene anspricht, die selbst wegen Flair, Nachbarschaft und günstiger Miete zugezogen sind und sich für unbeteiligt halten. Konsequent per „du“ macht sie sie vom Beobachter zum Beteiligten und verbindet Datenrecherche, reale Fälle und Rechtsmechanismen zu einer Erzählung, die in einen Handlungsaufruf mündet. Ergänzt wird sie durch ein fingiertes, siezendes Immobilien-Schreiben zum Weiterverteilen und eine Augmented-Reality-Anwendung, die an einem Wohnhaus von 1979 bis 2035 zeigt, was der Zielgruppe selbst droht, wenn sie nicht handelt: wie Aufwertung die Bewohner:innen nacheinander verdrängt – bis zuletzt sie an der Reihe ist. Neukölln steht exemplarisch für einen Prozess, der viele Städte prägt.
gefälschte Umwandlung-Offerte mit QR-Code zur AR-Anwendung
Aufbauvarianten
Layoutvarianten
Inhaltsskizzen
Before/After Slider
Der Before/After Slider legt zwei Inhalte exakt übereinander – in deinem Fall zwei 3D-Modelle – und trennt sie durch eine verschiebbare vertikale Linie. Das Before-Modell liegt immer vollständig sichtbar im Hintergrund. Das After-Modell darüber wird mit einer CSS-Maske (`clipPath`) abgeschnitten, sodass nur der Teil rechts der Trennlinie sichtbar ist. Verschiebt der Nutzer den Handle nach links, wächst der sichtbare Bereich des After-Modells – nach rechts schrumpft er wieder.
Die Interaktion funktioniert so: Sobald der Nutzer den Handle anfasst, wird jede Mausbewegung abgefangen und die horizontale Position in einen Prozentwert umgerechnet. Dieser Wert steuert gleichzeitig, wo die Linie gezeichnet wird und wie weit die Maske des After-Inhalts reicht. Alles passiert in Echtzeit ohne Verzögerung.
Der gesamte Component ist als Section aufgebaut, die exakt einen Bildschirm hoch ist (`100dvh`). Linie und Handle sind relativ zu dieser Section positioniert – nicht zum Browser-Fenster – sodass alles korrekt scrollt und sich auf jeder Bildschirmgröße richtig verhält.
Test: Struktur hinter der Gentrifizierung (Verworfen)
Recherche mit GPT-Agent
Gentrifizierung im Schillerkiez: Wie steigende Mieten einen Neuköllner Kiez verwandeln
Cafés schließen, alteingesessene Bewohner:innen müssen weg – der Berliner Schillerkiez steht exemplarisch für die Verdrängung durch den Mietenwahnsinn.
Kiezcafé muss nach 14 Jahren schließen
Das Café „Pappelreihe„ in der Kienitzer Straße muss bald schließen. Betreiber Tamilarasan Ganeshamoorthy, der das Café 2010 eröffnete, soll nach einem Eigentümerwechsel 130 Prozent mehr Miete zahlen – plus vier Prozent Staffelmiete jährlich. Für ihn ist das nicht tragbar: Die Preise lassen sich nicht einfach verdoppeln. Von einst 20 Stammgästen aus dem Kiez kommen heute kaum noch zwei – stattdessen vor allem Touristen. nd-aktuellnd-aktuell
Das „Syndikat“: Leerstand statt Kiezkneipe
Das Ende der linken Kiezkneipe „Syndikat„ in der Weisestraße sorgte 2020 für Schlagzeilen: Über 2.200 Polizist:innen setzten die Räumung durch. Heute, fast vier Jahre später, steht der Laden immer noch leer – Schimmel, Graffiti, kein Nachfolger. Das Kollektiv hat neue Räume gefunden, allerdings nicht mehr im Schillerkiez, sondern in der Nähe des Bahnhofs Neukölln. nd-aktuellnd-aktuell
Wie die Gentrifizierung in Gang kam
Der Auslöser war die Schließung des Flughafens Tempelhof 2008 und die Öffnung des Tempelhofer Felds als Park 2010. Altbauten, die Schillerpromenade mit ihren alten Platanen und die Grünfläche machten den Kiez plötzlich attraktiv für wohlhabende Zuzügler. Zunächst kamen Immobilienfirmen wie Ziegert, die Häuser in Eigentumswohnungen umwandelten – später folgten große Wohnungsunternehmen wie Vonovia und Heimstaden. nd-aktuellnd-aktuell
Zahlen belegen den Wandel
Laut einer Befragung aus dem Jahr 2021 hatten fast die Hälfte der Haushalte im Schillerkiez ein Nettoeinkommen von 2.500 Euro oder mehr – 2015 waren es noch gut 20 Prozent. Gleichzeitig sank der Anteil von Haushalten mit weniger als 1.500 Euro Monatseinkommen von rund 45 auf knapp 20 Prozent. Die Mieten stiegen im selben Zeitraum um durchschnittlich 16 Prozent. nd-aktuell
Milieuschutz reicht nicht
Der gesamte Schillerkiez ist seit 2015 Milieuschutzgebiet – doch der Wandel ließ sich nicht aufhalten. Die migrantische Bevölkerung, die bis etwa 2010 den Kiez prägte, ist weitgehend verschwunden oder unsichtbar geworden. Stadtteilaktivist Gerdi bringt es auf den Punkt: „Günstig leben ist hier nicht mehr.“ nd-aktuellnd-aktuell
Das „Syndikat„: Leerstand statt Kiezkneipe
Das Ende der linken Kiezkneipe „Syndikat“ in der Weisestraße sorgte 2020 für Schlagzeilen: Über 2.200 Polizist:innen setzten die Räumung durch. Heute, fast vier Jahre später, steht der Laden immer noch leer – Schimmel, Graffiti, kein Nachfolger. Das Kollektiv hat neue Räume gefunden, allerdings nicht mehr im Schillerkiez, sondern in der Nähe des Bahnhofs Neukölln.
Kiezcafé muss nach 14 Jahren schließen
Das Café „Pappelreihe„ in der Kienitzer Straße muss bald schließen. Betreiber Tamilarasan Ganeshamoorthy, der das Café 2010 eröffnete, soll nach einem Eigentümerwechsel 130 Prozent mehr Miete zahlen – plus vier Prozent Staffelmiete jährlich. Für ihn ist das nicht tragbar: Die Preise lassen sich nicht einfach verdoppeln. Von einst 20 Stammgästen aus dem Kiez kommen heute kaum noch zwei – stattdessen vor allem Touristen.
Zitate
Zitat 1 — Thiemannstraße, Neukölln, 2018
Ein Bewohner schreibt in einem offenen Brief, nachdem ein dänischer Pensionsfonds seinen Wohnkomplex aufgekauft hat:
„Seit über 40 Jahren lebe ich in der Wohnung. Ich bin hier geboren, aufgewachsen, zur Schule gegangen. Ich habe in der Wohnung meine Einschulung gefeiert. Meinen Schulabschluss. Meinen 18. Geburtstag. [...] Wenn Sie zulassen, dass aus den Wohnungen Eigentumswohnungen werden, dann nehmen Sie vielen Menschen wie meinen Eltern und mir ein Stück ihres Lebens.“
Tagesspiegel
Quelle: Tagesspiegel, Madlen Haarbach, 26.12.2018 tagesspiegel.de/berlin/rentner-furchten-verdrangung-ich-bin-hier-geboren-4617610.html
Zitat 2 — Braunschweiger Straße, Rixdorf/Neukölln, 2025
Anna Schöneberger, Sprecherin einer Hausgemeinschaft, deren Gebäude kernsaniert werden soll — über 30 Mietparteien droht der Verlust ihrer Wohnungen:
„Wenn wir hier rausmüssen, verlieren wir alles.“
Berliner Zeitung
Quelle: Berliner Zeitung, Mai 2025 berliner-zeitung.de/mensch-metropole/wohnungsmangel-neukoelln-mieter-kaempfen-gegen-verdraenung-li.2323358
Zitat 3 — Politische Ebene, Neukölln, 2025
Jochen Biedermann, Bezirksstadtrat für Stadtentwicklung Neukölln:
„Die Sorge um die eigene Wohnung ist für viele Neuköllner:innen inzwischen das Angstthema Nr. 1.“
Berlin
Quelle: Pressemitteilung Bezirksamt Neukölln, 27.01.2025 berlin.de/ba-neukoelln/aktuelles/pressemitteilungen/2025/pressemitteilung.1524691.php
Zitat 4 — Hermannstraße / Schillerkiez, Neukölln, 2012
Anonyme Anwohnerin bei einer Kiezumfrage der Initiative AntiGen, zitiert nach Gespräch an einem Kiosk:
„Die verdammte Miete ist zu hoch!“
Berliner MieterGemeinschaft
Quelle: MieterEcho Nr. 354, Berliner MieterGemeinschaft, Mai 2012 bmgev.de/mieterecho/artikel/die-verdammte-miete-ist-zu-hoch
Zitat 5 — Neu-Tempelhof / Neukölln-Grenze, 2024
Mieterinitiative über landeseigene Wohnungsbaugesellschaft „Stadt und Land“, die 590 Wohnungen saniert und Mieten um bis zu 30% erhöht:
„Wir haben das Gefühl, dass diese alten Mietverträge auf SuL toxisch wirken, und sie uns aufgrund von angestrebter Gewinnmaximierung verdrängen wollen. Uns fehlt die Sicherheit. Wir wissen nicht, wie es weitergeht.“
Berliner MieterGemeinschaft
Quelle: MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024 bmgev.de/mieterecho/artikel/wir-bemerken-die-verzweiflung-vieler-mieter-innen
Zitat 6 — Modernisierungsankündigung, Neukölln, 2022/2023
Dieselbe Mieterinitiative über den Informationsprozess:
„Wir wurden erst im Dezember 2022 mit einem Schreiben informiert. Ende Januar 2023 hatten wir individuelle Modernisierungsankündigungen im Briefkasten, mit Baubeginn bereits vier Monate später. Es blieb ein Monat Zeit, um einen Einspruch zu formulieren.“
Berliner MieterGemeinschaft
Quelle: MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024
Quellen
https://www.ibb.de/de/ueber-uns/publikationen/wohnungsmarktbericht/2025.html?
https://www.statistikportal.de/de/nachhaltigkeit/ergebnisse/ziel-1-keine-armut/mietbelastungsquote?
https://www.immowelt.de/immobilienpreise/berlin-10115/neukolln-12051/nbh2de91302063
https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Neukoelln/?
https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Gropiusstadt/?
https://www.immowelt.de/immobilienpreise/berlin-10115/neukolln-12051/nbh2de91302063
https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Neukoelln/?
https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Gropiusstadt/?
https://www.leftvoice.org/a-left-wing-bar-needs-to-be-open-to-everyone-including-palestinians/
https://taz.de/Wiedereroeffnung-der-Kneipe-Syndikat/!5909955/
https://taz.de/Raeumung-der-Kneipe-Syndikat-in-Berlin/!5705833/
https://www.wahrschauer.net/politik-2/867-kneipenkollektiv-syndikat-nach-35-jahren-geraeumt
https://www.berliner-mieterverein.de/magazin/online/mm1010/101012a.htm
Bilderquellen
Tagesspiegel, Madlen Haarbach, 26.12.2018 tagesspiegel.de/berlin/rentner-furchten-verdrangung-ich-bin-hier-geboren-4617610.html
Berliner Zeitung, Mai 2025 berliner-zeitung.de/mensch-metropole/wohnungsmangel-neukoelln-mieter-kaempfen-gegen-verdraenung-li.2323358
Pressemitteilung Bezirksamt Neukölln, 27.01.2025 berlin.de/ba-neukoelln/aktuelles/pressemitteilungen/2025/pressemitteilung.1524691.php
MieterEcho Nr. 354, Berliner MieterGemeinschaft, Mai 2012 bmgev.de/mieterecho/artikel/die-verdammte-miete-ist-zu-hoch
MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024 bmgev.de/mieterecho/artikel/wir-bemerken-die-verzweiflung-vieler-mieter-innen
MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024
https://www.berliner-mieterverein.de/magazin/online/mm1010/101012a.htm
(1. Variante)
Erstellt per Text-Prompt mit Meshy.ai. Bild bearbeitung zum sanierten Gebäude mit Chat GPT. Saniertes 3D-Model erstellt per Bild-Prompt mit Meshy.ai.
Text-Prompt:
Ultra-detailed photorealistic modular urban brick apartment building, 3-story narrow townhouse, early 1900s industrial American architecture. Red-orange weathered brick facade with subtle color variation, decorative brick cornice along the roofline, flat roof with raised parapet walls. Large rectangular wooden-framed windows with aged glass and slightly worn paint. Ground floor features a single brown wooden entrance door with concrete steps and basement ventilation grates.
On the right side of the second floor is a black steel fire escape balcony with metal railing and diagonal support braces. Black utility pipes run vertically along the left facade, connected with bends and brackets. Visible electrical conduits and small wall fixtures add realism. Slight dirt accumulation, weathering, chipped bricks, faded mortar, and urban wear. Concrete foundation with subtle discoloration.
Realistic proportions, game-ready environment asset, modular architecture, clean topology, physically based rendering (PBR), high-resolution textures, photogrammetry quality, centered object, isolated on transparent background, no surrounding environment, highly detailed architectural asset suitable for Unreal Engine and Unity.
Für Korrekturen negativ Prompt:
modern architecture, balconies on every floor, people, cars, vegetation, graffiti, signs, text, neon lights, broken geometry, low poly, cartoon, anime, fantasy, curved walls, colorful facade, glass skyscraper, interior, roof equipment, excessive damage, debris, unrealistic proportions, duplicate windows, blurry textures
Meshy.ai Einstellungen:
Style: Realistic
Topology: Quad / Clean
PBR: Enabled
Texture Resolution: 4K
Geometry Detail: High
Symmetry: Off
Keep Original Shape: High
Object Type: Building / Architecture Asset
Text-Prompt für die Bilderstellung des sanierten Gebäudes:
Transform the reference building into a modern renovated version while preserving its original architecture, proportions, and recognizable identity. Keep the exact footprint, width, height, three-story structure, window layout, roof shape, decorative cornice, facade composition, balcony position, entrance location, and all visible utility pipes so that it is clearly the same building after renovation rather than a completely new design. Replace the old red brick facade with clean white painted brick while maintaining the original brick texture and masonry details. Install modern black aluminum window frames with large clear glass, replace the old wooden entrance door with a minimalist matte black door, and redesign the existing balcony with a sleek black powder-coated steel railing while keeping its original dimensions and position. Restore and modernize all exterior utility pipes using clean galvanized metal with neat brackets and realistic connections, preserving their routing along the facade. Clean and restore the decorative cornice instead of simplifying or removing it, add subtle concrete window sills and architectural trim, and keep the flat roof with its parapet exactly as in the original building. Preserve every window position, opening, proportion, and structural detail so the renovation feels authentic. The overall design should resemble a renovated industrial townhouse in New York or Brooklyn, combining historic architecture with contemporary materials and craftsmanship. Use realistic white painted brick, black aluminum frames, matte black steel, light concrete accents, galvanized metal pipes, and subtle weathering with high-quality PBR materials. The result should be a photorealistic AAA-quality architectural asset suitable for Unreal Engine 5, featuring ultra-detailed textures, clean game-ready geometry, realistic lighting, accurate proportions, and a centered isolated presentation. Do not redesign the architecture, do not change the number of floors, building dimensions, roof shape, window placement, balcony location, cornice design, or pipe layout. The final result should immediately be recognizable as the original building after a high-end modern renovation rather than a completely different building. Avoid generating modern skyscraper elements, additional balconies, curved facades, glass curtain walls, extra floors, missing architectural details, graffiti, vegetation covering the facade, excessive damage, fantasy architecture, cartoon style, low-poly geometry, distorted proportions, asymmetrical windows, or unrealistic materials.
Erstellt per Bild-Prompt mit Meshy.ai. Bilder aus dem Internet, zum Teil erstellt/bearbeitet mit Firefly und/oder Chat GPT. Verbesserungen der 3D-Modelle mit Blender.
Text-Prompt für Firefly, zur Erstellung des Bildes der alten Wohnung, ausgehend vom Meshy-3D-Model der modernen Wohnung:
Transform the reference apartment into an older pre-gentrification version while preserving its original floor plan, room layout, wall positions, window locations, door openings, ceiling height, and overall proportions. The apartment should clearly be the same home before renovation, showing decades of wear and modest living conditions rather than a completely different design. Replace the modern finishes with aged materials typical of a working-class apartment from the late 1970s to early 1990s. Install worn parquet and faded vinyl flooring with visible scratches, discoloration, and repaired sections. Replace the modern kitchen with an outdated kitchen featuring old wooden cabinets, laminate countertops, an aged white refrigerator, a small gas stove, stained sink, and worn appliances. Transform the modern bathroom into a small bathroom with old ceramic wall tiles, a simple sink, an older toilet, a bathtub with a shower curtain, faded grout, and signs of long-term use. Replace the contemporary furniture with inexpensive vintage furniture, including a wooden bed, an old dresser, open bookshelves, a CRT television, a cassette player or stereo, mismatched dining chairs, a simple dining table, an old fabric sofa, and second-hand storage furniture. Cover the walls with faded floral wallpaper showing peeling corners, discoloration, water stains, and minor cracks. Replace the clean lighting with warm incandescent ceiling lamps and older wall fixtures. Add subtle clutter such as books, VHS tapes, magazines, shoes near the entrance, hanging coats, small potted plants, kitchen utensils, dishes, and everyday household objects to create the feeling of a lived-in apartment. Keep the balcony in the same position but replace its modern appearance with an older painted metal railing, weathered concrete flooring, and simple flower pots. Preserve every window, every wall, every doorway, and every structural element exactly as in the original apartment so the result is immediately recognizable as the same apartment before modernization. Use realistic aged wood, worn wallpaper, faded paint, old ceramic tiles, scratched furniture, dusty textiles, and subtle weathering with high-quality PBR materials. The final result should resemble a modest lower-income urban apartment before renovation, conveying authenticity through age, wear, and everyday use rather than abandonment or extreme decay. The apartment should remain clean and inhabited, not derelict. Render the scene as a photorealistic AAA-quality architectural visualization with ultra-detailed textures, physically based rendering (PBR), realistic natural lighting, clean geometry, and a high-quality game-ready environment suitable for Unreal Engine 5. Avoid changing the architecture, room sizes, floor plan, window placement, balcony position, or structural design. Do not create a ruined, abandoned, post-apocalyptic, dirty, mold-infested, or vandalized apartment. Avoid modern furniture, luxury finishes, minimalist interiors, smart home technology, contemporary decoration, glossy materials, unrealistic damage, distorted proportions, or redesigned architecture.
Vorgehensweise:
Ausgangspunkt war das inhaltliche Zielbild: Das Wohngebäude aus der Website, das entlang einer Zeitachse von 1979 bis 2035 zwischen Original- und saniertem Zustand überblendet, während die Bewohner:innen sukzessive verschwinden.
Als Grundlage verwendete ich zwei GLB-Modelle desselben Gebäudes – einen Ursprungs- und einen sanierten Zustand –, die für die Überblendung per Opacity gegeneinander ein- und ausgeblendet werden. Beide Modelle wurden in Meshy.ai erstellt, in Blender aufbereitet und mit Draco-Kompression exportiert, um die Dateigröße für den mobilen Einsatz zu reduzieren.
Zunächst realisierte ich einen ersten Prototyp mit MindAR auf Basis von Image-Tracking, bei dem ein gedrucktes Markerbild erkannt wird. Da dieser Ansatz zu störanfällig war und eine Bilderkennung nicht erwünscht war, wechselte ich zu einer markerlosen Lösung mit three.js: Das Modell wird über den Kamerastream (getUserMedia) eingeblendet, die Ansicht per Geräte-Orientierung (Gyroskop / DeviceOrientation) gesteuert. In dieser Phase entstand die eigentliche Kernlogik – die zeitgesteuerte Überblendung, die mitlaufenden Kennzahlen sowie die sechs an den Fenstern platzierten Hotspots in der Signalfarbe der Website, die nacheinander im jeweiligen Verdrängungsjahr ausgeblendet/eingeblendet werden.
Für echtes World-Tracking (räumliche Verankerung am Boden, Bewegungsfreiheit um das Objekt) portierte ich das Projekt anschließend auf 8th Wall, das inzwischen quelloffen ist und dessen SLAM-Tracking auch in iOS-Safari funktioniert. Als Basis diente das offizielle A-Frame-Beispiel „World Effects„ (Tap-to-place auf erkannten Flächen). Das Projekt richtete ich lokal über Node.js / npm ein (npm install, npm run serve) und ersetzte das Beispielobjekt durch die beiden Gebäudemodelle; die gesamte Zeitachsen-, Überblendungs- und Hotspot-Logik übertrug ich als eigene A-Frame-Komponente. Für die Modellpositionierung an den Fenstern entwickelte ich zwischenzeitlich einen Justier-Modus, der die Koordinaten per Raycasting direkt aus der Geometrie ausliest.
Getestet wurde lokal im Browser sowie über eine HTTPS-Adresse (Netlify) auf dem iPhone, da Kamerazugriff und WebAR eine gesicherte Verbindung voraussetzen.
Umgesetzt mit Claude-Code
Erkenntnisse:
-> Schmuck-Pluszeichen entfernen.
-> Tooltip 1. Sektion genauer formulieren, sodass der User direkt versteht, dass man die Gebäude bewegen kann.
-> Draggable-Tags müssen sich ausbreiten beim Scrollen, sodass der User versteht, dass man mit diesen interargieren kann.
-> Sound muss von Anfang an auf play gesetzt sein.
-> Hotspots auf den 3D-Modellen wären wünschenswert.
Framer Code Component (Vibecoding): 3D-Modell-Viewer auf Basis von reinem Three.js. Es lädt ein GLB/GLTF-Gebäudemodell und rendert es mit Kamera, Licht, Environment-Reflexionen sowie optionalem Auto-Rotate und Floating-Effekt.
Zusätzlich bringt es ein vollständiges Hotspot-System mit: Es projiziert festgelegte 3D-Positionen im Modell live auf 2D-Bildschirmkoordinaten und öffnet bei Klick ein Popover mit Titel, Beschreibung, optionalem Bild und optionalem Link. Es blendet Hotspots auf der abgewandten Seite des Gebäudes automatisch anhand des aktuellen Drehwinkels aus.