CodeLabs

Studio template

Editorial magazine,kinetic scroll.

Sticky chapters. Moving paper. Particles the page owns. Audio may change their size and hue — it never creates them.

01 / Chapters

A grid, not a
dashboard.

Two tracks: a sticky visual and a reading column. Animate only opacity, transform, and clip-path.

.chapter {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
}

02 / Ownership

Audio modifies particles —
never owns them.

Press Hear the lab to fire a short oscillator burst. The field was already here. If sound fails, the scene does not disappear.

motion = run · audio = off · level = 0.00

03 / Input 9

Cube or curtain.

JavaScript names the effect. CSS owns the states. Change only imageTransition; the interval still advances when motion is allowed.

Input 9 · cubeFlip · motion run

04 / Practice the strings

The lesson is the template.

Studio, transitions, mode, access, progress, and canvas are now on the catalog — authored from the Website Template Learning Kit.