# Distorted Landscape Feature Schema: Design Details SECTION.md v3.2 Website: Sentient Source: https://sentient.foundation/ Source section IDs: gap-ac138aba-7081-8827, 4aa5385a-6b07-4c5a-9b5b-9f517413dc8b Status: AI analysed; vocabulary promotion is automated ## Classification - Type: features - Layout: full-screen media with layered text - Styles: photographic, brutalist - Confidence: 95% ## Purpose and structure A feature section showcasing an aerial video of a mountain ridge that exhibits extreme visual perspective distortion on scroll. Visual signature: An extremely distorted, warped aerial view of a mountain ridge with a tiny figure, overlaid with 'Open AGI Summit'. ## Components - distorted video - typography ## Typography - Display: Neurialgrotesk — 65px 500 - Heading: Neurialgrotesk — 40px 500 - Body: Neurialgrotesk — 14px 500 - Mono: Geistmono — 12px 400 ## Functional palette - Canvas: canvas #F9F8F6 - Text: text #0E0C0C - Border: border #000000 - Surface: surface #718698 ## Motion evidence - 24.0–29.0s — The greyish-blue background transitions to an aerial video of a person on a mountain ridge. The video exhibits extreme perspective distortion, expanding from a central point. Text appears over the video. (98% confidence) ## Section quality Overall: 66.25/100 (Good) Scored coverage: 100% - Typography: 65 — Clean mono-labeled annotation text paired with a large grotesque display heading shows deliberate hierarchy and restraint, with code-snippet text layered subtly into the background texture, but the type system itself (sizes, tracking) is fairly standard and not pushed into memorable territory. Next tier: Needs more distinct type pairing or custom treatment to push past competent/polished into distinctive. - Composition: 72 — The warped ridge line dividing light and dark fields, a tiny figure for scale, and asymmetric placement of the two text blocks against vast negative space create a confident, memorable full-bleed layout that uses distortion as a genuine compositional device rather than decoration. Next tier: Would need an additional layer of interaction or compositional surprise (e.g. parallax depth, reveal choreography) to reach exceptional. - Motion: 62 — Gemini confirms a timestamped transition (24s-29s) where the background morphs into the distorted aerial video with text appearing over it, establishing a clear, intentional scroll-triggered reveal, but no further detail on distortion easing or scroll-linked progression is given. Next tier: Lacks confirmed detail on how the distortion itself animates/resolves over scroll to justify a higher score. - Content: 68 — Copy is tightly integrated with the visual: the aerial ridge photo doubles as a metaphor for the summit's conceptual 'ridge' theme, with factual labels (date, description, CTA) placed cleanly within the image's negative space. Next tier: Needs tighter visual-copy fusion (e.g. a typographic element reacting to the terrain or more than a static caption) to be considered strong/memorable. - Originality: 74 — Using a deliberately broken/warped aerial landscape as a hero visual for an AI summit is a genuinely distinctive idea that ties abstractly to the conceptual theme of AI distortion, rather than a generic stock-photo hero. Next tier: Would need the distortion to extend into a more sustained or responsive motion system (not just a single reveal) to feel landmark rather than a single well-executed gimmick. - Adaptability: 55 — Core structure (full-bleed media, overlay text blocks, mono labels) is separable from the video asset, but the entire visual impact depends on a bespoke distorted/warped video which is not a generic substitutable skin. Next tier: Heavy reliance on a custom-generated distortion video limits how cleanly the effect, as opposed to just the layout, can be reused elsewhere. Strengths: - Distorted aerial landscape used as a conceptual visual metaphor rather than decorative background - Strong hierarchy between large display title, mono metadata labels, and body copy - Effective use of negative space and asymmetric placement against the terrain's natural lines - Tiny human figure anchors scale and gives the warped landscape narrative weight Weaknesses: - Only one confirmed motion moment, limiting assessment of full scroll-driven choreography - Typography system itself, while clean, is largely standard-size grotesque pairing without distinct customization - High dependency on a bespoke distorted video asset makes the effect hard to separate from its specific content - Secondary text blocks (date, description, CTA) are conventional card-like overlays despite the unconventional backdrop Why it does not reach the next tier: The section earns credit for a bold, conceptually tied visual device, but the supporting typography and card overlays are fairly conventional, and only a single confirmed motion beat is available to judge the scroll-driven system, keeping it short of a fully memorable, multi-layered motion/composition payoff. ## Adaptation guidance - Effort: High - Guidance: Reuse the full-bleed hero structure with overlay text blocks and mono-label metadata pattern on any large background media; the distortion/warp effect itself requires bespoke video processing or shader work and cannot be swapped in generically without that asset. What transfers: - Full-bleed warped/distorted media as hero backdrop - Overlay text block with mono label, heading, and bracketed CTA pattern - Asymmetric placement of title vs. metadata block to use negative space Dependencies: - Custom-generated or processed aerial/landscape video with warp effect - Specific timed scroll transition revealing the video from a plain background ## 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 scoring limited to a single Gemini-confirmed timestamp; no detail on how distortion itself animates over scroll - Exact font sizing/letter-spacing for the overlay text blocks not confirmed from deterministic facts - Cannot verify whether additional scroll interaction modifies the distortion beyond the one observed transition ## 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: features - Source type: features - Structure: full-bleed - Layout: full-screen media with layered text - Styles: photographic, brutalist - Components: distorted video, typography - Purpose: A feature section showcasing an aerial video of a mountain ridge that exhibits extreme visual perspective distortion on scroll. - Visual signature: An extremely distorted, warped aerial view of a mountain ridge with a tiny figure, overlaid with 'Open AGI Summit'. ### Crop and composition - Crop: 1440×972px; aspect ratio 1.481:1 - Page bounds: 8827–9799px of 12930px - Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays. ### 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": [ { "role": "card/subheading", "family": "Neurialgrotesk", "stack": "Neurialgrotesk, Arial, sans-serif", "size": "20px", "weight": "500", "lineHeight": "24px", "letterSpacing": "normal", "sample": "Open AGI Summit", "element": "h3", "occurrences": 5, "sourceId": "font-2" }, { "role": "UI/supporting text", "family": "Neurialgrotesk", "stack": "Neurialgrotesk, Arial, sans-serif", "size": "14px", "weight": "500", "lineHeight": "16.8px", "letterSpacing": "normal", "sample": "Bringing together researchers, developers, and", "element": "div", "occurrences": 7, "sourceId": "font-6" } ], "siteRoles": [ { "role": "display", "size": "65px", "family": "Neurialgrotesk", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: Large 65px Neurialgrotesk used for major section headings ('Where AI learns to feel...', 'Open AGI Summit').", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "71.5px", "letterSpacing": "-0.6px" }, { "role": "heading", "size": "40px", "family": "Neurialgrotesk", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-1: computed CSS at 1440×1000; AI role: 40px Neurialgrotesk used for primary narrative text and subtitles in the hero and other sections.", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "44px", "letterSpacing": "normal" }, { "role": "body", "size": "14px", "family": "Neurialgrotesk", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-6: computed CSS at 1440×1000; AI role: 14px Neurialgrotesk used for general descriptive body text.", "sampleId": "font-6", "confidence": 0.8, "lineHeight": "16.8px", "letterSpacing": "normal" }, { "role": "mono", "size": "12px", "family": "Geistmono", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-7: computed CSS at 1440×1000; AI role: 12px Geistmono used extensively for code snippets and secondary information.", "sampleId": "font-7", "confidence": 0.95, "lineHeight": "15px", "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": [], "functionalPalette": [ { "hex": "#F9F8F6", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(249, 248, 246); AI role: Off-white #F9F8F6 used as the primary background color when canvas elements are not covering the viewport (e.g., news and footer sections).", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#0E0C0C", "name": "text", "role": "text", "source": "computed", "evidence": "color-9: computed rgb(14, 12, 12); AI role: Near-black #0E0C0C used for text in the light-themed lower sections (footer).", "sampleId": "color-9", "confidence": 0.9 }, { "hex": "#000000", "name": "border", "role": "border", "source": "computed", "evidence": "color-8: computed rgb(0, 0, 0); AI role: Black #000000 used for borders in the news feed list.", "sampleId": "color-8", "confidence": 0.85 }, { "hex": "#718698", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(113, 134, 152); AI role: Slate blue #718698 associated with canvas containers and text over specific backgrounds.", "sampleId": "color-2", "confidence": 0.7 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear fully rounded (pill shape), while most structural elements and images have sharp, 0px border-radii.", "density": "Very low density overall, prioritizing visual impact and motion over information density.", "evidence": "Observation of layout crops and DOM facts: use of '.layout_grid' for full viewport control, minimal button styles, and wide distribution of text nodes.", "borderStyle": "Thin, solid, 1px lines used sparingly as dividers in lists (news feed, footer).", "buttonStyle": "Minimalist outline style (pill-shaped) for primary actions, or simple inline text with brackets for secondary actions.", "cornerStyle": "Mix of sharp corners (bracketed links, general layout) and pill shapes (header button).", "contentWidth": "Full-bleed for media backgrounds, with text elements often constrained to specific columns or wide margins spanning the full viewport width.", "spacingRhythm": "Sparse and expansive. Content is often placed at edges or vertically centered with massive amounts of negative space to allow background visuals to take precedence." } ``` ### 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: 8px. - Representative content widths: 1408, 1379, 1350, 393, 247px. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 8827, "bottom": 9799, "pageHeight": 12930 } }, "container": null, "spacing": { "observedGapsPx": [ 8 ], "representativeContentWidthsPx": [ 1408, 1379, 1350, 393, 247 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [] ``` #### 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": [], "bounds": { "top": 8827, "bottom": 9799, "pageHeight": 12930 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [ 8 ], "representativeContentWidthsPx": [ 1408, 1379, 1350, 393, 247 ] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 18 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-21T17:55:08.406Z", "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. **interaction** — The greyish-blue background transitions to an aerial video of a person on a mountain ridge. The video exhibits extreme perspective distortion, expanding from a central point. Text appears over the video. (24s–29s; 98% 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: Full-bleed warped/distorted media as hero backdrop; Overlay text block with mono label, heading, and bracketed CTA pattern; Asymmetric placement of title vs. metadata block to use negative space - Dependencies: Custom-generated or processed aerial/landscape video with warp effect; Specific timed scroll transition revealing the video from a plain background - Guidance: Reuse the full-bleed hero structure with overlay text blocks and mono-label metadata pattern on any large background media; the distortion/warp effect itself requires bespoke video processing or shader work and cannot be swapped in generically without that asset. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Distorted Landscape Feature”. Purpose: A feature section showcasing an aerial video of a mountain ridge that exhibits extreme visual perspective distortion on scroll. Structure: full-bleed. Source layout label: full-screen media with layered text. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: An extremely distorted, warped aerial view of a mountain ridge with a tiny figure, overlaid with 'Open AGI Summit'. Components: distorted video, typography. Style direction: photographic, brutalist. Observed crop: 1440×972px (1.481:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"65px","family":"Neurialgrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Large 65px Neurialgrotesk used for major section headings ('Where AI learns to feel...', 'Open AGI Summit').","sampleId":"font-3","confidence":0.9,"lineHeight":"71.5px","letterSpacing":"-0.6px"} {"role":"heading","size":"40px","family":"Neurialgrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 40px Neurialgrotesk used for primary narrative text and subtitles in the hero and other sections.","sampleId":"font-1","confidence":0.9,"lineHeight":"44px","letterSpacing":"normal"} {"role":"body","size":"14px","family":"Neurialgrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: 14px Neurialgrotesk used for general descriptive body text.","sampleId":"font-6","confidence":0.8,"lineHeight":"16.8px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"Geistmono","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: 12px Geistmono used extensively for code snippets and secondary information.","sampleId":"font-7","confidence":0.95,"lineHeight":"15px","letterSpacing":"normal"} Color evidence: {"hex":"#F9F8F6","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(249, 248, 246); AI role: Off-white #F9F8F6 used as the primary background color when canvas elements are not covering the viewport (e.g., news and footer sections).","sampleId":"color-1","confidence":0.9} {"hex":"#0E0C0C","name":"text","role":"text","source":"computed","evidence":"color-9: computed rgb(14, 12, 12); AI role: Near-black #0E0C0C used for text in the light-themed lower sections (footer).","sampleId":"color-9","confidence":0.9} {"hex":"#000000","name":"border","role":"border","source":"computed","evidence":"color-8: computed rgb(0, 0, 0); AI role: Black #000000 used for borders in the news feed list.","sampleId":"color-8","confidence":0.85} {"hex":"#718698","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(113, 134, 152); AI role: Slate blue #718698 associated with canvas containers and text over specific backgrounds.","sampleId":"color-2","confidence":0.7} Typography measured inside this section: {"id":"font-2","size":"20px","count":5,"family":"Neurialgrotesk","traits":"Regular","weight":"500","contexts":[{"tag":"h3","top":9434,"text":"Open AGI Summit","property":"font"},{"tag":"h3","top":11025,"text":"Can we verify where an AI model came from? Introducing Fingerprinting Leaderboard","property":"font"},{"tag":"h3","top":11283,"text":"This Week In OS AI Field Notes: 9 October 2026","property":"font"}],"fontStack":"Neurialgrotesk, Arial, sans-serif","lineHeight":"24px","letterSpacing":"normal"} {"id":"font-6","size":"14px","count":7,"family":"Neurialgrotesk","traits":"Regular","weight":"500","contexts":[{"tag":"div","top":9564,"text":"Bringing together researchers, developers, and","property":"font"},{"tag":"div","top":9581,"text":"communities united by the shared conviction that AGI must","property":"font"},{"tag":"div","top":9597,"text":"remain open and accessible to everyone.","property":"font"}],"fontStack":"Neurialgrotesk, Arial, sans-serif","lineHeight":"16.8px","letterSpacing":"normal"} No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[8],"representativeContentWidthsPx":[1408,1379,1350,393,247]}; surfaces {"radii":[],"borders":[],"shadows":[]} Motion evidence: interaction: The greyish-blue background transitions to an aerial video of a person on a mountain ridge. The video exhibits extreme perspective distortion, expanding from a central point. Text appears over the video. (98% confidence) Transfer these principles: Full-bleed warped/distorted media as hero backdrop; Overlay text block with mono label, heading, and bracketed CTA pattern; Asymmetric placement of title vs. metadata block to use negative space. Dependencies: Custom-generated or processed aerial/landscape video with warp effect; Specific timed scroll transition revealing the video from a plain background. Adaptation guidance: Reuse the full-bleed hero structure with overlay text blocks and mono-label metadata pattern on any large background media; the distortion/warp effect itself requires bespoke video processing or shader work and cannot be swapped in generically without that asset. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.