Orvane Research

What it is

A one-page marketing site for a research institute: a hero, a statement of intent, an introduction, an archive of three works, three experimental conditions, a manifesto, a footer with a sign-up. One page, one HTML file.

What makes this site is its backdrop. A Lorenz attractor — the system of equations that gave the butterfly effect its name — is integrated once on load into 20,000 points, then redrawn every frame on a 2D canvas. Nothing moves within the figure: it's the camera that flies, from one framing to the next, in time with the scroll. Five framings, blended according to how much of each section has entered the screen.

The design comes from a Next.js site of which only the images and the structure have been kept. Everything else has been rewritten: the React and Turbopack runtime (700 kB spread over ten files), the CSS compiled by Tailwind, the Lenis scrolling library, the image optimiser that doesn't exist outside its host, and the wrapper that scales the whole page with a transform: scale() recomputed in JavaScript.

What you change first

The colours — four lines

Right at the top of assets/css/style.css:

--encre:  #0c0c0d;            /* the background, and the text on the light section */
--papier: #f2f2f2;            /* the light section and the archive cards */
--accent: rgb(218, 132, 10);  /* the dot that replaces the cursor */
--focus:  #f5e100;            /* the focus ring on a dark background */

Two things to know before touching anything else. First, the colour of the animated backdrop isn't a CSS token: it's computed point by point in field.js, between rgb(55,30,2) at the bottom of the figure and rgb(255,185,12) at the top. Second, the focus ring needs two values: the yellow holds at 14.6:1 on the black background and falls to 1.2:1 on the light section, where it disappears. That's where --focus-clair takes over.

The name

Search for “Orvane Research” in index.html. No CSS class carries the brand name: a find-and-replace can't break anything. That leaves the logo's two SVGs, in assets/img/.

The sizes

The type scale is declared once at the top, then redeclared at each of the three breakpoints. So a heading never gets its own media query: you change --t-heros and the large heading follows everywhere. If you find yourself writing a @media elsewhere in the stylesheet, you're probably missing a token.

The fifteen effects, and how they're built

All taken from the original's JavaScript bundle — durations, curves, offsets, the attractor's constants — then rewritten with no dependencies. Nothing was eyeballed.

What you should know

• No external requests. Every request on load is local, fonts included. The original loaded ten JavaScript files and ran its images through a host's optimiser.
• Without JavaScript, nothing is hidden. The hidden state of the scroll reveal lives on an element only the script creates: until it has run, there's nothing to unmask. Checked by removing the <script>: 13 headings out of 13, 32 paragraphs out of 32, the 3 archive cards in a list, and 0 masks set.
• Zero inline styles, zero inline scripts. The template honours the site's strict security policy, checked by serving the folder with the header, not assumed.
• The trigger sits 15% up from the bottom of the screen, measured against the screen and not against the element as in the original. A threshold expressed as a fraction of the element never fires for a block taller than the window — and a block visibly enters instead of having finished before it was seen.
• Accessibility: skip link, named navigation, form message through role="status", decorations hidden from screen readers, focus visible on both backgrounds, and prefers-reduced-motion setting the final states immediately — delays included.
• The native cursor is only hidden if there's a mouse. The rule is conditioned on (pointer: fine) and on the first real movement. On a touchscreen, or without JavaScript, the system cursor stays.
• Responsive checked at 390, 1440 and 2560 px, on load and throughout the scroll, with no horizontal overflow.

What isn't perfect

Better said here than left for you to find out.