High-Fidelity Marketing Engine
Relevant source files
The following files were used as context for generating this wiki page:The High-Fidelity Marketing Engine is a specialized, built-in system designed to produce agency-grade promotional videos for the Nota application. It operates independently from the main React application, using a dedicated HTML file (nota_marketing_v4.html) to create procedural animations. The engine is capable of rendering 4K 60FPS videos with synchronized audio and high-quality motion design, which can be exported directly to a WebM file.
This system embodies the project's commitment to a high standard of design, creating visually striking and memorable marketing assets that avoid generic aesthetics.
Sources: README.md:31-36, extensions/frontend-design/skills/frontend-design/SKILL.md:1-5
Architecture and Core Technologies
The engine is built upon a foundation of web technologies focused on high-performance graphics and audio synthesis. It is a self-contained system within a single HTML file, orchestrated by a powerful animation library.
Sources: README.md:31-36, README.md:40-44
Technology Stack
The following table outlines the key technologies used in the marketing engine.
| Technology | Purpose |
|---|---|
| GSAP 3.12 | Pixel-perfect motion design and animations. |
| Web Audio API | Procedural synthesis of tech-SFX. |
| VP8/VP9 Encoding | Enables direct-to-WebM high-quality export. |
Sources: README.md:34-36
Design Philosophy
The engine's output is guided by a strong design philosophy that emphasizes creating "distinctive, production-grade frontend interfaces" with "exceptional attention to aesthetic details." The goal is to produce content that is visually striking and memorable, aligning with the "Agency-Grade Motion Design" principle of the Nota project. This involves using high-impact motion, such as well-orchestrated page loads and staggered reveals, to create a sense of delight and surprise.
Sources: README.md:10, extensions/frontend-design/skills/frontend-design/SKILL.md:1-5, 19-22
Rendering Process
The process of generating a marketing video is initiated manually by the developer. It leverages browser-native screen capture capabilities to record the procedurally generated animation and audio.
The diagram below illustrates the user flow for rendering a video.
This flow ensures that the high-fidelity animation, powered by GSAP, and the procedural sound effects from the Web Audio API are captured together in a single video file.
Sources: README.md:58-64
Asset Preparation: Audio Injection
To create a self-contained marketing asset, audio files such as voiceovers are not linked externally. Instead, they are embedded directly into the HTML file as base64-encoded data URIs. This is accomplished using the inject_audio_unified.py script.
This Python script reads a specified audio file, converts it to a base64 string, and injects it into a placeholder comment within the target HTML file (e.g., nota_marketing_v4.html).
Sources: inject_audio_unified.py:2-7, 20-32
Audio Injection Flow
The following sequence diagram shows how the inject_audio_unified.py script operates.
Sources: inject_audio_unified.py
Usage Example
The script is executed from the command line, as shown in its documentation.
# For v4
python inject_audio_unified.py \
--html nota_marketing_v4.html \
--target '<!-- <audio id="vo-track" src="assets/nota_voiceover.mp3"></audio> -->' \
--replacement '<audio id="vo-track" src="data:audio/mp3;base64,{b64_audio}" crossorigin="anonymous"></audio>'
Sources: inject_audio_unified.py:7-13
Conclusion
The High-Fidelity Marketing Engine is a powerful, self-contained feature of the Nota project that enables the creation of professional-quality promotional videos. By combining procedural animations with GSAP, synthesized audio, and an efficient asset injection pipeline, the engine produces polished marketing materials that reflect the project's high standards for design and user experience. This system is a testament to the project's philosophy that "The workflow is the product," extending even to its marketing efforts.
Sources: README.md:31-33, 67