# Sticky Wireframe Process Steps Schema: Design Details SECTION.md v3.2 Website: Atlas Motion Systems Source: https://atlasmotion.com/ Source section IDs: gap-5976422b-4700-10104 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The pinned wireframe motor stays centred while numbered steps change around it, so the graphic itself explains the process as parts reassemble. - Huge uppercase step titles sit against small mono labels and body text, which gives a clear hierarchy and a technical tone. - A persistent grid overlay and a top row of step number, label and icon keep the dark layout orderly, and the concise, domain-specific copy supports it. What a screenshot can't show: - In the recording, scrolling advances the steps from 01 to 04 (Integrate, Evaluate, Manufacture, Innovate) between about 19s and 26s while the motor stays pinned. - Measured type sizes, letter spacing and section spacing were not captured, so exact values are unknown. Borrow: Pin one explanatory visual and let scroll progress change its state alongside the step titles, so the image itself shows the process. Leave alone: Don't copy the exploded motor wireframe, the near-black canvas with cream text, or the exact four-word step titles; use your own product illustration and palette. ## Classification - Type: process - Layout: Split or layered layout where a central visual is pinned while text elements scroll past. - Styles: bold, brutalist, illustrative, typographic - Confidence: 95% ## Purpose and structure A dark, technical section that steps through a manufacturing process using large typography and an animated, pinned wireframe graphic. Visual signature: A rotating white wireframe motor on a dark background surrounded by large, bold step titles like INTEGRATE, EVALUATE. ## Components - Animated wireframe graphic - Large step titles - Step number indicators - Supporting text blocks ## Typography - Display: SuisseIntl — 150px 500 - Heading: SuisseIntl — 64px 500 - Body: SuisseIntl — 24px 500 - Mono: SuisseIntl — 14px 500 ## Functional palette - Text: text #FFFDE0 - Canvas: canvas #181818 - Primary-Action: primary action #121211 ## Motion evidence - 19.0–26.0s — A wireframe model of a motor is pinned while scrolling updates the steps from 01 to 04 (Integrate, Evaluate, Manufacture, Innovate). (99% confidence) ## Section quality Overall: 64.45/100 (Good) Scored coverage: 100% - Typography: 68 — Strong scale contrast between massive uppercase step titles (INTEGRATE, EVALUATE, MANUFACTURE, INNOVATE) and small mono labels/body text creates clear hierarchy. Letter-spacing and weight choices feel deliberate and technical, consistent with the documented type system, but the approach is a fairly familiar 'huge word + tiny caption' pattern. Next tier: Typography alone doesn't introduce a distinct voice beyond scale contrast; no unusual type pairing, kinetic typographic behavior, or unconventional composition of the words themselves to push past polished/familiar. - Composition: 66 — Clear layered structure: step number/label/icon row at top, pinned exploded wireframe motor in center, large title anchoring the bottom, with a persistent grid overlay giving technical rigor. The exploded-parts diagram reassembling across steps is a genuinely coherent visual conceit tying narrative to imagery. Next tier: Left text column is small and under-weighted relative to the dominant central graphic and title, leaving hierarchy slightly lopsided; grid lines are present but not used expressively beyond framing, so the composition reads as competent technical layout rather than a fully resolved system. - Motion: 62 — Gemini confirms a pinned wireframe motor with scroll-driven step progression (01-04, exploded parts reassembling) over 19-26s, a clear scrollytelling technique with a specific conceptual payoff (parts assembling as process advances). Next tier: Only one motion moment is documented; no evidence of transition easing, rotation behavior nuance, or secondary motion details (e.g., text entrance choreography) that would support a higher score for motion craft. - Content: 65 — The exploded wireframe motor diagram directly visualizes the manufacturing process it describes, and copy is concise and domain-specific (NDAA-compliant motors, JDM partners), giving genuine integration between graphic and message. Next tier: Supporting text blocks are quite small and generic in placement; the connection between each step's prose and the specific visual change in the wireframe is not made very explicit or didactic, limiting depth of integration. - Originality: 64 — The exploded-view wireframe motor construction tied to process steps is a specific, fairly distinctive device beyond generic 3D product spins, giving it some memorability. Next tier: The overall frame (dark background, pinned 3D object, big scroll-triggered words) is a known pattern in product/technical sites; without more unexpected interaction or layout deviation it stays in strong-but-familiar territory rather than wow. - Adaptability: 60 — Structure (numbered steps, label row, pinned central visual, large title, grid overlay) is clearly separable from the specific motor asset and copy; same skeleton could support other wireframe products with different step counts. Next tier: Reliance on a custom-built exploded 3D wireframe asset and exact pin/scroll choreography ties the effect closely to one asset type, so full separation of behavior from skin requires nontrivial rebuilding of the 3D sequence. Strengths: - Exploded wireframe motor diagram that visually reassembles in sync with process steps - Strong type scale jump between massive step titles and small structural labels - Persistent technical grid overlay reinforcing the engineering/manufacturing theme - Clear numbered step system (01-04) with consistent label and dot-indicator pattern Weaknesses: - Supporting body text is small and visually subordinate, weakening its narrative pairing with the graphic - Left-aligned text column feels secondary to the dominant center-right visual, slightly unbalancing composition - Only one motion moment documented, limiting confidence in transition quality across all four steps - Pattern of pinned 3D object plus giant scrolling word is a known convention in technical/product sites Why it does not reach the next tier: The section is well-executed and technically coherent but relies on a recognizable scrollytelling convention (pinned asset + giant word + numbered steps) without an unexpected structural or interaction twist, and the supporting copy/visual pairing isn't developed enough to feel singular or essential. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the step/label/grid skeleton and giant-title typographic contrast for any numbered process; the hard part is replacing the 3D wireframe reveal with an equally specific visual metaphor tied to the new process, since generic imagery here would flatten the concept. What transfers: - Numbered step system with label and dot indicator - Large uppercase title per step paired with small supporting copy - Grid overlay background treatment - Pinned-center-visual with scroll-driven progression concept Dependencies: - Custom exploded 3D wireframe motor asset and its part animation - Exact pin/scroll-trigger timing synced to four content stages - Dark canvas and off-white line/text palette for technical mood ## 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 a single documented moment; full transition quality across all four steps is unverified - Exact animation easing, rotation speed, and text entrance choreography not specified - Supporting text content beyond visible crop is partially cut off, limiting content-integration assessment ## 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: steps - Source type: process - Structure: two-column - Layout: Split or layered layout where a central visual is pinned while text elements scroll past. - Styles: bold, brutalist, illustrative, typographic - Components: Animated wireframe graphic, Large step titles, Step number indicators, Supporting text blocks - Purpose: A dark, technical section that steps through a manufacturing process using large typography and an animated, pinned wireframe graphic. - Visual signature: A rotating white wireframe motor on a dark background surrounded by large, bold step titles like INTEGRATE, EVALUATE. - Place on the page: 3 of 8, after Feature collection (`c8d9383a-ce4c-4c07-a578-3c0c75e98234`), before Editorial (`atlasmotion-com:editorial_thesis_feature`) ### Crop and composition - Deterministic crop dimensions are unavailable. - 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": "150px", "family": "SuisseIntl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-6: computed CSS at 1440×1000; AI role: SuisseIntl at 150px, used for massive background text or large section headers.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "165px", "letterSpacing": "-4.5px" }, { "role": "heading", "size": "64px", "family": "SuisseIntl", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-4: computed CSS at 1440×1000; AI role: SuisseIntl at 64px, used for primary statement text like 'THE PHYSICAL LAYER...'.", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "58px", "letterSpacing": "-1.9px" }, { "role": "body", "size": "24px", "family": "SuisseIntl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-7: computed CSS at 1440×1000; AI role: SuisseIntl at 24px, used for standard paragraph text describing processes.", "sampleId": "font-7", "confidence": 0.85, "lineHeight": "28px", "letterSpacing": "-0.7px" }, { "role": "mono", "size": "14px", "family": "SuisseIntl", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-2: computed CSS at 1440×1000; AI role: SuisseIntl at 14px uppercase, used for UI labels, navigation, and structural markers.", "sampleId": "font-2", "confidence": 0.8, "lineHeight": "14px", "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": "#FFFDE0", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(255, 253, 224); AI role: Off-white (#FFFDE0) used extensively for primary text, wireframes, and grid lines against dark backgrounds.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#181818", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(24, 24, 24); AI role: Very dark gray (#181818) used as the background color for technical and footer sections.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#121211", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-4: computed rgb(18, 18, 17); AI role: Near black (#121211) used as the background for the primary CTA button.", "sampleId": "color-4", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons and structural elements do not show measurable border-radius, maintaining sharp edges.", "density": "The layout is sparse and airy, prioritizing the background imagery and scroll animations, with text elements appearing in isolated blocks.", "evidence": "DOM data shows font-1 through font-5 mostly sizes 12-14px for UI elements alongside large 64px/150px headings. The grid lines and sharp UI elements confirm the technical aesthetic.", "borderStyle": "Thin, semi-transparent light lines (e.g., color-3) are used to draw the structural grid across the entire canvas.", "buttonStyle": "Buttons are typically sharp rectangles, either solid dark fills or outline styles with small, tight uppercase typography.", "cornerStyle": "Sharp corners are dominant, aligning with the technical grid aesthetic.", "contentWidth": "Content often spans the full width of the viewport (edge-to-edge imagery), while text blocks are contained within specific columns of the overlay grid.", "spacingRhythm": "Content is positioned against a persistent structural grid overlay, with large gaps between distinct scroll chapters to allow for animation sequences." } ``` ### 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. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### 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 null ``` ### Observed motion 1. **scroll** — A wireframe model of a motor is pinned while scrolling updates the steps from 01 to 04 (Integrate, Evaluate, Manufacture, Innovate). (19s–26s; 99% 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: unknownpx 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: medium - What transfers: Numbered step system with label and dot indicator; Large uppercase title per step paired with small supporting copy; Grid overlay background treatment; Pinned-center-visual with scroll-driven progression concept - Dependencies: Custom exploded 3D wireframe motor asset and its part animation; Exact pin/scroll-trigger timing synced to four content stages; Dark canvas and off-white line/text palette for technical mood - Guidance: Reuse the step/label/grid skeleton and giant-title typographic contrast for any numbered process; the hard part is replacing the 3D wireframe reveal with an equally specific visual metaphor tied to the new process, since generic imagery here would flatten the concept. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original steps section inspired by the design evidence titled “Sticky Wireframe Process Steps”. Purpose: A dark, technical section that steps through a manufacturing process using large typography and an animated, pinned wireframe graphic. Structure: two-column. Source layout label: Split or layered layout where a central visual is pinned while text elements scroll past.. 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: A rotating white wireframe motor on a dark background surrounded by large, bold step titles like INTEGRATE, EVALUATE. Components: Animated wireframe graphic, Large step titles, Step number indicators, Supporting text blocks. Style direction: bold, brutalist, illustrative, typographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"150px","family":"SuisseIntl","source":"computed","traits":"Regular","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: SuisseIntl at 150px, used for massive background text or large section headers.","sampleId":"font-6","confidence":0.9,"lineHeight":"165px","letterSpacing":"-4.5px"} {"role":"heading","size":"64px","family":"SuisseIntl","source":"computed","traits":"uppercase","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: SuisseIntl at 64px, used for primary statement text like 'THE PHYSICAL LAYER...'.","sampleId":"font-4","confidence":0.9,"lineHeight":"58px","letterSpacing":"-1.9px"} {"role":"body","size":"24px","family":"SuisseIntl","source":"computed","traits":"Regular","weight":"500","evidence":"font-7: computed CSS at 1440×1000; AI role: SuisseIntl at 24px, used for standard paragraph text describing processes.","sampleId":"font-7","confidence":0.85,"lineHeight":"28px","letterSpacing":"-0.7px"} {"role":"mono","size":"14px","family":"SuisseIntl","source":"computed","traits":"uppercase","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: SuisseIntl at 14px uppercase, used for UI labels, navigation, and structural markers.","sampleId":"font-2","confidence":0.8,"lineHeight":"14px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFDE0","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 253, 224); AI role: Off-white (#FFFDE0) used extensively for primary text, wireframes, and grid lines against dark backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#181818","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(24, 24, 24); AI role: Very dark gray (#181818) used as the background color for technical and footer sections.","sampleId":"color-1","confidence":0.9} {"hex":"#121211","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(18, 18, 17); AI role: Near black (#121211) used as the background for the primary CTA button.","sampleId":"color-4","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: scroll: A wireframe model of a motor is pinned while scrolling updates the steps from 01 to 04 (Integrate, Evaluate, Manufacture, Innovate). (99% confidence) Transfer these principles: Numbered step system with label and dot indicator; Large uppercase title per step paired with small supporting copy; Grid overlay background treatment; Pinned-center-visual with scroll-driven progression concept. Dependencies: Custom exploded 3D wireframe motor asset and its part animation; Exact pin/scroll-trigger timing synced to four content stages; Dark canvas and off-white line/text palette for technical mood. Adaptation guidance: Reuse the step/label/grid skeleton and giant-title typographic contrast for any numbered process; the hard part is replacing the 3D wireframe reveal with an equally specific visual metaphor tied to the new process, since generic imagery here would flatten the concept. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.