Hero Reveals
Ten ways to open a promo. The big title that lands in the first two seconds, built as one system so a whole reel can share a language.
A hero reveal is the opening title, the shot that sets the tone before anything else happens. It is the first thing an audience reads and the last thing most templates get right, because a good one is a piece of motion design, not a fade.
HyperFrames is HeyGen’s open framework for rendering video from HTML. After the Lower Thirds set (LOG 016), the natural next gap was the opening moment. So I built ten of them as a single, drop-in family. Same idea as the lower thirds, one layer up the edit: not one more title animation, a set a reel can pick from and swap between without looking like it changed hands.
Ten openings, back to back. Click a name to jump to it. Every clip is the exact block that shipped.
01Ten openings, one language
The ten cover the range a real project needs. Mask Rise is the safe default. Line Draw is editorial. Kinetic Stack is for sports and events. Scale Punch is a product launch. Slab Slam is high energy. Panel Wipe, Split Part, and Char Cascade are structural reveals, and Blur Focus and Glitch In are the two lens-and-signal effects. Different personalities, one skeleton underneath.
02One contract, ten mechanics
Every block reads the same set of CSS custom properties and the same data-hero-* attributes off one root. Kicker, title, subtitle, accent, alignment, theme, duration. Type the copy in once and the block fills itself. Because all ten share the contract, they are drop-in interchangeable mid-edit. Point a loop at a list of episode titles and open a whole season without touching the HTML.
The differences are all in the entrance. A title rises through a mask. Two rules draw open around it. A slab slams past its mark. A panel wipes through and leaves the words behind it. Characters cascade in one at a time. Same skeleton, ten reveals.
03What makes it registry-grade
A registry block can’t just look right once. It has to render identically every time, forwards and backwards, on any machine. The catalog enforces the same hard rules the lower thirds cleared, and all ten heroes clear them too:
- Deterministic. No wall-clock reads, no unseeded randomness. Glitch In drives its RGB-split and slicing from a seeded mulberry32 PRNG, verified byte-identical across runs.
- One paused GSAP timeline per block, built up front.
- Seek-driven, no requestAnimationFrame. Scrub backward and it lands exactly where it should.
- A hard kill at the end. Nothing lingers a frame past its clip.
- Every id, class, and token is prefixed hero-, so all ten can live in one document as sub-compositions and never collide.
04Contrast is a design constraint
A hero title lands over footage you don’t control. So legibility is a pass/fail here, not a nicety. The accent color splits into two tokens. --hero-accentstays saturated for rules, panels, and underlines, where contrast rules don’t apply. --hero-accent-type is a tint used only where the accent becomes actual text. Every text layer clears WCAG AA. Worst case in the set is 4.54:1.
The blocks that carry no solid panel ship a soft radial scrim behind the type instead, driven by --hero-scrim-rgb. It fades in and out with the block so it never lands as a hard rectangle, and it exists specifically to hold contrast over the worst footage.
05Proving it
The whole set was validated locally before shipping. Each block renders at 1920×1080 for five seconds, and a synchronous fit pass measures the title and steps the type size down until it clears the frame, so a long headline never overflows. The real toolchain’s lint and check pass with zero errors on all ten.
06The thread forward
Like the lower thirds, the insets and type scale are tuned for 1920×1080. Making them read from the composition’s own width and height is a small shared change, and it would cover vertical social from the same set. That threads straight into LOG 013, Responsive Video. Openings and name-tags are the two ends of the same edit, and now they speak the same contract.
Status: ten blocks built and validated, sibling to the Lower Thirds set. Code on GitHub. Opening as the follow-up registry PR.