[{"data":1,"prerenderedAt":806},["ShallowReactive",2],{"work-list-de":3},[4],{"id":5,"title":6,"body":7,"category":746,"cover":747,"date":748,"description":749,"draft":750,"extension":751,"gallery":752,"liveUrl":765,"locale":766,"meta":767,"navigation":326,"palette":768,"path":787,"repoUrl":788,"role":789,"seo":793,"stack":794,"stem":802,"tagline":803,"year":804,"__hash__":805},"projects\u002Fprojects\u002Fde\u002Fgabonsa.md","Gabonsa",{"type":8,"value":9,"toc":735},"minimark",[10,15,22,39,42,45,49,57,68,71,82,85,88,184,188,195,198,202,209,212,216,227,230,233,453,457,468,471,474,516,523,527,534,537,540,607,611,626,633,636,720,724,731],[11,12,14],"h2",{"id":13},"die-vision","Die Vision",[16,17,18],"blockquote",{},[19,20,21],"p",{},"stell dir vor es ist zukunft und alles ist gut.",[19,23,24,25,29,30,34,35,38],{},"Gabonsa ist kein Festival, das einfach eine Website braucht – es ist ein ",[26,27,28],"strong",{},"Möglichkeitsraum",". Zwei unabhängige Innsbrucker Kollektive, ",[31,32,33],"em",{},"Gans Anders"," und das ",[31,36,37],{},"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.",[19,40,41],{},"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.",[19,43,44],{},"Mein Auftrag: dieses Gefühl in eine schnelle, zugängliche, technisch belastbare Erfahrung übersetzen – ohne dass die Technik je lauter wird als die Idee.",[11,46,48],{"id":47},"editoriales-designsystem","Editoriales Designsystem",[19,50,51,52,56],{},"Alles skaliert flüssig über ",[53,54,55],"code",{},"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.",[19,58,59,60,63,64,67],{},"Die Headline trägt eine leichte ",[26,61,62],{},"chromatische Aberration",": zwei versetzte Farb­kopien (Cyan + Magenta) im ",[53,65,66],{},"screen","-Blend, dazu ein feines Flackern – ein 90er-Glitch, der das Lettering vibrieren lässt. Fahr mit der Maus drüber:",[69,70],"demo-chromatic",{},[19,72,73,74,77,78,81],{},"Bewegung als Bindeglied: ein nahtloses ",[26,75,76],{},"Marquee",", das ohne JavaScript läuft – reine CSS-Keyframes mit ",[53,79,80],{},"will-change: transform",", die bei Hover pausieren.",[83,84],"demo-marquee",{},[19,86,87],{},"Das Filmkorn selbst ist kein Bild, sondern Mathematik – ein animierter SVG-Turbulenz-Filter (genau dieser liegt auch über der Demo-Bühne oben):",[89,90,95],"pre",{"className":91,"code":92,"language":93,"meta":94,"style":94},"language-css shiki shiki-themes github-light github-dark","\u002F* Film­korn als animierter SVG-Filter – kein Asset, reine Mathematik *\u002F\n.grain::after {\n  mix-blend-mode: overlay;\n  background-image: url(\"data:image\u002Fsvg+xml;utf8,\u003Csvg ...>\\\n    \u003Cfilter id='n'>\u003CfeTurbulence type='fractalNoise' \\\n    baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\u002F>\\\n    \u003CfeColorMatrix type='saturate' values='0'\u002F>\u003C\u002Ffilter>\\\n    \u003Crect width='100%' height='100%' filter='url(%23n)'\u002F>\u003C\u002Fsvg>\");\n}\n","css","",[53,96,97,106,117,133,154,160,166,172,178],{"__ignoreMap":94},[98,99,102],"span",{"class":100,"line":101},"line",1,[98,103,105],{"class":104},"sJ8bj","\u002F* Film­korn als animierter SVG-Filter – kein Asset, reine Mathematik *\u002F\n",[98,107,109,113],{"class":100,"line":108},2,[98,110,112],{"class":111},"sScJk",".grain::after",[98,114,116],{"class":115},"sVt8B"," {\n",[98,118,120,124,127,130],{"class":100,"line":119},3,[98,121,123],{"class":122},"sj4cs","  mix-blend-mode",[98,125,126],{"class":115},": ",[98,128,129],{"class":122},"overlay",[98,131,132],{"class":115},";\n",[98,134,136,139,141,144,147,151],{"class":100,"line":135},4,[98,137,138],{"class":122},"  background-image",[98,140,126],{"class":115},[98,142,143],{"class":122},"url",[98,145,146],{"class":115},"(",[98,148,150],{"class":149},"sZZnC","\"data:image\u002Fsvg+xml;utf8,\u003Csvg ...>",[98,152,153],{"class":122},"\\\n",[98,155,157],{"class":100,"line":156},5,[98,158,159],{"class":122},"    \u003Cfilter id='n'>\u003CfeTurbulence type='fractalNoise' \\\n",[98,161,163],{"class":100,"line":162},6,[98,164,165],{"class":122},"    baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\u002F>\\\n",[98,167,169],{"class":100,"line":168},7,[98,170,171],{"class":122},"    \u003CfeColorMatrix type='saturate' values='0'\u002F>\u003C\u002Ffilter>\\\n",[98,173,175],{"class":100,"line":174},8,[98,176,177],{"class":122},"    \u003Crect width='100%' height='100%' filter='url(%23n)'\u002F>\u003C\u002Fsvg>\");\n",[98,179,181],{"class":100,"line":180},9,[98,182,183],{"class":122},"}\n",[11,185,187],{"id":186},"eine-navigation-die-spaß-macht","Eine Navigation, die Spaß macht",[19,189,190,191,194],{},"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. ",[26,192,193],{},"Eine Navigation, die übersichtlich ist und Spaß macht."," Probier's aus (die Unterpunkte öffnen die echten Seiten):",[196,197],"demo-nav",{},[11,199,201],{"id":200},"der-blumen-scatter","Der Blumen-Scatter",[19,203,204,205,208],{},"Quer über die Seite schweben monochrome Blumen-Halbtöne (© Anna Rogler) – gefeathert, ineinander geblendet, in loser Streuung. Platziert werden sie ",[26,206,207],{},"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:",[210,211],"demo-scatter",{},[11,213,215],{"id":214},"foto-shuffle-als-physikgetriebenes-spiel","Foto-Shuffle als physikgetriebenes Spiel",[19,217,218,219,222,223,226],{},"Auf der Seite schweben Fotos aus einem 39-Bild-Pool. Die clevere Idee: ein ",[26,220,221],{},"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 ",[26,224,225],{},"und"," Geräteneigung gespeist.",[19,228,229],{},"Hier in klein nachgebaut – drei Slots, ein geteilter Pool, niemals ein Duplikat. Tipp auf ein Bild, um den Slot weiterzuschalten:",[231,232],"demo-photo-shuffle",{},[89,234,238],{"className":235,"code":236,"language":237,"meta":94,"style":94},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F Exklusiver Foto-Pool: nichts, was gerade ein Slot hält, taucht doppelt auf\nconst available = new Set\u003Cnumber>(\n  Array.from({ length: PHOTO_COUNT }, (_, i) => i + 1),\n)\n\nfunction drawFromPool(rng: () => number): number {\n  const arr = Array.from(available)\n  const idx = Math.floor(rng() * arr.length)\n  const photo = arr[idx]\n  available.delete(photo) \u002F\u002F aus dem Pool nehmen, bis der Slot ihn zurückgibt\n  return photo\n}\n","ts",[53,239,240,245,272,317,322,328,361,379,412,424,439,448],{"__ignoreMap":94},[98,241,242],{"class":100,"line":101},[98,243,244],{"class":104},"\u002F\u002F Exklusiver Foto-Pool: nichts, was gerade ein Slot hält, taucht doppelt auf\n",[98,246,247,251,254,257,260,263,266,269],{"class":100,"line":108},[98,248,250],{"class":249},"szBVR","const",[98,252,253],{"class":122}," available",[98,255,256],{"class":249}," =",[98,258,259],{"class":249}," new",[98,261,262],{"class":111}," Set",[98,264,265],{"class":115},"\u003C",[98,267,268],{"class":122},"number",[98,270,271],{"class":115},">(\n",[98,273,274,277,280,283,286,289,293,296,299,302,305,308,311,314],{"class":100,"line":119},[98,275,276],{"class":115},"  Array.",[98,278,279],{"class":111},"from",[98,281,282],{"class":115},"({ length: ",[98,284,285],{"class":122},"PHOTO_COUNT",[98,287,288],{"class":115}," }, (",[98,290,292],{"class":291},"s4XuR","_",[98,294,295],{"class":115},", ",[98,297,298],{"class":291},"i",[98,300,301],{"class":115},") ",[98,303,304],{"class":249},"=>",[98,306,307],{"class":115}," i ",[98,309,310],{"class":249},"+",[98,312,313],{"class":122}," 1",[98,315,316],{"class":115},"),\n",[98,318,319],{"class":100,"line":135},[98,320,321],{"class":115},")\n",[98,323,324],{"class":100,"line":156},[98,325,327],{"emptyLinePlaceholder":326},true,"\n",[98,329,330,333,336,338,341,344,347,349,352,355,357,359],{"class":100,"line":162},[98,331,332],{"class":249},"function",[98,334,335],{"class":111}," drawFromPool",[98,337,146],{"class":115},[98,339,340],{"class":111},"rng",[98,342,343],{"class":249},":",[98,345,346],{"class":115}," () ",[98,348,304],{"class":249},[98,350,351],{"class":122}," number",[98,353,354],{"class":115},")",[98,356,343],{"class":249},[98,358,351],{"class":122},[98,360,116],{"class":115},[98,362,363,366,369,371,374,376],{"class":100,"line":168},[98,364,365],{"class":249},"  const",[98,367,368],{"class":122}," arr",[98,370,256],{"class":249},[98,372,373],{"class":115}," Array.",[98,375,279],{"class":111},[98,377,378],{"class":115},"(available)\n",[98,380,381,383,386,388,391,394,396,398,401,404,407,410],{"class":100,"line":174},[98,382,365],{"class":249},[98,384,385],{"class":122}," idx",[98,387,256],{"class":249},[98,389,390],{"class":115}," Math.",[98,392,393],{"class":111},"floor",[98,395,146],{"class":115},[98,397,340],{"class":111},[98,399,400],{"class":115},"() ",[98,402,403],{"class":249},"*",[98,405,406],{"class":115}," arr.",[98,408,409],{"class":122},"length",[98,411,321],{"class":115},[98,413,414,416,419,421],{"class":100,"line":180},[98,415,365],{"class":249},[98,417,418],{"class":122}," photo",[98,420,256],{"class":249},[98,422,423],{"class":115}," arr[idx]\n",[98,425,427,430,433,436],{"class":100,"line":426},10,[98,428,429],{"class":115},"  available.",[98,431,432],{"class":111},"delete",[98,434,435],{"class":115},"(photo) ",[98,437,438],{"class":104},"\u002F\u002F aus dem Pool nehmen, bis der Slot ihn zurückgibt\n",[98,440,442,445],{"class":100,"line":441},11,[98,443,444],{"class":249},"  return",[98,446,447],{"class":115}," photo\n",[98,449,451],{"class":100,"line":450},12,[98,452,183],{"class":115},[11,454,456],{"id":455},"webgl-foto-auflösung","WebGL-Foto-Auflösung",[19,458,459,460,463,464,467],{},"Jeder Foto-Slot rendert seinen Übergang in WebGL: Das neue Bild ",[31,461,462],{},"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 ",[53,465,466],{},"KHR_parallel_shader_compile",", damit der Main-Thread nie blockiert.",[19,469,470],{},"Das Prinzip lässt sich auch ohne GPU zeigen – ziehe quer durchs Bild, um die Auflösung entlang der Rauschmaske zu scrubben:",[472,473],"demo-dissolve",{},[89,475,479],{"className":476,"code":477,"language":478,"meta":94,"style":94},"language-glsl shiki shiki-themes github-light github-dark","\u002F\u002F Beide Bilder voll deckend – die Enthüllung passiert über die Rauschmaske\nfloat nMask = texture2D(uNoise, vUv).r;\nfloat reveal = smoothstep(nMask - 0.28, nMask + 0.28, ep);\n\u002F\u002F Helligkeit des Quellbilds biegt die Maske leicht\nfloat lumBias = mix(0.0, lumA * 0.15, sin(ep * 3.14159));\nfloat finalReveal = clamp(reveal + lumBias, 0.0, 1.0);\ngl_FragColor = mix(colA, colB, finalReveal);\n","glsl",[53,480,481,486,491,496,501,506,511],{"__ignoreMap":94},[98,482,483],{"class":100,"line":101},[98,484,485],{},"\u002F\u002F Beide Bilder voll deckend – die Enthüllung passiert über die Rauschmaske\n",[98,487,488],{"class":100,"line":108},[98,489,490],{},"float nMask = texture2D(uNoise, vUv).r;\n",[98,492,493],{"class":100,"line":119},[98,494,495],{},"float reveal = smoothstep(nMask - 0.28, nMask + 0.28, ep);\n",[98,497,498],{"class":100,"line":135},[98,499,500],{},"\u002F\u002F Helligkeit des Quellbilds biegt die Maske leicht\n",[98,502,503],{"class":100,"line":156},[98,504,505],{},"float lumBias = mix(0.0, lumA * 0.15, sin(ep * 3.14159));\n",[98,507,508],{"class":100,"line":162},[98,509,510],{},"float finalReveal = clamp(reveal + lumBias, 0.0, 1.0);\n",[98,512,513],{"class":100,"line":168},[98,514,515],{},"gl_FragColor = mix(colA, colB, finalReveal);\n",[19,517,518,519,522],{},"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 ",[53,520,521],{},"\u003Cimg>"," zurück.",[11,524,526],{"id":525},"magnetischer-cursor-magnetische-buttons","Magnetischer Cursor & magnetische Buttons",[19,528,529,530,533],{},"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 ",[53,531,532],{},"(hover: hover) and (pointer: fine)"," aktiv wird und Touch-Geräte unberührt lässt.",[19,535,536],{},"Führe die Maus an den Button heran – er driftet entgegen, der Ring schwillt an:",[538,539],"demo-magnetic",{},[89,541,545],{"className":542,"code":543,"language":544,"meta":94,"style":94},"language-tsx shiki shiki-themes github-light github-dark","const x = useMotionValue(-200)\nconst sx = useSpring(x, { stiffness: 320, damping: 28, mass: 0.4 })\n\u002F\u002F kleiner Punkt folgt sofort (x), großer Ring trägt die Feder (sx) nach\n","tsx",[53,546,547,569,602],{"__ignoreMap":94},[98,548,549,551,554,556,559,561,564,567],{"class":100,"line":101},[98,550,250],{"class":249},[98,552,553],{"class":122}," x",[98,555,256],{"class":249},[98,557,558],{"class":111}," useMotionValue",[98,560,146],{"class":115},[98,562,563],{"class":249},"-",[98,565,566],{"class":122},"200",[98,568,321],{"class":115},[98,570,571,573,576,578,581,584,587,590,593,596,599],{"class":100,"line":108},[98,572,250],{"class":249},[98,574,575],{"class":122}," sx",[98,577,256],{"class":249},[98,579,580],{"class":111}," useSpring",[98,582,583],{"class":115},"(x, { stiffness: ",[98,585,586],{"class":122},"320",[98,588,589],{"class":115},", damping: ",[98,591,592],{"class":122},"28",[98,594,595],{"class":115},", mass: ",[98,597,598],{"class":122},"0.4",[98,600,601],{"class":115}," })\n",[98,603,604],{"class":100,"line":119},[98,605,606],{"class":104},"\u002F\u002F kleiner Punkt folgt sofort (x), großer Ring trägt die Feder (sx) nach\n",[11,608,610],{"id":609},"scrollchoreografie-ohne-plugin","Scrollchoreografie ohne Plugin",[19,612,613,614,617,618,621,622,625],{},"Text enthüllt sich beim Scrollen wort- und zeichenweise – mit einem selbst gebauten Splitter statt des kostenpflichtigen GSAP-",[53,615,616],{},"SplitText",". Lenis sorgt für seidiges Smooth-Scrolling und ist über ",[53,619,620],{},"useLenis(ScrollTrigger.update)"," an GSAP gekoppelt, sodass alle Animationen frame­genau bleiben. Jede Bewegung respektiert ",[53,623,624],{},"prefers-reduced-motion",".",[19,627,628,629,632],{},"Wort für Wort, mit gestaffeltem Versatz – drück auf ",[31,630,631],{},"replay",", um es erneut zu sehen:",[634,635],"demo-reveal",{},[89,637,639],{"className":542,"code":638,"language":544,"meta":94,"style":94},"const tween = gsap.to(targets, {\n  y: 0, opacity: 1, duration: 0.9,\n  ease: 'expo.out', stagger: 0.04,\n  scrollTrigger: { trigger: el, start: 'top 85%', once: true },\n})\n",[53,640,641,659,682,698,715],{"__ignoreMap":94},[98,642,643,645,648,650,653,656],{"class":100,"line":101},[98,644,250],{"class":249},[98,646,647],{"class":122}," tween",[98,649,256],{"class":249},[98,651,652],{"class":115}," gsap.",[98,654,655],{"class":111},"to",[98,657,658],{"class":115},"(targets, {\n",[98,660,661,664,667,670,673,676,679],{"class":100,"line":108},[98,662,663],{"class":115},"  y: ",[98,665,666],{"class":122},"0",[98,668,669],{"class":115},", opacity: ",[98,671,672],{"class":122},"1",[98,674,675],{"class":115},", duration: ",[98,677,678],{"class":122},"0.9",[98,680,681],{"class":115},",\n",[98,683,684,687,690,693,696],{"class":100,"line":119},[98,685,686],{"class":115},"  ease: ",[98,688,689],{"class":149},"'expo.out'",[98,691,692],{"class":115},", stagger: ",[98,694,695],{"class":122},"0.04",[98,697,681],{"class":115},[98,699,700,703,706,709,712],{"class":100,"line":135},[98,701,702],{"class":115},"  scrollTrigger: { trigger: el, start: ",[98,704,705],{"class":149},"'top 85%'",[98,707,708],{"class":115},", once: ",[98,710,711],{"class":122},"true",[98,713,714],{"class":115}," },\n",[98,716,717],{"class":100,"line":156},[98,718,719],{"class":115},"})\n",[11,721,723],{"id":722},"ergebnis","Ergebnis",[19,725,726,727,730],{},"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-",[53,728,729],{},"Event","-Markup für die Suche – und eine Bildsprache, die ihresgleichen sucht. Am besten direkt nebenan live erkunden.",[732,733,734],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":94,"searchDepth":108,"depth":108,"links":736},[737,738,739,740,741,742,743,744,745],{"id":13,"depth":108,"text":14},{"id":47,"depth":108,"text":48},{"id":186,"depth":108,"text":187},{"id":200,"depth":108,"text":201},{"id":214,"depth":108,"text":215},{"id":455,"depth":108,"text":456},{"id":525,"depth":108,"text":526},{"id":609,"depth":108,"text":610},{"id":722,"depth":108,"text":723},"Festival · Creative Development","\u002Fimages\u002Fwork\u002Fgabonsa\u002Fcover.jpg","2026-06-16","Case Study zur Website des Gabonsa Festivals in Innsbruck – ein editoriales Next.js-15-Erlebnis mit WebGL-Foto-Übergängen, physik­getriebenem Foto-Shuffle, magnetischem Cursor und GSAP-Scrollchoreografie.",false,"md",[753,756,759,762],{"src":754,"alt":755},"\u002Fimages\u002Fwork\u002Fgabonsa\u002Flineup.jpg","Line-up-Seite mit handgezeichneter Unterstreichung und Teal-Akzent",{"src":757,"alt":758},"\u002Fimages\u002Fwork\u002Fgabonsa\u002Fvalues.jpg","Werte-Seite – Awareness, Nachhaltigkeit, autofreie Anreise",{"src":760,"alt":761},"\u002Fimages\u002Fwork\u002Fgabonsa\u002Fabout.jpg","Über-Seite: zwei Innsbrucker Kollektive werden eins",{"src":763,"alt":764},"\u002Fimages\u002Fwork\u002Fgabonsa\u002Faftermovie.jpg","Aftermovie-Seite mit eigenem Video-Player","https:\u002F\u002Fgabonsa.vercel.app","de",{},[769,772,775,778,781,784],{"name":770,"hex":771},"Brown","#3B2314",{"name":773,"hex":774},"Teal","#00857C",{"name":776,"hex":777},"Paper","#E8DCC8",{"name":779,"hex":780},"Ink","#0A0A08",{"name":782,"hex":783},"Acid","#B8E61D",{"name":785,"hex":786},"Magenta","#E6007E","\u002Fprojects\u002Fde\u002Fgabonsa",null,[790,791,792],"Konzept & Creative Direction","Design","Entwicklung",{"title":6,"description":749},[795,796,797,798,799,800,801],"Next.js 15","React 19","Tailwind CSS 4","GSAP + ScrollTrigger","Lenis","Framer Motion","WebGL","projects\u002Fde\u002Fgabonsa","Eine Festival-Website als Möglichkeitsraum – laute Typografie, lose Raster, warmes Rauschen.","2026","GqnL1zaVbqQgeVDPD1pqd76sFMnDrSIFqvBmsERRMmw",1787633289721]