Animated Scroll-Pinned WebGL Ribbon Hero: Dark Indigo AI Audio Landing Page

=== ARCHITECTURE & VISION ===
A full scrolling dark LANDING PAGE for an AI audio product ('Kilnwave') whose entire visual system is generated in the browser rather than photographed. It opens on a brief full-screen intro stage showing a single lowercase line that fades in, lifts and clears after ~2 seconds, revealing a full-viewport hero: a WebGL fragment shader painting three additive ribbons (indigo #6366F1, violet, cyan) that drift, cross and bloom where they overlap, veiled by a downward gradient so the type below stays legible. The headline sits bottom-left at clamp(4.5rem,16vw,14rem), line-height .82, letter-spacing -.05em, and rises glyph by glyph on a 42ms stagger once the intro clears. Above it a hairline-ruled mono metadata row; below it a 38ch paragraph and two buttons. The body is a stack of bordered bands, each opened by a mono eyebrow with a hairline rule running to the right edge, and each laying its headline left against its lede right so no band is half empty. Band 01 is a four-track grid of engine tiles, each carrying its OWN live 2D canvas animation (a travelling waveform, a denoising block grid, four separated stem lines, a sweeping context ring) above a title and a three-line description. Band 02 is a full-width spectrum field: 72 bars driven by a spectral envelope, with one contiguous band drawn in solid indigo inside a stroked marker box and a live Hz readout, so the page's claim (re-voice one band, leave the rest) is visible rather than asserted. Band 03 is a four-track stat row with the numerals' leading digits in indigo. Band 04 is a borderless FAQ where each summary carries a plus that collapses to a minus. The page closes on a centred statement and two buttons, then a mono footer. Every animation is cancelled under prefers-reduced-motion, which also removes the intro stage entirely and shows all content immediately.

=== STYLE & DIRECTION ARTISTIQUE ===
• description: Near-black void ground with one committed indigo accent and generated light as the only imagery. Nothing is photographed, gradient-banded or glow-boxed: the colour in the page comes from additively blended shader ribbons and from indigo used sparingly on marks. Type is a single grotesque at light weights doing everything by scale, answered by a mono at wide positive tracking for all furniture. Structure is carried by 1px hairlines at 6-10% white and by grid gaps that read as rules, never by cards with shadows.
• prompt: Apply a dark generated-light style. Palette: ground #0A0A0A, secondary ground #0F0F11, panel #18181B, ink #FFFFFF, muted #71717A, accent indigo #6366F1 with #4338CA for the pressed state, hairlines rgba(255,255,255,.10) and rgba(255,255,255,.06). Typography: 'Inter' at weights 300 and 400 only, hierarchy from scale, display sizes at letter-spacing -.04em to -.05em; 'JetBrains Mono' 300 at 11px, uppercase, letter-spacing .1em for every label, eyebrow, chip and footer line. Radii 0 everywhere. Ban gradients used as decoration, glow boxes, drop shadows on cards, bento grids and any bitmap image. The ONLY chroma outside the shader is indigo on buttons, on leading numerals, on the selected spectrum band and on one word of the wordmark. Panels are the ground plus a 1px hairline, never a fill with a shadow. Ration accent-coloured elements to at most six on the whole page.

=== STRUCTURE & SECTIONS ===
• description: An intro stage, then seven bands: fixed translucent nav; full-viewport shader hero with content bottom-aligned; a four-track engine grid; a full-width spectrum field; a four-track stat row; an FAQ; a centred close; a mono footer. Content is capped at 1152px with a clamp(20px,5vw,64px) gutter. Grids use EXPLICIT track counts (4 → 2 at 1000px → 1 at 560px), never auto-fit, so a known cell count can never resolve to a dead trailing cell.
• prompts: [{"part":"Intro stage","prompt":"A fixed full-screen panel on the ground colour, z-index above everything, centring one short lowercase line at clamp(2.2rem,7vw,5rem) with -.05em tracking. Fade it in from 14px below after 220ms, lift it out at 1500ms, then fade the whole panel out at 2050ms and set visibility hidden so it stops catching clicks. Under prefers-reduced-motion set the panel to display:none and never run the sequence."},{"part":"Shader ribbon hero","prompt":"A min-height:100svh section with overflow hidden, content bottom-aligned. Layer, back to front: a full-bleed canvas running a WebGL fragment shader; a pointer-events-none veil; the content. The shader draws three horizontal ribbons, each a smoothstep band around a y computed from two summed sines of different frequency, phase-offset per ribbon and advanced by a time uniform, tinted indigo, violet and cyan and ADDED together so crossings brighten to a pale bloom, plus a soft centre glow; output alpha is the clamped sum so the ground shows through. Ship a canvas-2D fallback drawing the same three sine ribbons as thick round-capped strokes for contexts with no GL. The veil is a downward linear gradient (transparent 20% to .94 at the bottom) over a radial vignette, tuned so the hero furniture stays legible where a bright ribbon crosses it. Content: a hairline-ruled mono metadata row at 74% white, a headline split into per-character spans that each rise .32em with a 42ms incremental transition-delay, a 38ch paragraph and two buttons."},{"part":"Band header","prompt":"Open every band with a mono eyebrow ('01 · Engine') followed by a 1px hairline that flexes to the right edge. Then a two-column head: the headline left at clamp(2rem,4.6vw,3.6rem) capped at 20ch, the lede right at 15px/1.7 in a lighter grey, bottom-aligned to each other. Collapse to one column under 820px. A single stacked column leaves the right half of every band empty and is the thing to avoid."},{"part":"Engine grid with per-tile canvases","prompt":"Four explicit tracks separated by 1px gaps over a hairline background so the gaps read as rules. Each tile: a 74px-tall canvas running its OWN requestAnimationFrame loop, then an index in mono top-right, then a 17px title and a three-line description. The four animations are distinct and each illustrates its own tile: a travelling waveform whose amplitude is itself modulated along x; a two-row grid of blocks whose alpha oscillates out of phase per block; four horizontal lines at increasing opacity each waving at its own frequency; and a ring with a sweeping arc plus a centre dot. Keep the tile copy to a consistent line count and align content to the top, because unequal paragraphs under space-between push each title to a different height and the titles read as broken across the visible borders."},{"part":"Spectrum field","prompt":"A full-width bordered panel, clamp(200px,32vw,340px) tall, holding one canvas of about 72 vertical bars. Bar height is a spectral envelope (a half-sine across x) times two summed oscillations advanced by time. Draw one contiguous run of bars, roughly 16% to 44% across, in solid indigo and everything else at 16% white, and stroke a marker rectangle around exactly that run. The selected bars must be lifted clear of the envelope so the marker box is visibly full, otherwise the mechanic the page is claiming is invisible inside its own marker. Pin a mono caption bottom-left and a live indigo Hz readout bottom-right. Gate the animation on an IntersectionObserver so it idles off-screen."},{"part":"Stats, FAQ and close","prompt":"Stats: four explicit tracks, 1px gaps over hairline, each cell a numeral at clamp(2.2rem,5vw,3.4rem) with only its leading digits in indigo, over a 12.5px grey caption. FAQ: native details/summary rows on hairline borders, 22px vertical padding, a 13px plus glyph built from two absolutely-positioned 1px bars whose vertical bar scales to 0 when open, summary turning indigo on hover. Close: a centred statement at clamp(2.4rem,7vw,5.4rem) capped at 16ch with two buttons under it, then a mono footer row."},{"part":"Scroll reveals and motion policy","prompt":"Reveal blocks translate up 20px and fade over .9s on a cubic-bezier(.16,1,.3,1), triggered once by an IntersectionObserver at threshold .16 with a -8% bottom root margin, then unobserved. Under prefers-reduced-motion every transition and animation is disabled, every reveal is forced visible, the headline glyphs are forced visible, and the intro stage is removed, so the page is fully readable with no motion at all."}]

=== COMPOSANTS CLÉS ===
• WebGL fragment shader painting three additive sine ribbons behind poster-scale type, with a canvas-2D fallback
• Intro word stage that clears itself and hands off to a per-glyph headline rise on a 42ms stagger
• Four independent per-tile 2D canvas animations, each illustrating the tile it sits in
• Spectrum field with one selected band drawn solid inside a stroked marker box plus a live Hz readout
• Details/summary FAQ with a CSS-only plus-to-minus glyph

=== NOTES TECHNIQUES ===
Single self-contained HTML file. The only external request is one Google Fonts link (Inter, JetBrains Mono); there are no images, no icon fonts and no JS libraries. Use explicit grid track counts with breakpoints, never auto-fit, for any known cell count. Size every canvas from getBoundingClientRect times a devicePixelRatio capped at 2, and re-fit on resize, or the drawings blur on retina. Wrap the shader creation in a try/catch and fall back to canvas-2D when no GL context is available. Gate off-screen canvas loops behind an IntersectionObserver. Every animation must be cancelled under prefers-reduced-motion, and the reduced-motion path has to force the revealed state rather than simply skipping the transition, otherwise the content stays invisible.

Superdesign UI · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.