TiNA - Wort- und Markenatelier

Entity TiNA

Vector Dev & Motion

Cycle 2023

Final_Status SYSTEM STATUS: ANIMATED. Visuals: Fluid & Dynamic. Codebase: Clean.

LOG_SUMMARY

Weniger Blabla, mehr Builds. commit: clean-ship

**Target Analysis**: TVF. (Corporate/Service Sector). **System Conflict**: Ein Design musste ohne Kompromisse ins Web übertragen werden. Die Anforderung: Ein visuelles Intro, das die Markenidentität sofort setzt, ohne die UX zu blockieren. ### Mission Objectives: **Pixel-Perfect Execution**: 1:1 Umsetzung des Custom Designs in Oxygen. **Motion Integration**: Entwicklung einer komplexen Intro-Sequenz mit GSAP (via Motion.page) für maximalen Impact beim ersten Besuch. **Performance Balance**: Trotz schwerer Animationen muss der Core Web Vitals Score im grünen Bereich bleiben.

FIX_EXECUTED

Wir haben Oxygen als Framework genutzt, um volle Kontrolle über den DOM zu haben (kein Theme-Bloat). Das Herzstück ist das **Motion.page Intro**. **The Sequence**: Eine Timeline-basierte Animation, die Logo und Key-Visuals beim Laden aufbaut. Wir haben `ScrollTrigger` und `TimeLineLite` genutzt, um die Elemente präzise zu choreografieren. **Non-Blocking Load**: Die Animation läuft asynchron, sodass der Content im Hintergrund bereits gerendert wird (Perceived Performance).

Stack_Deployed

> [CORE] WordPress

> [ENGINE] Oxygen Builder

> [ANIMATION] Motion.page (GSAP Wrapper)

> [SCRIPTING] Custom JS

Arch_Ref WP, Oxygen Builder, GSAP

Access_Live_Gateway_