# Interactive 3D layer stack

Schema: Design Details SECTION.md v3.2
Website: Legora
Source: https://legora.com/
Source section IDs: 953f2384-5989-4c71-9e0d-c40dea5f59bd
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A static list of pill tags on the left sits against one large 3D cube on the right, so the eye always knows where to look.
- Each tag maps to a real product layer, so the graphic explains the product's structure instead of just decorating the page.
- Translucent white plates on pale gray, with a lot of empty space around them, keep the mood calm and give the cube room to be the focal point.

What a screenshot can't show:
- The animation is tied to scroll: the plates stack into a cube over about 12 seconds of scrolling (9–21s) while tags light up in sync, and it plays in reverse when scrolling up.
- Tags are separated by a tight 5px gap; no font sizes were measured, and no CSS animations were detected.

Borrow: Tie a simple list of labels to one object that builds up as you scroll, so each label lighting up reveals the matching part.
Leave alone: Don't copy the translucent plate-and-cube model, its soft white-on-gray lighting, or the dark green accent; build your own metaphor for your product's layers.

## Classification

- Type: other
- Layout: Split layout with a static list on the left and a large animated graphic on the right.
- Styles: minimal, soft, geometric
- Confidence: 98%

## Purpose and structure

A section featuring an interactive 3D graphic of square plates that stack to form a cube, accompanied by a list of feature tags that light up alongside the animation.

Visual signature: Translucent white 3D stacked plates on a light gray background.

## Components

- 3d-graphic
- tag-list
- heading

## Typography

- Display: Legora Sans Regular — 56.2px 400
- Heading: Legora Sans Regular — 41.2px 400
- Body: Legora Sans Regular — 15px 400

## Functional palette

- Text: text #0D1016
- Primary-Action: primary action #005032
- Canvas: canvas #FFFFFF
- Muted-Text: muted text #68655E
- Surface: surface #FAFAF9
- Surface: surface #E6E6E6

## Motion evidence

- 9.0–21.0s — As the user scrolls down, a 3D graphic consisting of multiple square plates stacks up to form a cube. Text boxes appear to the left of each layer, and the graphic transforms as each text box lights up, showing the internal structure of the corresponding layer. (95% confidence)
- 108.0–119.0s — As the user scrolls up, the 3D graphic reverses its animation, showing the layers separating and text boxes disappearing. (95% confidence)

## Section quality

Overall: 59.90/100 (Competent)
Scored coverage: 100%

- Typography: 55 — Pill-shaped tag labels use consistent small sans-serif type matching the site system; no distinct hierarchy or expressive choices visible within this crop beyond functional labeling. Next tier: Needs more deliberate type hierarchy or scale contrast within the section itself to move past functional-only labeling.
- Composition: 66 — Clear split layout: vertical list of feature pills on the left against a large centered 3D object on the right, with generous negative space giving the cube focal weight and breathing room. Next tier: Composition is a competent split-screen pattern; lacks an additional compositional idea (asymmetry, layered depth, secondary focal point) that would make it memorable beyond the list+graphic template.
- Motion: 68 — Gemini provides specific timestamped scroll-driven behavior: plates stack into a cube as labels light up in sync (9-21s), and reverse on scroll-up (108-119s), indicating a built bidirectional scrubbing animation tied to content state. Next tier: To reach strong/memorable tier the motion would need a more distinctive visual transformation or physical detail (e.g., material/lighting change, camera movement) beyond a straightforward stack/unstack driven by scroll position.
- Content: 58 — Feature tags map directly to layers of the cube, giving the graphic a clear explanatory purpose tied to real product categories (LLMs, Agentic Harness, Data & Integrations, etc.). Next tier: Content integration is literal and iconographic rather than deeply informative; no supporting copy or detail differentiates each layer beyond a label, limiting depth of integration.
- Originality: 62 — A translucent layered cube that assembles as users scroll through a feature list is a distinctive conceptual device not a generic pattern, giving it some specificity over stock carousel or grid treatments. Next tier: The stacking-cube metaphor, while distinct, is a now-familiar 3D product-visualization trope seen across several SaaS sites; needs a more unique visual or interaction twist to be unmistakably original.
- Adaptability: 50 — Structure (label list driving an object animation) could transfer conceptually, but the specific 3D asset, lighting, and precise animation timing are tightly bound to this custom model and are not separable from generic deterministic facts supplied. Next tier: Lack of detail on radius, shadow, or asset parameters beyond a single radius value means structural separation from skin is not clearly evidenced in deterministic data.

Strengths:
- Clear split layout separates functional list from explanatory 3D visualization
- Scroll-synced stacking animation reinforces the mapping between features and product layers
- Reversible animation (scroll-up disassembles) shows attention to interaction completeness
- Soft translucent material and ample negative space keep the section calm and legible

Weaknesses:
- Typography is purely functional with no distinct hierarchy inside the section
- Feature labels lack supporting copy, limiting depth of content integration
- 3D stacking-cube metaphor is a familiar SaaS visualization trope
- Heavily dependent on a custom 3D asset, limiting portability of the exact visual

Why it does not reach the next tier: The layout and motion concept are coherent and purposeful but rely on a single, now-common 3D product metaphor without an additional layer of typographic, compositional, or interactive distinction that would push it into strong/memorable territory.

## Adaptation guidance

- Effort: High
- Guidance: Recreate as a scroll-triggered state machine where list items map 1:1 to animation keyframes on a central hero object; the 3D asset itself must be custom-built or substituted with an equivalent layered/exploded-view model to preserve the effect.

What transfers:
- Split layout pairing a feature list with a large visual centerpiece
- Pattern of list items triggering synced animation changes in a central graphic
- Generous whitespace and low-density pacing

Dependencies:
- Custom 3D cube/plate model and its material rendering
- Specific scroll-to-animation-frame binding logic
- Exact pill button and label styling tokens

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion scored from Gemini's timestamped description only, not directly viewed
- Static crop shows only pre- and post-animation states, not the full transition
- No visible copy or detail text accompanying feature tags in this crop

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: other
- Source type: other
- Structure: two-column
- Layout: Split layout with a static list on the left and a large animated graphic on the right.
- Styles: minimal, soft, geometric
- Components: 3d-graphic, tag-list, heading
- Purpose: A section featuring an interactive 3D graphic of square plates that stack to form a cube, accompanied by a list of feature tags that light up alongside the animation.
- Visual signature: Translucent white 3D stacked plates on a light gray background.
- Place on the page: 2 of 9, after Hero (`legora-com:C01`), before Feature collection (`legora-com:C03`)

### Crop and composition

- Crop: 1440×2000px; aspect ratio 0.72:1
- Page bounds: 1475–3475px of 11041px
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "56.2px",
      "family": "Legora Sans Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: Large 56.2px text used for the main hero headline 'Legal work, without limits.'",
      "sampleId": "font-12",
      "confidence": 0.9,
      "lineHeight": "56.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "41.2px",
      "family": "Legora Sans Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 41.2px text used for major section headings like 'Introducing the Legora aOS™' and 'Our latest innovations'.",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "41.2px",
      "letterSpacing": "-0.4px"
    },
    {
      "role": "body",
      "size": "15px",
      "family": "Legora Sans Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 15px Regular text used extensively for body copy and navigational elements.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "19.5px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#E6E6E6",
      "cssValue": "rgb(230, 230, 230)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 12,
      "sourceId": "color-2"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 7,
      "sourceId": "color-11"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.4)",
      "alpha": 0.4,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-14"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.25)",
      "alpha": 0.25098039215686274,
      "appliedAs": [
        "background"
      ],
      "occurrences": 7,
      "sourceId": "color-16"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.4)",
      "alpha": 0.4,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-17"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#0D1016",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(13, 16, 22); AI role: Dark color (#0D1016) used for primary text headings and body copy on light backgrounds.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#005032",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-7: computed rgb(0, 80, 50); AI role: Forest green used for the announcement bar, primary CTA buttons ('Book a demo'), and links.",
      "sampleId": "color-7",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-4: computed rgb(255, 255, 255); AI role: White background used extensively across major sections of the page.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#68655E",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-10: computed rgb(104, 101, 94); AI role: Lighter gray text used for elements like 'Trusted by' and secondary information.",
      "sampleId": "color-10",
      "confidence": 0.85
    },
    {
      "hex": "#FAFAF9",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-1: computed rgb(250, 250, 249); AI role: Off-white background used for sections like the footer and specific content blocks.",
      "sampleId": "color-1",
      "confidence": 0.8
    },
    {
      "hex": "#E6E6E6",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(230, 230, 230); AI role: Light gray background used for elements like the 'Explore the Legora aOS' button background.",
      "sampleId": "color-2",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and the labels next to the 3D cube appear to use a pill-shape radius.",
  "density": "Low density. The layout relies on significant whitespace to separate concepts and features.",
  "evidence": "Visual inspection of the screenshots shows distinct spacing blocks between headings and content, pill-shaped buttons for CTAs, and a clean, borderless aesthetic for most structural elements.",
  "borderStyle": "Minimal use of borders; structure is largely defined by spacing, background color changes, and typography.",
  "buttonStyle": "Pill-shaped, solid fill for primary actions (green), often including a small arrow icon.",
  "cornerStyle": "Combination of sharp corners on large background sections and rounded corners on smaller interactive elements like buttons and UI pills.",
  "contentWidth": "Content is generally centered and constrained within a readable max-width, though some sections (like the hero and footer) span full width.",
  "spacingRhythm": "Generous spacing between major sections, creating a calm, structured reading rhythm. Internal component padding is moderate."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Observed gaps: 5px.
- Layout containers: 0; cards/surfaces: 0; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 1475,
      "bottom": 3475,
      "pageHeight": 11041
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [
      5
    ],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "24px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "video · video",
    "size": "1440×1000px",
    "position": "x 0px, y 1475px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/assets/HoYj2qgmfKv6ASbeLvxadGH2mY.mp4"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": null,
  "cards": [],
  "media": [
    {
      "id": "ld-211",
      "tag": "video",
      "rect": {
        "x": 0,
        "y": 1475,
        "width": 1440,
        "height": 1000
      },
      "role": null,
      "label": "video",
      "media": {
        "src": "https://framerusercontent.com/assets/HoYj2qgmfKv6ASbeLvxadGH2mY.mp4",
        "poster": "https://legora.com/",
        "duration": 11.033333
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 1475,
    "bottom": 3475,
    "pageHeight": 11041
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [
      5
    ],
    "representativeContentWidthsPx": []
  },
  "coverage": {
    "cards": 0,
    "media": 1,
    "animations": 0,
    "elementsInSection": 15
  },
  "surfaces": {
    "radii": [
      "24px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-23T18:19:33.968Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **scroll** — As the user scrolls down, a 3D graphic consisting of multiple square plates stacks up to form a cube. Text boxes appear to the left of each layer, and the graphic transforms as each text box lights up, showing the internal structure of the corresponding layer. (9s–21s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.
2. **scroll** — As the user scrolls up, the 3D graphic reverses its animation, showing the layers separating and text boxes disappearing. (108s–119s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: high
- What transfers: Split layout pairing a feature list with a large visual centerpiece; Pattern of list items triggering synced animation changes in a central graphic; Generous whitespace and low-density pacing
- Dependencies: Custom 3D cube/plate model and its material rendering; Specific scroll-to-animation-frame binding logic; Exact pill button and label styling tokens
- Guidance: Recreate as a scroll-triggered state machine where list items map 1:1 to animation keyframes on a central hero object; the 3D asset itself must be custom-built or substituted with an equivalent layered/exploded-view model to preserve the effect.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original other section inspired by the design evidence titled “Interactive 3D layer stack”.

Purpose: A section featuring an interactive 3D graphic of square plates that stack to form a cube, accompanied by a list of feature tags that light up alongside the animation.

Structure: two-column. Source layout label: Split layout with a static list on the left and a large animated graphic on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: Translucent white 3D stacked plates on a light gray background.

Components: 3d-graphic, tag-list, heading.

Style direction: minimal, soft, geometric.

Observed crop: 1440×2000px (0.72:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"56.2px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Large 56.2px text used for the main hero headline 'Legal work, without limits.'","sampleId":"font-12","confidence":0.9,"lineHeight":"56.2px","letterSpacing":"normal"} {"role":"heading","size":"41.2px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 41.2px text used for major section headings like 'Introducing the Legora aOS™' and 'Our latest innovations'.","sampleId":"font-3","confidence":0.95,"lineHeight":"41.2px","letterSpacing":"-0.4px"} {"role":"body","size":"15px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 15px Regular text used extensively for body copy and navigational elements.","sampleId":"font-5","confidence":0.95,"lineHeight":"19.5px","letterSpacing":"normal"}

Color evidence: {"hex":"#0D1016","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(13, 16, 22); AI role: Dark color (#0D1016) used for primary text headings and body copy on light backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#005032","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(0, 80, 50); AI role: Forest green used for the announcement bar, primary CTA buttons ('Book a demo'), and links.","sampleId":"color-7","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White background used extensively across major sections of the page.","sampleId":"color-4","confidence":0.9} {"hex":"#68655E","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(104, 101, 94); AI role: Lighter gray text used for elements like 'Trusted by' and secondary information.","sampleId":"color-10","confidence":0.85} {"hex":"#FAFAF9","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(250, 250, 249); AI role: Off-white background used for sections like the footer and specific content blocks.","sampleId":"color-1","confidence":0.8} {"hex":"#E6E6E6","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(230, 230, 230); AI role: Light gray background used for elements like the 'Explore the Legora aOS' button background.","sampleId":"color-2","confidence":0.8}

No section-bounded typography samples were measured.

Colors measured inside this section: {"id":"color-2","hex":"#E6E6E6","alpha":1,"count":12,"contexts":[{"tag":"div","top":1475,"text":"","property":"background"},{"tag":"a","top":7025,"text":"Explore the Legora aOS™","property":"control-background"},{"tag":"div","top":8603,"text":"","property":"control-background"}],"cssValue":"rgb(230, 230, 230)"} {"id":"color-11","hex":"#000000","alpha":0.5019607843137255,"count":7,"contexts":[{"tag":"a","top":1505,"text":"Large Language Models","property":"control-background"}],"cssValue":"rgba(0, 0, 0, 0.5)"} {"id":"color-14","hex":"#000000","alpha":0.4,"count":1,"contexts":[{"tag":"div","top":1821,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.4)"} {"id":"color-16","hex":"#FFFFFF","alpha":0.25098039215686274,"count":7,"contexts":[{"tag":"div","top":1515,"text":"","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.25)"} {"id":"color-17","hex":"#FFFFFF","alpha":0.4,"count":1,"contexts":[{"tag":"div","top":1833,"text":"","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.4)"}

Exact section measurements from the saved element map: spacing {"gapsPx":[5],"representativeContentWidthsPx":[]}; surfaces {"radii":["24px"],"borders":[],"shadows":[]}; media [{"tag":"video","rect":{"x":0,"y":1475,"width":1440,"height":1000},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: As the user scrolls down, a 3D graphic consisting of multiple square plates stacks up to form a cube. Text boxes appear to the left of each layer, and the graphic transforms as each text box lights up, showing the internal structure of the corresponding layer. (95% confidence) scroll: As the user scrolls up, the 3D graphic reverses its animation, showing the layers separating and text boxes disappearing. (95% confidence)

Transfer these principles: Split layout pairing a feature list with a large visual centerpiece; Pattern of list items triggering synced animation changes in a central graphic; Generous whitespace and low-density pacing.

Dependencies: Custom 3D cube/plate model and its material rendering; Specific scroll-to-animation-frame binding logic; Exact pill button and label styling tokens.

Adaptation guidance: Recreate as a scroll-triggered state machine where list items map 1:1 to animation keyframes on a central hero object; the 3D asset itself must be custom-built or substituted with an equivalent layered/exploded-view model to preserve the effect.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.