frames/skills/frames-animation/rules/3d-page-scroll.md

name, description, metadata

name	description	metadata
3d-page-scroll	Full webpage rendered as tilted 3D card that scrolls to reveal specific sections.	tags 3d, page, scroll, webpage, tilt, product-demo, perspective

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

token	range / rule	notes
tiltYDeg	−12 to −4 (left-leaning) or 4 to 12	bigger = more dramatic 3D; near 0 collapses to a flat panel
tiltXDeg	0–6	positive tilts the top edge away
perspectivePx	800–2000 px	smaller = more foreshortening; larger = nearly orthographic
cardWidth / Height	card height < total content height	otherwise the scroll has nothing to reveal
sectionHeight	Σ heights ≥ cardHeight + SCROLL_DISTANCE	so the target section lands within frame
SCROLL_AT	≥ end of prior tweens on .page-content
SCROLL_DUR	0.8–1.8 s	shorter feels like a hard cut; longer feels programmatic
SCROLL_DISTANCE	measured from the layout	from actual cumulative section heights — never estimated; don't overshoot content end
SPOTLIGHT_AT	≥ SCROLL_AT + SCROLL_DUR (or slightly earlier)	spotlight reveals the freshly-arrived section
SPOTLIGHT_FADE_DUR	0.4–0.8 s
Ease	power3.out default; power4.out momentum; power2.inOut cinematic pan	pick ONE for all scrolls in the scene — mixing easings reads as jerky

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).