What did we build for Catéchiste?

The whole site: the loader, the scroll-driven hero, the studies deck and showcase, the live launches page, six articles, the footer, and the search and performance work behind them.

How does the hero film follow the scroll so closely?

The clip is decoded in the browser into a bank of still frames when the page loads, so each scroll position simply shows its frame. There is no video seek to wait for, which is what usually makes scrubbed video stutter.

What happens on a browser that cannot decode the film?

The ordinary video element takes over and scrubs on its own, so the picture never disappears.

Are the studies real pages?

Yes. Each is a full page built for the browser, previewed live inside the plate and opened full screen on click. They carry noindex so they never rank as pages about the brands they explore.

Why keep the studies apart from the live launches?

Studies are self-initiated work, and launches are sites that shipped for a client. Mixed on one screen, neither is easy to read.

How is the copy kept consistent?

Every word lives in one content file, and a script checks it against the copy brief before deploy: banned phrases, long dashes, exclamation marks and sentence length.

How does a page this heavy stay usable on a phone?

Study pages load only when they scroll into view, the film is fetched once, and a full phone pass sized every tap target and removed any sideways scroll.

Can the studio add work without a developer?

Adding a study, a launch or an article is one entry in the content files. The sitemap, the structured data and the page all update from it.

A studio site where the hero film moves with your scroll.

Catéchiste

Studio site, studies and showcase

Websites
Motion
Front-end

A studio site that runs its own work live

Catéchiste is a design and engineering studio. Its site needed to show what the studio can build within the first scroll, before a visitor reads any copy.

We built all of it from an empty file: the loader, a hero film scrubbed by scroll, a deck of design studies running live inside the page, the showcase, a page of live launches, six long-form articles, the footer and the search groundwork.

Every word on the site lives in one content file and passes a written copy brief, checked by a script before anything ships.

Visit live site

Services

Art direction
Interaction design
Motion
Front-end engineering
Scroll-driven video
Design studies
Long-form writing
Copy system
Technical SEO
Structured data
Performance
Mobile pass

The loader

Before the page appears, lines of text decode out of random characters while the wordmark forms in the middle. This film was rendered from the site's own code, fonts and words.

The studio's work had to run live on its own home page.

Most studio sites show their work as a grid of thumbnails. Catéchiste wanted the site itself to be the first piece of work, with each study running live on the page instead of sitting there as a screenshot.

That meant a hero film that follows the scroll frame by frame and seven full study pages playing inside the home page, on a site that still opens fast on a phone.

The writing mattered just as much. The articles, the captions and every label follow one copy brief, and a script checks it on every build.

How and why: the studio's position and its four disciplines

Recent Live Launches: each site listed by its address

An article: why the performance budget goes in the contract

The site in motion

The home page at catechiste.studio, filmed one scroll step at a time: the hero film moving under its rotating wipes, the studio statement rising over it, the studies deck playing, and the footer cropped at the edge of the page.

catechiste.studio

A film on the scroll, studies running live

The hero is one film. When the page loads, the browser decodes it into a bank of still frames, so every scroll position shows a ready frame and nothing waits on a video seek. Two rotating wipes, a strip of work and a run of counters pass over it in three acts.

Below it, each plate holds a real study page at full size. It starts playing when you hover over it and opens full screen when you click.

What we built

Seven studies, built and running

Each study is a full page built for the browser, filmed here one scroll step at a time. On the site they run live inside the home page and the showcase.