hyperframes/skills/hyperframes-animation/blueprints/proof-logo-chain.md

id, role, duration_seconds, phases, visual_arc, uses_rules, element_roles, when_to_use, when_not_to_use, triggers

id	role	duration_seconds	phases	visual_arc	uses_rules	element_roles	when_to_use	when_not_to_use	triggers
proof-logo-chain	social-proof	6 10	5	brand-decode → text-swap → logo-centers → avatars-network → brand-logos	hacker-flip-3d vertical-spring-ticker coordinate-target-zoom avatar-cloud-network	anchor decode_text swap_text counter avatars endorsement_logos Logo that threads across all shots, repositioning as the visual link Brand name revealed via hacker-flip alongside the anchor Replacement text sliding in after the decode (the claim phrase) Numeric/short label appearing with the avatar cloud User avatars on an elliptical ring around the anchor Partner / brand logos scrolling at the bottom	Brand authority via multiple progressive proof points Logo threads multiple shots as the visual link 3-4 distinct claims packed in one continuous sequence	Single-beat scene, no progression No persistent brand element available Authority from a single source only	brand reveal social proof #1 tool million users trusted by

Proof · Logo Chain (HyperFrames)

This is a "decode → claim → community → endorsement" arc: the brand name decrypts itself next to the logo (authority asserts itself); a claim phrase slot-machines into the same row (the specific boast lands); text yields and the logo glides to dead center (it has earned the stage); avatars cascade into orbit around it with connection lines drawing outward (community materializes); partner logos quietly scroll along the bottom (third-party validation, no fanfare). The logo is the only element on screen the whole time — it is the through-line that makes four claims feel like one statement.

Single paused GSAP timeline, five phases, every adjacent pair gets ~0.2-0.4s of breathing room because four different easings (power3.out, back.out, additive springs, dash-draw power2.out) cannot share boundaries cleanly.

When to Use

• Authority / credibility scene that needs to stack 3-4 distinct proof points
• A brand logo is available and should anchor viewer attention across content changes
• The composition has 6-10s to breathe — under 6s and the recenter+cloud beats collide; over 10s the closing scroll drags
• Not for: single-beat scenes, scenes without a persistent brand element, or a single-source authority (use a simpler reveal)

Orchestration

Five phases, four rules + one inline beat. The logo (.anchor-logo) is shared state between every phase — it is the only element that no rule "owns" exclusively.

• Phase 1 — brand decode: use hacker-flip-3d on the brand wordmark sitting in the right slot of the anchor row. The logo pops in via a plain inline scale: 0 → 1 tween at t=0 and the hacker-flip runs alongside it; we picked hacker-flip rather than typing or fade because the scene is announcing who — the decryption framing reads as "this brand has been identified," which is the right opening register for a proof scene.
• Phase 2 — claim swap: use vertical-spring-ticker for the ticker word inside the claim (e.g. "#1 in {TickerWord1} ↔ {TickerWord2}"), STEPS = 1 — a single slot-machine click is enough to communicate "the claim varies but the brand persists." Everything else in this phase is inline: the brand wordmark slides out, the new claim phrase fades in, the row shifts left, all three tweens at the same timeline position. See "Phase 2 Seam" — the swap glue is the core unique content of this blueprint.
• Phase 3 — logo recenters: use coordinate-target-zoom in its shift-only variation — we tween only the .zoom-inner counter-translate, we do not tween .zoom-outer.scale. There's no zoom here, just a translate; we still want the rule's "inner translates, outer scales" wrapper structure so an optional camera scale can be added later without rewiring. The text zone fades to 0 in parallel; the logo glides on power2.out toward true viewport center plus a small upward lift.
• Phase 4 — avatar cloud: use avatar-cloud-network. The non-trivial bit is that this rule's CENTER_X / CENTER_Y constants must equal the logo's post-Phase-3 position — see "Phase 3 → 4 Seam." The hub element from the rule is replaced by (or rendered on top of) the existing .anchor-logo; do not let the rule mount its own hub or you end up with two centerpieces.
• Phase 5 — brand endorsement strip: inline, no rule. A staggered back.out entry on .brand-logo plus a finite ease: "none" x-tween on the strip. This isn't a rule because it's two tweens with no orchestration; making it one would be overengineering. Critical: the scroll uses a finite duration — see Critical Constraints; no repeat: -1.

Phase Timing

All boundaries in seconds. Pick DECODE_END first (it's a function of charCount × stagger), back-derive the rest from the gaps below.

Phase	Start ≥	Internal duration	Notes
1	0	DECODE_END	Equals (charCount−1) × CHAR_STAGGER + FLIP_DURATION
2	DECODE_END + ~0.3s	SWAP_DUR (+ claim dwell)	Three concurrent tweens share SWAP_DUR & power3.out
3	SWAP_TRIGGER + SWAP_DUR + ~1.0s	RECENTER_DUR	The 1s is viewer reading time for the claim, not a buffer
4	RECENTER_TRIGGER + RECENTER_DUR	hub→avatars→lines→breath chain	No extra gap — rule's own hub fade absorbs the recenter tail
5	LOGOS_TRIGGER (= dur − SCROLL_DUR)	SCROLL_DUR	Anchored to the end of the comp, not Phase 4

Three of the four gaps deserve commentary because they are not interchangeable.

The +0.3s between Phase 1 and Phase 2 is hacker-flip's settle frames: after the final character flips to its target glyph there is still residual power3.out tail on the rotateX tween. Triggering the slide-out before that tail decays produces a visible double-motion on the last character. 0.3s is the smallest gap that reads as "decoded, then the next beat" rather than one continuous transition.

The +1.0s between Phase 2 and Phase 3 is not a spring-settle gap — it is reading time. The claim phrase ("#1 in X for Y") is the densest piece of copy in the scene; if the logo starts moving while the viewer is still parsing it, both motions degrade. Tune by eye against the actual claim length: short claims ("Trusted by millions") can drop to 0.7s; long claims ("The #1 enterprise-grade workflow tool for engineering teams") need 1.2-1.5s.

Phase 4 follows Phase 3 with no explicit gap because avatar-cloud-network's HUB_FADE_START is the first beat inside the rule — it acts as the gap. If you stack a manual buffer on top, the cloud feels detached from the recentering.

Phase 5's start time anchors to the end of the composition (compDuration − SCROLL_DUR), not the end of Phase 4. The viewer should still be looking at the formed avatar network when the strip enters; a strip that lands during the cloud's idle breathing is far better than one that arrives 2s after everything stops moving.

Initial DOM Nesting

Three wrapper layers. The middle one (.anchor-shift) is what Phase 2 tweens for the left-shift; the inner two are what Phase 1 and Phase 3 act on. Without .anchor-shift as a separate node, Phase 2's row-shift would compound onto Phase 3's logo-recenter and you'd have to subtract one from the other at design time — error-prone.

.anchor-stage              ← flex container, place-items: center
  .anchor-shift            ← Phase 2 x-tween (row left-shift)
    .anchor-logo (z:100)   ← Phase 1 scale pop, Phase 3 x/y translate
      img                  ← {heroAsset}, drop-shadow filter
    .anchor-text           ← Phase 3 opacity fade-to-0
      .phase1-text         ← Phase 1 hacker-flip target (per-char spans)
      .phase2-claim        ← Phase 2 fade-in, positioned absolutely at phase1-text's origin
        .claim-lead / .claim-mid / .claim-ticker  ← ticker = vertical-spring-ticker mount

.phase2-claim is position: absolute inside .anchor-text so it occupies the same coordinate as .phase1-text — that's what makes the swap read as "in place." If it were a sibling in the same flex row, the layout would jump as the brand fades out.

.anchor-logo carries z-index: 100. It must sit above the avatars (z:2) and the SVG connection lines (z:1) that Phase 4 introduces — without this, the lines visibly cross through the logo edge instead of terminating at it.

Phase 2 Seam: The Three-Tween Swap

This phase has no rule of its own — the vertical-spring-ticker only owns the ticker word inside the claim. The actual swap (old text out, claim in, row shifts left) is inline glue and is the most failure-prone beat in the blueprint. Three tweens fire at the same timeline position, share SWAP_DUR, share power3.out:

// 1. Old brand text exits right.
tl.to(
  ".phase1-text",
  { x: SLIDE_DIST, opacity: 0, duration: SWAP_DUR * EXIT_RATIO, ease: "power3.out" },
  SWAP_TRIGGER,
);

// 2. Whole row shifts left so the new (typically shorter) claim sits centered.
tl.to(
  ".anchor-shift",
  { x: RECENTER_OFFSET, duration: SWAP_DUR, ease: "power3.out" },
  SWAP_TRIGGER,
);

// 3. Claim fades in slightly after the exit starts.
tl.fromTo(
  ".phase2-claim",
  { opacity: 0 },
  { opacity: 1, duration: SWAP_DUR * FADE_RATIO, ease: "power2.out" },
  SWAP_TRIGGER + SWAP_DUR * FADE_DELAY_RATIO,
);

RECENTER_OFFSET is the most common point of failure in this blueprint. Theoretical baseline:

RECENTER_OFFSET ≈ -(claimWidth − brandWordmarkWidth) / 2

But the practical value is almost always smaller in magnitude than this baseline — the logo's optical center of mass pulls the perceived row center to its side, so the geometric center isn't the visual center. Tune by eye after fonts are loaded, then bake as a const. Do not derive it from offsetWidth at tween time: HF seeks every frame, and sub-pixel drift between sibling renders becomes visible jitter when an optional camera scale wraps the scene.

EXIT_RATIO ~0.5 and FADE_DELAY_RATIO ~0.25 are the empirical values that produce a clean handoff. The brand text needs to be ~50% gone by the midpoint of the swap; the claim fade-in starts a quarter of the way in so there is no moment of empty row.

Phase 3 → Phase 4 Seam: Logo Position = Cloud Center

This is the single most-likely-to-drift coordinate in the entire blueprint. Phase 3 translates the logo from its Phase-2 position to true viewport center plus a small lift; Phase 4's avatar cloud places its hub and connection lines around (CENTER_X, CENTER_Y). These two coordinates must be derived from the same source. Two patterns work:

// Pattern A — bake from layout math at author time (recommended)
const CENTER_X = compositionWidth / 2;
const CENTER_Y = compositionHeight / 2 + VERTICAL_ADJUST; // VERTICAL_ADJUST is negative
const CENTER_OFFSET = -RECENTER_OFFSET + logoHalfWidth; // Phase 3's x-tween target on .anchor-logo

// Pattern B — measure the logo's rect after Phase 3 (NOT recommended)
// Requires playing the timeline to the Phase 3 endpoint, reading getBoundingClientRect(),
// then registering the cloud rule. Fragile because HF may not have laid out fully yet.

VERTICAL_ADJUST is a small negative number (~−3% to −6% of compositionHeight). It lifts the logo above the canvas midline so the elliptical ring sits around the logo with breathing room below for the partner strip; without the lift, Phase 5's strip overlaps the lower-arc avatars.

If the cloud's CENTER_X / CENTER_Y and the logo's destination are off by even a few pixels, the connection lines miss the logo's edge — visible as either a gap (lines terminating in empty space) or a hairline overlap. Both are immediately legible as broken; bake from one source and reuse.

Phase 5 Seam: Anchor to End, Not to Phase 4

The brand strip starts at LOGOS_TRIGGER = compositionDuration − SCROLL_DUR, not at the end of Phase 4. Phase 4's BREATH_DUR is sized to fill the remaining time after lines complete; the brand strip enters on top of that idle breathing, not after it. If the strip starts after the breathing ends, there's a dead beat in the middle of the scene that reads as "is this over?"

The strip uses a finite duration x-tween, not repeat: -1. For a continuous-looking scroll, oversize the strip to ~2× viewport width and let it travel just the visible distance — the trail of unseen logos preserves the illusion of "the list continues." Direction is negative (right-to-left); positive direction reads as content arriving rather than content existing.

Per-logo stagger uses back.out(BOUNCE_FACTOR) with a low coefficient (1.2-1.5). The pop is subtle on purpose — partner logos are validation, not the focal beat; a firm spring here would compete with the avatar network for attention.

Key Values to Choose (Not Already in the Rules)

Only blueprint-unique parameters listed. Standard rule parameters (FLIP_DURATION, CHAR_STAGGER, STEP_DUR, AVATAR_BOUNCE, etc.) live in their rules — go there.

• LOGO_SIZE: 5-12% of viewport min-dimension. Under 5% loses presence; over 12% crowds the hacker-flip wordmark in Phase 1. The logo never changes size after Phase 1's scale: 0 → 1 pop, so this is also its final on-screen size.
• ANCHOR_GAP: flex gap between logo and text zone in Phases 1-2, ~15-25% of LOGO_SIZE. Pairs visually with the logo's optical weight; smaller gaps make the pairing feel like a single mark, larger gaps make it feel like two separate elements.
• RECENTER_OFFSET: tuned by eye, baked as const. Theoretical baseline = -(claimWidth − brandWordmarkWidth) / 2; practical value typically 60-80% of that magnitude. See Phase 2 Seam.
• CENTER_OFFSET: derived once from compositionWidth / 2 + (−RECENTER_OFFSET) + logoHalfWidth, baked as const.
• VERTICAL_ADJUST: −3% to −6% of compositionHeight. Equals cloudCenterY − compositionHeight / 2 exactly — both numbers must come from the same expression.
• SLIDE_DIST: 100-300 px positive; how far the old brand wordmark exits to the right. Smaller than viewport width is fine — the opacity tween in the same tween hides the late frames.
• EXIT_RATIO / FADE_RATIO / FADE_DELAY_RATIO: 0.5 / ~0.5 / ~0.25 are the empirical defaults. Tune EXIT_RATIO down if the brand text is long (it needs more time to clear) and FADE_DELAY_RATIO up if the claim is dense (defer its arrival a little).

Critical Constraints (ordered by failure frequency)

• CENTER_X / CENTER_Y and Phase 3's logo destination derive from the same source. Independent derivations drift by a few pixels and the connection lines visibly miss the logo edge. This is the #1 failure mode.
• RECENTER_OFFSET is a baked const. Per-frame derivation (e.g. phase2.offsetWidth − phase1.offsetWidth) drifts sub-pixels across renders → visible jitter when wrapped by any camera scale.
• Logo z-index ≥ 100, above avatars (z:2) and lines (z:1). Otherwise the SVG connection lines appear to pass through the logo edge instead of terminating at it.
• .phase2-claim is positioned absolutely at .phase1-text's origin. As a sibling it would shift the row geometry when brand opacity drops to 0 — the swap would read as "old text out, layout jumps, new text in" rather than "in-place exchange."
• Phase 5 uses finite duration, never repeat: -1. Oversize the strip if you need the visual of continuous scroll. The HF render harness will not respect infinite repeats deterministically.
• Phase 2 reading dwell ≥ 1.0s before Phase 3. This is the most-violated timing constraint, not a value constraint — agents tend to treat it as a spring-settle buffer and shrink it. It is viewer reading time and must be tuned to the actual claim length.
• Phase 1 logo pop is inline, not a rule. A single scale: 0 → 1 back.out tween on .anchor-logo at t=0. Promoting this to a rule reference adds noise without adding orchestration.

Spring → Ease Selection

Four distinct feels across the five phases. Full mapping table in hyperframes-animation/SKILL.md; this blueprint's defaults:

• Phase 1 hacker-flip — power3.out per char (rule's default)
• Phase 2 swap — power3.out on exit + shift, power2.out on claim fade
• Phase 3 recenter — power2.out (smoother than power3 here; the logo glide should feel weighty, not snapped)
• Phase 4 avatar pop — back.out(BOUNCE) per avatar (rule's default)
• Phase 5 partner pop — back.out(1.2-1.5) low coefficient; scroll is ease: "none"

Golden Sample

• proof-logo-chain.html — runnable composition with concrete values for every named constant above; single paused GSAP timeline drives all five phases. Run it first, then change values — much faster than building from scratch.