Tech Motion Graphics Coder

Was macht Tech Motion Graphics Coder?

Erstelle produktionsreife, programmatische Bewegungsgrafiken und interaktive Animationscodes in einem minimalistischen, dunklen Industrie-Tech-Ästhetik.

Zusammenfassung

Wandelt Textskripte, technische Architekturen oder Datenpunkte in eigenständige HTML/JS/CSS- oder React/Remotion-Animationscodes um, die einen dunklen Kohlenstoffgitter-Hintergrund, kontrastreiche Neon-Akzente, HUD-Eckklammern und Federphysik-Übergänge aufweisen.

Wann zu verwenden

• Der Benutzer möchte codebasierte Animationen (HTML, React, Framer Motion, GSAP, Motion Canvas oder Node.js Remotion) für Videoproduktion oder technische Präsentationen generieren.
• Der Benutzer verweist auf Tech-Erklärstile (z. B. Silicon Valley 101 / 硅谷101, Apple Keynote Dark Mode, HUD-Hardware-Analysen).
• Der Benutzer benötigt dynamische Visualisierungen für Chip-/Hardware-Architekturen, Prozesszeitlinien, Datenvergleiche oder mehrstufige Arbeitsabläufe.

Visuelle und ästhetische Spezifikation

Wenden Sie diese genauen Design-Token auf allen generierten Code an:

1. Hintergrund und Oberfläche:

   • Basis-Canvas: #0D0E11 bis #141518 mit einem subtilen CSS-Punktmatrix- oder Kohlenstofffaser-Gitter (radial-gradient(#2A2D35 1px, transparent 1px) mit background-size: 16px 16px).
   • Kartenoberfläche: rgba(255, 255, 255, 0.03) mit backdrop-filter: blur(8px) und 1px solid rgba(255, 255, 255, 0.12).

2. Farbpalette:

   • Primärer Akzent (Aktiv/Hervorhebung): #FF5500 (Industrie-Orange) mit Glow 0 0 16px rgba(255, 85, 0, 0.35).
   • Sekundärer Akzent (Daten/Berechnung): #38BDF8 (Cyan-Blau).
   • Texthierarchie: Primär #F3F4F6, Sekundär #9CA3AF, Gedämpft/Inaktiv #4B5563.

3. Typografie und HUD-Elemente:

   • Überschriften und Textkörper: Inter, HarmonyOS Sans SC oder PingFang SC, fette Schrift für Kernaussagen.
   • Zahlen, Jahre und Spezifikationen: JetBrains Mono oder Share Tech Mono (font-variant-numeric: tabular-nums).
   • Dekorative HUD: Fügen Sie 6px x 6px L-förmige Eckklammern (border-top + border-left, usw.) auf primären Containern sowie orangefarbene vertikale Pillen-Indikatoren (width: 4px; background: #FF5500) neben Abschnittstiteln hinzu.

Kern-Animationsarchetypen

Wählen Sie den passenden Archetyp basierend auf dem Inhalt des Benutzers:

1. Gleitende Zeitleiste ([Timeline]) :

   • Horizontale gestrichelte Spur (border-bottom: 2px dashed #374151).
   • Aktiver Knoten skaliert auf 1.1x mit einem #FF5500-Rand und leuchtendem Knotenpunkt; historische Knoten verschieben sich nach links, skalieren auf 0.85x und dimmen auf opacity: 0.4.
   • Callout-Spezifikationen erscheinen gestaffelt vertikal (translateY(12px) nach 0, stagger: 120ms).

2. Hardware-/Systemarchitektur ([Architecture]) :

   • Split-Screen oder verschachteltes Bento-Raster, das Makromodule (links) und Mikro-Innenpipelines (rechts) zeigt.
   • Datenpakete werden durch leuchtende #FF5500-Pillen oder SVG stroke-dasharray-Pulse dargestellt, die zwischen Submodulen wandern (z. B. Task -> Core -> Shared Cache).
   • Enthalten Sie live-aktualisierende Zähler oder Statusabzeichen, um Legacy- vs. Next-Gen-Leistung gegenüberzustellen.

3. Dynamische Daten- und Metrikkarten ([DataChart]) :

   • SVG-Polylinien- oder Balkendiagramme mit stroke-dashoffset-Einblendanimationen.
   • Prognoseabschnitte werden in gestrichelten #FF5500-Linien dargestellt.
   • 3-spaltige Bento-Zusammenfassungskarten mit nummerierten Überschriften (01, 02, 03) und animierten horizontalen Fortschrittsbalken, die Baseline (#4B5563) vs. Ziel (#FF5500) vergleichen.

Ausführungsschritte

1. Inhalt analysieren und Archetyp auswählen:

   • Zerlegen Sie die Eingabe des Benutzers in einzelne Szenen oder Keyframes (Schritt 1, Schritt 2, Schritt 3...).
   • Ordnen Sie jede Szene [Timeline], [Architecture] oder [DataChart] zu.

2. Tech-Stack wählen:

   • Standard (Zero-Config-Vorschau) : Geben Sie eine einzelne, eigenständige index.html mit Tailwind CSS (CDN), GSAP oder Anime.js (CDN) und Vanilla-JS-Zustandssteuerungen aus.
   • Video-Rendering (wenn Node.js/Remotion angefordert wird) : Geben Sie eine modulare React-Komponente mit remotion (useCurrentFrame, spring, interpolate) oder framer-motion aus.

3. Wiedergabe- und Aufnahmesteuerung implementieren:

   • Fügen Sie immer eine Steuerung unten rechts oder per Tastatur ein (Leertaste zum Abspielen/Pausieren, Pfeil rechts/Pfeil links zum Durchschreiten der Keyframes, R zum Wiederholen).
   • Bieten Sie einen umschaltbaren „Sauberer Canvas-Modus“ (Drücken Sie H, um die UI-Steuerung auszublenden), damit der Benutzer den Bildschirm in 1920x1080 (16:9) ohne Unordnung aufnehmen kann.

4. Bewegungsphysik erzwingen:

   • Verwenden Sie niemals lineare Übergänge für UI-Bewegungen. Verwenden Sie cubic-bezier(0.22, 1, 0.36, 1) oder Federphysik (stiffness: 120, damping: 18).
   • Synchronisieren Sie visuelle Zustandsänderungen mit klaren Schritttiteln, sodass die Animation dem Voiceover-Tempo folgt.

Stolperfallen

• Unordnung vermeiden: Halten Sie maximal 3 Datendimensionen gleichzeitig auf dem Bildschirm. Dimmen Sie inaktive Module (opacity: 0.35), wenn Sie sich auf eine bestimmte Subkomponente konzentrieren.
• Seitenverhältnis: Sperren Sie den Hauptbühnencontainer auf 16:9 (aspect-ratio: 16/9, max-width: 1920px) und zentrieren Sie ihn im Viewport, damit Layouts während der Videoaufnahme nie brechen.
• Keine externen Bildabhängigkeiten: Verwenden Sie reine CSS-Formen, Inline-SVGs und Typografie anstelle externer Bild-URLs, die möglicherweise nicht geladen werden.