tech-motion-graphics-coder

Tech Motion Graphics Coder

Generate production-ready, programmatic motion graphics and interactive animation code in a minimalist, dark-mode industrial tech aesthetic.

Summary

Transforms text scripts, technical architectures, or data points into self-contained HTML/JS/CSS or React/Remotion animation code featuring dark carbon-grid backgrounds, high-contrast neon accents, HUD corner brackets, and spring-physics transitions.

When to Use

• The user wants to generate code-based animations (HTML, React, Framer Motion, GSAP, Motion Canvas, or Node.js Remotion) for video production or technical presentations.
• The user references tech explainer styles (e.g., Silicon Valley 101 / 硅谷101, Apple Keynote dark mode, HUD hardware breakdowns).
• The user needs dynamic visualizations for chip/hardware architectures, process timelines, data comparisons, or multi-step workflows.

Visual & Aesthetic Specification

Apply these exact design tokens across all generated code:

1. Background & Surface:

   • Base canvas: #0D0E11 to #141518 with a subtle CSS dot-matrix or carbon-fiber grid (radial-gradient(#2A2D35 1px, transparent 1px) with background-size: 16px 16px).
   • Card surface: rgba(255, 255, 255, 0.03) with backdrop-filter: blur(8px) and 1px solid rgba(255, 255, 255, 0.12).

2. Color Palette:

   • Primary Accent (Active/Highlight): #FF5500 (Industrial Orange) with glow 0 0 16px rgba(255, 85, 0, 0.35).
   • Secondary Accent (Data/Compute): #38BDF8 (Cyan Blue).
   • Text Hierarchy: Primary #F3F4F6, Secondary #9CA3AF, Muted/Inactive #4B5563.

3. Typography & HUD Elements:

   • Headers & Body: Inter, HarmonyOS Sans SC, or PingFang SC, bold weight for key takeaways.
   • Numbers, Years, & Specs: JetBrains Mono or Share Tech Mono (font-variant-numeric: tabular-nums).
   • Decorative HUD: Add 6px x 6px L-shaped corner brackets (border-top + border-left, etc.) on primary containers, and orange vertical pill indicators (width: 4px; background: #FF5500) beside section titles.

Core Animation Archetypes

Select the appropriate archetype based on the user's content:

1. Sliding Timeline ([Timeline]):

   • Horizontal dashed track (border-bottom: 2px dashed #374151).
   • Active node scales to 1.1x with an #FF5500 border and glowing node dot; historical nodes shift left, scale to 0.85x, and dim to opacity: 0.4.
   • Callout specs stagger in vertically (translateY(12px) to 0, stagger: 120ms).

2. Hardware / System Architecture ([Architecture]):

   • Split-screen or nested Bento grid showing macro modules (left) and micro internal pipelines (right).
   • Data packets represented by glowing #FF5500 pills or SVG stroke-dasharray pulses moving between sub-modules (e.g., Task -> Core -> Shared Cache).
   • Include live-updating counters or status badges to contrast legacy vs. next-gen performance.

3. Dynamic Data & Metric Cards ([DataChart]):

   • SVG polyline or bar charts with stroke-dashoffset draw-in animations.
   • Forecast segments rendered in dashed #FF5500 lines.
   • 3-column Bento summary cards with numbered headers (01, 02, 03) and animated horizontal progress bars comparing baseline (#4B5563) vs. target (#FF5500).

Execution Steps

1. Analyze Content & Select Archetype:

   • Break the user's input into discrete scenes or keyframes (Step 1, Step 2, Step 3...).
   • Map each scene to [Timeline], [Architecture], or [DataChart].

2. Choose Tech Stack:

   • Default (Zero-Config Preview): Output a single, self-contained index.html using Tailwind CSS (CDN), GSAP or Anime.js (CDN), and vanilla JS state controllers.
   • Video Rendering (When Node.js/Remotion is requested): Output a modular React component using remotion (useCurrentFrame, spring, interpolate) or framer-motion.

3. Implement Playback & Recording Controls:

   • Always include a bottom-right or keyboard-driven controller (Space to play/pause, ArrowRight/ArrowLeft to step through keyframes, R to replay).
   • Provide a toggleable "Clean Canvas Mode" (press H to hide UI controls) so the user can record the screen at 1920x1080 (16:9) without clutter.

4. Enforce Motion Physics:

   • Never use linear transitions for UI movement. Use cubic-bezier(0.22, 1, 0.36, 1) or spring physics (stiffness: 120, damping: 18).
   • Synchronize visual state changes with clear step labels so the animation matches voiceover pacing.

Gotchas

• Avoid clutter: Keep maximum 3 data dimensions on screen at once. Dim inactive modules (opacity: 0.35) when focusing on a specific sub-component.
• Aspect Ratio: Lock the main stage container to 16:9 (aspect-ratio: 16/9, max-width: 1920px) centered in the viewport so layouts never break during video capture.
• No external image dependencies: Use pure CSS shapes, inline SVGs, and typography instead of external image URLs that may fail to load.