A scroll-grown website for an animation studio

Animation studios usually lead with a heavy video. SIGNAL_GARDEN is a study of a site that is itself a small animation: drawn lines that grow, branch and settle into the work.

Type: Website for artists
Year: 2025
Role: Concept, design, motion
Status: Concept study

Concept A study of how I’d approach this kind of problem, not a client project.

$ cat ./targets — design targets, not measured results

< 60 KB: JavaScript per page
< 1.5 s: first drawing on 4G
6: image sizes per artwork
0: motion with reduced motion on

The idea

The page starts almost empty. Scrolling draws the lines, and each project blooms out of a branch. Motion is the content here.

Publishing

The studio edits projects and reels in a headless CMS. Every save fires a webhook that rebuilds the site as static pages, and a private preview link shows the change before it goes live.

Media pipeline

The build fans out: images become AVIF and WebP in six sizes, reels are encoded into an HLS ladder so the player picks the right quality for each connection, and the page itself ships under 60 KB of JavaScript.

Delivery

Everything is served from an edge CDN, so the first drawing appears quickly in Tokyo and in Ljubljana. Video loads only when a project is about to scroll into view.

Kind to everyone

Respects reduced-motion settings, loads the light version first, and every animated part has a still alternative. The studio can swap projects without touching code.

$ trace — how it works

01Headless CMS
02Publish hook
03Static build
04Images · video · bundle
05Edge CDN
06Scroll engine
07Showreel

$ open ./result — what it would look like

The opening scene: the drawing grows, the ivy climbs, the birds leave the chimney. (Concept, animated.)

motion
scroll
animation studio