Files
hyperframes/registry/examples/warm-grain/compositions/intro.html
T
Vance IngallsandClaude Sonnet 4.6 386df23a74 fix(lint): promote rules to errors with registry exemptions and false-positive fixes (#1495)
* fix(lint): promote rules to errors with registry exemptions and false-positive fixes

- Export isRegistrySourceFile/isRegistryInstalledFile from composition.ts
- Add registry exemptions to google_fonts_import and font_family_without_font_face
- Add registry exemption to requestanimationframe_in_composition
- Fix timed_element_missing_clip_class: data-track-index alone no longer triggers
- Fix caption_transcript_parse_error: balanced-bracket scanner replaces non-greedy regex
- Fix missing_timeline_registry: skips sub-compositions and template-wrapped files
- Fix scene_layer_missing_visibility_kill: strip JS comments before pattern matching
- Fix gsap_css_transform_conflict: exempt from() alongside fromTo()
- Fix gsap_from_opacity_noop: only fires when opacity value is actually 0
- Add regression test for data-track-index-only elements

* test(lint): add regression tests for false-positive fixes

Covers the 7 missing negative-case assertions flagged in PR review:
- registry marker suppresses google_fonts_import + font_family_without_font_face
- registry marker suppresses requestanimationframe_in_composition
- isSubComposition suppresses missing_timeline_registry
- scene_layer_missing_visibility_kill: fires, commented-kill fires, real kill suppresses
- gsap_css_transform_conflict: from() exempt alongside fromTo()
- gsap_from_opacity_noop: non-zero opacity (e.g. 0.5) is a valid reveal, not a noop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(examples): fix warm-grain template to pass promoted lint rules

- index.html: remove undeclared "Lexend" from font-family stack
- intro.html: replace Google Fonts @import with bundled Inter font
- captions.html: quote TRANSCRIPT keys for valid JSON + use Inter font

Fixes CLI smoke CI failure after google_fonts_import, font_family_without_font_face,
and caption_transcript_parse_error were promoted from warning to error.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(cli): resolve warm-grain from repo registry in dev mode + bundle at build

getStaticTemplateDir now falls back to registry/examples/<id> in dev mode
so CI smoke tests use the PR-branch copy instead of fetching from main.
build-copy.mjs copies warm-grain to dist/templates/warm-grain at build time
so packed CLIs can scaffold it offline.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(examples): remove trailing comma from warm-grain TRANSCRIPT array

JSON.parse rejects trailing commas (valid JS, invalid JSON).
caption_transcript_parse_error was still firing because of the comma
on the last entry after quoting all keys.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-16 21:13:00 -07:00

85 lines
2.3 KiB
HTML
Vendored

<template id="intro-template">
<div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="3">
<div class="container">
<div class="title-card">
<h1 class="title">Hyperframes</h1>
<p class="subtitle">Design simplified.</p>
</div>
</div>
<style>
[data-composition-id="intro"] .container {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start; /* Align to left for speaker card */
align-items: center;
padding-left: 5%;
font-family: "Inter", sans-serif;
background: transparent;
}
[data-composition-id="intro"] .title-card {
background-color: #3b5e3a; /* Forest Green for contrast */
padding: 40px 60px;
border-radius: 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
text-align: left;
opacity: 0;
transform: translateX(-100%); /* Start off-screen left */
}
[data-composition-id="intro"] .title {
font-size: 100px;
font-weight: 600;
color: #f5f0e0; /* Cream text on green card */
margin: 0;
line-height: 1.1;
letter-spacing: -2px;
}
[data-composition-id="intro"] .subtitle {
font-size: 50px;
font-weight: 400;
color: #cc8832; /* Ochre accent */
margin: 10px 0 0 0;
line-height: 1.2;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
const tl = gsap.timeline({ paused: true });
// Animation: Speaker card slides in from the left
tl.to(
'[data-composition-id="intro"] .title-card',
{
opacity: 1,
x: 0,
duration: 0.8,
ease: "power2.out",
},
0.2,
);
// Exit: Slide off left at 1.8s (synced with 47% graphic)
tl.to(
'[data-composition-id="intro"] .title-card',
{
x: "-120%",
opacity: 0,
duration: 0.6,
ease: "power2.in",
},
1.8,
);
window.__timelines = window.__timelines || {};
window.__timelines["intro"] = tl;
})();
</script>
</div>
</template>