# Design Language for simai.feedback ## Aesthetics and Tone simai.feedback is **a room full of microphones pointed at speakers** — the visual translation of acoustic feedback, that howling self-referential loop, rendered as kinetic typography. The whole site behaves like a signal path: a word is spoken into the page, the page amplifies it, the amplified word feeds back into the input, and the loop tightens until the type itself begins to *ring* — letters smearing into standing waves, glyphs doubling and phase-cancelling, headlines oscillating at a frequency you can almost hear. This is not "motion-heavy interactive" as decoration; motion *is* the content, because feedback has no static state. The tone is **edgy-rebellious meeting tech-tutorial** — equal parts noise-musician's pedalboard and a patient explanation of closed-loop control theory. simai.feedback is the kind of brand that thinks Steve Reich's "Pendulum Music," a Larsen tone from a PA system, and a Nyquist-stability diagram are all the same artwork. The mood: **electrified, slightly dangerous, deliberately on the edge of breaking** — like standing too close to a monitor wedge during soundcheck. Nothing here is calm. Everything is *resonating*. Inspiration touchstones: the cover of "MetalMachineMusic" reduced to a single vibrating word; the visual language of analog oscilloscopes and Lissajous figures; Karl Gerstner's programmatic type experiments; the moment in a Zoom call when two people unmute near each other and the universe screeches; reaction-diffusion patterns where output becomes input forever. ## Layout Motifs and Structure The site is built on a **signal-chain spine** — a single vertical conduit running down the exact center of the viewport, 2px wide, the color of a hot wire (#FF3B2E), against which every section docks like a module on a Eurorack rail. This is **kinetic-typography-hero territory** (only 2% of the corpus uses kinetic-animated type; this site lives there entirely), but structured rather than chaotic: each "stage" of the page is a labeled point on the loop — INPUT, GAIN, OUTPUT, RETURN — and the spine literally carries an animated pulse of light between them on scroll. - **The Feedback Loop layout.** The page is not a top-to-bottom column; it is a *loop that has been cut open and unrolled*. The first section (INPUT) and the last section (RETURN) are visually identical in structure but inverted in color — black-on-white vs white-on-black — and a giant SVG arc, drawn with `path-draw-svg`, sweeps from the bottom of the page back up the left margin to reconnect RETURN → INPUT. The page admits it is circular. - **Hero as oscillation chamber.** The opening viewport is occupied by ONE word — `feedback` — set enormous (clamp 18vw → 26vw), centered, and *vibrating*: the word is rendered four times, stacked in perfect registration, each layer offset by 1–3px in a different direction and tinted a different signal color, so the headline reads as a chromatic-aberration smear that breathes wider and tighter on a 2.4-second sine cycle. Scroll velocity feeds the amplitude — scroll fast and the layers fly apart into legible-illegible chaos; stop and they settle back into near-registration. - **Module strips, not cards.** Between hero and footer the content lives in **horizontal strips** the full width of the viewport, each ~70vh tall, each containing exactly one large kinetic statement plus a thin oscilloscope-trace SVG along its lower edge that redraws as you enter the strip. No card grid (92% of corpus — refused). No bento box (17% — refused). Strips only. The strips alternate alignment: odd strips flush-left, even strips flush-right, so the eye zig-zags down the signal path like a bouncing waveform. - **The gain meter rail.** Fixed to the right edge: a vertical VU-style meter, 8px wide, that fills toward red as you scroll deeper — a literal "we are getting closer to feedback" indicator. At ~85% scroll it pins to red and a faint high-frequency ring (a thin animated sine overlay) appears across the whole page for the final RETURN section. - **Negative space as silence.** Generous `ma-negative-space` (17% of corpus — underused) between strips: each strip is preceded by 30vh of pure flat color and nothing else, so the kinetic statements land like sounds in a quiet room. The contrast between dead-still emptiness and violently oscillating type is the entire compositional engine. ## Typography and Palette **Fonts — Google Fonts only. Three voices: a variable display that can physically deform, a precise grotesque for instrumentation, and a mono for the signal-path labels.** - **Display & Hero — *Anton* OR *Archivo Expanded* — actually: *Archivo* (Variable, wght 100→900, wdth 62→125).** This is the deforming voice. The hero word and every strip statement is set in Archivo with its width and weight axes animated *live* — on the oscillation cycle the word physically stretches from condensed-thin to expanded-black and back, so the type itself behaves like a speaker cone pumping air. Set in lowercase, tight tracking (-0.03em), enormous. Archivo's variable axes are the load-bearing choice — it can be skinny and stretched in the same breath. - **Instrumentation & Sub-statements — *Space Grotesk* (wght 300–700).** Used for the smaller annotations that orbit the big kinetic words — the "+12dB", "Larsen tone", "loop gain ≥ 1" callouts that float beside statements like markings on a fader. Space Grotesk's slightly mechanical, slightly humanist character reads as "lab equipment with a sense of humor." - **Signal labels & metadata — *DM Mono* (wght 400, 500).** Every node on the spine (INPUT / GAIN / OUTPUT / RETURN), the VU meter readouts, the footer, the timestamps — all DM Mono, uppercase, wide letter-spacing (0.18em), small (12–13px). The mono is the only thing on the page that *never* moves; it is the cold instrumentation against which the hot oscillating display type is measured. (Mono typography is 94% of corpus — but used here as the *still* counterpoint, not the star, which inverts its usual role.) **Palette — high-contrast signal colors against bone-white and oscilloscope-black:** - `#0B0B0C` **Cabinet Black** — near-black, the deep field for OUTPUT and RETURN sections, faintly warm so it reads as "powered equipment" not "void." - `#F4F1EA` **Bone Signal** — warm off-white, the base for INPUT and GAIN sections; the color of an old equipment manual page. - `#FF3B2E` **Hot Wire Red** — the spine, the VU peak, the danger color; pure feedback-about-to-happen. Used sparingly and always meaningfully — never decorative. - `#1E5BFF` **Phase Blue** — the cool counter-signal; one of the chromatic-aberration layers, and the color of the "stable" / "before clipping" states. - `#FFD23F` **Gain Yellow** — the +6dB amber, used for the GAIN strip and mid-meter; the color of "almost too loud." - `#00E0A4` **Monitor Green** — phosphor green, exclusively for the oscilloscope-trace SVGs that run along strip edges; the only green on the page, and it *glows* (subtle bloom). The four signal colors (red/blue/yellow/green) are the chromatic-aberration layers of the hero word. Black and bone are the room. ## Imagery and Motifs **No photography (98% of corpus — refused outright). No stock anything. Every visual is generated SVG/Canvas: waveforms, Lissajous figures, oscilloscope traces, VU meters, and the deforming type itself.** - **The Hero Smear.** The word `feedback` as a four-layer chromatic-aberration stack (red, blue, yellow, green offsets over a black/bone core), each layer driven by an independent sine oscillator with slightly different frequency so they slowly beat against each other — true acoustic-beat-frequency behavior translated to color separation. - **Oscilloscope traces.** Along the bottom edge of every content strip: a single-line `path-draw-svg` in Monitor Green that draws a waveform as the strip enters viewport. Each strip's waveform is shaped by that strip's *idea* — the INPUT strip draws a clean sine; GAIN draws a sine growing in amplitude; OUTPUT draws a clipped/squared-off wave; RETURN draws a chaotic feedback howl (a Lissajous knot). - **Lissajous nodes.** At each junction on the central spine, a small (60px) live Lissajous figure orbits — two perpendicular oscillations tracing those classic looping curves — drawn on Canvas, slowly rotating its frequency ratio so the figure morphs from a circle to a figure-eight to a tangle. These are the "connectors" of the signal chain. - **The VU meter.** Right-edge vertical meter — segmented bar, green→yellow→red, needle physics with `spring` overshoot and `elastic` settle, ballistics tuned to feel like a real analog VU (slow attack, slower release). - **Standing-wave dividers.** Between sections, instead of a line: a horizontal SVG of a standing wave with visible nodes and antinodes, the antinodes pulsing. The page is divided by *resonances*, not rules. - **Ring overlay (the climax).** In the final RETURN section: a faint, fast (8Hz visual) sine sweep across the entire viewport plus a subtle radial vignette in Hot Wire Red — the visual equivalent of the room about to scream. Then the SVG return-arc loops you back to the top. - **Motifs throughout:** `wave-forms`, `abstract-tech`, `flowing-curves`, `floating-elements` (the orbiting annotations), `sharp-angles` (the clipped-waveform language). No nature, no vintage paper, no botanical anything. ## Prompts for Implementation Build simai.feedback as **a single-route, vertically-scrolled signal chain that is secretly a loop** — one HTML file, one CSS file, one JS module. The page is a ~70-second journey from a clean input signal to total acoustic feedback and back to the start. There is **no CTA button, no pricing block, no stat grid, no testimonial row, no contact form, no feature cards.** There is the loop, and the loop is the message. **Narrative structure (five stages on the central spine, vertical scroll):** 1. **INPUT (bone-white).** The hero. The single word `feedback` in vibrating four-layer Archivo, oscillating gently. Below it, in DM Mono: `signal in — gain: 0.0 dB — stable`. The central spine begins here with a single pulse of light starting to travel downward. Generous silence below. 2. **GAIN (bone-white → warming toward yellow).** A strip, flush-left: a kinetic statement like *"every answer becomes the next question"* set in Archivo whose width/weight axes are now animating with visibly more amplitude than the hero. Beside it, floating Space Grotesk annotations: `+6 dB`, `loop gain → 1`. The oscilloscope trace below grows in amplitude as you scroll through. VU meter creeping toward yellow. 3. **OUTPUT (Cabinet Black — first color inversion).** A strip, flush-right, white-on-black: *"the room hears itself"* — and now the Archivo type is clipping: at the extremes of its oscillation the letters hit a hard ceiling and square off (simulate with a CSS clip or a width-axis hard-stop with a snap). The trace below is a squared/clipped wave in Monitor Green. Annotations: `clipping`, `0 dB ceiling`. VU at yellow-red boundary. 4. **RETURN (Cabinet Black, intensifying).** A strip, centered this time (breaking the zig-zag — the loop has destabilized): *"and the hearing changes what it hears"*. The type is no longer oscillating cleanly — it's *howling*: layers fully separated, glyphs juddering with `glitch`-adjacent micro-displacement, the word barely legible at peaks. The faint 8Hz ring overlay fades in across the whole viewport. VU pinned to red. Annotations: `LARSEN TONE`, `loop gain ≥ 1`, `instability`. 5. **THE LOOP CLOSES (bone-white again — full inversion back to start).** A near-mirror of stage 1: the word `feedback`, but now we reveal it was never the title — it was the *output that became the input*. DM Mono below: `signal out → signal in — the loop is closed`. A large SVG arc draws itself (`path-draw-svg`) from this section, sweeping down and around the left margin all the way back up to INPUT. If the user scrolls past the bottom, the page gently snaps/scrolls back to the hero — the loop literally repeats. **Animation & interaction notes:** - **Scroll velocity is the gain knob.** Use a smoothed scroll-velocity value (lerp toward instantaneous velocity) to drive: hero layer-separation amplitude, Archivo variable-axis oscillation amplitude, oscilloscope trace amplitude, and VU needle. Slow/stopped scroll = signal settles toward stable. Fast scroll = signal blows up toward feedback. The user is *playing* the feedback loop with their scroll wheel. - **Cursor as a microphone.** When the cursor approaches any kinetic word, that word's oscillation amplitude *increases* with proximity (inverse-distance) — moving the mouse near the type is like moving a mic toward a speaker. `magnetic`/`cursor-follow` is everywhere in the corpus (89%) but here it's recontextualized as acoustic proximity, not playful attraction. - **Variable-font axis animation:** drive Archivo's `wdth` and `wght` axes via `requestAnimationFrame` with `font-variation-settings` on the hero and strip statements — this is the signature move. Sine-driven, amplitude modulated by scroll velocity + cursor proximity. - **The spine pulse:** a small bright dot of Hot Wire Red travels down the central 2px line continuously, looping; on scroll it moves faster; at the RETURN stage it doubles, triples, becomes a strobing smear. - **Sound is optional and off by default** — if you add a single unobtrusive 🔊 toggle (DM Mono, tiny, top-right), enabling it can introduce a *very* quiet sine tone whose pitch tracks scroll position. Default silent. Do not autoplay audio. - **Respect `prefers-reduced-motion`:** collapse all oscillation to a single still chromatic-offset frame, freeze the Lissajous figures, draw oscilloscope traces instantly, kill the ring overlay. The narrative still reads top-to-bottom; it just stops vibrating. - **Performance:** Lissajous figures and oscilloscope traces on a single shared Canvas layer or lightweight inline SVG; pause RAF loops for off-screen elements via IntersectionObserver. The hero is the only thing animating in stage 1. Tell the story through type that behaves like sound. Every transition is a stage in a signal path. The reward at the bottom is the realization that there was no bottom — only the loop. ## Uniqueness Notes Differentiators from the rest of the corpus, each a deliberate move against the frequency analysis: 1. **Kinetic typography as the entire medium, not a hero flourish.** Kinetic-animated typography sits at 2% of the corpus and the few that use it apply it to a single splash headline. simai.feedback makes *every* statement on the page a live variable-font oscillation driven by scroll velocity and cursor proximity — the type literally pumps like a speaker cone for the whole 70-second journey. The only still typography is the mono instrumentation, inverting mono's usual 94%-of-corpus starring role into a cold counterpoint. 2. **The page is a closed loop, not a column.** A literal SVG return-arc reconnects the last section to the first, the layout's color scheme inverts and re-inverts to mark the loop's halves, and scrolling past the end snaps back to the start. No other approach in the corpus structures itself as a topological loop; this one is built around the single idea of feedback = output-becomes-input. 3. **Acoustic-feedback as the governing metaphor for every element.** Scroll velocity is the gain knob; the cursor is a microphone; section dividers are standing waves; the right-edge fixture is a real-physics VU meter; the oscilloscope traces are shaped by each section's idea (clean sine → growing → clipped → howling Lissajous knot). The metaphor is total and load-bearing, not surface decoration. 4. **Refuses the corpus defaults wholesale:** no photography (98% of corpus), no card-grid (92%), no bento-box (17%) — content lives in full-width zig-zagging waveform-strips separated by 30vh of dead silence. The contrast between violently oscillating type and flat-color emptiness is the compositional engine. 5. **Signal-color palette used semantically, never decoratively** — red only ever means "feedback imminent," yellow only "+6dB / almost too loud," green only "oscilloscope trace," blue only "stable / pre-clip." Color is the instrumentation readout, not styling. Chosen seed/style: **kinetic typography hero** (the deforming variable-font, scroll-and-cursor-driven oscillating type is the whole site; only one other site in the corpus uses this seed, with no overlap in concept). Avoided patterns from frequency analysis: photography (98%), card-grid (92%), warm-pastoral/botanical/vintage motif families, glassmorphism (84%), hand-drawn (94%), bento-box, stat-grids, CTA-heavy layouts, pricing blocks. Cursor-follow and magnetic (89%) are present but recontextualized as acoustic mic-proximity rather than playful attraction.