/hyperframes-animation

3D Page Scroll

A webpage (or long content) presented as a tilted 3D card. Spring-eased scroll reveals specific sections while the static 3D perspective adds physical depth. (For a camera that actually travels/tilts, see 3d-camera-flight.md — this rule's tilt never moves.)

How It Works

Two independent transforms combine:

1. 3D tilt — static rotateY + rotateX with perspective on the card. The angle does not change during the scene.
2. Scroll — the content inside the card translates vertically (y in GSAP) within a clipped container; spring-like deceleration via power3.out / power4.out.

Optional: spotlight overlay — a radial-gradient mask dims everything except a focal region after the scroll lands. It sits above the scrolling content, fixed relative to the card, never inside .page-content.

Recipe

<div class="tilt-card">
  <div class="page-content">
    <!-- Full {Brand} webpage recreation, taller than the card so scrolling
         matters. Each section is REAL DOM, not a screenshot — screenshots
         can't be individually highlighted or scrolled-to with precision. -->
    <section class="page-hero">{heroContents}</section>
    <section class="page-features">{featuresContents}</section>
    <section class="page-target" id="target-section">{targetContents}</section>
    <section class="page-cta">{ctaContents}</section>
  </div>
  <div class="spotlight"></div>
</div>

.tilt-card {
  position: absolute;
  left: 50%;
  top: 50%;
  /* tilt + perspective in CSS only if no other transform tween touches this
     element — if GSAP also tweens scale on .tilt-card, set the tilt via
     gsap.set() instead to avoid matrix overwrites */
  transform: translate(-50%, -50%) perspective({perspectivePx}) rotateY({tiltYDeg}) rotateX({tiltXDeg});
  transform-style: preserve-3d;
  width: {cardWidth};
  height: {cardHeight};
  border-radius: 24px;
  background: {cardBackgroundColor};
  overflow: hidden; /* clip the scrolling content at the rounded corners */
  /* shadow X-offset sign must match tiltY sign (negative tiltY ⇒ positive X) */
  box-shadow: 40px 30px 80px rgba(0, 0, 0, 0.45);
}
.page-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height intrinsic from sections — taller than the card */
}
.spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 60% 35% at 50% 50%, transparent 50%, {spotlightDimColor} 100%);
}

// SCROLL_DISTANCE is measured at design time from the real page layout
// (top of .page-content origin to vertical center of #target-section,
// accounting for card height) — NOT a free tunable.
tl.to(
  ".page-content",
  { y: -SCROLL_DISTANCE, duration: SCROLL_DUR, ease: "power3.out" },
  SCROLL_AT,
);

// Spotlight fades in on the target after the scroll settles.
tl.to(
  ".spotlight",
  { opacity: 1, duration: SPOTLIGHT_FADE_DUR, ease: "power1.inOut" },
  SPOTLIGHT_AT,
);

Variations

Multi-step scroll (scroll → pause → scroll) — multiple y: tweens at different positions. Distances are both measured from the .page-content origin (NOT delta from the previous step); GSAP composes successive y: tweens on the same property, each starting from the value the previous one left:

tl.to(
  ".page-content",
  { y: -SCROLL_DISTANCE_A, duration: SCROLL_DUR, ease: "power3.out" },
  SCROLL_AT_A,
);
tl.to(
  ".page-content",
  { y: -SCROLL_DISTANCE_B, duration: SCROLL_DUR, ease: "power3.out" },
  SCROLL_AT_B,
);
// SCROLL_AT_A + SCROLL_DUR ≤ SCROLL_AT_B — the two scrolls must not fight for y

Values

Critical Constraints

• Tilt is static — the card holds its angle the whole scene.
• Shadow direction matches tilt — a left-leaning card casts shadow to the right (positive X offset); mismatch breaks the 3D illusion.
• Page content is real HTML, not a screenshot; scroll distances come from the real layout geometry.
• overflow: hidden + transform-style: preserve-3d on .tilt-card — clip at the rounded corners; preserve-3d for any 3D children / clean perspective composition.
• Spotlight is an overlay above the scrolling content, never inside .page-content.
• Same easing across a multi-phase scroll, and non-overlapping scroll windows.

See also

asr-keyword-glow.md (on-page keyword highlight synced to VO) · multi-phase-camera.md (camera zoom while the page scrolls) · cursor-click-ripple.md (cursor lands in the scrolled-into-view section) · 3d-camera-flight.md (when the camera itself should travel).