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.5 KiB
HyperFrames Design Review
First Impression
This looks like a high-energy, "MrBeast-lite" social media ad that's trying way too hard to be "fun" but ends up feeling like a chaotic sticker book. It's loud, it's pink, and it's visually exhausting.
CRITICAL Design Failures
Issues that make this look unprofessional or straight-up ugly. These MUST be fixed.
The "Sticker Book" Chaos
Where: compositions/stats.html
What's wrong: You've got a hot pink title, a blue background that switches to white, and then "stickers" with blue, pink, lime, and yellow accents. It’s a color palette car crash. There is zero visual cohesion; it looks like a child found the "shapes" tool in PowerPoint and went to town.
Why it matters: Instead of focusing on the data (the stats), the viewer is blinded by a random assortment of neon blobs. It screams "amateur" and "template."
Fix it: Pick a primary brand color (the hot pink is fine) and use a consistent secondary palette. Ditch the lime and yellow unless they serve a specific functional purpose. Use a consistent "sticker" style instead of varying the border colors and background stacks for every single moment.
Typography Suffocation
Where: compositions/intro.html and compositions/stats.html
What's wrong: Nunito Black at 180px with a 5-degree tilt and multiple drop shadows? It’s heavy, dated, and lacks any elegance. The "layered offset shadow" (filter: drop-shadow(8px 8px 0 #FFFFFF) drop-shadow(15px 15px 0 rgba(0,0,0,0.1))) makes the text look muddy rather than deep.
Why it matters: Heavy, tilted text is a 2015 YouTube thumbnail trope. It lacks the professional polish required for a tool called "Editor Agent."
Fix it: Reduce the font weight or the size. If you must tilt it, keep the shadow clean—one sharp offset or a soft blur, not both. Consider a more modern, geometric sans-serif if you want to look like a "tech" tool.
The "Elastic" Overdose
Where: index.html (A-roll) and compositions/stats.html
What's wrong: Every single element enters with elastic.out or back.out. The A-roll bounces, the stats bounce, the intro bounces. It’s like watching a video inside a bouncy castle.
Why it matters: When everything is "energetic," nothing is. The constant bouncing becomes a visual distraction that makes the content harder to digest. It feels robotic and "default GSAP."
Fix it: Use power2.out or expo.out for most transitions. Reserve the elastic/back eases for the most important "pop" moments. Vary the rhythm.
Design Improvements
Things that aren't broken but are boring, lazy, or could be significantly better.
Caption Box Laziness
Where: compositions/captions.html
The problem: The captions are just white text on a pink rounded rectangle. It’s the most basic "social media caption" style possible.
Make it better: Add some personality. Try a "karaoke" style where words highlight as they are spoken, or use a more interesting container than a simple rounded box. Maybe lose the box entirely and use a strong text stroke or a more dynamic background shape.
Static Background Transitions
Where: index.html (Background Layer)
The problem: The background just snaps from White to Blue to White. It’s jarring and lacks the "motion graphics" quality the video is literally bragging about.
Make it better: Use a gradient transition, or better yet, an animated background pattern (subtle dots or lines) that moves with the A-roll. A flat color flip is lazy.
What Actually Works
A-Roll Framing
The way the A-roll container (#aroll-container) shifts scale and position to make room for the stats is actually a decent functional layout choice. It creates a clear "stage" for the supplemental information without completely hiding the speaker. The 16px border and 60px shadow on the video give it a nice "floating" UI feel that works well for a tech demo.
Design Verdict
Visual Impact: 4/10 - It grabs attention, but for the wrong reasons (visual noise). Color & Typography: 3/10 - A messy palette and "YouTube-thumbnail" typography. Motion & Animation Feel: 5/10 - Technically functional, but over-reliant on "bouncy" presets. Overall Aesthetic: 4/10 - Feels like a generic "viral video" template rather than a professional tool.
Bottom Line: This design is trying to hide a lack of visual identity behind a wall of hot pink and elastic eases. It needs a serious "clean up" phase—simplify the colors, refine the type, and stop making everything bounce like a rubber ball.