Reference-Backed 9

Nine official design references translated into original HyperFrames motion grammar with native landscape and portrait layouts.

Visual QA: 9 pairs pass · 18/18 variants pass

format-momentum-bar-race

Format Momentum

Original ranked bar race with changing leadership.

data_maps_timelinesreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Flourish Bar Chart Race

Ranked bars change length and order over time while a large time label and restrained annotation preserve the data story.

Design brief

Ranked bars change length and order over time while a large time label and restrained annotation preserve the data story.

Reference publisher: Flourish. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The landscape hierarchy and rank transition are clear. The margin revision gives every bar label, including NEWSLETTER, comfortable separation from the chart boundary and bar track. The portrait title and year are now separate, and the bars use the available vertical canvas more evenly.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

storm-track-temporal-map

Storm Track

Original time-filtered route and event map.

data_maps_timelinesreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

ArcGIS Temporal Map Time Slider

A map remains spatially stable while a time slider reveals time-filtered events, routes, and changing counts.

Design brief

A map remains spatially stable while a time slider reveals time-filtered events, routes, and changing counts.

Reference publisher: Esri. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The route now passes directly through the center of every event dot in both aspects. The map, route, events, data panel, and time bar remain spatially stable. Both aspects preserve clear map-to-data hierarchy with no clipping. The fixed 14:30 label is less expressive than the moving time bar but is not a blocking inconsistency.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

warming-orbit-radial-data

Warming Orbit

Original fictional radial trend visualization.

data_maps_timelinesreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

NASA Climate Spiral

A radial trace accumulates over time against fixed reference rings, making a long temporal trend legible in one composition.

Design brief

A radial trace accumulates over time against fixed reference rings, making a long temporal trend legible in one composition.

Reference publisher: NASA Scientific Visualization Studio. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The radial accumulation reads clearly against fixed reference rings. The central 2026 label remains static and no longer competes with the spiral through repeated yellow flashing. Metric panels stay subordinate to the primary chart in both aspects. The final state is stable and fully contained.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

arena-network-sports-package

Arena Network

Original modular sports score and player package.

broadcast_graphicsreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Epic Sports Broadcast Motion Design Sample

A modular sports package combines score, player, team, matchup, and statistics states with replaceable data fields.

Design brief

A modular sports package combines score, player, team, matchup, and statistics states with replaceable data fields.

Reference publisher: Epic Games. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: Score, teams, player feature, and performance bars form a coherent broadcast package. Both aspects are independently composed and remain readable. The opening is underfilled before the score package arrives, but the live network identity remains visible.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

northline-news-lower-third

Northline News

Original live-news headline and lower-third package.

broadcast_graphicsreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Epic Your First Graphic with Motion Design

A controllable 2D graphic enters, transforms, holds, and exits as one coherent broadcast-safe composition.

Design brief

A controllable 2D graphic enters, transforms, holds, and exits as one coherent broadcast-safe composition.

Reference publisher: Epic Games. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: Headline, abstract stage, reporter lower third, and time block remain coherent. The portrait cyan ring crosses behind the headline but does not reduce it below readable contrast. The final lower-third lock is stable in both aspects.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

regional-weather-wall

Weather Wall

Original weather map and forecast package.

broadcast_graphicsreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Epic Motion Design Quickstart

Live television, news, weather, sports, and interstitial graphics use rapid template animation and real-time data visualization.

Design brief

Live television, news, weather, sports, and interstitial graphics use rapid template animation and real-time data visualization.

Reference publisher: Epic Games. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The portrait map and four-day forecast fit cleanly. The revised landscape RAIN -> CLEAR line remains on one line and fits inside the current-condition panel. The map now uses one coherent land silhouette with internal boundaries and curved fronts instead of overlapping rectangles.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

quiet-mode-state-machine

Quiet Mode

Original explicit-state product interaction.

product_ui_motionreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Rive State Machine Overview

Explicit states and transitions respond to inputs while reusable visual components retain identity across state changes.

Design brief

Explicit states and transitions respond to inputs while reusable visual components retain identity across state changes.

Reference publisher: Rive. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The visual state hierarchy and native aspect layouts are clear. The user explicitly accepted the current state-label behavior and node contrast as a passing result. The prior reviewer concerns are retained in the evidence history but are not blocking after user review.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

weekend-plans-container-transform

Weekend Plans

Original card-to-detail container transition.

product_ui_motionreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Material Design Container Transform

A compact container expands into a detailed destination, preserving spatial relationship and a unified direction.

Design brief

A compact container expands into a detailed destination, preserving spatial relationship and a unified direction.

Reference publisher: Google Material Design. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The card-to-detail relationship remains understandable through the transition. Titles, descriptions, and CTA remain inside their containers. The portrait detail state underuses the lower portion of the canvas but remains coherent and unclipped.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.

recovery-check-feedback

Recovery Check

Original success, warning, and recovery feedback states.

product_ui_motionreference_backed_hyperframes10s16:9 + 9:16pass

official_design_reference

Apple Motion and Feedback Guidance

Motion conveys status, feedback, instruction, success, warning, and recovery while remaining consistent and restrained.

Design brief

Motion conveys status, feedback, instruction, success, warning, and recovery while remaining consistent and restrained.

Reference publisher: Apple. The source informs high-level grammar only; source media, branding, copy, and assets are not redistributed. Visual QA: The revised progress ring and 72% value remain visible through the state sequence. Success, Warning, and Recovery descriptions retain readable contrast when each state becomes active or inactive. Both aspects preserve the status hierarchy, spacing, and final recovery state.

16:9 native layout · PASS

9:16 native layout · PASS

No new visual or audio QA was run for this review-site build.