# Full-Screen Code Typing Transition

Schema: Design Details SECTION.md v3.2
Website: DUNA Digital
Source: https://duna.digital/en/
Source section IDs: gap-93b26759-1005-2259
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A full-bleed dark block with one centered monospace snippet gives the viewer a single thing to read, so the pause between sections feels deliberate.
- Syntax colours form a clear hierarchy: dimmed comments, muted line numbers and brighter variables guide the eye through the code.
- Function names like understand, design and build turn the code into the product pitch, so the copy and the visual device are the same thing.

What a screenshot can't show:
- The code types in over roughly five seconds (about 1–6s in the recording) as the section takes over the view.
- Scrolling back up erases it character by character in reverse (about 104–110s), so the animation follows scroll direction. No font sizes or spacing were measured.

Borrow: Use a scroll-tied typing reveal that reverses on scroll-up, with copy written in the code's own vocabulary, to mark a change in the story.
Leave alone: Don't copy the olive-and-lime palette, the transform.ts pitch snippet, or the stray underline and faint duplicate code at the bottom; use your own palette, code content and any free monospace such as JetBrains Mono.

## Classification

- Type: other
- Layout: Full-bleed dark container with vertically and horizontally centered mono-spaced code.
- Styles: brutalist, minimal, typographic
- Confidence: 95%

## Purpose and structure

A dark, full-viewport section displaying syntax-highlighted code that simulates a typing animation, acting as a narrative transition.

Visual signature: Monospace syntax-highlighted code snippet on a dark olive background.

## Components

- code block

## Typography

- Display: Glazier — 60px 400
- Heading: PP Mori — 60px 600
- Body: PP Mori — 17px 400
- Mono: None — 20px 400

## Functional palette

- Canvas: canvas #F3F5EE
- Text: text #232B16
- Primary-Action: primary action #D4FF86
- Muted-Text: muted text #666C5B

## Motion evidence

- 1.0–6.0s — Typing effect reveals code on a dark background as the laptop screen takes over the view. (95% confidence)
- 104.0–110.0s — Scrolling back up, the previously typed code is erased character by character in reverse order. (93% confidence)

## Section quality

Overall: 63.45/100 (Good)
Scored coverage: 100%

- Typography: 62 — Monospace code with clear syntax-color hierarchy (comments dimmed, variables highlighted, line numbers muted) reads cleanly, but it's a standard code-editor typographic treatment with no distinctive display pairing beyond the dark canvas. Next tier: Needs a more considered type hierarchy or custom treatment beyond default editor-style mono coloring to feel authored rather than borrowed from a code editor.
- Composition: 58 — Centered code block floats in a large dark void with an oddly placed secondary line/underline element and a faint duplicate code snippet bleeding in at the bottom, producing an unbalanced, under-designed composition for a full-viewport section. Next tier: Needs intentional compositional balance across the full viewport rather than a small centered block surrounded by unused negative space and stray fragments.
- Motion: 65 — Gemini supplies specific timestamped behavior: code types in (1–6s) and erases in reverse on scroll-up (104–110s), giving a legible, purposeful state-transition animation tied to scroll direction. Next tier: Needs variation beyond a single typewriter/reverse-erase mechanic (e.g., syntax-aware reveal, cursor choreography) to move past a familiar effect.
- Content: 68 — The code itself is a narrative device—function names (understand, design, build) metaphorically mirror the product's process, integrating copy and visual device rather than using generic placeholder code. Next tier: Needs the narrative-code metaphor to extend further (e.g., comments/annotations guiding the viewer) to feel like a fully built content system rather than one clever snippet.
- Originality: 60 — Full-screen typing code-reveal is a recognizable pattern in developer-tool marketing sites; the thematic metaphor (transform.ts narrating the product pitch) adds a layer of cleverness but the core mechanic is a known convention. Next tier: Needs a visual or mechanical twist beyond the familiar typewriter-code trope to be memorable rather than recognizable.
- Adaptability: 70 — Structure (full-bleed dark container, centered mono block, line-number gutter, typing/erase behavior) is clearly separable from the specific code content and palette, making re-skinning straightforward. Next tier: Not assessed beyond scoring threshold; adaptability itself is already structurally clear.

Strengths:
- Code content functions as narrative metaphor tying to the product's process rather than generic filler text
- Directional typing-in / erasing-out motion tied to scroll direction gives the section a clear transitional purpose
- Syntax color hierarchy (comments, strings, keywords) is legible against the dark olive canvas

Weaknesses:
- Large unused negative space above and below the code block leaves the full-viewport composition feeling sparse and unintentional
- A faint duplicate/second code snippet appears to bleed in at the bottom of the crop, suggesting an unresolved transition state
- The underline/progress element near the bottom is visually unexplained and disconnected from the rest of the layout
- Typewriter code-reveal is a well-worn pattern in developer-product marketing, limiting distinctiveness

Why it does not reach the next tier: The section relies on a recognizable typewriter-code convention and a composition with large unbalanced empty areas and stray leftover elements; it needs tighter full-viewport composition and a more distinctive motion/typographic twist to read as memorable rather than familiar.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the code string, line numbers, and comment copy while keeping the typing/erase scroll trigger and syntax-color roles; palette and mono font can be restyled without altering the underlying reveal mechanic.

What transfers:
- Full-bleed dark container with centered monospace code block
- Typing-in and reverse-erase scroll-triggered motion pattern
- Line-number gutter plus syntax color-coding structure

Dependencies:
- Specific code content and comment metaphor tied to this product's narrative
- Dark olive palette and lime accent for highlights

## 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 only from two timestamped Gemini observations; finer animation timing/easing not verifiable
- No deterministic font-family value supplied for the mono typeface, limiting typography precision
- Static crop shows a possible overlap/duplicate of code content whose cause (transition artifact vs. layout issue) cannot be confirmed from a single frame

## 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: centered single-column
- Layout: Full-bleed dark container with vertically and horizontally centered mono-spaced code.
- Styles: brutalist, minimal, typographic
- Components: code block
- Purpose: A dark, full-viewport section displaying syntax-highlighted code that simulates a typing animation, acting as a narrative transition.
- Visual signature: Monospace syntax-highlighted code snippet on a dark olive background.
- Place on the page: 3 of 14, after Hero (`duna-digital:C01`), before Other (`9bef61ed-1575-429d-8a24-301b6c8fb06b`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### 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": "Glazier",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-29: computed CSS at 1440×1000; AI role: Glazier serif font at 60px, used as an accent within major headings.",
      "sampleId": "font-29",
      "confidence": 0.95,
      "lineHeight": "61.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "60px",
      "family": "PP Mori",
      "source": "computed",
      "traits": "Regular",
      "weight": "600",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: PP Mori at 60px, used for primary section headings.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "61.2px",
      "letterSpacing": "-1.2px"
    },
    {
      "role": "body",
      "size": "17px",
      "family": "PP Mori",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: PP Mori at 17px, used for standard paragraph text and descriptions.",
      "sampleId": "font-10",
      "confidence": 0.9,
      "lineHeight": "28.1px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "20px",
      "family": null,
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-16: computed CSS at 1440×1000; AI role: ui-monospace at 20px, used within the code snippet block.",
      "sampleId": "font-16",
      "confidence": 0.95,
      "lineHeight": "36px",
      "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": "#F3F5EE",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(243, 245, 238); AI role: Off-white #F3F5EE used as the primary background for most sections.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#232B16",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(35, 43, 22); AI role: Deep olive #232B16 used as the primary text color and surface color for dark sections.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#D4FF86",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-3: computed rgb(212, 255, 134); AI role: Bright lime green #D4FF86 used for accents, buttons, and code highlights.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#666C5B",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-5: computed rgb(102, 108, 91); AI role: Muted olive #666C5B used for secondary information.",
      "sampleId": "color-5",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and specific badges employ high border-radius values resulting in pill shapes.",
  "density": "Low visual density; relies on extensive whitespace and large typography to pace reading.",
  "evidence": "Based on the consistent padding observed between sections, the pill buttons in the header and forms, and the fine line dividers in the 'Selected work' and FAQ sections.",
  "borderStyle": "Thin, semi-transparent hairline borders (#232B16 at low opacity) heavily used as horizontal dividers for lists and tables.",
  "buttonStyle": "Primary buttons feature a dark solid background with text and an inset circular icon in the bright accent color.",
  "cornerStyle": "Fully rounded (pill-shaped) interactive elements contrasting with sharp, rectilinear container boundaries.",
  "contentWidth": "Content is constrained to a wide but centralized maximum width with consistent generous outer margins.",
  "spacingRhythm": "Generous macro-spacing separating distinct functional sections; micro-spacing utilizes strict grid alignment with clear dividers."
}
```

### 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** — Typing effect reveals code on a dark background as the laptop screen takes over the view. (1s–6s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.
2. **scroll** — Scrolling back up, the previously typed code is erased character by character in reverse order. (104s–110s; 93% 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: low
- What transfers: Full-bleed dark container with centered monospace code block; Typing-in and reverse-erase scroll-triggered motion pattern; Line-number gutter plus syntax color-coding structure
- Dependencies: Specific code content and comment metaphor tied to this product's narrative; Dark olive palette and lime accent for highlights
- Guidance: Swap the code string, line numbers, and comment copy while keeping the typing/erase scroll trigger and syntax-color roles; palette and mono font can be restyled without altering the underlying reveal mechanic.

### 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 “Full-Screen Code Typing Transition”.

Purpose: A dark, full-viewport section displaying syntax-highlighted code that simulates a typing animation, acting as a narrative transition.

Structure: centered single-column. Source layout label: Full-bleed dark container with vertically and horizontally centered mono-spaced code.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Monospace syntax-highlighted code snippet on a dark olive background.

Components: code block.

Style direction: brutalist, minimal, typographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"60px","family":"Glazier","source":"computed","traits":"Regular","weight":"400","evidence":"font-29: computed CSS at 1440×1000; AI role: Glazier serif font at 60px, used as an accent within major headings.","sampleId":"font-29","confidence":0.95,"lineHeight":"61.2px","letterSpacing":"normal"} {"role":"heading","size":"60px","family":"PP Mori","source":"computed","traits":"Regular","weight":"600","evidence":"font-4: computed CSS at 1440×1000; AI role: PP Mori at 60px, used for primary section headings.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.2px","letterSpacing":"-1.2px"} {"role":"body","size":"17px","family":"PP Mori","source":"computed","traits":"Regular","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: PP Mori at 17px, used for standard paragraph text and descriptions.","sampleId":"font-10","confidence":0.9,"lineHeight":"28.1px","letterSpacing":"normal"} {"role":"mono","size":"20px","family":null,"source":"computed","traits":"Regular","weight":"400","evidence":"font-16: computed CSS at 1440×1000; AI role: ui-monospace at 20px, used within the code snippet block.","sampleId":"font-16","confidence":0.95,"lineHeight":"36px","letterSpacing":"normal"}

Color evidence: {"hex":"#F3F5EE","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(243, 245, 238); AI role: Off-white #F3F5EE used as the primary background for most sections.","sampleId":"color-2","confidence":0.95} {"hex":"#232B16","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(35, 43, 22); AI role: Deep olive #232B16 used as the primary text color and surface color for dark sections.","sampleId":"color-1","confidence":0.95} {"hex":"#D4FF86","name":"primary action","role":"primary-action","source":"computed","evidence":"color-3: computed rgb(212, 255, 134); AI role: Bright lime green #D4FF86 used for accents, buttons, and code highlights.","sampleId":"color-3","confidence":0.95} {"hex":"#666C5B","name":"muted text","role":"muted-text","source":"computed","evidence":"color-5: computed rgb(102, 108, 91); AI role: Muted olive #666C5B used for secondary information.","sampleId":"color-5","confidence":0.85}

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: Typing effect reveals code on a dark background as the laptop screen takes over the view. (95% confidence) scroll: Scrolling back up, the previously typed code is erased character by character in reverse order. (93% confidence)

Transfer these principles: Full-bleed dark container with centered monospace code block; Typing-in and reverse-erase scroll-triggered motion pattern; Line-number gutter plus syntax color-coding structure.

Dependencies: Specific code content and comment metaphor tied to this product's narrative; Dark olive palette and lime accent for highlights.

Adaptation guidance: Swap the code string, line numbers, and comment copy while keeping the typing/erase scroll trigger and syntax-color roles; palette and mono font can be restyled without altering the underlying reveal mechanic.

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