# Design Language for marionette.quest ## Aesthetics and Tone marionette.quest is a surreal, theatrical experience about control, strings, and the uncanny boundary between puppet and puppeteer. The site presents itself as a digital puppet theater -- a proscenium stage viewed from the audience, where the user's cursor IS the puppeteer's hand, and every element on the page responds to that invisible control. The aesthetic merges victorian-ornate puppet theater traditions (red velvet curtains, gilded stage frames, gaslight warmth) with surreal, slightly unsettling undertones (puppets that look too lifelike, strings that cast impossible shadows, a stage that seems to extend infinitely into darkness). The tone is whimsical-creative on the surface but mysterious-moody underneath -- like a children's puppet show that gradually reveals itself to be something stranger and deeper. The voice speaks in the second person with theatrical formality: "You raise your hand. The figure rises." Think "a Svankmajer film merged with a Victorian toy theater, rendered in CSS." ## Layout Motifs and Structure **Primary layout: layered-depth with immersive-scroll and parallax-sections** The site is structured as a journey through a puppet theater, with extreme layered depth achieved through CSS transform: translateZ and perspective. The viewport literally acts as a proscenium arch -- content exists at multiple z-depths, with foreground elements (the puppet, the strings) in front of midground elements (the stage) in front of background elements (the painted scenery). **Section architecture:** 1. **The Curtain (viewport 1):** Two red velvet curtain panels (CSS-generated fabric texture using multiple linear-gradients with wave patterns) that part on scroll, revealing the stage behind them. The curtains use CSS clip-path: polygon() animated by scroll position. The domain name "marionette.quest" appears on a small ornamental placard between the curtains in gilded serif type. 2. **The Stage (viewport 2-4):** The main performance area -- a dark background with warm side-lighting (CSS radial-gradients simulating stage spotlights from the left and right). A marionette figure (built from CSS-positioned geometric shapes: circles for joints, rectangles for limbs, connected by thin line elements for strings) hangs at center. The figure responds to cursor position -- moving the cursor left tilts the puppet left, moving up raises its arms. 3. **The Workshop (viewport 5-6):** The camera shifts backstage to the puppet maker's workshop. The color palette warms and softens. Shelves of puppet parts (heads, hands, bodies) are displayed in a bento-box grid. Each part is a small CSS illustration with its own personality. Hovering over a part causes it to twitch, as if remembering life. 4. **The Strings (viewport 7):** A philosophical interlude -- a dark background with only thin white lines (SVG paths) stretching vertically from top to bottom, representing the puppet strings. As the user scrolls, text appears attached to different strings: "Who pulls the strings?" "Who wrote the script?" "Who is the audience?" Each line of text sways gently with its string. 5. **The Empty Stage (viewport 8/footer):** The curtains return, but now they frame an empty stage. A single spotlight illuminates nothing. The footer text: "The show is over. The strings remain." The spot light slowly dims over 5 seconds to near-darkness. ## Typography and Palette **Typography:** - **Display / Theater Headers:** "Cinzel Decorative" (Google Fonts) -- an ornamental serif with decorative swashes and classical Roman proportions, evoking the gilded lettering of Victorian theater marquees. Used at clamp(2.5rem, 6vw, 5rem), weight 700. Letter-spacing 0.1em, uppercase. Its elaborate flourishes carry the theatrical grandeur. - **Body / Stage Directions:** "Crimson Text" (Google Fonts) -- a warm, readable old-style serif that feels like a theater program printed on cream paper. Weight 400, line-height 1.8, 17px base. Its slight old-style character adds period authenticity without reducing readability. - **Whisper Text / Questions:** "Caveat" (Google Fonts) -- a handwriting font with a scratchy, urgent quality, used exclusively for the philosophical string-text in viewport 7. Weight 400, 20px. Its handwritten character suggests marginalia, secret notes, or the puppeteer's personal annotations. **Palette:** | Role | Color | Hex | |------|-------|-----| | Stage dark (primary bg) | Theater black | #0e0c10 | | Velvet red (curtain) | Deep crimson | #8b1a2b | | Gold trim (accent) | Tarnished gold | #b8963e | | Spotlight warm | Amber glow | #e8c870 | | Wood (workshop) | Warm oak | #7a5c3a | | String white | Puppet thread | #d4cfc6 | | Skin tone (puppet) | Porcelain | #e8d8c8 | | Deep shadow | Abyss | #060408 | This is a deep-burgundy palette with gold accents, built around the color vocabulary of a physical puppet theater: red velvet, gold leaf, dark wood, warm gaslight, and the near-black of backstage shadows. The palette is deliberately dark and warm, with the spotlight amber (#e8c870) serving as the primary light source throughout. ## Imagery and Motifs **Core Visual Motifs:** 1. **The Marionette Figure:** A CSS-constructed puppet made from geometric primitives -- a circle head, rectangle torso, thin rectangle limbs, small circle joints. Connected by 1px lines (the strings) that extend upward beyond the viewport. The figure is the site's mascot and primary interactive element, responding to cursor position via CSS custom properties set by JavaScript mousemove events. 2. **Velvet Curtain Texture:** CSS-generated fabric draping using layered linear-gradients with sinusoidal wave patterns. The curtains have a rich, tactile quality achieved through gradient color stops that alternate between #8b1a2b and #6a1322, with highlights at fold peaks (#a03040). The curtains part with scroll using clip-path animation. 3. **Stage Lighting:** Radial gradients positioned as stage spotlights -- warm amber circles (#e8c870 at center, transparent at edges) placed at the left and right sides of the stage, creating pools of light on the otherwise dark floor. The lights subtly pulse (opacity 0.85 to 1.0, 4s cycle) to suggest flickering gas lamps. 4. **String Lines:** Thin vertical SVG paths (1px, #d4cfc6) that represent puppet strings throughout the site. They appear as visual connectors between the puppet and the top of the viewport in the stage section, and as standalone philosophical elements in the strings section. All strings have a subtle sway animation (CSS transform: translateX with sine-wave keyframes, 6-10s cycle, 2-4px amplitude). 5. **Proscenium Frame:** An ornamental SVG border that frames the viewport, styled as a theater's proscenium arch with gilded molding patterns, small carved faces at the corners, and filigree running along the top. This frame is persistent (position: fixed) and visible on all sections, reinforcing the theater metaphor. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to the closed curtains. The proscenium frame (position: fixed, z-index: 100) is immediately visible -- an SVG border element with ornamental corners rendered in tarnished gold (#b8963e) against theater black (#0e0c10). The curtains fill the interior of the frame. The placard with "marionette.quest" sits between the curtain panels, rendered in Cinzel Decorative at 3rem with text-shadow: 0 0 10px #e8c87040 for a gaslight glow effect. **Curtain opening:** On scroll (first 100vh of scroll distance), the two curtain panels animate apart using CSS clip-path. Left curtain: clip-path transitions from polygon(0 0, 55% 0, 55% 100%, 0 100%) to polygon(0 0, 5% 0, 5% 100%, 0 100%). Right curtain mirrors the motion. The transition is eased with cubic-bezier(0.4, 0, 0.2, 1) and keyed to scroll position via JavaScript IntersectionObserver or scroll event. **Puppet control:** The marionette figure uses CSS custom properties (--cursor-x, --cursor-y) updated by a throttled mousemove listener. The puppet's tilt is calculated as transform: rotate(calc((var(--cursor-x) - 50) * 0.3deg)). Its arm positions use similar calculations. The strings connecting the puppet to the top of the viewport angle accordingly, creating a convincing puppeteer effect. **Workshop grid:** Uses CSS grid with grid-template: repeat(3, 1fr) / repeat(4, 1fr) and gap: 12px. Each cell has background: #7a5c3a (wood shelf). The puppet parts inside are CSS mini-illustrations: the head is a 60px circle with border-radius: 50%, two dot eyes (::before, ::after), and a slight box-shadow for depth. Hover triggers a CSS @keyframes twitch animation (small random rotations over 300ms). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No product marketing. The site is an interactive theatrical experience, not a puppet shop. Bias toward full-screen immersive sections where the theater metaphor is the entire UI framework, and the cursor-as-puppeteer interaction creates a sense of complicity. ## Uniqueness Notes **Differentiators from other designs:** 1. **Cursor-as-puppeteer interaction model:** No other design in the portfolio turns the cursor into a narratively meaningful controller. Moving the mouse literally manipulates a puppet figure on screen, creating a visceral connection between user input and visual response that is both playful and philosophically loaded. 2. **CSS-constructed character figure:** The marionette built from geometric CSS primitives (circles, rectangles, lines) is a unique approach to character illustration without images. The figure's joints, limbs, and strings are all DOM elements with CSS positioning, making it fully animatable. 3. **Proscenium frame as persistent UI:** The ornamental theater frame (position: fixed) wrapping the entire viewport is unlike any navigation or chrome pattern in the portfolio. It establishes the theater metaphor from the first pixel and never breaks it. 4. **Deep-burgundy palette with gaslight warmth:** The combination of theater black (#0e0c10), deep crimson (#8b1a2b), and tarnished gold (#b8963e) creates a color world distinct from both the dark-mode neon sites and the warm pastel sites in the portfolio. It is dark but warm, mysterious but inviting. 5. **Handwritten philosophical text on swaying strings:** The Caveat font attached to swaying SVG string paths creates a visual-textual experience where words literally hang by threads, reinforcing the theme of control and fragility in a way that merges typography with animation. **Chosen seed/style:** surreal dreamscape promo **Avoided overused patterns:** corporate aesthetic, gradient palette, counter-animate as primary, centered-only layout, photography imagery **Preferred underused elements:** victorian-ornate aesthetic, cursor-follow pattern (9%), deep-burgundy palette, whimsical-creative tone, layered-depth layout, handwritten typography