feat: StudioX Viewport coded TradingView motion study (30s)

projects/studiox-v3/.gitignore

@@ -0,0 +1,15 @@
+node_modules/
+renders/
+snapshots/
+.hyperframes/
+assets/gsap.min.js
+assets/score.wav
+assets/score-premaster.wav
+assets/catalyst-source.mp3
+validation.json
+*.log
+__pycache__/
+AGENTS.md
+CLAUDE.md
+audio-cues.json
+index-video.html

projects/studiox-v3/BRIEF.md

@@ -0,0 +1,18 @@
+# StudioX Viewport · TradingView motion study
+
+## Intent
+
+- Thirty-second 16:9, 1920 × 1080, 30 fps independent concept film.
+- TradingView is the subject. StudioX Viewport is the creator credit; StudioX has no space.
+- A coded moving market signal drives the action. Motion is continuous and causally linked across cuts. No screenshot pan or static image montage.
+- Premium editorial type, energetic but readable. Closing phrase: “Great ideas should move faster.”
+- Code-driven charts and UI are clearly illustrative, not current prices, financial advice, or an official TradingView promotion.
+- Full music and sound mix, with prominent accents tied to authored visual beats.
+
+## Production choice
+
+Follow the signal from macro data into a chart, through an illustrative chart interaction, and out through kinetic typography. The source remains editable HTML/CSS/SVG/GSAP; Hyperframes captures frames and mixes audio. The previous cut is reference for brand copy only, not a motion template.
+
+## Scope
+
+One finished MP4, source, storyboard, audio cues, reproducible build and checks. Existing fork and PR remain intact; this is a new project directory.

projects/studiox-v3/README.md

@@ -0,0 +1,26 @@
+# StudioX Viewport × TradingView · 30-second motion study
+
+An independent concept film. The market signal is a moving vector object throughout the cut: it draws a path, creates a chart, becomes a cursor and annotation, morphs three chart views, converges three panels, and becomes the typographic seam. All chart and interface data are illustrative. This is not a TradingView endorsement, current price display, or trading recommendation.
+
+## Reproduce
+
+Node 22+, Python 3 with NumPy, FFmpeg, curl and Chrome/Chromium are required. Hyperframes and GSAP are pinned in `package-lock.json`.
+
+```bash
+cd projects/studiox-v3
+npm ci
+npm run assets
+npm run lint
+npm run check
+npm run render
+```
+
+If Chrome is installed outside the usual path, set `HYPERFRAMES_BROWSER_PATH` to its binary. `scripts/prepare-assets.mjs` verifies the SHA-256 hash of the licensed music source, copies the pinned GSAP runtime, and generates the 30-second WAV. `scripts/render-film.mjs` renders the coded picture in Hyperframes and muxes the authored score with FFmpeg. This avoids a Hyperframes 0.8.145 audio-normalization failure observed during this export. Assets and renders are excluded from git where they can be rebuilt. The font files and their license are retained with the source. `STORYBOARD.md` records the visual sequence; `motion.js` authors deterministic GSAP animation; `scripts/build-score.py` authors the sectional music edit and event sound cues.
+
+## Media credit
+
+Music: **“Catalyst” by Scott Buckley**, CC BY 4.0, https://www.scottbuckley.com.au/library/catalyst/ . Four excerpts and original effects are remixed and mastered for the cut; the on-film music credit must be retained in public exports. See https://creativecommons.org/licenses/by/4.0/ . Fonts: DejaVu subsets, license in `assets/FONT-LICENSE.txt`. GSAP notice: `assets/GSAP-NOTICE.md`.
+
+## Quality gates
+
+The browser check catches broken rendering, clipping, text collisions and basic contrast; it cannot grade editorial rhythm. Review the rendered MP4 with audio and check the motion at 9.4–10.3, 19.5–20.3 and 26.8–28.5. This film is 30 seconds by request, separate from the planned 60-second deliverable.

projects/studiox-v3/STORYBOARD.md

@@ -0,0 +1,41 @@
+# StudioX Viewport / TradingView — 30-second motion study
+
+Canvas 1920×1080 at 30 fps. Midnight `#081321`, ivory `#F0F0EA`, signal cyan `#5DE5E1`, TradingView blue `#2D6DF6`, warning coral `#FF695D`. One persistent luminous signal point at the center of each transformation. The act boundaries use a bright energy wipe carried by that point, not unrelated slides. Silence and negative space are used between dense passages.
+
+## 00:00–00:10 · Discover the signal
+
+0.0–1.6: Near-black. Thin pulsing data strokes race across frame. The signal point changes direction and draws a sharp vector path. Large words `THE MARKET` appear as the path intersects them, then `DOESN’T WAIT` locks on a musical impact.
+
+1.6–4.0: Camera pulls back from the moving point: strokes resolve into a chart axis and candlesticks grow sequentially under it. The signal passes from one candle to the next. Counter lines and crosshair respond to it.
+
+4.0–7.4: The same point becomes a pointer in an illustrative TradingView chart surface. A drag draws a diagonal annotation along two actual chart pivots. Text `SEE THE MOMENT` arrives after the gesture, not before it.
+
+7.4–10.0: The chart surface rotates and descends through a masked zoom into the latest candle; the signal expands into a circular light at 960,540 for the next act.
+
+## 00:10–00:20 · Act on context
+
+10.0–12.8: Circular light contracts to a selection target in a reconfigured wide chart. A thin cursor line scans, triggering tooltips and an active timeframe. Header `CHANGE THE VIEW`.
+
+12.8–16.5: Three timeframe controls change sequentially. The chart's geometry morphs between three different local vector data paths in the same graph; grid labels and highlight respond to the active state. Camera changes scale in coordination with the data, then settles.
+
+16.5–18.8: The chart splits into three perspectives (macro, intraday, watchlist), each animating a distinct response. They converge along matched trajectories rather than fading to a different card.
+
+18.8–20.0: A bright cyan signal traces across the merged horizon and becomes one large horizontal stroke for the typographic climax.
+
+## 00:20–00:30 · Payoff and credit
+
+20.0–22.8: Horizontal stroke cuts open giant editorial typography `GREAT IDEAS`. Each word acts on the stroke and repositions the composition.
+
+22.8–25.0: The words `SHOULD MOVE` travel with the accelerating line, breaking through a field of measured ticks. Kinetic typography is the subject.
+
+25.0–27.1: `FASTER.` forms at full scale from the travel trails, then settles into stillness.
+
+27.1–30.0: The signal folds into a restrained TradingView wordmark and a separate `CREATED BY STUDIOX VIEWPORT` credit. A final line continues moving beneath the lockup; legal and music credit remain small but readable.
+
+## Sound direction
+
+~120–128 BPM pulse with a composed beat grid; deliberate dropouts at 10.0 and 20.0, build through 25.0, restrained branded release at 27.1. Directional effects and short low impacts follow visible causes. Do not disguise a continuous music excerpt as editing.
+
+## Proof frames
+
+0.0, 1.2, 3.0, 5.4, 8.7, 10.3, 14.4, 17.7, 20.5, 23.8, 25.9, 28.2, 29.9 plus frame runs straddling 10.0, 20.0 and 27.1. Review motion sequences as video, not only posters.

projects/studiox-v3/assets/FONT-LICENSE.txt

@@ -0,0 +1,78 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: DejaVu fonts
+Upstream-Author: Stepan Roh <src@users.sourceforge.net> (original author),
+                  see /usr/share/doc/fonts-dejavu-core/AUTHORS for full list
+Source: https://dejavu-fonts.github.io/
+
+Files: *
+Copyright: Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved.
+ Bitstream Vera is a trademark of Bitstream, Inc.
+ DejaVu changes are in public domain.
+License: bitstream-vera
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of the fonts accompanying this license ("Fonts") and associated
+ documentation files (the "Font Software"), to reproduce and distribute the
+ Font Software, including without limitation the rights to use, copy, merge,
+ publish, distribute, and/or sell copies of the Font Software, and to permit
+ persons to whom the Font Software is furnished to do so, subject to the
+ following conditions:
+ .
+ The above copyright and trademark notices and this permission notice shall
+ be included in all copies of one or more of the Font Software typefaces.
+ .
+ The Font Software may be modified, altered, or added to, and in particular
+ the designs of glyphs or characters in the Fonts may be modified and
+ additional glyphs or characters may be added to the Fonts, only if the fonts
+ are renamed to names not containing either the words "Bitstream" or the word
+ "Vera".
+ .
+ This License becomes null and void to the extent applicable to Fonts or Font
+ Software that has been modified and is distributed under the "Bitstream
+ Vera" names.
+ .
+ The Font Software may be sold as part of a larger software package but no
+ copy of one or more of the Font Software typefaces may be sold by itself.
+ .
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT,
+ TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME
+ FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING
+ ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
+ THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE
+ FONT SOFTWARE.
+ .
+ Except as contained in this notice, the names of Gnome, the Gnome
+ Foundation, and Bitstream Inc., shall not be used in advertising or
+ otherwise to promote the sale, use or other dealings in this Font Software
+ without prior written authorization from the Gnome Foundation or Bitstream
+ Inc., respectively. For further information, contact: fonts at gnome dot
+ org.
+
+Files: debian/*
+Copyright: (C) 2005-2006 Peter Cernak <pce@users.sourceforge.net>
+           (C) 2006-2011 Davide Viti <zinosat@tiscali.it>
+           (C) 2011-2013 Christian Perrier <bubulle@debian.org>
+           (C) 2013 Fabian Greffrath <fabian+debian@greffrath.com>
+License: GPL-2+
+ This program is free software; you can redistribute it
+ and/or modify it under the terms of the GNU General Public
+ License as published by the Free Software Foundation; either
+ version 2 of the License, or (at your option) any later
+ version.
+ .
+ This program is distributed in the hope that it will be
+ useful, but WITHOUT ANY WARRANTY; without even the implied
+ warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+ PURPOSE.  See the GNU General Public License for more
+ details.
+ .
+ You should have received a copy of the GNU General Public
+ License along with this package; if not, write to the Free
+ Software Foundation, Inc., 51 Franklin St, Fifth Floor,
+ Boston, MA  02110-1301 USA
+ .
+ On Debian systems, the full text of the GNU General Public
+ License version 2 can be found in the file
+ /usr/share/common-licenses/GPL-2'.

projects/studiox-v3/assets/GSAP-NOTICE.md

@@ -0,0 +1,93 @@
+# GSAP (GreenSock Animation Platform)
+
+[![GSAP - Animate anything](https://gsap.com/GSAP-share-image.png)](https://gsap.com)
+
+GSAP is a **framework-agnostic** JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects... anything JavaScript can touch! GSAP's <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">ScrollTrigger</a> plugin delivers jaw-dropping scroll-based animations with minimal code. <a href="https://gsap.com/docs/v3/GSAP/gsap.matchMedia()">gsap.matchMedia()</a> makes building responsive, accessibility-friendly animations a breeze.
+
+No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 12 million sites. GSAP works around countless browser inconsistencies; your animations ***just work***. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery!
+
+GSAP is completely flexible; sprinkle it wherever you want. **Zero dependencies.**
+
+There are many optional <a href="https://gsap.com/docs/v3/Plugins">plugins</a> and <a href="https://gsap.com/docs/v3/Eases">easing</a> functions for achieving advanced effects easily like <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">scrolling</a>, <a href="https://gsap.com/docs/v3/Plugins/MorphSVGPlugin">morphing</a>, [text splitting](https://gsap.com/docs/v3/Plugins/SplitText), animating along a <a href="https://gsap.com/docs/v3/Plugins/MotionPathPlugin">motion path</a> or <a href="https://gsap.com/docs/v3/Plugins/Flip/">FLIP</a> animations. There's even a handy <a href="https://gsap.com/docs/v3/Plugins/Observer/">Observer</a> for normalizing event detection across browsers/devices.
+
+
+### Get Started
+
+[![Get Started with GSAP](https://gsap.com/_img/github/get-started.jpg)](https://gsap.com/get-started)
+
+
+## Docs &amp; Installation
+
+View the <a href="https://gsap.com/docs">full documentation here</a>, including an <a href="https://gsap.com/install">installation guide</a>.
+
+### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14/dist/gsap.min.js"></script>
+```
+
+See <a href="https://www.jsdelivr.com/gsap">JSDelivr's dedicated GSAP page</a> for quick CDN links to the core files/plugins. There are more <a href="https://gsap.com/install">installation instructions</a> at gsap.com.
+
+**Every major ad network excludes GSAP from file size calculations** and most have it on their own CDNs, so contact them for the appropriate URL(s).
+
+### NPM
+See the <a href="https://gsap.com/install">guide to using GSAP via NPM here</a>.
+
+```javascript
+npm install gsap
+```
+
+GSAP's core can animate almost anything including CSS and attributes, plus it includes all of the <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods">utility methods</a> like <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods/interpolate()">interpolate()</a>, <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange()">mapRange()</a>, most of the <a href="https://gsap.com/docs/v3/Eases">eases</a>, and it can do snapping and modifiers.
+
+```javascript
+// typical import
+import gsap from "gsap";
+
+// get other plugins:
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Flip from "gsap/Flip";
+import Draggable from "gsap/Draggable";
+
+// or all tools are exported from the "all" file (excluding members-only plugins):
+import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
+
+// don't forget to register plugins
+gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin);
+```
+
+The NPM files are ES modules, but there's also a /dist/ directory with <a href="https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/">UMD</a> files for extra compatibility.
+
+## GSAP is FREE!
+
+Thanks to [Webflow](https://webflow.com), GSAP is now **100% FREE** including ALL of the bonus plugins like [SplitText](https://gsap.com/docs/v3/Plugins/SplitText), [MorphSVG](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin), and all the others that were exclusively available to Club GSAP members. That's right - the entire GSAP toolset is FREE, even for commercial use! 🤯  Read more [here](https://webflow.com/blog/gsap-becomes-free)
+
+### ScrollTrigger &amp; ScrollSmoother
+
+If you're looking for scroll-driven animations, GSAP's <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">ScrollTrigger</a> plugin is the standard. There's a companion <a href="https://gsap.com/docs/v3/Plugins/ScrollSmoother/">ScrollSmoother</a> as well.
+
+[![ScrollTrigger](https://gsap.com/_img/github/scrolltrigger.jpg)](https://gsap.com/docs/v3/Plugins/ScrollTrigger)
+
+### Using React?
+
+There's a <a href="https://www.npmjs.com/package/@gsap/react">@gsap/react</a> package that exposes a `useGSAP()` hook which is a drop-in replacement for `useEffect()`/`useLayoutEffect()`, automating cleanup tasks. Please read the <a href="https://gsap.com/react">React guide</a> for details.
+
+### Resources
+
+* <a href="https://gsap.com/">gsap.com</a>
+* <a href="https://gsap.com/get-started/">Getting started guide</a>
+* <a href="https://gsap.com/docs/">Docs</a>
+* <a href="https://gsap.com/demos">Demos &amp; starter templates</a>
+* <a href="https://gsap.com/community/">Community forums</a>
+* <a href="https://gsap.com/docs/v3/Eases">Ease Visualizer</a>
+* <a href="https://gsap.com/showcase">Showcase</a>
+* <a href="https://www.youtube.com/@GreenSockLearning">YouTube Channel</a>
+* <a href="https://gsap.com/cheatsheet">Cheat sheet</a>
+* <a href="https://webflow.com">Webflow</a>
+
+### Need help?
+Ask in the friendly <a href="https://gsap.com/community/">GSAP forums</a>. Or share your knowledge and help someone else - it's a great way to sharpen your skills! Report any bugs there too (or <a href="https://github.com/greensock/GSAP/issues">file an issue here</a> if you prefer).
+
+### License
+GreenSock's standard "no charge" license can be viewed at <a href="https://gsap.com/standard-license">https://gsap.com/standard-license</a>.
+
+Copyright (c) 2008-2025, GreenSock. All rights reserved.

projects/studiox-v3/hyperframes.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  },
+  "media": {
+    "autoProxy": true
+  },
+  "authoringSkill": "product-launch-video"
+}