fix: commit regression test golden baselines

- Update .gitignore to allow packages/producer/tests/*/output/
- Commit compiled.html snapshots and output.mp4 golden baselines
  (MP4s tracked via Git LFS)

These were excluded by the blanket output/ gitignore rule but are
needed for regression tests to pass.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-03-22 00:56:52 -07:00
co-authored by Claude Opus 4.6
parent fbfb6c6156
commit 6ad12df1b6
47 changed files with 13169 additions and 0 deletions
+1
View File
@@ -26,6 +26,7 @@ coverage/
# Rendered output (not test fixtures — those use git LFS) # Rendered output (not test fixtures — those use git LFS)
output/ output/
!packages/producer/tests/*/output/
# npm pack artifacts # npm pack artifacts
*.tgz *.tgz
@@ -0,0 +1,258 @@
<!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>
<style>
[data-composition-id="typography"] .text-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
text-align: center;
}
[data-composition-id="typography"] .phrase {
font-size: 100px;
font-weight: 500;
opacity: 0;
position: absolute;
text-transform: uppercase;
letter-spacing: -2px;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
[data-composition-id="typography"] .word {
opacity: 0;
display: inline-block;
}
[data-composition-id="typography"] .glitch-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0;
}
[data-composition-id="typography"] .chromatic {
color: #ff00ff;
transform: translateX(5px);
}
[data-composition-id="typography"] .chromatic-2 {
color: #00ffff;
transform: translateX(-5px);
}
[data-composition-id="typography"] .cursor {
opacity: 0;
margin-left: 10px;
}
[data-composition-id="typography"] .thank-you {
font-size: 150px;
background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}[data-composition-id="typography"] /* Glitch Effect Classes */
.glitch-flicker {
animation: flicker 0.1s infinite;
}
@[data-composition-id="typography"] keyframes flicker {[data-composition-id="typography"] 0% { opacity: 0.5; transform: skew(2deg); }[data-composition-id="typography"] 50% { opacity: 1; transform: skew(-2deg); }[data-composition-id="typography"] 100% { opacity: 0.8; transform: skew(0deg); }
}
</style></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" data-end="15"></audio>
<!-- Typography Composition -->
<div style="position:relative;width:1080px;height:1920px" data-height="1920" data-width="1080" id="typography-layer" data-composition-id="typography" data-start="0" data-track-index="1">
<div class="text-container">
<div id="scene-1" class="phrase">
<span class="word">TEXT</span>
<span class="word">ANIMATION</span>
</div>
<div id="scene-2" class="phrase">
<span class="word">WHAT</span>
<span class="word">DO</span>
<span class="word">YOU</span>
<span class="word">WANT</span>
<span class="word">TO</span>
<span class="word">WRITE?</span>
</div>
<div id="scene-3" class="phrase">
<span class="word">EVERYTHING</span>
<span class="word">YOU</span>
<span class="word">WANT,</span>
</div>
<div id="scene-4" class="phrase">
<span class="word">STANDING</span>
<span class="word">IN</span>
<span class="word">FRONT</span>
<span class="word">OF</span>
<span class="word">YOU.</span>
</div>
<div id="scene-5" class="phrase">
<span class="word">VERY</span>
<span class="word">EASY,</span>
</div>
<div id="scene-6" class="phrase">
<span class="word">AND</span>
<span class="word">FAST.</span>
</div>
<div id="scene-7" class="phrase">
<span class="word">SIT</span>
<span class="word">BACK</span>
<span class="word">AND</span>
<span class="word">RELAX</span>
<span class="cursor">|</span>
</div>
<div id="scene-8" class="phrase">
<span class="word">WHAT</span>
<span class="word">YOU</span>
<span class="word">ARE</span>
<span class="word">LOOKING</span>
<span class="word">FOR?</span>
</div>
<div id="scene-9" class="phrase">
<span class="word">THERE</span>
<span class="word">YOU</span>
<span class="word">HAVE</span>
<span class="word">IT!</span>
</div>
<div id="scene-10" class="phrase thank-you">
<span class="word">THANK</span>
<span class="word">YOU</span>
</div>
</div>
</div>
</div>
<script>const masterTL = gsap.timeline({ paused: true });
window.__timelines["main-comp"] = masterTL;
;
(function(){
var __compId = "typography";
var __run = function() {
try {
const tl = gsap.timeline({ paused: true });
const scenes = [
{ id: "#scene-1", start: 0.5, duration: 1.2 },
{ id: "#scene-2", start: 2.0, duration: 1.8 },
{ id: "#scene-3", start: 4.0, duration: 1.0 },
{ id: "#scene-4", start: 5.2, duration: 1.5 },
{ id: "#scene-5", start: 7.0, duration: 0.8 },
{ id: "#scene-6", start: 8.0, duration: 0.8 },
{ id: "#scene-7", start: 9.0, duration: 1.8 },
{ id: "#scene-8", start: 11.0, duration: 1.5 },
{ id: "#scene-9", start: 12.8, duration: 1.0 },
{ id: "#scene-10", start: 14.0, duration: 1.0 }
];
scenes.forEach((scene, index) => {
const startTime = scene.start;
const sceneEl = document.querySelector(scene.id);
const words = sceneEl.querySelectorAll(".word");
// Show scene container
tl.set(scene.id, { opacity: 1 }, startTime);
// Word by word appearance
words.forEach((word, wIndex) => {
const wordStart = startTime + (wIndex * 0.2);
// Creative Animation Variations
if (index % 3 === 0) {
// Fly-in from sides
const xOffset = wIndex % 2 === 0 ? -500 : 500;
tl.fromTo(word, { opacity: 0, x: xOffset, scale: 0.5 }, { opacity: 1, x: 0, scale: 1, duration: 0.4, ease: "back.out(1.7)" }, wordStart);
} else if (index % 3 === 1) {
// Fade-in with scale and rotation
tl.fromTo(word, { opacity: 0, scale: 0, rotation: -45 }, { opacity: 1, scale: 1, rotation: 0, duration: 0.5, ease: "elastic.out(1, 0.5)" }, wordStart);
} else {
// Pop-In & Flicker (Original)
tl.set(word, { opacity: 1, scale: 1.5 }, wordStart);
tl.to(word, { scale: 1, duration: 0.1, ease: "power4.out" }, wordStart);
}
// Glitch/Chromatic Aberration & Horizontal Displacement on major beats
tl.to(scene.id, {
x: (wIndex % 2 === 0 ? 15 : -15),
skewX: (wIndex % 2 === 0 ? 5 : -5),
duration: 0.05,
repeat: 1,
yoyo: true,
ease: "none"
}, wordStart);
// Color flash for specific words (purple, cyan, teal)
if (word.textContent.includes("ANIMATION") || word.textContent.includes("WRITE") || word.textContent.includes("FAST") || word.textContent.includes("EASY")) {
tl.to(word, { color: "#a855f7", duration: 0.1, repeat: 1, yoyo: true }, wordStart);
}
});
// Typewriter Cursor for Scene 7
if (scene.id === "#scene-7") {
const cursor = sceneEl.querySelector(".cursor");
tl.set(cursor, { opacity: 1 }, startTime + (words.length * 0.2));
tl.to(cursor, { opacity: 0, duration: 0.4, repeat: 3, yoyo: true, ease: "steps(1)" }, startTime + (words.length * 0.2));
}
// Outro: Whole line disappears
tl.set(scene.id, { opacity: 0 }, startTime + scene.duration);
});
// Special Outro for Thank You
tl.to("#scene-10", {
filter: "hue-rotate(360deg) drop-shadow(0 0 30px rgba(0, 255, 255, 1))",
scale: 1.2,
duration: 1.0,
ease: "power1.inOut"
}, 14.0);
tl.to("#scene-10 .word", {
opacity: 0,
y: -50,
stagger: 0.1,
duration: 0.5,
ease: "power2.in"
}, 14.5);
window.__timelines["typography"] = tl;
} catch (_err) {
console.error("[Compiler] Composition script failed", __compId, _err);
}
};
if (!__compId) { __run(); return; }
var __selector = '[data-composition-id="' + (__compId + '').replace(/"/g, '\\"') + '"]';
var __attempt = 0;
var __tryRun = function() {
if (document.querySelector(__selector)) { __run(); return; }
if (++__attempt >= 8) { __run(); return; }
requestAnimationFrame(__tryRun);
};
__tryRun();
})()</script></body>
</html>
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d002c0d9d9851ec6abce1c662ed7a0a7b78b993ec778650a9aca4a437edb4080
size 887615
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3f7f7985a6424247d988cbd0b5025280a0c03557e8f7efaaf52f63f519d12fb5
size 57189876
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d2e098b9bd60796b15b6945a75bf4b7e9bd0939f806e0501ef59922d9522d0a6
size 142963
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic Cut Intro</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Lobster&family=Montserrat:wght@900&family=Playfair+Display:ital,wght@1,900&family=Press+Start+2P&family=Syncopate:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div id="container" data-composition-id="magic-cut-intro" data-width="1080" data-height="1920" data-start="0" data-duration="5.6" data-track-index="1">
<div class="text-variant" id="v1">Magic Cut</div>
<div class="text-variant" id="v2">Magic Cut</div>
<div class="text-variant" id="v3">Magic Cut</div>
<div class="text-variant" id="v4">Magic Cut</div>
<div class="text-variant" id="v5">Magic Cut</div>
<div class="text-variant" id="v6">Magic Cut</div>
<div class="text-variant" id="v7">Magic Cut</div>
<div class="text-variant" id="v8">Magic Cut</div>
<div class="text-variant" id="v9">Magic Cut</div>
<div class="text-variant" id="v10">Magic Cut</div>
<div class="text-variant" id="v11">Magic Cut</div>
<div class="text-variant" id="v12">Magic Cut</div>
<div class="text-variant" id="v13">Magic Cut</div>
<div id="final-message">Meet your Editing Agent</div>
<div id="particles-container"></div>
<!-- 9 Audio clicks synced with first 9 cuts -->
<audio id="click1" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="0" data-duration="0.2" data-track-index="2" crossorigin="anonymous" data-end="0.2"></audio>
<audio id="click2" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="0.2" data-duration="0.2" data-track-index="3" crossorigin="anonymous" data-end="0.4"></audio>
<audio id="click3" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="0.4" data-duration="0.2" data-track-index="4" crossorigin="anonymous" data-end="0.6000000000000001"></audio>
<audio id="click4" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="0.6" data-duration="0.2" data-track-index="5" crossorigin="anonymous" data-end="0.8"></audio>
<audio id="click5" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="0.8" data-duration="0.2" data-track-index="6" crossorigin="anonymous" data-end="1"></audio>
<audio id="click6" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="1.0" data-duration="0.2" data-track-index="7" crossorigin="anonymous" data-end="1.2"></audio>
<audio id="click7" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="1.2" data-duration="0.2" data-track-index="8" crossorigin="anonymous" data-end="1.4"></audio>
<audio id="click8" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="1.4" data-duration="0.2" data-track-index="9" crossorigin="anonymous" data-end="1.5999999999999999"></audio>
<audio id="click9" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="1.6" data-duration="0.2" data-track-index="10" crossorigin="anonymous" data-end="1.8"></audio>
<audio id="click10" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="1.8" data-duration="0.2" data-track-index="11" crossorigin="anonymous" data-end="2"></audio>
<audio id="click11" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="2.0" data-duration="0.2" data-track-index="12" crossorigin="anonymous" data-end="2.2"></audio>
<audio id="click12" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="2.2" data-duration="0.2" data-track-index="13" crossorigin="anonymous" data-end="2.4000000000000004"></audio>
<audio id="click13" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/52be8a19_b6ad2cf680444264933b185ff8295074.mp3" data-start="2.4" data-duration="0.2" data-track-index="14" crossorigin="anonymous" data-end="2.6"></audio>
<audio id="epic-boom" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/02937d93_65b31a3a3d1f4568b0516b66343245d6.mp3" data-start="2.6" data-duration="3.0" data-track-index="15" crossorigin="anonymous" data-end="5.6"></audio>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:324369f32516e8408fd11bf3e1644d3fc25a024cea3f2483a932621c4e264293
size 450917
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:73b0bf5379865cec6a606c9d4d79cc7604ad4051e72d68499c60e4cc40c53afe
size 115820
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6aba60a5a3919132986e785b89f4b3434d23d337d95958a515b1fe2e11906721
size 5154704
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f09f5074edd21e2431171bfc7c7e9ed1ca6e5104a347721ac13ecadb625fe10a
size 4884784
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5f43cdf7e1886961e1d7f0bf5b3d05e3ee94f8013225465d7612aa9e2208a0c1
size 5626701
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:04de22fa8fe2bd25a40ffb6577fcf6da7d0317a44ed753c291f238f1ae048ccc
size 8714819
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0cb2f8b9a8be963ecb14e4a18cad63c67fcbffa075d6cf2238e9c5ed6167f3fd
size 9143629
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d5796cfc1252d4af0778f44fb1d7a7e6e75adb30abde050463d1be6e4184d8e8
size 12421404
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f5e7d82a72a22b19ecda914727c0bb45453e213865f7d44ba88bd328053eded7
size 7614486
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:701ec3b1ece40ca89d8b1836b10f8a02f2ed5c442f99c059c62dd86fa66003b5
size 10757091
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d260f106a6ad907a2b4d07b78e8e8d4b286eea3f8650be9d8a6b4674c194e64c
size 6114459
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:85580df0aed8d88978dca64536cbeea789af8fdf6c2f05522a02133677b26e43
size 6477072
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:798f6756d8c07f5b0a44f7c861fcf051c6a043f03ec13e71249bd5ae8175d98a
size 3900890
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:24b61269e44dfe3fb6954237774703b2b4cf30a9f49404374a0004f4303c59da
size 18345597
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ed6c28c61ca54c7b45229eb7fe6222ab5aef34cd2132a285d7a4e164319127b9
size 6704037
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ebf2afb488df6e1bb8e102858dac79d86298f713d9eeff255bd1b1848b25dfbe
size 7516945
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e9da10caf6162ba07b1d27aa8fd53190e9010f6f0c98c1afe3f85fb9a5f9e140
size 7453471
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4c781e6b31c1631dd2a4ef537f26e35888227240d071fff99683b05c27eb7251
size 8569076
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9e1103ae6d6f666f28c9dc8b814f08e625eb9e9da7bd9b321aa206cdf1463913
size 7984836
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:520015e780742d74ea28bc88251bbf3adc03bfe42e16a3b28ef6b22bffaea4c0
size 4786337