chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,15 @@
+{
+  "name": "Chat Interface",
+  "description": "Tests chat interface composition with animations",
+  "tags": ["chat", "ui", "animations"],
+
+  "minPsnr": 30,
+  "maxFrameFailures": 0,
+
+  "minAudioCorrelation": 0.9,
+  "maxAudioLagWindows": 120,
+
+  "renderConfig": {
+    "fps": 30
+  }
+}
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d002c0d9d9851ec6abce1c662ed7a0a7b78b993ec778650a9aca4a437edb4080
+size 887615
@@ -0,0 +1,85 @@
+# HyperFrame Schema Compliance Review
+
+## Executive Summary
+
+- Total files reviewed: 2
+- Critical issues: 1
+- Overall compliance status: NEEDS_WORK
+
+## Critical Issues
+
+### Empty Tweens for Duration
+
+- **File**: index.html:26
+- **File**: compositions/typography.html:224
+- **Violation**: `masterTL.to({}, { duration: 15 });` and `tl.to({}, { duration: 15 });`
+- **Schema Rule**: "NEVER create empty tweens like `tl.to({}, { duration: N })` just to set duration — use `data-duration` instead"
+- **Impact**: This is a direct violation of the schema's duration management rules. While it might work in some environments, it bypasses the framework's declarative duration system and can lead to rendering inconsistencies or failures in the server-side renderer.
+
+## Compliance Checklist
+
+- [x] All compositions have `data-width` and `data-height` attributes
+- [x] All timelines are finite with duration > 0
+- [x] All compositions registered in `window.__timelines`
+- [x] No use of `Math.random()`, `Date.now()`, or non-deterministic code
+- [x] Primitive clips have required data attributes (`id`, `data-start`, `data-track-index`)
+- [x] `data-duration` specified for all `<img>` clips (N/A - no images)
+- [x] No manual media playback control (`video.play()`, `audio.pause()`, etc.)
+- [x] No manual clip mounting/unmounting in scripts
+- [x] Relative timing references are valid (N/A - no relative timing used)
+- [x] Clips on same track don't overlap in time
+- [x] Reusable compositions in separate HTML files
+- [x] Composition files use `<template>` tags
+- [x] External compositions loaded via `data-composition-src`
+- [x] All script-animated content wrapped in compositions
+- [x] No infinite or zero-duration timelines
+
+### index.html
+
+**Status**: HAS_ISSUES
+
+**Issues Found**:
+
+- **Line 26**: Uses empty tween `masterTL.to({}, { duration: 15 });` to set duration. Should use `data-duration="15"` on the `#main` div (line 11) instead.
+
+### compositions/typography.html
+
+**Status**: HAS_ISSUES
+
+**Issues Found**:
+
+- **Line 224**: Uses empty tween `tl.to({}, { duration: 15 });` to set duration. Should use `data-duration="15"` on the composition root div (line 2) instead.
+- **Line 156**: `const sceneEl = document.querySelector(scene.id);` - While not a strict violation, it's better to scope queries to the composition root to avoid conflicts if multiple instances of the same composition are loaded.
+
+## Recommended Fixes
+
+### Fix 1: Declarative Duration in index.html
+
+Replace the empty tween with `data-duration` on the element.
+
+```html
+<!-- Change line 11 -->
+<div
+  id="main"
+  data-composition-id="main-comp"
+  data-width="1080"
+  data-height="1920"
+  data-start="0"
+  data-duration="15"
+>
+  <!-- Remove line 26 -->
+  <!-- masterTL.to({}, { duration: 15 }); -->
+</div>
+```
+
+### Fix 2: Declarative Duration in typography.html
+
+Replace the empty tween with `data-duration` on the element.
+
+```html
+<!-- Change line 2 -->
+<div data-composition-id="typography" data-width="1080" data-height="1920" data-duration="15">
+  <!-- Remove line 224 -->
+  <!-- tl.to({}, { duration: 15 }); -->
+</div>
+```
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kinetic Typography Sequence</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  </head>
+  <body>
+    <div
+      id="main"
+      data-composition-id="main-comp"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="15"
+    >
+      <!-- Audio Asset -->
+      <audio
+        id="bg-music"
+        src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/f87f97d4_0c49f6fa95224cc3bd4f5ea3a0d937c5.wav"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+      ></audio>
+
+      <!-- Typography Composition -->
+      <div
+        id="typography-layer"
+        data-composition-id="typography"
+        data-composition-src="compositions/typography.html"
+        data-start="0"
+        data-track-index="1"
+      ></div>
+    </div>
+
+    <script>
+      const masterTL = gsap.timeline({ paused: true });
+      window.__timelines["main-comp"] = masterTL;
+    </script>
+  </body>
+</html>
@@ -0,0 +1,25 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000;
+  font-family: "Montserrat", sans-serif;
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap");
+
+#main {
+  width: 1080px;
+  height: 1920px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}