StudioX Viewport: cinematic TradingView concept film

projects/studiox-v2/.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+renders/
+snapshots/
+.hyperframes/
+assets/gsap.min.js
+assets/soundtrack.wav
+assets/mix-premaster.wav
+assets/catalyst-source.mp3
+assets/tradingview-chart-source.svg
+assets/tradingview-chart.png
+*.log

projects/studiox-v2/README.md

@@ -0,0 +1,37 @@
+# TradingView — a StudioX Viewport concept film
+
+A 30-second, 1920 × 1080, 30 fps independent motion film. The edit combines editorial typography, local TradingView product artwork, illustrative chart studies, perspective panels, a tracked chart close-up, a three-beat montage and a quiet StudioX Viewport closing credit. No affiliation or commission from TradingView is represented.
+
+## Reproduce
+
+Requires Node 22+, Python 3 with NumPy, FFmpeg and curl. Hyperframes and GSAP versions are pinned in package-lock.json. A Chrome-compatible browser is required for validation and rendering; set HYPERFRAMES_BROWSER_PATH to an existing supported binary if the automatic download is unavailable.
+
+```bash
+cd projects/studiox-v2
+npm ci
+python3 -m pip install numpy==2.2.6
+npm run assets
+npm run lint
+npm run check
+npm run render
+```
+
+The asset preparation script downloads two public source assets, verifies their SHA-256 hashes, rasterizes the product artwork, copies the installed GSAP runtime and builds the stereo soundtrack. All playback assets are local after preparation. A changed source hash stops preparation for review.
+
+`build_visuals.py` regenerates the seven scene templates and root orchestrator. Run `scripts/refine-moment.py` after it to apply the macro chart shot. Existing source HTML is ready to use; regeneration is optional. Scene timing and copy are documented in storyboard.json; sound events in audio-cues.json. Rendered media, installed dependencies and downloaded/generated assets are excluded from git.
+
+## Credits and sources
+
+Music: **“Catalyst” by Scott Buckley — released under CC BY 4.0. www.scottbuckley.com.au**. Source: https://www.scottbuckley.com.au/library/catalyst/ . License: https://creativecommons.org/licenses/by/4.0/ . Changes: 30-second excerpt beginning at source 80 seconds, fades, original layered sound effects and loudness mastering. The music attribution is included on the closing frame. Preserve it when sharing the video; include the same attribution in a YouTube description.
+
+Product artwork: TradingView's official features page, https://www.tradingview.com/features/ , `make-it-easy.ca34373f92d54032738c.svg`. Copyright and marks remain with TradingView. Artwork is used as the subject of this independent concept demonstration. Generated chart studies are illustrative and are labelled as such; they do not show current prices or trading recommendations.
+
+Fonts: subset DejaVu Sans Bold, DejaVu Sans Mono and DejaVu Serif; see assets/FONT-LICENSE.txt. Runtime: GSAP, see assets/GSAP-NOTICE.md.
+
+The audio mix targets −14 LUFS integrated and −1.5 dBTP. The measured local WAV is −14.22 LUFS, −1.50 dBTP, with 7.4 LU loudness range. These describe technical levels; final listening preference is subjective.
+
+## Validation and timing
+
+See validation.json for the final browser gate and export checks. Render time is measured separately from research, scripting, coding, revisions, asset preparation and delivery.
+
+Final export: 30.000 seconds, 900 H.264 frames at 1920 × 1080 / 30 fps, stereo AAC at 48 kHz, 15,984,932 bytes. Export audio measured −14.28 LUFS integrated and −1.49 dBTP. The successful two-worker beginframe render took 114.315 seconds. Use `npm run render:benchmark` for that capture profile; regular `npm run render` retains the engine’s automatic memory safeguards.

projects/studiox-v2/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-v2/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-v2/audio-cues.json

@@ -0,0 +1,172 @@
+{
+  "music": {
+    "track": "Catalyst",
+    "composer": "Scott Buckley",
+    "sourceIn": 80,
+    "duration": 30,
+    "license": "CC BY 4.0",
+    "changes": "excerpt, fades and original SFX"
+  },
+  "target": {
+    "integratedLUFS": -14,
+    "truePeakDbTP": -1.5
+  },
+  "events": [
+    {
+      "time": 0.06,
+      "kind": "low impact / transient",
+      "gain": 0.154,
+      "pan": 0
+    },
+    {
+      "time": 0.28,
+      "kind": "glass detail",
+      "gain": 0.055,
+      "pan": -0.3
+    },
+    {
+      "time": 0.7,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": -0.65
+    },
+    {
+      "time": 1.05,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": 0.45
+    },
+    {
+      "time": 6.3,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": 0.4
+    },
+    {
+      "time": 9.3,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": -0.4
+    },
+    {
+      "time": 10.2,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": 0.4
+    },
+    {
+      "time": 12.55,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": 0
+    },
+    {
+      "time": 14.1,
+      "kind": "interface click",
+      "gain": 0.1,
+      "pan": 0.4
+    },
+    {
+      "time": 3.6,
+      "kind": "directional swish",
+      "gain": 0.25,
+      "pan": -0.4
+    },
+    {
+      "time": 7.55,
+      "kind": "directional swish",
+      "gain": 0.25,
+      "pan": 0.45
+    },
+    {
+      "time": 12.05,
+      "kind": "directional swish",
+      "gain": 0.25,
+      "pan": -0.45
+    },
+    {
+      "time": 16.4,
+      "kind": "directional swish",
+      "gain": 0.25,
+      "pan": 0.4
+    },
+    {
+      "time": 20.4,
+      "kind": "directional swish",
+      "gain": 0.25,
+      "pan": -0.2
+    },
+    {
+      "time": 24.45,
+      "kind": "directional swish",
+      "gain": 0.25,
+      "pan": 0.1
+    },
+    {
+      "time": 4,
+      "kind": "low impact / transient",
+      "gain": 0.187,
+      "pan": 0
+    },
+    {
+      "time": 8,
+      "kind": "low impact / transient",
+      "gain": 0.198,
+      "pan": -0.1
+    },
+    {
+      "time": 17,
+      "kind": "low impact / transient",
+      "gain": 0.231,
+      "pan": 0
+    },
+    {
+      "time": 18.33,
+      "kind": "low impact / transient",
+      "gain": 0.14300000000000002,
+      "pan": -0.3
+    },
+    {
+      "time": 19.67,
+      "kind": "low impact / transient",
+      "gain": 0.187,
+      "pan": 0.3
+    },
+    {
+      "time": 21,
+      "kind": "low impact / transient",
+      "gain": 0.253,
+      "pan": 0
+    },
+    {
+      "time": 25,
+      "kind": "low impact / transient",
+      "gain": 0.14300000000000002,
+      "pan": 0
+    },
+    {
+      "time": 23.1,
+      "kind": "glass detail",
+      "gain": 0.055,
+      "pan": 0.3
+    },
+    {
+      "time": 25.2,
+      "kind": "glass detail",
+      "gain": 0.055,
+      "pan": -0.2
+    }
+  ],
+  "premasterAnalysis": {
+    "input_i": "-16.31",
+    "input_tp": "-2.04",
+    "input_lra": "9.00",
+    "input_thresh": "-26.59",
+    "output_i": "-13.68",
+    "output_tp": "-1.50",
+    "output_lra": "6.20",
+    "output_thresh": "-23.78",
+    "normalization_type": "dynamic",
+    "target_offset": "-0.32"
+  }
+}