Examples¶
← README · Why Scroll Studio · What's new · Examples · Guide: make a site · Styles · Scenes · Licence
Live samples: https://okohedeki.github.io/scroll-studio-showcase/
Make previews for any project with
studio previews <project> ... --out <folder> (a video and a poster each), or a single poster at a chosen
moment with studio poster <project> --at <scene>:<progress> --out poster.jpg. Previews stay out of git. To put several built sites online together (GitHub Pages or any static host):
studio publish <project> ... --out <folder> --home showcase.
The showcase site puts every example on one page with its preview.
Every example is a site.yaml in examples/ and rebuilds with studio build examples/<name>.
| Scene | Field | Example | What scrolling does |
|---|---|---|---|
| One-take page | film + journey: |
Fenmoor | The whole page is one camera journey through a farmhouse; each section waits at its stop |
| Cinemagraphs | cinemagraph: |
Tern House | Stills where one thing moves: steam, a curtain, smoke, water |
| Light as the scroll | light |
Quay House | One harbour from dawn to night; windows and lamps come on |
| Inside the product | inside |
Inside the mainboard | A macro flight into the Framework Laptop 12 mainboard's 3D model |
| Miniature world | diorama |
Harbourlight | A tilt-shift harbour you orbit; it dives to each place |
| Placing words | at, enter, exit |
Margin | A miniature desk; each caption sits in its own place (a grid slot, a corner, a box) and arrives its own way (wipe, type-on, scale) |
| Film cuts | transition: |
Halo Coffee | A logo becomes the sun becomes a cup; iris, wipe, whip, carry |
| Type in the world (film) | place: |
Stillwater | Headlines behind a spruce, painted on the deck, in the haze |
| Type in the world (photos) | place: + parallax |
Casa Alta | Headlines behind the house and the olive tree |
| One medium, art-directed | imagery.medium |
Kitewell | A fintech page in risograph: the hero in the brand's two inks, calm where the headline sits, illustrated product panels and feature cards, a toile band to close |
| A light in your hand | imagery.medium + pointer: light |
Gloamery | An AI painting tool in gouache: the studio is dark and the lamplight follows your pointer; dust turns in the light (live:) |
| Colour under a lens | two media + pointer: lens |
Tarnhollow | Walking holidays: one watercolour printed as an engraving, its colour showing through a lens that follows the pointer |
| Halftone on a deep colour | imagery.paper: bg + light inks |
Tidelow | A sleep speaker printed as a negative halftone on indigo: cream and coral dots, a sea that breathes (live: flow), a line of type that grows heavier |
| Words in their slots | at: {grid} + code |
Millrace | A job queue in brush and ink: three captions take their own thirds of the grid over the mill race, then the change flies by as live code in a dark editor room |
| Remake, then art-direct | studio remake + imagery.medium |
Bramblecote | An invented seed company's plain landing page (in inputs/source/) read by studio remake, its words and brand kept, then repainted in gouache |
| Direction boards | studio directions |
Kiln & Kettle | Six art directions for one brief, side by side |
| One take with a real product | film + take |
Stillwater | A mountain ridge down to a bottle on a lakeside table; the bottle is its real 3D model |
| Story film | film |
Lodestar Orbital | A rocket launch to orbit, generated locally |
| Aerial film | film |
Meridian | A jet descends through cloud over London |
| Story in shots | film + beats: |
Feel | A door opens onto an oasis; every sentence its own shot |
| Gaussian splat | splat |
Hollis House | A walk through a scanned house, room by room |
| Product sequence | sequence |
Fischer & Vale | A glass chess set lifts off its board (Blender) |
| Artwork | artwork |
Atelier Sfumato | The Mona Lisa drawn and painted in five lessons |
| The pointer reveals | pointer: + parallax |
Atelier Sfumato | A torch over the Mona Lisa; her colour through a lens on the grey |
| Construction drawing | artwork |
Hale & Rowe | A house drawn from construction lines to finished photo |
| Live 3D | scene3d |
Cellwright Bio | From tissue to a molecule docking on DNA |
| Cosmic zoom | scene3d |
Northstar Observatory | A fall from the whole galaxy to one living planet |
| Map journey | map |
Tidewater Lines | Shanghai to Rotterdam, port by port |
| Charts from the data | chart |
Pelorus | Every figure read from Our World in Data at build time |
| Data story | chart |
Daybreak Institute | Fifteen years of real solar data |
| Vector line art | vector |
Wunderkammer | Dürer's Rhinoceros re-cut line by line |
| Kinetic type | type |
FORM/26 | A conference site told in moving type |
| Photo parallax | parallax |
Casa Alta | A cliff hotel's photos given depth and a slow camera |
| Landing page kit | badge, rating, signup, logos, frame |
Larkspur | A framed hero on calm art with a badge link, icon buttons, a rating, figures and a logo strip; no GPU |
| Stacked panels | stack layout |
Hushwell | Full-screen panels slide over each other |
| Thirty-two styles | theme.style |
Halcyon | One product page as thirty-two experiences (studio looks) |
The examples show what each scene does; they are not templates. Every one rebuilds with your own photos, footage, 3D models, logo and copy, or from a brief.