---
schema_version: 1
id: "resonant-ribbon"
name: "Resonant Ribbon"
summary: "A single wooden ribbon traces a making story and a three-instrument macro collection, with real character, wood and enquiry choices."
family: "spatial"
tags: ["warm", "product-led", "asymmetric", "geometric"]
best_for: ["craft", "culture", "products", "portfolio"]
avoid_for: ["data"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A travelling ribbon sits beside a vertical making story; B presents three large instrument macro studies before a character and wood selector.", "typography": "Compact heavy grotesque display with short fragmented lines, clear practical sans-serif copy and numbered production captions.", "navigation": "Visible making, character and enquiry anchors; three instrument selectors update the active macro and the enquiry together.", "content_rhythm": "One ribbon changes through three manufacturing chapters; the alternate changes scale through three separate macro gallery panels.", "imagery": "Original vector wooden ribbon with layered thickness, authored grain pattern and restrained shadows; explicitly an SVG study, not claimed 3D.", "color_and_material": "Paper, saturated red and deep blue surround warm natural wood; flat readable labels remain distinct from the grain.", "interaction": "Instrument, Šiltas/Skaidrus/Ritmiškas character and wood shade build a validated exact-copy enquiry; sound requires deliberate opt-in.", "motion": "Finite flex-and-return, straight/arch/body morphs, horizontal instrument wipe and tension changes; real short synthesized samples, pause and reduced state."}
status: "ready"
prompt_path: "prompts/resonant-ribbon/prompt.en.md"
---

# Resonant Ribbon

## Intent

Resonant Ribbon introduces an imagined handmade instrument workshop through a single painted wooden strip. The fictional Tembrelo connects material, shape and a visitor’s selected sound character without pretending that a vector study is a manufactured instrument or a real recording. Visitors can follow a making sequence or browse three original macro illustrations, then create a consistent local enquiry. There is no claimed maker biography, award, client list, stock availability or completed message delivery.

## Signature

Keep five invariants: one recognizably continuous wooden ribbon; a controlled red and deep-blue frame; compact fragmented display type; three explicit instrument choices; and a useful relationship between visual tension, verbal character and enquiry output. The wood grain follows the strip rather than covering the whole interface. The ribbon’s form changes with manufacturing stages and instrument choice, while essential explanations remain ordinary selectable text. A different brand should retain those relationships instead of merely copying the red accent.

## Typography

Use heavy tightly tracked grotesque display headings with short clear line breaks. Arial and Helvetica fallbacks provide a compact voice without a remote font. Practical copy uses the same familiar sans-serif at a calmer size, while small numbered labels organize the process. Do not squeeze long translated words into fixed-height headings or turn every paragraph into a poster. Lithuanian uppercase and lowercase glyphs remain real text with visible samples in the colophon.

## Color and surfaces

Paper supplies the reading surface, saturated red frames the main macro and deep blue anchors the character experiment. A darker semantic red is used where small interface text needs stronger contrast. Natural light, middle and dark wood tokens supply the vector material, with an optional rose shade. The authored grain stays in the ribbon. Interface backgrounds and text use generated tokens; there is no second hardcoded UI palette hidden in the script or illustrations.

## Layout A

A places a large fragmentary wood study on the left and a compact invitation with three instrument choices on the right. The same sticky ribbon remains beside three vertically paced manufacturing chapters. Each chapter has a real stage button, an explanation and enough space to read a settled form. A blue character experiment and a plain enquiry finish the route. This object-to-making sequence deliberately avoids a standard row of interchangeable service cards or invented workshop testimonials.

## Layout B

B begins with a collection heading and three large numbered macro studies at different scales. The active instrument uses the main ribbon, while two further original panels show alternate structures and meaningful selection buttons. The visitor browses an instrument family before using the character and wood selector. A concise material note replaces the full manufacturing journey. This gallery-first content task differs from A’s single object moving through process chapters, even though both share a consistent material voice.

## Imagery

The drawings are original inline SVG geometry, gradients and a restrained grain pattern. A layered offset stroke gives the strip a visible edge without claiming native three-dimensional rendering. Straight, arched and body-contour paths use compatible control points so their transitions remain intelligible. Two additional gallery views show an arch and a stringed loop. There are no stock renders, photographs, instrument models or recordings. The public capability model explicitly allows SVG here; it is not a substitute for mandatory WebGL elsewhere.

## Navigation and interaction

Keep links to making, character and enquiry visible, and make every instrument and character choice a real keyboard-operable button. A selection changes both the macro title and the exact enquiry summary. Wood shade changes the original drawing, rather than only a swatch outline. The local form validates trimmed required fields, produces a clearly unsent draft and supports the same complete text through clipboard success or manual selection. Changing a choice invalidates a previously generated draft to prevent stale information.

## Motion

The initial ribbon reveals horizontally, then stops. Testing it flexes the control points briefly and returns to the previous resting contour. Process chapters morph the strip from straight wood to a light arch and then a body contour, with stable pauses. An instrument switch uses a horizontal wipe and updates its title in the same event. Character changes alter tension and explanatory text. Reduced motion applies final forms immediately. Short synthesized samples play only after explicit sound opt-in, with actual pause, mute and cleanup.

## Responsive behavior

At desktop width A retains its left macro and right narrative relationship; the ribbon follows the three process chapters during ordinary scrolling. B uses large alternating gallery regions rather than tiny equal thumbnails. At tablet widths reduce outer space before reducing the object to a token icon. At 390 and 360 pixels the complete ribbon sits above the introduction, process stages stack in order, and character or instrument buttons wrap into comfortable targets. Form fields remain full-width and text stays readable.

## Accessibility

Provide one h1, a main landmark, a visible skip link and ordered headings. SVG alternatives describe the material form, and adjacent text explains every character without requiring sound. Focus remains visible on both paper and blue sections. Audio status reports real opt-in, pause and unavailable API states; no hidden background player exists. Native form validation and live copy feedback remain clear. Actual evidence records resource, contrast, keyboard, overflow and motion checks; those bounded results are not a general accessibility certification.

## Adaptation

Replace the fictional workshop and instrument taxonomy with approved project content before adding any real claims. Preserve the continuing strip, staged material transformation and explicit choice-to-summary relationship for another craft or product story. A production platform can implement the original vector paths in its own component while keeping text and controls outside the drawing. New recordings or fonts require separate rights evidence; the synthesized sample is only a demonstration. The full creation prompt includes concrete project, audience, content and platform fields.

## Avoid

Exactly three deviations undermine this direction: replacing the continuing wood strip with unrelated decorative blobs; presenting synthesized tones or a vector macro as a verified real instrument recording or photograph; and copying selected swatches without updating the actual drawing and enquiry. These are recognizable structural, honesty and functional failures. Keep the sound experiment optional and brief so that the visual material and readable production story remain useful without speakers, dragging or advanced graphics capabilities.

## Closest styles

Acoustic Sculpture is a ready neighbor but uses seven thin copper plates, a spatial scenario narrative and a three-part comparison workbench. Resonant Ribbon uses one wooden strip, staged manufacturing navigation and a three-instrument macro gallery; its heavy compact display and optional short samples also differ from the humanist/serif spatial character study. Organic Craft uses uneven ceramic object stages, a making or collection route and native care disclosures. Here the continuing morphing material, instrument selection and live enquiry relationship create a different interaction and content rhythm.