Gabonsa

Die Vision

stell dir vor es ist zukunft und alles ist gut.

Gabonsa ist kein Festival, das einfach eine Website braucht – es ist ein Möglichkeitsraum. Zwei unabhängige Innsbrucker Kollektive, Gans Anders und das Bonanza Kollektiv, schließen sich zu einer einzigen kulturellen Plattform zusammen. Zwei Tage, ein internationales Line-up, eine reklamierte alte Driving Range zwischen Bergen und Kiesseen.

Die Website sollte sich genauso anfühlen: idealistisch ohne Zynismus, poetisch, werte­getrieben. Kein Investorenmodell, autofreie Anreise aus Überzeugung, null Toleranz gegenüber Diskriminierung – und das alles in einer Gestaltung, die sich konsequent dem Template verweigert. Lautes, kursives Lettering, warmes Schokoladenbraun gegen Acid-Lime, schwebende editoriale Collagen statt starrer Raster.

Mein Auftrag: dieses Gefühl in eine schnelle, zugängliche, technisch belastbare Erfahrung übersetzen – ohne dass die Technik je lauter wird als die Idee.

Editoriales Designsystem

Alles skaliert flüssig über clamp() – keine Breakpoint-Sprünge, sondern eine Typografie, die von Mobile bis Großbild atmet. Teal ist in jeder Sektion sichtbar, Lime und Magenta sind reine Ausrufezeichen (maximal ein, zwei pro Seite). Über allem liegt ein prozedurales Filmkorn als animierter SVG-Filter – warmes Rauschen, das die Flächen lebendig hält.

Die Headline trägt eine leichte chromatische Aberration: zwei versetzte Farb­kopien (Cyan + Magenta) im screen-Blend, dazu ein feines Flackern – ein 90er-Glitch, der das Lettering vibrieren lässt. Fahr mit der Maus drüber:

Bewegung als Bindeglied: ein nahtloses Marquee, das ohne JavaScript läuft – reine CSS-Keyframes mit will-change: transform, die bei Hover pausieren.

Das Filmkorn selbst ist kein Bild, sondern Mathematik – ein animierter SVG-Turbulenz-Filter (genau dieser liegt auch über der Demo-Bühne oben):

/* Film­korn als animierter SVG-Filter – kein Asset, reine Mathematik */
.grain::after {
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg ...>\
    <filter id='n'><feTurbulence type='fractalNoise' \
    baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
    <feColorMatrix type='saturate' values='0'/></filter>\
    <rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

Eine Navigation, die Spaß macht

Klar gegliedert über ein Nummernsystem (01, 01.1 …), aber alles andere als langweilig. Ein Klick öffnet das Vollbild-Menü mit großen Kategorien; wählst du eine mit Unterpunkten, gleitet die Liste zur Seite und ein nummeriertes Panel schiebt sich von rechts herein – samt Blumen-Scatter im Hintergrund. Eine Navigation, die übersichtlich ist und Spaß macht. Probier's aus (die Unterpunkte öffnen die echten Seiten):

Der Blumen-Scatter

Quer über die Seite schweben monochrome Blumen-Halbtöne (© Anna Rogler) – gefeathert, ineinander geblendet, in loser Streuung. Platziert werden sie deterministisch über einen Seed: gleiches Wort, gleiche Anordnung. Genau dieser Scatter treibt – groß und ruhig – hinter dieser ganzen Seite. Klick, um den Seed neu zu würfeln:

↻ seed: bonanza

Flower scatter · seededreshuffle the seed

Foto-Shuffle als physikgetriebenes Spiel

Auf der Seite schweben Fotos aus einem 39-Bild-Pool. Die clevere Idee: ein zentrales Register mit exklusiver Zuteilung – keine zwei aktiven Slots zeigen je dasselbe Bild. Jeder Slot „leiht“ sich ein Foto; wenn er weiterschaltet, gibt er es zurück und zieht ein neues, das niemand sonst hält. Der Takt ist monoton und wird aus Scrolldistanz, Mausweg, Klicks und Geräteneigung gespeist.

Hier in klein nachgebaut – drei Slots, ein geteilter Pool, niemals ein Duplikat. Tipp auf ein Bild, um den Slot weiterzuschalten:

// Exklusiver Foto-Pool: nichts, was gerade ein Slot hält, taucht doppelt auf
const available = new Set<number>(
  Array.from({ length: PHOTO_COUNT }, (_, i) => i + 1),
)

function drawFromPool(rng: () => number): number {
  const arr = Array.from(available)
  const idx = Math.floor(rng() * arr.length)
  const photo = arr[idx]
  available.delete(photo) // aus dem Pool nehmen, bis der Slot ihn zurückgibt
  return photo
}

WebGL-Foto-Auflösung

Jeder Foto-Slot rendert seinen Übergang in WebGL: Das neue Bild löst sich durch eine organische, luminanz­gewichtete Rauschmaske ein – ein Schmelzen statt eines harten Schnitts. Eine vorgebackene 128×128-Noise-Textur spart teure Per-Pixel-Mathematik im Shader; Shader kompilieren asynchron über KHR_parallel_shader_compile, damit der Main-Thread nie blockiert.

Das Prinzip lässt sich auch ohne GPU zeigen – ziehe quer durchs Bild, um die Auflösung entlang der Rauschmaske zu scrubben:

// Beide Bilder voll deckend – die Enthüllung passiert über die Rauschmaske
float nMask = texture2D(uNoise, vUv).r;
float reveal = smoothstep(nMask - 0.28, nMask + 0.28, ep);
// Helligkeit des Quellbilds biegt die Maske leicht
float lumBias = mix(0.0, lumA * 0.15, sin(ep * 3.14159));
float finalReveal = clamp(reveal + lumBias, 0.0, 1.0);
gl_FragColor = mix(colA, colB, finalReveal);

Auf iOS ist die Zahl gleichzeitiger WebGL-Kontexte hart auf acht gedeckelt – eine LRU-Eviction räumt die ältesten Off-Screen-Renderer ab, bevor das System abstürzt, und ein verlorener Kontext fällt sauber auf ein <img> zurück.

Magnetischer Cursor & magnetische Buttons

Auf dem Desktop ersetzt ein eigener Cursor den System­zeiger: ein harter Punkt, der sofort folgt, und ein weicher Ring, der mit Federphysik (Framer Motion) hinterherzieht und über interaktiven Elementen anschwillt. Buttons „ziehen“ sich zum Cursor – ein taktiles Gefühl von Anziehung, das nur auf (hover: hover) and (pointer: fine) aktiv wird und Touch-Geräte unberührt lässt.

Führe die Maus an den Button heran – er driftet entgegen, der Ring schwillt an:

const x = useMotionValue(-200)
const sx = useSpring(x, { stiffness: 320, damping: 28, mass: 0.4 })
// kleiner Punkt folgt sofort (x), großer Ring trägt die Feder (sx) nach

Scrollchoreografie ohne Plugin

Text enthüllt sich beim Scrollen wort- und zeichenweise – mit einem selbst gebauten Splitter statt des kostenpflichtigen GSAP-SplitText. Lenis sorgt für seidiges Smooth-Scrolling und ist über useLenis(ScrollTrigger.update) an GSAP gekoppelt, sodass alle Animationen frame­genau bleiben. Jede Bewegung respektiert prefers-reduced-motion.

Wort für Wort, mit gestaffeltem Versatz – drück auf replay, um es erneut zu sehen:

const tween = gsap.to(targets, {
  y: 0, opacity: 1, duration: 0.9,
  ease: 'expo.out', stagger: 0.04,
  scrollTrigger: { trigger: el, start: 'top 85%', once: true },
})

Ergebnis

Eine Website, die sich verspielt anfühlt, aber für den Ernstfall gebaut ist: WebGL-Kontextverlust, Fullscreen-Eigenheiten und Bewegungs­sensoren werden allesamt würdevoll abgefangen. German-first, voll zugänglich, schema.org-Event-Markup für die Suche – und eine Bildsprache, die ihresgleichen sucht. Am besten direkt nebenan live erkunden.