# Interactive Interactive Solution Frame Schema: Design Details SECTION.md v3.2 Website: Componine Source: https://www.componine.com/ Source section IDs: gap-1bd0a5e9-6173-7430 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - One big framed image carries a single idea: a messy red scribble set against a straight green line makes problem versus solution clear at a glance. - Red and green are the only saturated colours over a sepia, desaturated portrait, so the two lines stand out against the quiet background. - Short uppercase captions like 'YOUR PROBLEM' and 'OUR SOLUTION' sit on the artwork and name each line, so the picture needs no extra copy. What a screenshot can't show: - The recording shows moving the cursor reveals the red scribble (about 29-51s), but easing, timing and how the green line and labels respond were not captured. - No font sizes, letter spacing or section spacing were measured. Borrow: Let the cursor draw the story: a visitor-controlled reveal of a before/after contrast over one strong image makes a pitch feel earned. Leave alone: Do not copy the vintage wooden frame, the sepia boy portrait or the red and green line artwork; make your own image and metaphor. ## Classification - Type: other - Layout: Large centralized framed artwork spanning most of the container width. - Styles: illustrative, playful, editorial - Confidence: 90% ## Purpose and structure An interactive framed image where the user's cursor reveals a conceptual 'solution' over a portrait, contrasting a messy red scribble with a straight green line. Visual signature: A sepia-toned framed portrait of a boy with bright red and green interactive lines drawn over it. ## Components - interactive canvas - wooden frame border - floating text labels ## Typography - Display: Memoir — 60px 400 - Heading: Memoir — 28px 400 - Body: Helvetica Neue — 14px 400 ## Functional palette - Text: text #FFFFFF - Canvas: canvas #0C0806 - Surface: surface #F0EFEA - Border: border #1E140F - Accent: accent #40B462 ## Motion evidence - 29.0–51.0s — The user interacts with an image where moving the mouse reveals a red scribble. (85% confidence) ## Section quality Overall: 60.60/100 (Good) Scored coverage: 100% - Typography: 58 — Simple caption-style labels ('YOUR PROBLEM', 'OUR SOLUTION') in a clean sans serif, legible against the collage but not a distinguishing element on their own; no deterministic font evidence for this exact label type. Next tier: Labels need more considered type treatment (scale contrast, pairing with the serif display family used elsewhere) to feel integrated rather than default. - Composition: 68 — Strong collage composition: a vintage painted backdrop, desaturated portrait cutout, ornate physical frame, and a clear diagonal problem-to-solution visual metaphor (scribble vs straight line) create a legible, single-idea layout with good use of negative space and framing device. Next tier: The collage edges (cutout silhouette, text placement) feel slightly ad-hoc rather than fully resolved; tighter alignment between labels, lines, and frame proportions would push it further. - Motion: 55 — Gemini confirms a cursor-driven reveal of the red scribble between 29-51s, a real interactive behavior, but no detail on easing, sequencing, or how the green line/labels respond, so only the base behavior can be credited. Next tier: Lack of detail on transition quality, responsiveness, and whether other elements animate limits scoring beyond a baseline competent mark. - Content: 65 — The visual metaphor (chaotic red line = problem, clean green line = solution) is tightly coupled to the copy and imagery, making the message immediately graspable and memorable for a 'before/after' pitch. Next tier: The metaphor is appealing but fairly literal/illustrative; it doesn't push content integration into truly novel territory beyond a clever diagram. - Originality: 66 — Combining a framed vintage-painting aesthetic with modern interactive diagram elements (scribble vs. straight line, red lens overlays) is a distinctive, non-template idea rarely seen in standard web sections. Next tier: While inventive, the device (problem=squiggle, solution=straight line) is a known visual trope; execution is tasteful but not groundbreaking enough for exceptional tier. - Adaptability: 50 — The frame, background painting, and specific portrait are a single bespoke asset; only the line-drawing/label mechanic could be separated as a reusable pattern. Next tier: Heavy reliance on one custom illustrated/photo asset makes it hard to swap skin without rebuilding the core visual, capping adaptability. Strengths: - Clear, legible before/after visual metaphor paired with concise labels - Distinctive collage aesthetic blending vintage painting, portrait, and modern interactive line graphics - Physical frame device grounds the interactive content and gives it a gallery-like presence Weaknesses: - Typography on the labels is generic and underdeveloped relative to the rest of the site's serif display system - Motion detail is sparse; only one timestamped interaction described, with no insight into transition polish - Heavy dependency on a single bespoke image/collage asset limits reusability of the skin independent of structure Why it does not reach the next tier: The concept and composition are inventive, but execution details (type integration, motion refinement, asset modularity) are not evidenced strongly enough to exceed a strong-but-not-exceptional tier; much of the interactive behavior remains undocumented. ## Adaptation guidance - Effort: High - Guidance: Reuse the structural idea (contrast diagram inside a frame with floating labels) but replace the bespoke collage image and scribble-reveal logic with new artwork/illustration suited to the new brand, since the current assets are highly specific and not swappable without custom creation. What transfers: - The problem/solution diagrammatic contrast structure (chaotic line vs clean line) - The framed-canvas presentation device for a hero/interactive visual - The label pairing pattern (short caption + line connector) Dependencies: - The specific vintage painting and portrait photo asset - The custom frame texture/border graphic - The exact cursor-interaction mechanic for revealing the scribble ## 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 based on a single Gemini-reported interaction window with no detail on secondary animation or easing - No deterministic typography/color facts specific to this section's labels, only inferred from screenshot - Cannot verify behavior outside the 29-51s window or full interactive range ## 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: Large centralized framed artwork spanning most of the container width. - Layout: Large centralized framed artwork spanning most of the container width. - Styles: illustrative, playful, editorial - Components: interactive canvas, wooden frame border, floating text labels - Purpose: An interactive framed image where the user's cursor reveals a conceptual 'solution' over a portrait, contrasting a messy red scribble with a straight green line. - Visual signature: A sepia-toned framed portrait of a boy with bright red and green interactive lines drawn over it. - Place on the page: 8 of 8, after Pricing (`componine-com:C06`) ### Crop and composition - Deterministic crop dimensions are unavailable. - 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": [], "siteRoles": [ { "role": "display", "size": "60px", "family": "Memoir", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Memoir serif font used at large sizes (60px, 72px) for major headings like the hero title and footer CTA.", "sampleId": "font-1", "confidence": 1, "lineHeight": "67.2px", "letterSpacing": "-1%" }, { "role": "heading", "size": "28px", "family": "Memoir", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Memoir serif font at 28px used for secondary headings and project titles.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "33.6px", "letterSpacing": "-1%" }, { "role": "body", "size": "14px", "family": "Helvetica Neue", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Helvetica Neue at 14px used for general body copy, descriptions, and small labels.", "sampleId": "font-6", "confidence": 1, "lineHeight": "19.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": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary text on dark backgrounds.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#0C0806", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed lab(2.40931 0.896804 1.14596); AI role: Very dark, near-black (#0C0806) used as the primary background for most sections.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#F0EFEA", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed lab(94.3607 -0.24718 2.65788); AI role: Light off-white/beige (#F0EFEA) used as the background for the 'Selected Works' horizontal scroll section.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#1E140F", "name": "border", "role": "border", "source": "computed", "evidence": "color-6: computed rgb(30, 20, 15); AI role: Dark brown/black (#1E140F) used for borders, likely around the pricing cards or frames.", "sampleId": "color-6", "confidence": 0.8 }, { "hex": "#40B462", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-25: computed rgb(64, 180, 98); AI role: Green (#40B462) used sparingly for accents like the dot in the pricing features.", "sampleId": "color-25", "confidence": 0.7 } ] } ``` ### Design tokens ```json { "radius": "Buttons and tags use a fully rounded/pill radius. Cards and frames use square (0px) or slightly rounded corners depending on the context.", "density": "Moderate density. The layout is spacious overall, but groups related information (like pricing features or the feature grid) tightly together.", "evidence": "Observed from the pill-shaped nav and buttons, the framed images, the structured pricing table, and the overall dark canvas with high contrast text.", "borderStyle": "Subtle borders on tags and pricing cards; prominent physical-looking borders/frames on project images.", "buttonStyle": "Pill-shaped, usually with a dark background or glassmorphic effect, and light text.", "cornerStyle": "Mix of pill-shaped elements (buttons, nav, tags) and sharp rectangular shapes (frames, cards).", "contentWidth": "Centered content with wide margins, adapting to a multi-column grid for features and a horizontal track for works.", "spacingRhythm": "Generous vertical spacing between major sections, with tighter, structured padding within grids and cards." } ``` ### 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. **observed sequence** — The user interacts with an image where moving the mouse reveals a red scribble. (29s–51s; 85% 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: high - What transfers: The problem/solution diagrammatic contrast structure (chaotic line vs clean line); The framed-canvas presentation device for a hero/interactive visual; The label pairing pattern (short caption + line connector) - Dependencies: The specific vintage painting and portrait photo asset; The custom frame texture/border graphic; The exact cursor-interaction mechanic for revealing the scribble - Guidance: Reuse the structural idea (contrast diagram inside a frame with floating labels) but replace the bespoke collage image and scribble-reveal logic with new artwork/illustration suited to the new brand, since the current assets are highly specific and not swappable without custom creation. ### 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 other section inspired by the design evidence titled “Interactive Interactive Solution Frame”. Purpose: An interactive framed image where the user's cursor reveals a conceptual 'solution' over a portrait, contrasting a messy red scribble with a straight green line. Structure: Large centralized framed artwork spanning most of the container width.. Source layout label: Large centralized framed artwork spanning most of the container width.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A sepia-toned framed portrait of a boy with bright red and green interactive lines drawn over it. Components: interactive canvas, wooden frame border, floating text labels. Style direction: illustrative, playful, editorial. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"60px","family":"Memoir","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Memoir serif font used at large sizes (60px, 72px) for major headings like the hero title and footer CTA.","sampleId":"font-1","confidence":1,"lineHeight":"67.2px","letterSpacing":"-1%"} {"role":"heading","size":"28px","family":"Memoir","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Memoir serif font at 28px used for secondary headings and project titles.","sampleId":"font-2","confidence":0.95,"lineHeight":"33.6px","letterSpacing":"-1%"} {"role":"body","size":"14px","family":"Helvetica Neue","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Helvetica Neue at 14px used for general body copy, descriptions, and small labels.","sampleId":"font-6","confidence":1,"lineHeight":"19.6px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary text on dark backgrounds.","sampleId":"color-1","confidence":1} {"hex":"#0C0806","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed lab(2.40931 0.896804 1.14596); AI role: Very dark, near-black (#0C0806) used as the primary background for most sections.","sampleId":"color-2","confidence":0.95} {"hex":"#F0EFEA","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed lab(94.3607 -0.24718 2.65788); AI role: Light off-white/beige (#F0EFEA) used as the background for the 'Selected Works' horizontal scroll section.","sampleId":"color-3","confidence":0.95} {"hex":"#1E140F","name":"border","role":"border","source":"computed","evidence":"color-6: computed rgb(30, 20, 15); AI role: Dark brown/black (#1E140F) used for borders, likely around the pricing cards or frames.","sampleId":"color-6","confidence":0.8} {"hex":"#40B462","name":"accent","role":"accent","source":"computed","evidence":"color-25: computed rgb(64, 180, 98); AI role: Green (#40B462) used sparingly for accents like the dot in the pricing features.","sampleId":"color-25","confidence":0.7} 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: observed sequence: The user interacts with an image where moving the mouse reveals a red scribble. (85% confidence) Transfer these principles: The problem/solution diagrammatic contrast structure (chaotic line vs clean line); The framed-canvas presentation device for a hero/interactive visual; The label pairing pattern (short caption + line connector). Dependencies: The specific vintage painting and portrait photo asset; The custom frame texture/border graphic; The exact cursor-interaction mechanic for revealing the scribble. Adaptation guidance: Reuse the structural idea (contrast diagram inside a frame with floating labels) but replace the bespoke collage image and scribble-reveal logic with new artwork/illustration suited to the new brand, since the current assets are highly specific and not swappable without custom creation. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.