Problem
Summary
Introduce declarative conditional rendering to HyperFrames so HTML elements, components, animations, and even entire scenes can be shown, hidden, or modified based on data, variables, or runtime conditions.
This would allow a single HyperFrames composition to generate many different video variants without duplicating layouts or maintaining multiple templates.
Problem
Today, HyperFrames compositions are primarily declarative: every element that exists in the HTML is rendered.
This works well for static layouts, but many real-world videos contain optional content that depends on data.
Examples include:
- Sale badges that only appear when a discount exists
- Customer avatars that should only render when available
- Enterprise messaging shown only for enterprise customers
- Different CTAs depending on inventory or product status
- Chapters that should only appear when data exists
- Optional logos, ratings, testimonials, or feature lists
The current solution is usually to create multiple nearly identical compositions or generate different HTML for every variation.
As projects grow, this quickly becomes difficult to maintain and prevents a single composition from adapting to different data sources.
Proposed solution
Proposed Solution
Proposed Behavior
Introduce declarative conditional attributes that determine whether an element should render.
Example:
<div if="discount > 0">
<DiscountBadge />
</div>If the condition evaluates to true, the element renders normally.
If the condition evaluates to false, the element is omitted entirely from the rendered video.
This keeps compositions declarative while allowing layouts to respond to data.
Additional Examples
Optional Avatar
<Avatar if="customer.avatar" />
Company Logo Fallback
<Avatar if="customer.avatar" />
<CompanyLogo unless="customer.avatar" />
Enterprise Messaging
<div if="company.size == 'enterprise'">
Enterprise Ready
</div>Dynamic Call-To-Action
<Button if="inventory > 0">
Buy Now
</Button>
<Button if="inventory == 0">
Notify Me
</Button>Ratings
<FiveStars if="rating >= 4.5" />
<FourStars if="rating >= 3 && rating < 4.5" />
Optional Scene
<section if="showOutro">
...
</section>Entire scenes could be skipped without requiring duplicate compositions.
Supported Expressions
Conditions could support familiar comparison operators.
As well as useful helper functions.
exists()
empty()
contains()
startsWith()
endsWith()
Keeping expressions intentionally simple would preserve determinism while covering the majority of real-world use cases.
Integration with Data-Bound Video
This feature becomes especially powerful when combined with data-bound compositions.
Example dataset:
| Name |
Premium |
Discount |
Avatar |
CTA |
| John |
Yes |
20 |
Yes |
Buy |
| Sarah |
No |
0 |
No |
Learn |
| Mike |
Yes |
35 |
Yes |
Upgrade |
Using a single HyperFrames composition:
John
- Shows avatar
- Displays discount badge
- Uses Buy Now CTA
- Includes premium messaging
Sarah
- Hides avatar
- Removes discount badge
- Shows company logo
- Uses Learn More CTA
Mike
- Shows avatar
- Displays 35% discount
- Uses Upgrade CTA
- Includes premium messaging
One composition could generate all three videos without duplicating layouts.
Benefits
- One composition replaces many template variations.
- Reduces duplicated HTML and CSS.
- Easier to maintain as projects grow.
- Enables much richer personalization.
- Makes data-driven video generation significantly more powerful.
- Provides familiar declarative behavior for web developers.
Alternatives considered
Alternatives Considered
Generating completely different HTML for every variation.
While this works, it introduces duplicated layouts, larger code generation, and more maintenance overhead.
Declarative conditional rendering keeps the composition itself reusable while allowing the rendered output to adapt to changing data.
Additional context
Additional Context
Conditional rendering has become a foundational concept in modern UI frameworks because it allows one interface to support many application states without duplicating markup.
HyperFrames already brings familiar web technologies such as HTML and CSS into video creation. Adding declarative conditional rendering would extend that same philosophy, allowing a single video composition to behave more like a modern web application while remaining deterministic and easy for both humans and AI agents to generate.
Rather than treating videos as fixed layouts, HyperFrames could treat them as adaptive compositions that respond intelligently to data, personalization, and runtime context.
I believe this would be a natural evolution of the platform and would pair especially well with Data-Bound Video, Responsive Video, and future AI-assisted composition workflows.
Problem
Summary
Introduce declarative conditional rendering to HyperFrames so HTML elements, components, animations, and even entire scenes can be shown, hidden, or modified based on data, variables, or runtime conditions.
This would allow a single HyperFrames composition to generate many different video variants without duplicating layouts or maintaining multiple templates.
Problem
Today, HyperFrames compositions are primarily declarative: every element that exists in the HTML is rendered.
This works well for static layouts, but many real-world videos contain optional content that depends on data.
Examples include:
The current solution is usually to create multiple nearly identical compositions or generate different HTML for every variation.
As projects grow, this quickly becomes difficult to maintain and prevents a single composition from adapting to different data sources.
Proposed solution
Proposed Solution
Proposed Behavior
Introduce declarative conditional attributes that determine whether an element should render.
Example:
If the condition evaluates to
true, the element renders normally.If the condition evaluates to
false, the element is omitted entirely from the rendered video.This keeps compositions declarative while allowing layouts to respond to data.
Additional Examples
Optional Avatar
Company Logo Fallback
Enterprise Messaging
Dynamic Call-To-Action
Ratings
Optional Scene
Entire scenes could be skipped without requiring duplicate compositions.
Supported Expressions
Conditions could support familiar comparison operators.
As well as useful helper functions.
Keeping expressions intentionally simple would preserve determinism while covering the majority of real-world use cases.
Integration with Data-Bound Video
This feature becomes especially powerful when combined with data-bound compositions.
Example dataset:
Using a single HyperFrames composition:
John
Sarah
Mike
One composition could generate all three videos without duplicating layouts.
Benefits
Alternatives considered
Alternatives Considered
Generating completely different HTML for every variation.
While this works, it introduces duplicated layouts, larger code generation, and more maintenance overhead.
Declarative conditional rendering keeps the composition itself reusable while allowing the rendered output to adapt to changing data.
Additional context
Additional Context
Conditional rendering has become a foundational concept in modern UI frameworks because it allows one interface to support many application states without duplicating markup.
HyperFrames already brings familiar web technologies such as HTML and CSS into video creation. Adding declarative conditional rendering would extend that same philosophy, allowing a single video composition to behave more like a modern web application while remaining deterministic and easy for both humans and AI agents to generate.
Rather than treating videos as fixed layouts, HyperFrames could treat them as adaptive compositions that respond intelligently to data, personalization, and runtime context.
I believe this would be a natural evolution of the platform and would pair especially well with Data-Bound Video, Responsive Video, and future AI-assisted composition workflows.