01 · Orientierung
Richtung entsteht, bevor Technologie beginnt.
Wir übersetzen Ziele, Nutzerbedürfnisse und Möglichkeiten in eine klare Route für das digitale System.
- Research
- Positionierung
- User Journeys
Experience Design / Scroll Storytelling
Eine immersive Website-Experience, bei der Scrollen die Zeit eines filmischen Flugs durch die SYDA Markenwelt steuert — mit framegenauen Ruhepunkten für Strategie, Automation, Design und Software.
Jahr
2026
Status
Live
Creative DevelopmentVideo ScrubbingScroll StorytellingReactExperience Design
Ausgangslage
Digitale Kompetenz wird auf klassischen Agenturwebsites meist nur beschrieben. Für eine glaubwürdige Referenz sollte die Website selbst zeigen, wie Storytelling, Art Direction, Interaktionsdesign, Performance und technische Umsetzung zu einem eigenständigen Erlebnis verbunden werden können.
Lösung
SYDA Scroll World verbindet einen zehnsekündigen Kameraflug mit einer React-basierten Scroll-Scrub-Engine. Der Scrollfortschritt bewegt das Video frameweise vor und zurück. An vier kuratierten Zeitpunkten übernimmt ein exakt aus dem Video extrahierter Hold-Frame: Das Bild steht sichtbar scharf, während die passende Botschaft räumlich hineinzoomt. Danach setzt der Film ohne sichtbaren Sprung am identischen Frame fort. Die Architektur adaptiert die robusten Prinzipien des MIT-lizenzierten scroll-world Repositories und ergänzt Reduced Motion, responsive Crops und crawlbare Inhalte.
Wirkung
- Interaktive Markenreferenz statt statischem Portfolio-Screenshot
- Nahtlose Abfolge aus Video-Scrubbing, exakten Hold-Frames und Text-Zoom
- Responsive, zugängliche und SEO-fähige Scroll-Experience
Workflow
Vom Film zur steuerbaren Markenwelt.
Die Experience verbindet einen filmischen Kameraflug, framegenaue Übergaben und eine performante Scroll-Timeline für Desktop und Mobile.
01
Film-Timeline
Der Kameraflug wird in vier inhaltliche Kapitel unterteilt, ohne das Video tatsächlich in einzelne Clips zu zerschneiden.
02
Frame Handoffs
Jeder Ruhepunkt verwendet den exakt extrahierten letzten Videoframe, damit Film und scharfer Screenshot ohne sichtbaren Sprung wechseln.
03
Scroll Engine
Eine normalisierte Timeline übersetzt Scrollfortschritt in Videozeit, Hold-Phasen, Kapitelstatus und direkte Navigation.
04
Text Choreografie
Während das Hintergrundbild still und scharf bleibt, zoomt die Botschaft kontrolliert in den Raum und löst sich vor dem Weiterflug wieder auf.
05
Responsive Choreografie
Mobile Layouts erhalten eine längere Scrollstrecke, sichere Bildausschnitte und eine auf kleine Viewports abgestimmte Copy-Führung.
06
Accessibility & SEO
Reduced Motion, semantische Inhalte, Tastaturnavigation und crawlbare Texte machen die Experience auch jenseits der Animation nutzbar.