Skip to content

Directions: the next level of landing pages

Scroll Studio is a design studio for landing pages. These are the directions it grows in next, chosen for what the engine does well (generated worlds and camera moves, depth and masks, type, real products, browser-side mechanics) and away from what it does badly (people acting, choreography, consistent characters). Each one is an engine feature: a spec field, a cached builder, a runtime player where needed, CLI and MCP, docs and a showcase spec.

1.5 · Make it yours (building)

One layout system for every scene: where things go (at), when they show (show, enter, exit), any block as a step, theme tokens for space, type, shade and motion, style options, your own CSS, blocks and styles, phone rules, placement measured from the picture, and studio layout to check it. Design: design/1.5-make-it-yours.md.

Wave 1

  • Direction boards (studio directions): one brief in, six complete art directions out, side by side as storyboards (palette, type, imagery, motion, style). Pick one and it becomes the spec. How a studio pitches.
  • Type in the world: headlines placed inside the scene, painted on a wall, written in the sky, set behind a building so the camera passes them and things pass in front (depth-aware, tracked to surfaces).
  • Edited like a film: sections join with film grammar instead of fades: match cuts (a round logo becomes the sun becomes a cup), whip pans, type carried from one section into the next, hard cuts on the beat.
  • Styles 28-29: stop-motion and paper-cut-out (see docs/styles/todo.md).

Wave 2

  • The one-take page (journey:, studio journey, example examples/fenmoor): the whole page is one camera journey through one generated world; each section is a place in it (hero at the door, features as rooms, pricing at the window, the CTA at the view).
  • Cinemagraph pages: stills where only one thing moves (steam, a curtain, light on water); a mask picks what moves and the rest is held perfectly still.
  • Light as the scroll (type: light, studio light): one world from dawn to night; each section is a time of day, the same place relit.
  • The product as the set (type: inside): fly into the product (inside a speaker, between the layers of a board, macro around a bottle); each feature is a stop inside it.
  • Miniature worlds (diorama, docs/miniature.md): a tilt-shift diorama you orbit and dive into; sections are places on it.
  • Styles 30-33: paint-on-glass, multiplane, scratch-film, smears.