Editorial magazine, kinetic scroll

Chapters, not cards

An editorial template is a vertical issue. Each chapter has a kicker, an oversized title, and a reading column. The visual may stick while the copy moves.

Use a two-track grid. Do not flatten the story into a dashboard of identical tiles.

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

Only three animated properties

Animate opacity, transform, and clip-path. Stage entrances with 30–80ms offsets if the reader did not ask for reduced motion.

If prefers-reduced-motion is reduce, skip parallax, autoplay, and dramatic transitions. Every control stays visible immediately.

Audio modifies particles — never owns them

The particle field is created by the page: positions, lifetimes, and count live in the scene. That ownership does not transfer when sound starts.

A Web Audio analyser may change amplitude and hue. If audio fails, pauses, or is declined, the field still exists. Sound is a modifier, not a parent.

particle.size = baseSize * (0.7 + audioLevel * 0.6);
particle.hue = baseHue + audioLevel * 24;

Animated SFX without a stolen track

Build short oscillator and noise bursts for chapter entries. Do not autoplay. Start the AudioContext from a button labeled Hear the lab.

When reduced motion is on, do not start the context. The magazine still reads.

Keyboard and reduced-motion diagnostic

Tab order: skip link, masthead, chapter links, Hear the lab, the lesson rail, the terminal, LabRat. Focus rings stay ink or orange.

A diagnostic line can report: motion = reduce|run, audio = off|ready. Never hide that line in a hover-only control.

Glossary

scrollytelling

A vertical narrative where scroll reveals the next argument.

ownership

Which system creates and destroys the particle list.

modulation

A later signal that changes size or color without creating the thing.