Motion plan: first-open presentations and a “living” feel

Owner request (2026-10-20): every page should feel dynamic, and each page gets an animated first-open presentation.

Building blocks (shared, already in the repo)

• assets/js/reveal.js + the “Reveal” block in assets/css/main.css: add class="rv" (and rv--zoom for pictures, style="--i:n" for stagger order) to any element; data-rv-now = plays on load (hero), otherwise when it scrolls into view. data-count="14" data-suffix="%" counts a number up. Load it with scripts: [reveal].
• Hover layer (end of main.css): cards lift and glow, pictures zoom, buttons press. Elements that carry .rv must not rely on transform from :hover on the same element: wrap them, or the entrance animation (it only runs “backwards”) is fine as is.
• Rules: only transform and opacity are animated (60fps); everything is off for prefers-reduced-motion and hover effects for touch; the content is never hidden when JS is off (.js class gate).

Per page

| Page | First-open presentation | Scroll / hover life | |—|—|—| | Norna Converter (done) | hero text staggers in, video zooms up; stats count up | sections rise in, screenshots zoom in, rows slide on hover | | Home / | hero text staggers, triangle scene fades in with a slow push-in; stats count up | division cards rise in one after another; “Latest” tiles stagger | | Artworks /artworks/ | hero staggers; the 4 random artwork tiles already fly in | service cards, Behance cards, two-ways boxes rise in | | Store /artworks/store/ | trust strip slides in, weekly artwork “pops” once | artwork cards stagger as the grid scrolls; reviews rise in | | Artwork page | still image zooms in from slightly bigger, price block slides in | gallery/related cards stagger | | Custom order | package cards stagger in; preview canvas fades up | summary card stays sticky; option rows get hover | | Software, Design | hero staggers; division cards rise in | product boxes stagger, logo tiles tilt slightly on hover | | About, Contact | hero staggers | contact boxes rise in, form fields slide up in sequence | | Work (portfolio) | tiles stagger | tiles zoom on hover | | Account / library, cart, gift | no intro (task pages stay calm) | hover only | | Legal pages, 404 | none | hover only |

Status

reveal.js now loads on every page, page-hero.html staggers its own text on all pages, and .sec-head / .trust reveal automatically. Done: Artworks, Store, Norna; Home is wired in _home.html (the live / is still the maintenance page, so it is untested).

Order of work

1. Roll rv onto Home, Artworks, Store.
2. Software, Design, About, Contact, Work.
3. Artwork and custom order pages (careful with the live preview canvas: never animate the canvas itself).
4. Optional polish: a thin top progress bar, a slow parallax on the hero scene, page-to-page fade.

Checks per page

Desktop 1491px and 375px, reduced motion on and off, JS off (content visible), no layout shift (animate transform/opacity only).