Concept
La Bourse is a fictional art-deco exchange caught in the last golden hour of October 1929. The page treats finance as stagecraft: marble light, brass geometry, clerks moving through ritual, and invented securities whose names sound plausible enough to be dangerous. Zeppelin Freight, Radium Cosmetics, Automat Palaces, Velvet Telephone, and the smaller syndicates are not filler; they give the market a social world before it breaks.
The scroll path is built as a ceremony that curdles. The hero opens with a proud board and calm ledgers, the hours section records the day as office routine, and the issue tiles sell speculation as tasteful design. The departure-board section makes prices feel mechanical and inevitable. Then the Black Tuesday trigger reverses the same system: red washes into the boards, the tape accelerates, and paper shreds fall over the floor.
Visual System
The palette starts with marble cream #efe6d5 and jet black, then uses gold #d4af37 for brass, oxidized green #2f6658 for patinated authority, and crash red #8f1717 as an event color. Typography is split three ways: Six Caps creates the towered deco titles, Jost carries body copy, and Zilla Slab gives numbers the punched authority of tape and ledger paper.
Most atmosphere is CSS: marble veins in body::before, grain in body::after, radial sunbursts, chevron threshold bands, tilted slips, and dense quote fields. The layout intentionally changes pressure by section instead of repeating cards: pale exchange hall, black prospectus field, green station chamber, red crash theater, then a quiet after-bell ledger.
Techniques
The live tape is the fixed #tapeCanvas layer. In main.js, drawTape() paints the strip, punch holes, perforation, moving text, and crash stamps. mountCrashObserver() calculates scroll progress for the Black Tuesday section; setCrashMode() switches the page into panic, while setCrashProgress() moves the red curtain and the oversized NO BID seal. That state increases tape speed and lets drawConfetti() spawn torn red, gold, and paper shreds on #confettiCanvas. Both requestAnimationFrame loops stop when document.hidden.
The quote boards are live DOM. mountQuoteBoards() fills each [data-board] with firm rows, prices, and deltas. mountRailSlip() then adds a broker inspection slip to every board; hover, tap, or keyboard focus on a row stamps the slip with the firm’s post number, price, and rumor. updateQuoteBoards() flips individual number cells with the .flip class and, during crash mode, biases every move downward. The ghost wall comes from mountDriftWall(), which creates quote lanes drifting behind the content. mountOrnaments() generates the SVG sunburst and chevron frames directly in the page.
Reproduce This
Prompt an AI agent to build one historical mood as a working interface, not a poster. Give it local fonts, a strict palette, named fictional data, one canvas animation, one DOM animation system, and one scroll-triggered reversal where the design language changes meaning. Require a guide that names the actual files and functions, then demand screenshots at phone, tablet, and desktop widths before final polish.