hyperframes lint command and the render-time render-gate consume the same rule engine from here.
When to Use
Use@hyperframes/lint when you need to:
- Lint a composition project (an index + sub-compositions) from Node
- Lint a single HTML string programmatically
- Gate a render on lint findings (
shouldBlockRender) - Surface lint findings in your own UI or CI annotations
@hyperframes/core/lint still resolves (via a back-compat re-export stub), so existing imports keep working. New code should import from @hyperframes/lint directly.Package Exports
The lint package has a single entry point:Linting a Single Composition
Linting a Project
lintProject walks a composition directory — the index plus any sub-compositions — and returns aggregated findings. It takes a directory path string, so it’s callable from any Node context with nothing but a path:
Browser usage
The rule engine runs fully client-side — no Node.js, no filesystem, no server round-trip. Import from the@hyperframes/lint/browser entry to validate composition HTML directly in a browser-only editor or tool:
lintHyperframeHtml, lintMediaUrls, and shouldBlockRender — everything that operates on an HTML string. It is built with a browser target and contains zero node: builtins, so it bundles cleanly for the client (verified at build time).
lintProject (which walks a project directory) is filesystem-based and is not part of the browser entry — import it from the main @hyperframes/lint entry in Node.What the Linter Catches
Detected issues include:- Missing timeline registration (
window.__timelines) - Unmuted video elements (causes autoplay failures)
- Missing
class="clip"on timed visible elements - Deprecated attribute names
- Missing composition dimensions (
data-width,data-height) - Invalid
data-startreferences to nonexistent clip IDs - Seek-order hazards that render differently on cold render workers: relative tween
values (
"+=...") whose property has a second concurrent writer (gsap_relative_value_second_writer),repeatRefreshcombined with relative values (gsap_repeat_refresh_relative_value), function-valued tween vars that measure the DOM or misuse the index parameter (gsap_function_value_hazard), DOM measurement reachable from timeline callbacks (gsap_callback_dom_measurement), and non-deterministic values likegsap.utils.random()/"random(...)"(non_deterministic_code) - SVG draw-on pitfalls: GSAP
strokeDasharraywrites on elements whose CSS declares a multi-componentstroke-dasharray(svg_drawon_css_dasharray_conflict),getTotalLength()on paths with nodyet (svg_measure_before_path_d), and initial-state hides viatl.set(..., 0)that never render on frame 0 (gsap_timeline_set_initial_hide)
For a full list of what the linter catches and how to fix each issue, see Common Mistakes and Troubleshooting.
Related Packages
@hyperframes/parsers
The HTML + GSAP parsing layer the linter builds on.
@hyperframes/core
Types and runtime; re-exports the linter for back-compat.
CLI
npx hyperframes lint wraps this package.Studio
Surfaces lint findings in the editor.