Vance Ingalls
20be2ea1c2
## Summary - Run `oxfmt .` across the entire codebase to establish formatted baseline - 299 files changed — mechanical formatting only, no logic changes - Double quotes, semicolons, 2-space indent, trailing commas, 100 print width Part 3/4 of [VA-851](https://linear.app/heygen/issue/VA-851/pre-migration-configure-eslint-prettier-and-conventional-commits) ## Test plan - [x] `pnpm format:check` — all 426 files pass - [x] `pnpm -r typecheck` — all packages pass - [x] `pnpm build` — all packages build - [x] All 348 tests pass
4.1 KiB
HyperFrames Design Review
First Impression
This looks like a corporate HR training video had a mid-life crisis and tried to dress like a TikTok influencer. It’s a confused mess of "safe" professional choices and "edgy" motion that doesn't land.
CRITICAL Design Failures
The "Floating Head" Video Problem
Where: compositions/main-orchestration.html - video element
What's wrong: You've taken a 16:9 video, slapped a 40px border radius on it, and let it float in the middle of a 9:16 portrait frame. It looks like a lost window on a desktop, not a deliberate mobile-first composition.
Why it matters: It screams "I didn't have the right assets so I just centered it." It wastes 70% of the screen real estate and makes the actual content feel tiny and insignificant.
Fix it: Crop the video to fill the width or use a more aggressive layout. If it must be a "window," give it a reason to exist—don't just let it drift aimlessly with a generic drop shadow.
Typography Hierarchy is Non-Existent
Where: compositions/captions.html and compositions/graphics.html
What's wrong: You're using Nunito for everything. Nunito is the "I want to look friendly but I have no personality" font of the 2010s. The captions are 72px, the stats are 160px, and the sub-text is 60px. It’s just a wall of rounded, bubbly text.
Why it matters: There is no visual tension. Everything is "loud" in the same boring way. It feels like a children's app, not a professional data-driven message.
Fix it: Pair a high-contrast Serif or a brutalist Sans-Serif with your body text. Vary the weights more aggressively. Stop relying on "Extra Bold" to do all the heavy lifting.
The "Sticker" Aesthetic is Lazy
Where: compositions/graphics.html - .sticker-container
What's wrong: A white box with a 20px border radius and a generic drop shadow is not a "design choice," it's a default setting. The 0.9 opacity backdrop-filter is barely visible against the light gray background.
Why it matters: It looks like a template from a free online editor. It lacks any sense of brand identity or sophisticated art direction.
Fix it: Lose the generic white boxes. Use bold, solid color blocks that interact with the background, or go full glassmorphism with actual contrast.
Design Improvements
Background Pattern is a Ghost
Where: compositions/main-orchestration.html - .bg-pattern
The problem: A radial gradient of 2px dots at 0.1 opacity? You might as well not have it. It’s so subtle it looks like screen noise or a rendering artifact rather than a deliberate texture.
Make it better: Crank the opacity or change the pattern to something with more character—grid lines, topographic maps, or bold geometric shapes. If you're going to have a pattern, let us actually see it.
Animation "Bounce" Overload
Where: compositions/main-orchestration.html and compositions/graphics.html
The problem: Everything is "elastic.out" or "back.out." It’s bouncy, it’s poppy, and it’s exhausting. It feels like the UI is constantly trying to jump out of the screen.
Make it better: Use more sophisticated easing. Not everything needs to overshoot. Try some "power4.inOut" for smoother, more cinematic transitions. Save the "bounce" for the one thing you actually want people to notice.
What Actually Works
The Color Palette (Almost): The combination of Deep Navy (#001F3F), Pink (#FF2D8A), and Lime (#A3E635) is actually a strong, modern trio. It has high energy and good contrast. It’s the only thing saving this from being completely forgettable.
Design Verdict
Visual Impact: 3/10 - It’s a floating video in a sea of gray. Boring. Color & Typography: 4/10 - Good colors, but the font choice is painfully generic. Motion & Animation Feel: 5/10 - Technically functional, but over-indexed on "bouncy" presets. Overall Aesthetic: 3.5/10 - Feels like a "My First Video Project" template.
Bottom Line: I wouldn't show this to a client unless I wanted them to fire me. It needs a complete rethink of how it uses the vertical space. Stop playing it safe with rounded corners and Nunito.