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.3 KiB
HyperFrames Design Review
First Impression
This looks like a "hacker" template from a 2014 stock asset site. It’s trying so hard to be "digital" and "techy" that it forgets to be actually sophisticated. The neon green on black is the most tired trope in the industry.
CRITICAL Design Failures
The "Matrix" Color Palette
Where: Global (#33FF66 on #0A0A0A)
What's wrong: Using pure neon green on a near-black background is lazy. It’s high-contrast in the worst way—it causes eye strain and looks like a parody of a terminal.
Why it matters: It lacks professional polish. Real high-end tech brands (like Stripe, Vercel, or even Apple’s developer materials) use more nuanced greens, subtle gradients, and varied opacities to create depth. This is just flat and aggressive.
Fix it: Shift the green to a more sophisticated mint or emerald (e.g., #00FF9F or #4ADE80). Introduce a secondary accent color like a deep slate blue or a muted purple to break the monotony.
Typography Hierarchy is Non-Existent
Where: compositions/captions.html and compositions/data-graphics.html
What's wrong: Everything is screaming. The captions are 64px, the terminal lines are 72px, and the data counters are 48px. All of them are in 'Space Mono' or 'Courier New'.
Why it matters: When everything is bold, uppercase, and huge, nothing is important. The viewer doesn't know where to look. It feels like being shouted at by a calculator.
Fix it: Use a variable font. Mix weights. Make the labels in the data graphics much smaller (12-14px) and lighter. Use a clean sans-serif (like Inter or Geist) for the main captions and keep the mono font for the "data" elements only.
The "Floating Box" Syndrome
Where: compositions/data-graphics.html
What's wrong: The data boxes are just floating on the right with a generic backdrop-filter: blur(10px). They have no relationship to the grid behind them or the video next to them.
Why it matters: It looks like a UI overlay from a cheap mobile game. There’s no sense of "physicality" or integrated design.
Fix it: Align the boxes strictly to the background grid lines. Use "connector" lines or brackets that "anchor" the data to the video frame. Make the borders thinner (0.5px) and use multiple layers of subtle shadows to create real depth.
Design Improvements
Robotic Motion
Where: index.html (A-roll transitions)
The problem: The scale and position shifts of the video (scale: 0.6, x: -400) are basic linear-feeling movements. The "wipe" reveal is a standard clip-path that feels like a default PowerPoint transition.
Make it better: Use more aggressive easing (e.g., expo.out or custom-elastic). Add a slight "overshoot" to the scaling. When the video moves, maybe it should have a slight tilt or a "glitch" chromatic aberration effect during the transition to match the "system" theme.
Static Grid Background
Where: compositions/grid-bg.html
The problem: A 40px grid is fine, but it’s just... there. The "scan line" is a single 2px bar moving top to bottom. It’s predictable and boring.
Make it better: Add "data noise"—tiny flickering pixels, coordinate numbers that change in the corners of the grid, or subtle "interference" patterns. Make the grid lines vary in opacity so it doesn't look like a math notebook.
What Actually Works
The Terminal Boot Sequence
The intro-seq.html actually has a decent rhythm. The character-by-character reveal with the slight "blink" on the current character is a nice touch. It’s the only part of the composition that feels like it had some thought put into the feeling of the animation rather than just the mechanics.
Design Verdict
Visual Impact: 3/10 - It’s a cliché "tech" look that fails to stand out. Color & Typography: 2/10 - Monospaced fonts and neon green are the "Hello World" of design. Motion & Animation Feel: 4/10 - Functional but lacks the "snap" and "juice" of professional motion design. Overall Aesthetic: 3/10 - Amateurish. It looks like a developer's first attempt at "cool" UI.
Bottom Line: This needs a complete stylistic overhaul. Stop trying to look like a 90s movie version of a "hacker" and start looking like a modern, high-end SaaS product. Kill the neon green, fix the typography, and give the layout some room to breathe.