# App showcase carousel Schema: Design Details SECTION.md v3.2 Website: Ardor Source: https://ardor.cloud/ Source section IDs: ea8fad7e-5e4b-4927-b274-5d98200b7787 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A single card pairs a chat transcript on the left with a 'Selected work' panel on the right, so the story and the result are visible together. - Arrows sit outside the card with dot pagination beneath, which keeps the controls clear and the mockup uncluttered. - A dark amber terminal block below breaks the pale canvas sharply and contrasts the small sans UI text with a retro monospace voice. What a screenshot can't show: - The recording shows the team workspace mockup at 9-12s, but no transition type or easing was captured. - One text line animates in with a blur from 6px to 0, a fade, and an upward shift of about 11.7px, using ease-in-out keyframes. - The measured UI text is very small: 10px Roboto Flex at weight 400, with 9px line height. Borrow: Show a product as a short conversation next to its finished output, then follow it with a tonally opposite block to mark a change of mood. Leave alone: Don't copy the amber pixel terminal look, the gray-bar placeholder thumbnails, or the exact chat copy; use real work samples and your own typeface, such as a free sans like Inter. ## Classification - Type: gallery - Layout: Central interactive component with left/right navigation arrows, followed by a stacked visual. - Styles: minimal, playful - Confidence: 85% ## Purpose and structure An interactive carousel showcasing mockups of applications and interfaces, transitioning to a dark retro terminal view. Visual signature: A layered UI mockup inside a carousel with side arrows, placed above a dark graphic section. ## Components - carousel - mockup cards - navigation arrows - dark terminal graphic ## Typography - Display: Doto — 32px 900 - Heading: Roboto Flex — 19px 400 - Body: Roboto Flex — 13px 400 ## Functional palette - Canvas: canvas #F2F3F1 - Text: text #000000 - Surface: surface #FFFFFF ## Motion evidence - 9.0–12.0s — A section displaying an example of a team workspace interface. (90% confidence) ## Section quality Overall: 59.82/100 (Competent) Scored coverage: 85% - Typography: 58 — Mix of a small sans UI font in the chat/carousel mockup and an amber monospace/pixel terminal typeface below creates clear contrast between 'app' and 'terminal' contexts, but sizes are modest and hierarchy within each card is minimal (labels, captions, body text all similarly weighted). Next tier: Needs more deliberate scale/weight contrast and a distinctive display treatment to read as more than default UI text. - Composition: 62 — Carousel card with chat transcript on left and 'Selected work' panel on right is well balanced, with dot pagination and arrows cleanly placed outside the card; the dark terminal panel below adds a strong tonal break, though the crop shows an abrupt transition between two visually disconnected modules. Next tier: Stronger visual bridging or consistent framing between the light carousel and dark terminal block would elevate the composition beyond a stacked pairing of two separate ideas. - Motion: inconclusive — One motion moment is noted (9-12s, team workspace interface) but lacks specific visible change detail (no described transform, easing, or transition type) to score confidently. Next tier: Needs timestamped description of the actual carousel transition or terminal animation behavior to assess motion quality. - Content: 55 — Chat-style copy ('Put my work on one page', 'It's live') and labeled 'Selected work' panel integrate narrative with UI mockup convincingly, but the content is generic placeholder-style (gray bars, blank thumbnails) rather than fully realized work samples. Next tier: Replacing placeholder gray blocks with finished, specific visual content would strengthen content integration and credibility. - Originality: 64 — Pairing a conversational chat-builder mockup with an ASCII/terminal retro-display carousel is an unusual juxtaposition that avoids typical gallery conventions, giving the section a distinct identity. Next tier: The individual components (chat bubbles, dot carousel, arrow nav) are still fairly standard patterns; a more unexpected interaction or layout twist is needed to feel truly novel. - Adaptability: 60 — Structure (card + side nav arrows + dot indicator, stacked dark panel) is modular and could be retargeted with different mockup content, per deterministic DOM evidence showing clear rect/measurement separation of elements. Next tier: Heavy reliance on specific pixel-art terminal artwork and the Doto font ties the visual skin tightly to brand assets, limiting generic reuse. Strengths: - Clever juxtaposition of a modern chat-builder mockup with a retro ASCII terminal display for contrast - Balanced carousel layout with clearly placed navigation arrows and pagination dots - Chat transcript convincingly simulates a live conversational build interaction Weaknesses: - Placeholder-style gray content blocks reduce perceived polish and credibility - Typography hierarchy is flat with limited size/weight variation - Motion details are unconfirmed, so dynamic quality can't be verified - Dark terminal panel feels like a separate module rather than integrated continuation Why it does not reach the next tier: The section lacks confirmed, well-crafted motion detail, uses generic placeholder content in the showcase card, and the composition reads as two juxtaposed ideas rather than one unified system, keeping it at a good/competent level rather than strong. ## Adaptation guidance - Effort: Medium - Guidance: Keep the dual-card layout (chat + selected-work preview) and arrow/dot carousel pattern, but swap in real content thumbnails and reconsider the typeface pairing to retain contrast without needing the exact pixel font or terminal art. What transfers: - Carousel structure with side arrow navigation and dot indicator - Chat-bubble conversation UI pattern for showcasing an AI build process - Dark full-bleed panel as a tonal break beneath a light carousel Dependencies: - Doto pixel font and amber monospace terminal styling - Custom ASCII/ad-hoc terminal artwork - Specific chat copy and mockup thumbnails ## 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 cannot be scored from a single vague moment without described transition specifics - Visual content in the carousel card is largely placeholder gray blocks, limiting assessment of final content quality - Crop cuts off most of the terminal panel, so its full composition and copy hierarchy are not fully visible ## 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: gallery - Source type: gallery - Structure: Central interactive component with left/right navigation arrows, followed by a stacked visual. - Layout: Central interactive component with left/right navigation arrows, followed by a stacked visual. - Styles: minimal, playful - Components: carousel, mockup cards, navigation arrows, dark terminal graphic - Purpose: An interactive carousel showcasing mockups of applications and interfaces, transitioning to a dark retro terminal view. - Visual signature: A layered UI mockup inside a carousel with side arrows, placed above a dark graphic section. - Place on the page: 8 of 9, after Pricing (`22372d9f-206f-4733-ac2f-4811f93b8f6e`), before Call to action (`ab863d7d-cb11-4fcb-b929-bffecbfb4dd8`) ### Crop and composition - Crop: 1440×1001px; aspect ratio 1.439:1 - Page bounds: 8680–9681px of 13889px - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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": "action label", "family": "Roboto Flex", "stack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif", "size": "10px", "weight": "400", "lineHeight": "9px", "letterSpacing": "normal", "sample": "Ask for approval", "element": "button", "occurrences": 4, "sourceId": "font-14" } ], "siteRoles": [ { "role": "display", "size": "32px", "family": "Doto", "source": "computed", "traits": "Regular", "weight": "900", "evidence": "font-9: computed CSS at 1440×1000; AI role: The 'Doto' pixelated font, used at 32px for large, impactful headlines like 'One agent. Every app. Any task.' and animated text.", "sampleId": "font-9", "confidence": 0.95, "lineHeight": "32px", "letterSpacing": "normal" }, { "role": "heading", "size": "19px", "family": "Roboto Flex", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Roboto Flex at 19px, used for section titles like 'What people build with Ardor' and 'Made in Ardor'.", "sampleId": "font-2", "confidence": 0.85, "lineHeight": "22.8px", "letterSpacing": "normal" }, { "role": "body", "size": "13px", "family": "Roboto Flex", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Roboto Flex at 13px, functioning as the primary body text for descriptions and standard copy across the site.", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "15.6px", "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": "#F2F3F1", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1).", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas.", "sampleId": "color-6", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Calculated radii appear substantial on larger containers (e.g., the terminal cards) and fully circular on buttons and input fields.", "density": "Low density. The layout is airy, relying on negative space and large typography rather than packing information tightly.", "evidence": "The reliance on 'color-4' for the canvas and 'color-6' for cards creates a soft structure. Pill-shaped buttons are evident in the nav ('Start Free') and tabs. The generous spacing is visible in the gaps between 'Hero', 'What people build', and 'Made in Ardor' sections.", "borderStyle": "Most elements lack visible solid borders, relying instead on subtle backgrounds or shadows, except for very light, subtle borders on some UI elements (like color-9, a 10% black).", "buttonStyle": "Primary actions are solid black pill shapes with white text. Secondary toggles/tabs are unstyled text that gains a black pill background when active.", "cornerStyle": "Predominantly rounded. Feature cards, pricing cards, and terminal mockups have large, smooth border radii. Buttons and the main input field are fully rounded 'pill' shapes.", "contentWidth": "Content is generally centered in a constrained column, with some elements like the terminal carousel breaking out slightly wider, but keeping a generous margin from the viewport edges.", "spacingRhythm": "Generous use of vertical whitespace between major sections to isolate content and allow the background gradient to show. Within sections like pricing or feature cards, padding is consistent and moderate." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×550px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Representative content widths: 953, 546, 463px. - Layout containers: 0; cards/surfaces: 0; media elements: 4; browser animations: 1. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 8680, "bottom": 9681, "pageHeight": 13889 } }, "container": { "size": "1440×550px", "position": "x 0px, y 8906px", "display": "block", "positionMode": "static", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px solid rgb(0, 0, 0)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [ 953, 546, 463 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "2.68435e+07px" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "svg · svg", "size": "35×35px", "position": "x 990px, y 9198px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "20×20px", "position": "x 996px, y 9260px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "source": "source not captured" }, { "element": "svg · svg", "size": "18×18px", "position": "x 428px, y 9261px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "18×18px", "position": "x 468px, y 9261px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" } ] ``` #### Browser-exposed animation parameters ```json [ { "target": "Turn these 10 spreadsheets into one automated system", "delayMs": 0, "durationMs": 3400, "easing": "linear", "iterations": 1, "direction": "normal", "fill": "both", "keyframes": [ { "easing": "ease-in-out", "filter": "blur(6px)", "offset": 0, "opacity": "0", "composite": "auto", "transform": "translateY(11.7px)", "computedOffset": 0 }, { "easing": "ease-in-out", "filter": "blur(0px)", "offset": 0.12, "opacity": "1", "composite": "auto", "transform": "translateY(0px)", "computedOffset": 0.12 }, { "easing": "ease-in-out", "filter": "blur(0px)", "offset": 0.86, "opacity": "1", "composite": "auto", "transform": "translateY(0px)", "computedOffset": 0.86 }, { "easing": "ease-in-out", "filter": "blur(6px)", "offset": 1, "opacity": "0", "composite": "auto", "transform": "translateY(-11.7px)", "computedOffset": 1 } ] } ] ``` ### 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": { "id": "ld-1963", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 8906, "width": 1440, "height": 550 }, "role": null, "label": "One agent. Every app. Any task.˚˚. ˚++x˚x +x++x ˚x˚x ˚x+ ˚x˚xxWire it into your stack. Tools, team, ", "border": "0px solid rgb(0, 0, 0)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "visible", "position": "static", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-1982", "tag": "svg", "rect": { "x": 990, "y": 9198, "width": 35, "height": 35 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-2007", "tag": "svg", "rect": { "x": 996, "y": 9260, "width": 20, "height": 20 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "visible", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1990", "tag": "svg", "rect": { "x": 428, "y": 9261, "width": 18, "height": 18 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1994", "tag": "svg", "rect": { "x": 468, "y": 9261, "width": 18, "height": 18 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 8680, "bottom": 9681, "pageHeight": 13889 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 953, 546, 463 ] }, "coverage": { "cards": 0, "media": 4, "animations": 1, "elementsInSection": 18 }, "surfaces": { "radii": [ "2.68435e+07px" ], "borders": [], "shadows": [] }, "animations": [ { "id": "animation-72", "fill": "both", "easing": "linear", "target": { "id": "ld-1980", "tag": "span", "rect": { "x": 429, "y": 9206, "width": 546, "height": 20 }, "role": null, "label": "Turn these 10 spreadsheets into one automated system" }, "delayMs": 0, "direction": "normal", "keyframes": [ { "easing": "ease-in-out", "filter": "blur(6px)", "offset": 0, "opacity": "0", "composite": "auto", "transform": "translateY(11.7px)", "computedOffset": 0 }, { "easing": "ease-in-out", "filter": "blur(0px)", "offset": 0.12, "opacity": "1", "composite": "auto", "transform": "translateY(0px)", "computedOffset": 0.12 }, { "easing": "ease-in-out", "filter": "blur(0px)", "offset": 0.86, "opacity": "1", "composite": "auto", "transform": "translateY(0px)", "computedOffset": 0.86 }, { "easing": "ease-in-out", "filter": "blur(6px)", "offset": 1, "opacity": "0", "composite": "auto", "transform": "translateY(-11.7px)", "computedOffset": 1 } ], "playState": "running", "durationMs": 3400, "iterations": 1, "playbackRate": 1 } ], "capturedAt": "2026-10-13T02:23:22.344Z", "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. **observed sequence** — A section displaying an example of a team workspace interface. (9s–12s; 90% 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: medium - What transfers: Carousel structure with side arrow navigation and dot indicator; Chat-bubble conversation UI pattern for showcasing an AI build process; Dark full-bleed panel as a tonal break beneath a light carousel - Dependencies: Doto pixel font and amber monospace terminal styling; Custom ASCII/ad-hoc terminal artwork; Specific chat copy and mockup thumbnails - Guidance: Keep the dual-card layout (chat + selected-work preview) and arrow/dot carousel pattern, but swap in real content thumbnails and reconsider the typeface pairing to retain contrast without needing the exact pixel font or terminal art. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “App showcase carousel”. Purpose: An interactive carousel showcasing mockups of applications and interfaces, transitioning to a dark retro terminal view. Structure: Central interactive component with left/right navigation arrows, followed by a stacked visual.. Source layout label: Central interactive component with left/right navigation arrows, followed by a stacked visual.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A layered UI mockup inside a carousel with side arrows, placed above a dark graphic section. Components: carousel, mockup cards, navigation arrows, dark terminal graphic. Style direction: minimal, playful. Observed crop: 1440×1001px (1.439:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"32px","family":"Doto","source":"computed","traits":"Regular","weight":"900","evidence":"font-9: computed CSS at 1440×1000; AI role: The 'Doto' pixelated font, used at 32px for large, impactful headlines like 'One agent. Every app. Any task.' and animated text.","sampleId":"font-9","confidence":0.95,"lineHeight":"32px","letterSpacing":"normal"} {"role":"heading","size":"19px","family":"Roboto Flex","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Roboto Flex at 19px, used for section titles like 'What people build with Ardor' and 'Made in Ardor'.","sampleId":"font-2","confidence":0.85,"lineHeight":"22.8px","letterSpacing":"normal"} {"role":"body","size":"13px","family":"Roboto Flex","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Roboto Flex at 13px, functioning as the primary body text for descriptions and standard copy across the site.","sampleId":"font-1","confidence":0.9,"lineHeight":"15.6px","letterSpacing":"normal"} Color evidence: {"hex":"#F2F3F1","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1).","sampleId":"color-4","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas.","sampleId":"color-6","confidence":0.9} Typography measured inside this section: {"id":"font-14","size":"10px","count":4,"family":"Roboto Flex","traits":"Regular","weight":"400","contexts":[{"tag":"button","top":572,"text":"Ask for approval","property":"font"},{"tag":"span","top":584,"text":"GPT-5.6 Terra","property":"font"},{"tag":"button","top":9252,"text":"Ask for approval","property":"font"}],"fontStack":"\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif","lineHeight":"9px","letterSpacing":"normal"} No section-bounded color samples were measured. Exact section measurements from the saved element map: root {"rect":{"x":0,"y":8906,"width":1440,"height":550},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[953,546,463]}; surfaces {"radii":["2.68435e+07px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":990,"y":9198,"width":35,"height":35},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":996,"y":9260,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":428,"y":9261,"width":18,"height":18},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":468,"y":9261,"width":18,"height":18},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-1980","tag":"span","rect":{"x":429,"y":9206,"width":546,"height":20},"role":null,"label":"Turn these 10 spreadsheets into one automated system"},"delayMs":0,"durationMs":3400,"easing":"linear","keyframes":[{"easing":"ease-in-out","filter":"blur(6px)","offset":0,"opacity":"0","composite":"auto","transform":"translateY(11.7px)","computedOffset":0},{"easing":"ease-in-out","filter":"blur(0px)","offset":0.12,"opacity":"1","composite":"auto","transform":"translateY(0px)","computedOffset":0.12},{"easing":"ease-in-out","filter":"blur(0px)","offset":0.86,"opacity":"1","composite":"auto","transform":"translateY(0px)","computedOffset":0.86},{"easing":"ease-in-out","filter":"blur(6px)","offset":1,"opacity":"0","composite":"auto","transform":"translateY(-11.7px)","computedOffset":1}]}] Motion evidence: observed sequence: A section displaying an example of a team workspace interface. (90% confidence) Transfer these principles: Carousel structure with side arrow navigation and dot indicator; Chat-bubble conversation UI pattern for showcasing an AI build process; Dark full-bleed panel as a tonal break beneath a light carousel. Dependencies: Doto pixel font and amber monospace terminal styling; Custom ASCII/ad-hoc terminal artwork; Specific chat copy and mockup thumbnails. Adaptation guidance: Keep the dual-card layout (chat + selected-work preview) and arrow/dot carousel pattern, but swap in real content thumbnails and reconsider the typeface pairing to retain contrast without needing the exact pixel font or terminal art. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.