# Mocubix

> Seven ways a page can move, and a lexicon of 41 named interface effects, each one running on real material. Plain HTML and CSS with a few small scripts, no framework, made for Chrome.

Each page is served from its own folder of the repository: https://mocubix.renocrypt.com/<path>/ from https://github.com/renocrypt/mocubix/tree/main/site/<path>/, and every file there reads as served at https://raw.githubusercontent.com/renocrypt/mocubix/main/site/<path>/<file>. All pages share site/house.css and site/house.js; the Lexicon adds site/lexicon/lexicon.css and lexicon.js. A showcase keeps everything else beside its page: index.html, showcase.css and, where it needs one, showcase.js.

The code is licensed under the Apache License 2.0 (https://github.com/renocrypt/mocubix/blob/main/LICENSE). The pictures keep their own licences from Wikimedia Commons, credited on each page.

## Exhibits

- [Mocubix — Seven ways a page can move](https://mocubix.renocrypt.com/): Seven exhibits of how a page can move — a galloping mare, a hurricane from orbit, an eruption, a departures board — each a real subject on one mechanism, and a lexicon that names forty-one effects. Source: https://github.com/renocrypt/mocubix/tree/main/site/
- [Annie G.](https://mocubix.renocrypt.com/annie-g/): Eadweard Muybridge photographed a galloping mare sixteen times in one stride, 1887. Scroll and the stills run; scroll back and she runs backwards, frame for frame. Where you are on the scrollbar is which frame you are on. Source: https://github.com/renocrypt/mocubix/tree/main/site/annie-g/
- [Night Side](https://mocubix.renocrypt.com/night-side/): Eight night passes of the International Space Station, laid end to end in the one direction it flies: east. Scroll down and the window moves sideways while the station crosses a map of the Earth at night. Source: https://github.com/renocrypt/mocubix/tree/main/site/night-side/
- [Florence](https://mocubix.renocrypt.com/florence/): Three minutes over Hurricane Florence from the space station. Where you are on the page decides what you see; how fast you move is read on the scale that measures hurricanes. Source: https://github.com/renocrypt/mocubix/tree/main/site/florence/
- [Urformen](https://mocubix.renocrypt.com/urformen/): Nine of Karl Blossfeldt's magnified plant photographs, each developing on its own clock as it passes. The page has no single beat. Source: https://github.com/renocrypt/mocubix/tree/main/site/urformen/
- [Departures](https://mocubix.renocrypt.com/departures/): An evening at Secaucus Junction on the split-flap boards that still hang there. The hall keeps its own time: trains board and leave whether you scroll or not, and every change turns through the drums one flap at a time. Source: https://github.com/renocrypt/mocubix/tree/main/site/departures/
- [Orrery](https://mocubix.renocrypt.com/orrery/): A working orrery that opens on today, every planet where it actually is, and runs at their true pace. Pull it apart and the ecliptic, the orbits, the bodies and the names lift into separate layers while it keeps turning. Source: https://github.com/renocrypt/mocubix/tree/main/site/orrery/
- [Kīlauea](https://mocubix.renocrypt.com/kilauea/): Kīlauea's 2018 eruption in four phases. Scroll past each dated line and the whole screen changes state at once: the photograph, the palette, the alert level and the observatory's instruments. Source: https://github.com/renocrypt/mocubix/tree/main/site/kilauea/

## The Lexicon

- [The Lexicon](https://mocubix.renocrypt.com/lexicon/): 41 interface effects in five pillars, each on its own page and running, under the name practitioners use: scroll-driven motion, scroll behaviour, image, type and colour. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/

### Scroll-driven

- [Scroll-driven](https://mocubix.renocrypt.com/lexicon/scroll-driven/): Scroll-driven: what scrolling plays. Scroll Progress Timeline, View Progress Timeline, Pinning & Scrub, Parallax, Horizontal Scroll Section, Sticky Stacking Cards, Scroll Velocity Skew, Timeline Scope, Path Drawing, Word Scrub, Curtain Overlap, Depth of Field, Scroll-Triggered Count — each named, explained and running. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-driven/
- [Scroll Progress Timeline](https://mocubix.renocrypt.com/lexicon/scroll-progress-timeline/): How far you have scrolled is how far the animation has played. The hairline across the top of this page is one. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-progress-timeline/
- [View Progress Timeline](https://mocubix.renocrypt.com/lexicon/view-progress-timeline/): Every row times its own animation by its own trip across the screen, so no two are at the same point at the same moment. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/view-progress-timeline/
- [Pinning & Scrub](https://mocubix.renocrypt.com/lexicon/pinning-and-scrub/): The picture holds still while the page keeps moving, and your scrolling becomes the playhead. Scroll back up and it plays backwards. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/pinning-and-scrub/
- [Parallax](https://mocubix.renocrypt.com/lexicon/parallax/): The layers move at different rates, and the difference between the rates is the part you read as distance. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/parallax/
- [Horizontal Scroll Section](https://mocubix.renocrypt.com/lexicon/horizontal-scroll-section/): You scroll down; the content travels sideways. A list you ranked becomes a row you compare across. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/horizontal-scroll-section/
- [Sticky Stacking Cards](https://mocubix.renocrypt.com/lexicon/sticky-stacking-cards/): Cards catch at the top one after another and pile over each other as you keep going. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/sticky-stacking-cards/
- [Scroll Velocity Skew](https://mocubix.renocrypt.com/lexicon/scroll-velocity-skew/): It reads how fast you are scrolling rather than where you have got to. Throw the page and the picture leans, then settles. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-velocity-skew/
- [Timeline Scope](https://mocubix.renocrypt.com/lexicon/timeline-scope/): A figure far down the panel drives the bar at the top of it. One element's passage moves something it sits nowhere near. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/timeline-scope/
- [Path Drawing](https://mocubix.renocrypt.com/lexicon/path-drawing/): The line draws itself as you arrive, as though someone were tracing it in front of you. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/path-drawing/
- [Word Scrub](https://mocubix.renocrypt.com/lexicon/word-scrub/): The sentence lights up a word at a time, and how much of it has arrived is how far you have come down the page. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/word-scrub/
- [Curtain Overlap](https://mocubix.renocrypt.com/lexicon/curtain-overlap/): The next panel covers the one before it rather than pushing it out of the way. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/curtain-overlap/
- [Depth of Field](https://mocubix.renocrypt.com/lexicon/depth-of-field/): Only the band across the middle of the screen is sharp. Everything above and below it falls out of focus. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/depth-of-field/
- [Scroll-Triggered Count](https://mocubix.renocrypt.com/lexicon/scroll-triggered-count/): The figures wait until they are on screen, then run up to their value — once, not every time you pass. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-triggered-count/

### Scroll behaviour

- [Scroll behaviour](https://mocubix.renocrypt.com/lexicon/scroll-behaviour/): Scroll behaviour: how scrolling itself behaves. Scroll Snap, Snap Stop, Scroll Markers, Scroll Buttons, Sticky State Query, Snapped State Query, Direction State, Infinite Loop Scroll, Kinetic Drag, Scrollspy, Overscroll Containment — each named, explained and running. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-behaviour/
- [Scroll Snap](https://mocubix.renocrypt.com/lexicon/scroll-snap/): Scrolling comes to rest on a whole item instead of halfway between two. It feels like turning pages. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-snap/
- [Snap Stop](https://mocubix.renocrypt.com/lexicon/snap-stop/): Flick both tracks hard. The top one skips three or four items in one go; the bottom one stops at the very next one. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/snap-stop/
- [Scroll Markers](https://mocubix.renocrypt.com/lexicon/scroll-markers/): The dots under the strip are made by the strip itself, and follow wherever you are in it. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-markers/
- [Scroll Buttons](https://mocubix.renocrypt.com/lexicon/scroll-buttons/): The back and forward arrows come out of the row of items itself, and go grey when there is nothing left that way. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scroll-buttons/
- [Sticky State Query](https://mocubix.renocrypt.com/lexicon/sticky-state-query/): The moment the bar catches at the top of its panel, it knows, and changes itself. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/sticky-state-query/
- [Snapped State Query](https://mocubix.renocrypt.com/lexicon/snapped-state-query/): Whichever slide is parked at the centre knows it is the one you are looking at, and lights up. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/snapped-state-query/
- [Direction State](https://mocubix.renocrypt.com/lexicon/direction-state/): Going down puts the bar away so you can read. Going back up brings it straight back. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/direction-state/
- [Infinite Loop Scroll](https://mocubix.renocrypt.com/lexicon/infinite-loop-scroll/): The list has no end. Keep going and it carries on, with no seam to catch on. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/infinite-loop-scroll/
- [Kinetic Drag](https://mocubix.renocrypt.com/lexicon/kinetic-drag/): Grab it and throw it. It keeps going after you let go, then slows to a stop as though it had weight. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/kinetic-drag/
- [Scrollspy](https://mocubix.renocrypt.com/lexicon/scrollspy/): Whatever has reached eye level is the thing the index marks as where you are. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scrollspy/
- [Overscroll Containment](https://mocubix.renocrypt.com/lexicon/overscroll-containment/): Push both panels past their last line. One hands your gesture on to the page behind it; the other keeps it. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/overscroll-containment/

### Image

- [Image](https://mocubix.renocrypt.com/lexicon/image/): Image: what a picture can do. Blur-up (LQIP), Ken Burns, Duotone, Progressive Blur, Ordered Dithering, Clip-path Reveal, Image Comparison Slider — each named, explained and running. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/image/
- [Blur-up (LQIP)](https://mocubix.renocrypt.com/lexicon/blur-up-lqip/): A small blurred stand-in appears at once and the real picture fades in over it — in a box that was already the right size, so nothing jumps. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/blur-up-lqip/
- [Ken Burns](https://mocubix.renocrypt.com/lexicon/ken-burns/): A still photograph is given a slow drift and a slow push in — just enough to feel like time passing. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/ken-burns/
- [Duotone](https://mocubix.renocrypt.com/lexicon/duotone/): Any photograph, whatever it arrived wearing, comes out in one colour. Drag back to see what it came in as. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/duotone/
- [Progressive Blur](https://mocubix.renocrypt.com/lexicon/progressive-blur/): The picture softens towards the bottom, so the caption sits on something readable without a black bar laid across it. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/progressive-blur/
- [Ordered Dithering](https://mocubix.renocrypt.com/lexicon/ordered-dithering/): The picture is cut down to a handful of tones, and the ones that are missing are made up out of a regular grain. Drag to take more away. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/ordered-dithering/
- [Clip-path Reveal](https://mocubix.renocrypt.com/lexicon/clip-path-reveal/): The picture is uncovered by an edge travelling across it, not by fading up underneath. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/clip-path-reveal/
- [Image Comparison Slider](https://mocubix.renocrypt.com/lexicon/image-comparison-slider/): Two versions of the same frame, one laid over the other. Drag the divider across to compare them. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/image-comparison-slider/

### Type

- [Type](https://mocubix.renocrypt.com/lexicon/type/): Type: letters that move. Split Text Reveal, Variable Font Animation, Text Mask, Vertical Writing Mode, Marquee — each named, explained and running. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/type/
- [Split Text Reveal](https://mocubix.renocrypt.com/lexicon/split-text-reveal/): The lines rise up out of the page one after another, each a beat behind the last. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/split-text-reveal/
- [Variable Font Animation](https://mocubix.renocrypt.com/lexicon/variable-font-animation/): Weight is a dial here, not a set of steps. Drag it and the letterforms thicken without ever swapping to another file. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/variable-font-animation/
- [Text Mask](https://mocubix.renocrypt.com/lexicon/text-mask/): The picture shows only through the letters. The type is the window, not the caption. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/text-mask/
- [Vertical Writing Mode](https://mocubix.renocrypt.com/lexicon/vertical-writing-mode/): Written down the page, as Chinese, Japanese and Korean always have been: the columns arrive right to left, Latin turns sideways, and a year stands upright in one square. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/vertical-writing-mode/
- [Marquee](https://mocubix.renocrypt.com/lexicon/marquee/): A band of text running sideways under its own power, whether or not you touch the page. Hover to stop it. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/marquee/

### Colour

- [Colour](https://mocubix.renocrypt.com/lexicon/colour/): Colour: colour as one system. Token Interpolation, Scoped Rotation, Gamut Arc, Difference Inversion, Threshold Flip — each named, explained and running. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/colour/
- [Token Interpolation](https://mocubix.renocrypt.com/lexicon/token-interpolation/): Every colour on the card is held to one dial. Scroll, and they all turn together, in step, never landing on a combination nobody chose. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/token-interpolation/
- [Scoped Rotation](https://mocubix.renocrypt.com/lexicon/scoped-rotation/): The same colour change, asked of a few elements or of a great many. Press the switch and watch the counter beside it. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/scoped-rotation/
- [Gamut Arc](https://mocubix.renocrypt.com/lexicon/gamut-arc/): Two ways to get from terra to blue. The left field goes round the outside and is a full colour the whole way; the right one goes straight across and turns to mud halfway. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/gamut-arc/
- [Difference Inversion](https://mocubix.renocrypt.com/lexicon/difference-inversion/): The words turn into the opposite of whatever passes behind them, readable over a photograph, over white and over black — and gone over one particular grey. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/difference-inversion/
- [Threshold Flip](https://mocubix.renocrypt.com/lexicon/threshold-flip/): At one point on the way down, the whole panel changes its colours at once rather than easing between them. A full showcase. Source: https://github.com/renocrypt/mocubix/tree/main/site/lexicon/threshold-flip/

## Optional

- [AGENTS.md](https://github.com/renocrypt/mocubix/blob/main/AGENTS.md): the laws the site is built by, a map of the repository and its build tools
- [Traps](https://github.com/renocrypt/mocubix/blob/main/notes/TRAPS.md): what has already gone wrong once, one line each, with the way out