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.4 KiB
HyperFrames Design Review
First Impression
This looks like a corporate PowerPoint presentation from 2012 trying to be "edgy" with a dark theme. It’s static, the typography is uninspired, and the layout is as predictable as a dial-tone.
CRITICAL Design Failures
Issues that make this look unprofessional or straight-up ugly. These MUST be fixed.
Obscene Stat Typography
Where: compositions/main-video.html - .stat-text
What's wrong: A font size of 280px is not a "design choice," it's a cry for help. Using Inter at that scale with a generic text-shadow looks amateurish and clutters the frame. The colors (#E74C3C, #F1C40F, #82956D) are straight out of a default CSS color palette and clash horribly with the "charcoal" background.
Why it matters: It screams "I don't know how to create visual hierarchy, so I'll just make the numbers huge." It distracts from the A-roll and makes the entire composition feel cheap.
Fix it: Reduce the font size to something sane (e.g., 120px-160px). Use a more sophisticated color palette—muted tones or high-contrast neons, not "primary school red and yellow." Lose the heavy text-shadow; it’s dated.
The "Floating Video" Syndrome
Where: compositions/main-video.html - #aroll-video
What's wrong: Scaling the video down to 70% and just shoving it to the left (x: -400) leaves a massive, awkward void on the right. The border-radius: 6px is so subtle it might as well not be there.
Why it matters: It lacks intentionality. It looks like the video is hiding from the text. There’s no framing, no container, no stylistic treatment to make the video feel like part of the design.
Fix it: Give the video a proper frame or a stylized border. Use the abstract_shapes.svg more effectively to "cradle" the video or create a more dynamic split-screen layout rather than just "sliding it over."
Caption Legibility & Placement
Where: compositions/captions.html - .captions-container
What's wrong: Bottom 15% placement with a 0.2em letter spacing on Inter weight 300 is a recipe for unreadability. The text-shadow is a lazy fix for poor contrast.
Why it matters: If the viewer has to squint to read the core message, you’ve failed. The wide letter-spacing on thin weights makes the words fall apart visually.
Fix it: Increase the font weight to 500 or 600. Reduce letter-spacing to 0.05em. Consider a subtle semi-transparent background blur (backdrop-filter) instead of a muddy text-shadow.
Design Improvements
Things that aren't broken but are boring, lazy, or could be significantly better.
Title Card Lethargy
Where: compositions/title-card.html
The problem: A 3-second fade-in of "EDITOR AGENT" with a single blurry blob (.fragment) is the definition of "minimum viable product." It’s forgettable.
Make it better: Use the accent_shape.svg to create some sharp, aggressive geometric interest. Animate the letters individually or use a mask reveal. Make the background gradient more dynamic—right now it’s just a static gray smudge.
Robotic Motion
Where: compositions/main-video.html - GSAP Timelines
The problem: The background shapes move at a constant ease: 'none' for 19 seconds. It’s robotic and lacks the "organic" feel the SVG shapes suggest.
Make it better: Use sine.inOut or power1.inOut for the background drift to create a more natural, floating sensation. Vary the speeds of the three shapes to create actual parallax depth.
What Actually Works
The use of Inter weight 100 for the title card is actually a decent nod to high-end editorial design. It’s the only part of this that feels like it belongs in this decade. The "Henryk Tomaszewski Style" mentioned in the title suggests an intent for Polish Poster School aesthetics—the abstract shapes are a good start, but they need to be much bolder and more integrated into the layout to actually achieve that look.
Design Verdict
Visual Impact: 3/10 - It has the presence of a corporate training video. Color & Typography: 2/10 - Default colors and "big text" do not equal design. Motion & Animation Feel: 4/10 - Functional but lacks any soul or rhythm. Overall Aesthetic: 3/10 - Amateurish and dated.
Bottom Line: This needs a complete visual overhaul. Stop relying on font size to do the heavy lifting and start thinking about composition, color theory, and modern motion principles. Right now, it’s a mess.